Posted Updated  minkuen frontEnd / html & css9 minutes read (About 1373 words)

html & css 기초 되집기2

사전 준비

Untitled

  • 다운로드 받은 파일 압축풀기
  • 파일 우클릭 → git bash → code .

ch03/index.html

  • Do it! 웹 사이트 따라 만들기 78p
  • 교재 내용대로 작성된 html파일을 열어보자

Untitled

  • 해당 html에서 Web developer를 이용해 CSS를 제거하면 다음과 같다.

Untitled

  • 해당 그림의 html파일이다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<title>이지스퍼블리싱</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
<!-- 전화, 주소, 이메일 자동 링크 없앨 때 -->
<!--<meta name="format-detection" content="telephone=no, address=no, email=no" />-->
<!-- 기본 포맷 삭제 -->
<!--<meta name="format-detection" content="no" />-->
<meta name="title"  property="og:title" content="이지스퍼블리싱">
<meta name="images" property="og:image" content="./images/link_thumb.jpg">
<meta name="description" property="og:description" content="이지스퍼블리싱">
<meta name="type" property="og:type" content="article">
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/ui.js"></script>
<link rel="stylesheet" type="text/css" href="./css/ui.css">
</head>
<body>
	<section id="wrap">
		<h1>이지스퍼블리싱</h1>
		<header>
			<!-- alt = 이미지를 읽을 수 없을 때 대응하는 대신 출력 -->
		 	<strong class="logo_box"><img src="./images/mainLogo.png" alt="이지스퍼블리싱"></strong>
		 	<nav>        
		 		<ul>        
					 <!-- 링크를 달기 전의 상태 -->
		 			<li><a href="#">회사소개</a></li>        
		 			<li><a href="#">도서소개</a></li>        
		 			<li><a href="#">FAQ</a></li>        
		 			<li><a href="#">Contact Us</a></li>    
		 		</ul> 
		 	</nav>
		</header> 
		<section id="container">
		  	<section id="menu1" class="content">
		  	 	<h2>회사소개</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  	<section id="menu2" class="content">
		  	 	<h2>도서소개</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  	<section id="menu3" class="content">
		  	 	<h2>FAQ</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  	<section id="menu4" class="content">
		  	 	<h2>Contact Us</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  </section>    
		  <footer>
		  	  <address>(04003)서울특별시 마포구 잔다리로 109 TEL (02)325-1722 FAX (02)326-1723</address>    
		  	  <p>Copyright(c)2015 이지스퍼블리싱㈜ EasysPublishing Co., Ltd. All Rights Reserved</p> 
		  	  <a href="https://www.facebook.com/easyspub" class="face" title="페이스북으로 이동"></a>    
		  	  <a href="https://twitter.com/easyspub" class="twit" title="트위터로 이동"></a>    
		  	  <a href="https://www.instagram.com/easyspub_book/" class="instar" title="인스타그램으로 이동"></a>
		  </footer> 
	</section>
</body>
</html>
  • 다음 css 파일을 적용하면 맨 첨음 그림과 같이 출력된다.
  • 가상요소에 대한 내용 참고 : 35~37, 92페이지
    • 참고자료 : Do it. 웹 사이트 따라 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
@charset "utf-8";
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, code, del, 
dfn, em, img, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, 
td, hr{margin:0;padding:0;font-size:100%;box-sizing: border-box;}
body{height:100%;min-height:100%;font-family:'Noto Sans Korean','Malgun Gothic','맑은고딕','돋움',dotum, sans-serif;font-size:16px;color:#737373;line-height:1.5;background:url(../images/content_bg4.png) repeat;}
h1, h2, h3, h4, h5, h6 {font-weight:normal}
ol, ul, li {list-style:none}
table {width:100%; border-collapse:collapse;border-spacing:0}
form, fieldset, iframe {display:block;border:0}
img, button {border:0 none;vertical-align:top;}
hr {height:0; display:none}
i, em, address{font-style:normal}
label, button{cursor:pointer}
blockquote, q {quotes:none}
caption, legend {overflow:hidden;visibility:hidden;position:absolute;width:0;height:0;padding:0;margin:0;font-size:0;text-indent:-100%;white-space:nowrap;z-index:-1}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block;box-sizing: border-box;}
input, textarea, select, button {font-family:'Noto Sans Korean','Malgun Gothic','맑은고딕','돋움',dotum, sans-serif;font-size:16px;color:#919090;line-height:1.5;letter-spacing:0;vertical-align:middle; border:none;}
input, textarea {margin:0;padding:0;  background:none; box-sizing:border-box;}
textarea {resize:none}
a {color:#919090;text-decoration:none}
a:link, a:visited {text-decoration:none}
a:hover {text-decoration:none}
.blind{display: none;overflow: hidden;position: absolute;width: 0;height: 0;padding: 0;margin: 0; font-size: 0;line-height: 0; text-indent: -9999em;visibility: hidden;outline: none;z-index: -1;}
html,body{overflow:hidden;height:100%;}

/*layout*/
/* 오른쪽 padding을 180px */
#wrap{width:100%; height:100%; padding-right:180px;}

/* 자식. 보이지 않게 함 */
#wrap > h1{font-size:0;}

/* 자손. 로고의 위치를 절대위치로 지정 */
header .logo_box{position:absolute; right:35px; top:75px;}

/* 절대 위치 지정한 곳에 100px로 이미지 처리 */
header .logo_box img{width:100px;}

/* repeat-y = 검은색 배경에 관여. z-index = 11번째 위치의 높이 */
#wrap header{width:180px; height:100%; position:fixed; right:0px; top:0px; background:url(../images/menu_bg1.png) repeat-y; z-index:11;}
#wrap header nav{width:100%; height:100%;} 

/* flex 이면서 밑으로 나열, 위아래가 같도록 정렬 */
#wrap header nav ul{width:100%; height:100%; display:flex; flex-direction:column; justify-content:center;}

/* margin 은 시계 방향 top, right, bottom, left / ul의 padiing은 .은 적용 안됨 */
#wrap header nav ul li{margin:0px 0px 10px 30px; padding-left:15px; position:relative;} 
#wrap header nav ul li a{font-size:16px; color:#fff; font-weight:600; line-height:30px;}
#wrap header nav ul li:after{content:""; display:block; width:5px; height:5px; border-radius:50%; background:#fff; position:absolute; left:0px; top:13px;}

/* hover(마우스 위에 올라왔을 때) red로 강조함 */
/* on class의 의미는? */
#wrap header nav ul li:hover a,#wrap header nav ul li.on a{color:#ed3140;} 
#wrap header nav ul li:hover:after,#wrap header nav ul li.on:after{background:#ed3140;}
footer{width:180px; position:fixed; right:0px; bottom:0px; padding:0px 20px 30px 20px; font-size:11px; color:#7e7e7e; z-index:12;}
footer address{padding:0px 0px 15px 0px;}

/* transition = 애니메이션의 시간 (4초) */
/* block은 box와 연관된 것 */
footer > a{display:block; width:16px; height:16px; position:absolute; top:-31px; transition:.4s;} 
footer > a.face{background:url(../images/social_b_facebook.png) no-repeat; right:18px;} 
footer > a.face:hover{background:url(../images/social_b_facebook_hover.png) no-repeat;} 
footer > a.twit{background:url(../images/social_b_twitter.png) no-repeat; right:48px;} 
footer > a.twit:hover{background:url(../images/social_b_twitter_hover.png) no-repeat;} 
footer > a.instar{background:url(../images/social_b_instar.png) no-repeat; right:80px;} 
footer > a.instar:hover{background:url(../images/social_b_instar_hover.png) no-repeat;}

/* max-width는 화면 해상도가 1200px이 넘더라도 1200px만 표현, 중앙에 표현 */
/* margin = 0, auto 의미는? --------------------------- */
#container{width:100%; height:100%; position:relative; max-width:1200px; margin:0 auto;} 

/* 4개의 content를 25%로 동일하게 적용 */
#container .content{width:25%; height:100%; position:absolute;} 

/* position이 absolute 이므로 left의 크기가 25%씩 연결되어 붙음 */
/* repeat은 x,y가 모두 적용됨 */
#container #menu1{left:0%; background:url(../images/content_bg1.png) repeat;} 
#container #menu2{left:25%; background:url(../images/content_bg2.png) repeat;} 
#container #menu3{left:50%; background:url(../images/content_bg3.png) repeat;} 
#container #menu4{left:75%; background:url(../images/content_bg4.png) repeat;}

/*가상요소 활용하기*/
#container .content:before,#container .content:after{content:""; display:block; position:absolute;} 
#container .content:before{width:1px; height:100%; background:#000; left:0; top:0; z-index:4;}
#container .content:after{left:30px; top:180px; font-size:25px; font-weight:700; color:#ed3140;}

/* before = 지정한 것을 텍스트 앞에 둔다 */
/* after = 지정한 것을 텍스트 뒤에 둔다 */
#container #menu1:after{content:"회사소개";} 
#container #menu2:after{content:"도서소개";} 
#container #menu3:after{content:"FAQ";} 
#container #menu4:after{content:"Contact Us";}
#container .content .conbox:before{content:""; display:block; position:absolute;} 
#container #menu1 .conbox:before{background:url(../images/main_ico1.png) no-repeat; width:350px; height:260px; right:-10px; top:130px; background-size:100%;} 
#container #menu2 .conbox:before{background:url(../images/main_ico2.png) no-repeat; width:180px; height:470px; right:-30px; top:180px; background-size:100%;} 
#container #menu3 .conbox:before{background:url(../images/main_ico3.png) no-repeat; width:270px; height:310px; right:-60px; top:30px; background-size:100%;} 
#container #menu4 .conbox:before{background:url(../images/main_ico4.png) no-repeat; width:350px; height:400px; right:-170px; top:100px; background-size:100%;}
#container .content h2{opacity:0;}
Posted Updated  minkuen frontEnd / html & css7 minutes read (About 1028 words)

html & css 기초 되집기

작업 시작

  • VSCord에서 파일을 생성
  • ! + Tab
  • 코드를 작성

스타일 시트 적용

스타일 지정방식 1

  • 다음과 같은 방식으로 정한다.
1
<h1 style="color: blue;font: size 5px;">메인메뉴</h1>
  • 적용된 후의 출력이다

Untitled

스타일 지정방식 2

  • 다음과 같이 설정한다.
  • h1 태그를 설정했으므로 h1으로 출력되는 글은 모두 blue로 나타난다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
        h1{
            color: blue;
            font-size: 5px;
        }
    </style>
</head>
<body>
    <h1>메인메뉴</h1>
    <ul>
        <li>HTML </li>
        <li>CSS </li>
        <li>JAVA </li> 
    </ul>

</body>
</html>

스타일 지정방식 3

  • style.css 파일
1
2
3
4
5
6
7
h1{
    color: red;
    font-size: 15px;
}
li{
    background-color: blue;
}
  • 사용할 css파일의 경로를 지정한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<title>Document</title>
    <link href="./css/style.css" type="text/css" rel="stylesheet">

</head>
<body>
    <h1>메인메뉴</h1>
    <ul>
        <li>HTML </li>
        <li>CSS </li>
        <li>JAVA </li> 
    </ul>

</body>
</html>
  • 다음과 같이 출력된다

Untitled

선택자 (Selector)

  • 스타일 적용에 관한 우선순위를 결정한다

  • tag 기준

    • tag명 = 가장 낮음

  • class 기준

    • .tag명 = 높은

  • id 기준

    • #tag명 = 가장 높음

Untitled

  • 우선순위
    • ID > 속성[id] > 속성[class] > class > tag

Untitled

  • 선택자 : HTML내의 Tag를 선택하는 것 (Tag = Element)
  • 선택자는 Basic Selector와 Combinator로 구분됨.
  • 자손 : ul li
  • 자식 : ul>li

Untitled

  • 형제
  • ol + ul
  • ol 다음에 있는 태그를 대상으로 적용 = ol’s next
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol+ul{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <section id="main">

        <ul>
            <li>CSS4</li>
            <li>CSS5</li>
        </ul>
        <ol>
            <li>HTML4</li>
            <li>HTML5</li>
        </ol>
        <ul>
            <li>AJAX</li>
            <li>JAVASCRIPT</li>
        </ul>
    </section>
</body>
</html>

Untitled

Color

  • 프론트엔드에서 중요한 것은 색이다.

Untitled

  • 다음 코드와 같이 rgb값을 조절해 색을 나타낼 수 있다.
1
background-color: rgba(170, 125, 228, 0.288);

박스

  • Contents가 차지하는 위치의 표현방법
  • padding = contents와 border 간의 여백
  • border = 경계선
  • margin = 이웃 엘리먼트간의 경계

Untitled

  • 다음과 같이 코딩해보자
  • padding = 여백 설정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            border: red solid 1px;
            width: 400px;
            height: 300px;

            /* 시계방향 */
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;

            /* 모든 padding이 동일*/
            /* padding: 10px;
            margin: 10px; */
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus perspiciatis, atque harum dolore blanditiis delectus. Dolores suscipit, neque nobis totam molestiae amet veniam ratione ullam debitis! Laboriosam saepe possimus fuga.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus perspiciatis, atque harum dolore blanditiis delectus. Dolores suscipit, neque nobis totam molestiae amet veniam ratione ullam debitis! Laboriosam saepe possimus fuga.
    </p>
</body>
</html>
  • 다음과 같이 box 적용된다

Untitled

Box 모델 주의사항

  • 마진겹침

Untitled

  • 다음 코드를 작성해보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:900px;
            margin: 10px;
        }
        #small{
            border: 10px solid black;
        }
        #large{
            border: 30px solid black;
        }
    </style>
</head>
<body>
    <div id="small">휴먼교육센터1</div>
    <div id="large">휴먼교육센터2</div>
</body>
</html>

Untitled

Position

  • 위치 조정 가능

Untitled

  • relative를 사용하면 다음과 같다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div{
           border:1px solid gray;
           margin:10px;
           
           /* 생략가능
           position:static; */
           position:relative;
       }
       #me{
           left:100px;
           top:100px;
       }

    </style>
</head>
<body>
    <div>휴먼교육센터</div>
    <div id="parent">present
        <div id="me">child</div>
    </div>

</body>
</html>
  • static과 달리 child 가 밖으로 나간다

Untitled

  • static
  • relative
  • absolute
  • fixed

Untitled

레이아웃

  • layout 생성 순서

Untitled

플랙스

  • layout 생성에 사용한다
  • Container = 행
  • item = 행 내의 세부 layout

Untitled

  • flex를 사용해본다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            background-color: yellow;
            display: flex
        }
        .item{
            background-color: green;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
    
</body>
</html>
  • row 속성 사용 : 행 방향으로 전개된다

Untitled

Untitled

Holy Grail Layout

  • 다음과 같이 구성하는 layout이다

Untitled

  • 직접 사용해보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            display:flex;
            flex-direction: column;
        }
        header{
            border-bottom: 1px solid grey;
            padding: left 20px;
        }
        footer{
            border-top: 1px solid gray;
            padding-left: 20px;
        }
        .content{
            display:flex;
            flex-direction: row;
        }
        .content nav {
            border-right: 1px solid grey;
        }
        .content aside {
            border-left: 1px solid grey;
        }
        nav, aside{
            flex-basis:150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }

    </style>
</head>
<body>
    <div id="container">
        <header>
            <h1>휴먼교육센터</h1>
        </header>
        <section class="content">
            <nav>
                <li>학원소개</li>
                <li>과정소개</li>
                <li>게시판</li>
            </nav>
            <main>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla ea consectetur eos in labore. Laboriosam, recusandae perspiciatis quidem veniam eveniet quas, porro perferendis corrupti expedita deserunt quam aliquam, doloribus fugit.
                Labore quam delectus sed quia eius quibusdam quos eaque animi harum pariatur dolore consectetur nam excepturi molestias maxime cumque ducimus necessitatibus corporis beatae natus possimus est officia, ipsam deserunt! Inventore.
            </main>
            <aside>
                AD = 광고
            </aside>
        </section>
        <footer>
            <a href="http://www.human.or.kr">홈페이지</a>
        </footer>
    </div>
</body>
</html>
  • 결과는 다음과 같다

Untitled

Posted Updated  minkuen frontEnd / html & css8 minutes read (About 1152 words)

html 기초 되집기

경로 설정

  • 네이버 화면이 index.html
  • 첫 화면이 index.html

Untitled

폴더 구조를 어떻게 할 것인가?

  • root 밑에 파일을 다 나열할 수도 있다
  • 그러나 이건 별로다
  • 권고사항은 index.html에서 버튼을 클릭할때 링크로

상대 경로

  • 나를 기준으로 상대적으로 다른 폴더나 파일을 찾아간다.
  • 절대경로는 root폴더가 기준이 된다. 지금은 HTML폴더

부모 폴더 찾기

../ → 부모 폴더로 간다

폴더 경로 현황

Untitled

index.html

Untitled

notice.html

Untitled

login.html

Untitled

절대 경로

  • 모든 파일에서 절대 경로를 사용하면 똑같다.

Untitled

  • 절대 경로가 쉬워 보이지만, 나중에 폴더를 바꾸게 되면 더 복잡해진다.
  • 따라서, 케바케.
  • 보통 절대경로를 쓸지 상대경로를 쓸지는 PM이 결정한다.

Untitled

웹문서 작성 1단계 - 콘텐츠 작성하기

  • 작성하기 전에 어떻게 생겼는지 확인해보자

Untitled

web developer 설치

  • 구글링 : chrome web store
  • chrome web store 검색 : web developer

Untitled

web developer 사용법

  • 화면 우측 상단 ‘퍼즐모양’ 버튼 클릭

Untitled

  • Web Developer 선택 후 다음 내용 선택
  • CSS → Disable All Styles

Untitled

  • CSS가 제거된 네이버 화면

Untitled

웹문서 작성 2단계 - 콘텐츠 블록의 종류

  • 콘텐츠를 작성했다 치고

  • head 부분은 거의 표준화가 되서 신경 쓸 게 없다.

  • UL

Untitled

입력폼

Untitled

제목 입력

  • h1 ~ h6 사용하여 크기 조절 가능

Untitled

목록

  • UL : Unordered List (순서가 없는 것에 적합)
  • OL : Ordered List (순서가 있는 것에 적합)
  • DL : Definition List (데이터 정의하는 것에 적합)
  • LI : List Item

Untitled

입력폼

  • password 타입을 가지게 되면 보이지 않게 된다.

Untitled

콘텐츠 작성 실습

링크 : https://www.newlecture.com/

Untitled

  • 다음과 같이 제작해 보자

Untitled

인풋 검색 상자

  • 텍스트 입력 창 생성
  • 버튼 생성

Untitled

콤보상자

  • 콤보 생성

Untitled

테이블

  • 테이블 생성 양식
  • border 속성으로 구분 가능
    • border = 0으로 하면 경계선이 사라진다

Untitled

  • tr → table record
  • td → table data
  • 지금은 직접 넣어줬지만, 나중에는 jsp와 스프링으로 데이터베이스를 끌어오게 된다.

Untitled

웹문서 작성 3단계 - outline 설정하기

  • 영역을 구분한다

Untitled

CSS

  • Cascading Style Sheet
  • HTML 문서에 스타일을 입히는 작업이다

Untitled

영역 구분하기

  • 코드에서 해당 부분을 header로 구분할 것이다

Untitled

  • 로 코드를 감싼다.
  • 다음과 같이 표시한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<header>
      
  <h1> 뉴렉처 온라인</h1>
  <ul>
      <li>학습가이드</li>
      <li>강좌선택</li>
      <li>answerls</li>
  </ul>
  <input type="text">
  <input type="submit" value="클릭">
  <ul>
      <li>home</li>
      <li>로그인</li>
      <li>회원가입</li>
  </ul>
  <ul>
      <li>마이페이지</li>
      <li>고객센타</li>
  </ul>
  
  </header>
  • main, footer도 마찬가지로 포장한다
    • ,
      를 코드의 위아래로 두면 된다.
  • 남는 부분은 aside로 포장한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<aside>
  <h2>고객센터</h2>
  <h3>고객센터메뉴</h3>
      <ul>
          <nav>
          <li>공지사항</li>
          <li>자주하는 질문</li>
          <li>수강문의</li>
          <li>이벤트</li>
          </nav>
      </ul>
  <h3>협력업체</h3>
  <ul>
      <li>NOTEPUBS</li>
      <li>NAMOOLAB</li>
  </ul>
  </aside>

섹션

  • css로 전환할 때 디자인을 적용하기 위한 사전단계
  • 영역구분과 마찬가지로 표시한다.
    • 단, section의 안쪽은 section과 함께 Tab으로 들여쓰기 해준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<header>
      <section>
      <h1> 뉴렉처 온라인</h1>
      <ul>
          <li>학습가이드</li>
          <li>강좌선택</li>
          <li>answerls</li>
      </ul>
      <input type="text">
      <input type="submit" value="클릭">
      <ul>
          <li>home</li>
          <li>로그인</li>
          <li>회원가입</li>
      </ul>
      <ul>
          <li>마이페이지</li>
          <li>고객센타</li>
      </ul>
      </section>
  </header>

라인 영역 구분

  • ul li
  • ul li 의 경우, 라인 하나를 통째로 사용한다
1
2
3
4
5
<ul>
        <li>학습가이드</li>
        <li>강좌선택</li>
        <li>answerls</li>
    </ul>
  • 해당 코드를 다음과 같이 붙여써보자
1
2
3
<ul>
        <li>학습가이드</li>li>강좌선택</li><li>answerls</li>
    </ul>
  • 위 두 코드 모두 다음과 같이 출력된다

Untitled

  • 의 경우, **라인의 일부**만 ****사용할 수 있다
1
2
3
4
5
6
7
8
9
10
11
<div>text1</div>
  <div>text1</div>
  <div>text1</div>

  <br>		

<div>
      <a>열공</a>
      <b>화이팅</b>
      <i>응원합니다.</i>
  </div>
  • 다음과 같이 붙여써보자
1
2
3
4
5
6
7
<div>text1</div>
  <div>text1</div>
  <div>text1</div>

  <br>		

	<div><a>열공</a><b>화이팅</b><i>응원합니다.</i></div>
  • 위 두 코드의 결과는 동일하다

Untitled

Posted Updated  minkuen frontEnd / html & css4 minutes read (About 639 words)

html & css

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step02_hello
    • 파일 생성 : index.html
    • 파일 생성 : main.css

CSS 작성

  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
        <link rel="stylesheet" href="./main.css" >
    </head>
    <body>
        <div>Hello World</div>
    </body>
</html>
  • main.css 에 다음 내용 작성
1
2
3
4
5
div {
    width: 400px;
    height: 200px;
    background-color: blue;
}
  • step02_hello 폴더에서 index.html을 오픈
  • 다음과 같이 페이지가 출력된다.

Untitled

이미지 업로드

  • step02_hello 아래에 폴더 생성 : img
  • 사진을 img폴더 경로에 다운로드 : rainday
  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
        <link rel="stylesheet" href="./main.css" >
    </head>
    <body>
        <div class = "weather_title">
            <h1>오늘의 날씨</h1>
            <p>오늘은 비가 많이 내릴 예정입니다. ~~</p>
            <img src="./img/rainday.webp" alt="rain">
        </div>
    </body>
</html>
  • main.css 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
div {
    width: 200px;
    height: 200px;
    background-color: blue;
}

p{
    color: navy;
    text-indent : 30px;
    text-transform: uppercase;
}
  • 지정한 이미지가 업로드되었다.

Untitled

div 클래스

  • div를 이용하여 글을 작성한다.
  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
        <link rel="stylesheet" href="./main.css" >
    </head>
    <body>
        <div class = "weather_title">
            <h1>오늘의 날씨</h1>
            <p>오늘은 비가 많이 내릴 예정입니다. ~~</p>
        </div>
        <div class = "fruits">
            <ul>
                <li>사과</li>
                <li>바나나</li>
                <li>수박</li>
                <li>오렌지</li>
            </ul>
        </div>
        <div id="song">
            <span>노래~~가사~~</span>
        </div>
    </body>
</html>
  • main.css 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div {
    width: 200px;
    height: 200px;
    background-color: blue;
}

div.fruits {
    width: 500px;
    height: 300px;
    background-color: orange;
}

#song {
    width: 500px;
    height: 300px;
    background-color: rgb(205, 235, 135);
}

p{
    color: navy;
    text-indent : 30px;
    text-transform: uppercase;

}
  • 다음과 같이 차례로 출력된다.

Untitled

Label, Table

  • 라벨과 테이블을 사용해본다.
  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
        <link rel="stylesheet" href="./main.css" >
    </head>
    <body>
        <div class = "weather_title">
            <h1>오늘의 날씨</h1>
            <p>오늘은 비가 많이 내릴 예정입니다. ~~</p>
        </div>
        <div class = "fruits">
            <ul>
                <li>사과</li>
                <li>바나나</li>
                <li>수박</li>
                <li>오렌지</li>
            </ul>
        </div>
        <div id="song">
            <span>노래~~가사~~</span>
        </div>

        <br>
        <input type = "text" value = "hello" />
        <input type = "text" placeholder = "이름을 입력하세요"/>

        <label>
            <input type="checkbox" />사과
            <input type="checkbox" checked/>바나나
        </label>

        <table>
            <tr>
                <th>항목명1</th>
                <td>내용이 들어갑니다.</td>
            </tr>
            <tr>
                <th>항목명2</th>
                <td>내용이 들어갑니다.</td>
            </tr>
            <tr>
                <th>항목명3</th>
                <td>내용이 들어갑니다.</td>
            </tr>
        </table>

    </body>
</html>
  • main.css 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
div {
    width: 200px;
    height: 200px;
    background-color: blue;
}

div.fruits {
    width: 500px;
    height: 300px;
    background-color: orange;
}

#song {
    width: 500px;
    height: 300px;
    background-color: rgb(205, 235, 135);
}

p{
    color: navy;
    text-indent : 30px;
    text-transform: uppercase;

}

input:focus {
    background-color: blue;
}

Untitled

팁

Ctrl + A 후 전체정렬

전체 정렬 : Ctrl + Alt + L

추가 공부

https://www.inflearn.com/course/html5

  • 해당 링크에서 필요한 강의를 찾아서 듣기
  • 최종적으로 홈페이지가 제작되는 강의나 책을 선택해야 한다.

참고 자료

Posted Updated  minkuen frontEnd / html & css3 minutes read (About 395 words)

html 기초

사전작업

  • 바탕 화면에 폴더 생성 : project
  • 폴더 우클릭 : git bash here
  • VSCord 작동 : code .

Untitled

  • 폴더, 파일 생성
  • PROJECT 아래에 생성
    • 폴더 생성 : step01_intro
    • 파일 생성 : index.html

html 작성

  • 코드 작성
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
    </head>
    <body>
        aaa
    </body>
</html>
  • 저장 후 폴더에서 html파일 열기
  • 다음과 같이 작서한 내용이 출력되어 있다.

Untitled

링크 첨부

  • Naver 주소를 복사하여 다음과 같이 작성한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <a href="https://www.naver.com/">NAVER</a>
        <br>
        <br>
        <div>Hello World</div>
    </body>
</html>

Untitled

이미지 추가

  • project/step01_intro 경로에 폴더 생성 : img
  • 아무 사진이나 다운받아서 폴더에 넣는다.
    • 사진을 다른 이름으로 저장 : temp
  • 여기까지 설정하고 다음과 같이 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <a href="https://www.naver.com/">NAVER</a>
        <br>
        <br>
        <div>Hello World</div>
        <br>
        <img src="./img/temp.jpg" alt = "ball">
    </body>
</html>

Untitled

이미지 주소로 추가

  • 이미지 우클릭 : 이미지 링크 복사
  • 다음과 같이 링크를 붙여넣고 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <a href="https://www.naver.com/">NAVER</a>
        <br>
        <br>
        <div>Hello World</div>
        <br>
        <img src="./img/temp.jpg" alt = "ball">
        <img src="https://img.animalplanet.co.kr/news/2020/01/07/700/tbg4j63622z4545z51af.jpg" alt = "fox">
    </body>
</html>

Untitled

페이지 이동

  • 링크로 페이지 이동하기
  • 우선 step01_intro 아래에 폴더 생성 : about
    • about 아래에 파일 생성 : index.html
  • about/index.html에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>About</title>
    </head>
    <body>
       <a href="../">Home</a>
       About 페이지입니다.
    </body>
</html>
  • index.html에 about/index.html 경로 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <! -- 키워드: 상대경로, 절대경로 -->
        <a href="https://www.naver.com/">NAVER</a>
        <a href="./about/index.html">About</a>
        
        <br>
        <br>
        <div>Hello World</div>
        <br>
        <img src="./img/temp.jpg" alt = "ball">
        <img src="https://img.animalplanet.co.kr/news/2020/01/07/700/tbg4j63622z4545z51af.jpg" alt = "fox">
    </body>
</html>

Untitled

팁

  • 다음 설정으로 코드 가독성을 높일 수 있다.
    • VSCord → 메뉴바 → 보기 → 자동 줄 바꿈
Posted Updated  minkuen frontEnd / html & css2 minutes read (About 314 words)

FrontEnd 세팅

웹개발을 위한 VS Code 기본 세팅 (notion.site)

  • VSCord → extention 에서 필요한 프로그램을 다운로드

Untitled

  • Korean 다운로드

→ restart

Untitled

  • beautify 다운로드

Untitled

  • ‘기능 기여도’ 탭

→ 명령 칸에서 다음 내용 복사

→ 복사 : HookyQR.beautify

Untitled

  • 검색 창 열기 : crl+ shift + p
  • 검색 : 바로가기 키

→ 기본 설정 : 바로 가기 키 열기

Untitled

  • 검색 : 앞서 복사했던 HookyQR.beautify 를 붙여 넣는다.
    • Beautify Selection을 클릭한다.

Untitled

  • 키 바인딩 조합 정의 : ctrl + alt + L

Untitled

  • live server 설치

Untitled

html

CSS

JavaScript

JavaScript 실습1

JavaScript 실습2

JavaScript 실습3

Follow

Links

Categories

Recents

Archives

Tags

HTML6
JPA11
JPA 기초11
Java9
JavaScript1
NiFi1
Notion4
PL/SQL4
R2
R Markdown1
VScord1
Vue.js7
Vue.js 기초7
airflow4
anaconda1
apache1
chatbot5
crawling4
elasticsearch1
git1
github blog1
heroku4
javascript10
kakao_chatbot5
kibana1
machine learning22
oracle15
pipeline1
postgreSQL5
python30
setting14
spark7
wsl21
생활코딩1

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×