오늘 공부
짐코딩 [입문자를 위한, HTML&CSS 웹 개발 입문]
섹션 1, 2, 3(HTML 학습하기 1)
공부 인증
[섹션2 HTML 친해지기] 공부 내용 기록
원하는 곳에 마크한다.
컨텐츠가 없으면 종료 태그 생략 가능
속성 (class, id,,) => 속성명+ 속성값으로 구성
실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello HTML!</title>
</head>
<body>
<h1>헬스</h1>
<hr />
<p>
위키백과, 우리 모두의
<br />
백과사전.
</p>
<p>
헬스(health)는 기본적으로
<a href="https://ko.wikipedia.org/wiki/%EA%B1%B4%EA%B0%95">건강</a>을
가리키며, 대한민국에서는 근력 트레이닝이나 웨이트 트레이닝을 의미하기도
한다. 그 외에 다음을 가리킨다.
</p>
<ul>
<li>의료</li>
<li>보건</li>
<li>체력 (게이밍)</li>
<li>패션 헬스(Fashion health)</li>
<li>헬스클럽(health club)</li>
<li>구글 헬스: 구글이 제공하는 개인 의료 정보 서비스</li>
</ul>
</body>
</html>
실행화면
실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!--자식노드 > -->
<div>
<ul>
<li></li>
</ul>
</div>
<!--형제노드 + -->
<div>
<ul></ul>
<ol></ol>
<div></div>
</div>
<!--반복하기 * -->
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--아이디 # -->
<span id="item"></span>
<div id="item"></div>
<!--클래스 . -->
<span class="title"></span>
<div class="title"></div>
<!--콘텐츠 {} -->
<p class="containew">HelloWorld</p>
<!--자동 넘버링 $ -->
<p class="container">item1</p>
<br />
<p class="container">item1</p>
<p class="container">item2</p>
<p class="container">item3</p>
<p class="container">item4</p>
<p class="container">item5</p>
<!--실습-->
<div id="item">
<ul class="te">
<li>a1</li>
<li>a2</li>
<li>a3</li>
</ul>
</div>
</body>
</html>
실행 화면
[섹션3 HTML 학습하기1] 공부 내용 기록
폰트(font) 태그
<h1>~<h6> Heading
웹 페이지의 제목 또는 부제목을 표한할 때 사용, 숫자가 작을 수록 큰 제목을 표시<p> Paragraph
하나의 문단을 표시할 때 사용<hr> Horizontal Rule
가로로 선을 긋는 태그
<br> Break
줄바꿈 태그, 개행 역할
<i> Italic
텍스트를 이텔릭체로 표시할 때 사용
<em> Emphasis
텍스트를 이텔릭체로 강조할 때 사용
<b> Bold
텍스트를 진학 표시할 때 사용
<strong>
텍스트를 진하게 강조할 대 사용
! 표시와 강조의 차이
표시하는 역할만 하는 것.강조는 페이지 내의 중요한 부분을 강조한다. 웹 접근성 기여한다는 것을 기억
실습 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Font Tag</title> </head> <body> <h1>제목1</h1> <h2>제목2</h2> <h3>제목3</h3> <h4>제목4</h4> <h5>제목5</h5> <h6>제목6</h6> <hr /> <h1>김치볶음밥</h1> <p> 김치를 주 재료로 사용한 볶음밥이다. <br /> 영어로는 Kimchi Fried rice. </p> <h1>애국가</h1> <h4>1절</h4> <i>동해</i><em>물과 백두산이</em> 마르고 닳도록<br /> 하느님이 보우하사 우리나라 만세.<br /> <b>무궁화</b><strong>삼천리</strong> 화려 강산<br /> 대한 사람, 대한으로 길이 보전하세 <h4>2절</h4> 남산 위에 저 소나무, 철갑을 두른 듯<br /> 바람 서리 불변함은 우리 기상일세.<br /> 무궁화 삼천리 화려 강산<br /> 대한 사람, 대한으로 길이 보전하세. <h4>3절</h4> 가을 하늘 공활한데 높고 구름 없이<br /> 밝은 달은 우리 가슴 일편단심일세.<br /> 무궁화 삼천리 화려 강산<br /> 대한 사람, 대한으로 길이 보전하세. <h4>4절</h4> 이 기상과 이 맘으로 충성을 다하여<br /> 괴로우나 즐거우나 나라 사랑하세.<br /> 무궁화 삼천리 화려 강산<br /> 대한 사람, 대한으로 길이 보전하세. </body> </html>실행화면
목록 태그
<ol> Ordered List
순서가 있는 목록을 표현, type 속성으로 글머리 기호 변경 가능<ul>Unordered List
순서가 없는 목록을 표현
<li> Listed Item
목록하위 항목으로 사용, <ul>태그 또는 <ol>태그의 하위에 위치
<dl> Definition List
사전처럼 용어를 설명하는 목록을 만듦
<dt> Definition Term
용어의 제목을 넣을 때 사용
<dd>Definition Description
용어를 설명할 때 사용
-> <dt>와 <dd>는 하나의 짝으로 지어져야 하는 건 아니다-> <ul>태그 하위 요소로 <li> 태그가 위치해야 한다
실습 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>List Tag</title> </head> <body> <h1>김치볶음밥</h1> <ol> <li>프라이팬을 살짝 달군뒤 식용유(혹은 버터)를 두른다.</li> <li>프라이팬의 온도가 적당히 올라가면 계란을 깨서 넣는다.</li> <li>타지 않도록 최대한 주의한다.</li> <li>취향에 맞추어 뒤집으면서 부친다.</li> <li>취향에 따라 소금 등의 조미료나 향신료를 넣는다.</li> <li>익었으면 꺼내서 접시에 담는다.</li> </ol> <hr /> <h1>헬스 3대 운동</h1> <ul> <li>벤치프레스</li> <li>데드리프트</li> <li>스쿼튼</li> </ul> <hr /> <h1>웹 개발 입문 과목</h1> <dl> <dt>HTML</dt> <dt>Markup 언어</dt> <dd> Hyper Text Markup Language의<br />약자로 웹 문서를 만들기 위한 <strong>마크업 언어</strong>이다. </dd> <dt>CSS</dt> <dd> Cascading Style Sheets의 <br />약자로 HTML을 꾸미는 스타일 시트이다. </dd> <dt>JavaScript</dt> <dd> 웹 페이지를 생동감 있게 동작시키기 위한 <br /><b>프로그래밍 언어</b >이다. </dd> </dl> </body> </html>실행화면
표태그
<table>태그 - 표
표를 만드는 태그로써, 표 전체를 감싸는 데 사용
<caption>
표 제목이나 설명을 작성
<tr>태그 - 행
표의 행을 의미하는 태그, 반드시 자식으로 <th>태그나 <td>태그가 있어야 함.
<th>
표의 제목 열을 의미하는 태그, 부모 태그인 <tr>태그 안에 있어야 한다.
<td>태그 - 열
표의 일반 열을 의미하는 태그, 부모인 <tr>태그안에 있어야 한다.
<table border>를 하면 웹 표준에 맞지 않는다.
<Table 그룹 관련 태그>
<colgroup>
열을 그룹으로 묶을 수 있도록 해주는 태그
<col>
<colgroup>태그의 자식으로 열 단위를 나눌 수있다. span 속성을 사용하여 열을 그룹으로 묶을지 설정한다. (예시: <col span = "4"> 네 개의 열을 그룹으로 묶음)
<thead>
표의 제목 열들을 묶는 그룹 태그
<tbody>
표의 일반적인 데이터들을 묶는 그룹 태그, 기본적으로 행 그룹태그를 사용하지 않으면 크롬 브라우저가 자동으로 tbody태그로 묶어준다.
<tfoot>
표의 하단 영역을 묶는 그룹 태그
colgroup을 사용하면 너비와 색깔을 열 단위로 바꿀 수 있다
웹 표준에 어긋남 -> css를 적용해야 함.<colgroup> <col width="40px" />
Table 태그 관련 속성
<table> 태그 속성
border: 테이블이 갖고 있는 테이블과 셀 모두 선을 표시(웹표준x)
width: 테이블의 가로너비를 설정(웹표준x)
cellpadding: 셀의 안쪽 여백, 셀과 콘텐츠와의 간격을 조절(웹표준x)
cellspacing: 세르이 바깥쪽 여백, 셀과 셀간의 간격을 조절(웹표준x)
위 속성들은 XHTML 1.0애서는 웹 표준이지만 HTML5에서는 웹 표준이 아니다. -> CSS로 대체해야함.
<th> 태그 속성
scope: 웹 전근성 관련 속성으로 스크린리더가 데이터를 인식하고 읽는 순서를 결정짓게 한다.
th가 열에 쓰일 경우 값을 "col"로 설정(예시: <th scope="col">)
th가 행에 쓰일 경우 값을 "row"로 설정(예시: <th scope="row">)
<th>,<td>
colspan: 열을 병합하는 속성(예시: <th colspan="2">)
rowspan: 행을 병합하는 속성(예시: <th rowspan="2">)
<col>
width: 열의 가로너비를 지정하지만 웹 표준x ->CSS로 대체
span: 열을 그룹화 함(예시: <col span= "3"> -> 3개의 열을 묶음)
실습 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Table Tag</title> <style> table { border: 1px solid black; border-collapse: collapse; } th, td { border: 1px solid black; padding: 12px; } .col1 { width: 80px; } .col2 { background-color: yellow; } </style> </head> <body> <h1>Table 기본</h1> <table> <caption> 프로필 테이블 </caption> <tr> <th>이름</th> <th>취미</th> <th>특기</th> </tr> <tr> <td>홍길동</td> <td>도술</td> <td>축지법</td> </tr> <tr> <td>짐코딩</td> <td>헬스</td> <td>코딩</td> </tr> </table> <hr /> <h1>Table 그룹 태그</h1> <table> <caption> 학급 점수 </caption> <colgroup> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <col class="col6" /> </colgroup> <thead> <tr> <th>반</th> <th>이름</th> <th>국어</th> <th>영어</th> <th>수학</th> <th>코딩</th> </tr> </thead> <tbody> <tr> <td rowspan="2">1반</td> <td>홍길동</td> <td>90</td> <td>100</td> <td>90</td> <td>81</td> </tr> <tr> <td>짐코딩</td> <td>85</td> <td>81</td> <td>95</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">평균</td> <td>87.5</td> <td>90.5</td> <td>92.5</td> <td>90.5</td> </tr> </tfoot> </table> </body> </html>실행화면
시멘틱(Semantic) 태그
Semantic 태그이점
검색엔진 최적화 -> 포털에서 검색했을 때 상단에 올라올 확률이 높다
웹 접근성 향상
가독성 향상
레이아웃을 구성할 때 유용하다
레이아웃을 정의 할때는 용도에 맞는 시멘틱 태그를 사용해야 한다.
header
nav: 다른 페이지로 이동 할 수 있다.
main: 웹 사이트의 컨텐츠 영역 담당
footer: 홈페이지 정보 담고 있는 부분
section: 페이지의 영역을 나눌때 사용
article: 여러개의 태그들을 그룹핑하여 재사용 가능한 태그(상품목록)
실습 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>None Semantic</title> </head> <body> <div class="header">Header 영역</div> <div class="nav"> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> </ul> </div> <div class="main">Content 영역</div> <div class="footer">Footer 영역</div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Semantic</title> </head> <body> <header>Header 영역</header> <nav> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> </ul> </nav> <main>Content 영역</main> <footer>Footer 영역</footer> </body> </html>
Block Element vs Inline Element
<div> 블럭요소
영역 태그, 컨테이너
<span> 인라인 요소
영역태그, 특정 아이템
Block Element
블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만든다.
h1~h6, ol, ul, li, p 태그 등
화면 구성이나 레이아웃을 짤 때는 블록 레벨 요소를 사용함
블록 레벨 요소는 한 칸을 모두 차지하기 때문에 세로로 나열 된다
width, height, margin 속성이 적용됨
block 레벨 요소는 가로, 세로 크기 조절 가능
inline 레벨 요소는 불가능
Inline Element
인라인 레벨 요소는 콘텐츠의 흐름을 끊지 않고(줄바꿈 x) 요소를 구성하는 태그에 할당된 공간만 차지한다.
a, em, img, span 태그 등
인라인 레벨 요소는 콘텐츠 영역 만큼 차지하기 때문에 가로로 나열됨
margin-top, margin-botton이 적용되지 않는다. 대신에 line-height 이용
width, height 속성이 적용되지 않는다
태그가 콘텐츠의 할당 된 공간만 갖고 있기 때문에 text-align과 같은 속성은 사용할 수 없다
CSS Display 속성
display 값을 변경하면 b->i로 i->b로 바꿀 수 있다.
div { display: inline; }속성 값
none: 보이지 않음
block: blcok 요소로 표시
inline: inline 요소로 표시
inline-blcok: blcok과 inline의 중간 형태로 요소는 inline인데 내부는 block 처럼 표시함
flex: Layout 을 만들 때 자주 사용하는 값
실습코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Inline Block1</title> <style> div { background-color: red; } span { background-color: yellow; } </style> </head> <body> <div> 애국가의 가사는 1900년대 초에 쓰여졌다. 작사자는 크게 윤치호라는 설과 안창호라는 설 두가지가 있으며, 구사편찬위원회의 공식적인 입장으로는 미상이다. 작사자 윤치호 설은 윤치호가 애국가의 가사를 1907년에 써서 후에 그 자신의 이름으로 출판했다는 것이다. 한편 안창호가 썼다는 주장은 안창호가 애국가를 보급하는 데에 앞장섰다는 데에 중점을 두고 있다. 1908년에 출판된 가사집 <찬미가>에 수록된 것을 비롯한 많은 일제 강점기의 애국가 출판물은 윤치호를 작사자를 돌리고 있는 등 윤치호 설에는 증거가 많은 반면 안창호 설에는 실증적인 자료가 부족하다. </div> <span> 애국가의 가사는 1900년대 초에 쓰여졌다. 작사자는 크게 윤치호라는 설과 안창호라는 설 두가지가 있으며, 구사편찬위원회의 공식적인 입장으로는 미상이다. 작사자 윤치호 설은 윤치호가 애국가의 가사를 1907년에 써서 후에 그 자신의 이름으로 출판했다는 것이다. 한편 안창호가 썼다는 주장은 안창호가 애국가를 보급하는 데에 앞장섰다는 데에 중점을 두고 있다. 1908년에 출판된 가사집 <찬미가>에 수록된 것을 비롯한 많은 일제 강점기의 애국가 출판물은 윤치호를 작사자를 돌리고 있는 등 윤치호 설에는 증거가 많은 반면 안창호 설에는 실증적인 자료가 부족하다. </span> <div>Hello World!</div> <span>Hello World!</span> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Inline Block 2</title> <style> div { background-color: red; width: 100px; height: 100px; border: 1px solid blue; } span { background-color: yellow; width: 100px; height: 100px; border: 1px solid blue; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <span>1</span><span>2</span><span>3</span> </body> </html>