1. 레이아웃: Block과 Inline
화면 영역을 차지하는 형태에 따라 HTML 요소는 block과 inline 형태로 나뉨
•
Block
태그의 내용과 관계 없이 상위 요소의 너비에 맞게 너비를 차지함. 레이아웃 영역을 지정할 때 주로 사용됨
•
Inline
태그의 내용에 맞춰서 너비가 결정됨. 레이아웃에 영향을 주지 않고 일부 내용에만 스타일이나 내용의 구분을 주고 싶을 때 사용
1.1 Block 요소
•
화면의 레이아웃, 얼개를 짜거나 구성을 나눌 때 자주 사용
•
이 요소에 CSS 스타일을 적용해서(크기, 위치 등) 화면의 레이아웃을 완성함
1) div 태그
•
block 요소의 대표적인 태그로 아무 의미를 담지 않는 블록요소. 아래의 블록 요소들의 상위 개념
•
레이아웃을 잡아줄 때 사용, 가장 많이 쓰이는 element
•
작성 예시
<!--emmet: div{div$}*3 -->
<div style="width:500px; height:200px; background-color: grey;">div1
<p>div1</p>
</div>
<div>div2</div>
<div>div3</div>
HTML
복사
→ 적용시 아래와 같이 나타난다.
div1
div1
div2
div3
2) div 파생 태그
•
section: 서로 다른 내용 구성이 들어갈 영역을 구분하는 블록 요소
•
article: 동일한 내용 구성이 반복될 때 구분하기 위한 블록 요소
•
header: 본문 내용의 머리말의 영역을 구성하기 위한 블록 요소
•
footer: 본문 내용의 바닥글의 영역을 구성하기 위한 블록 요소
section과 article의 비교
1.2 Inline 요소
•
화면의 레이아웃에 영향을 미치지 않고 특정 내용을 강조하거나 구분하고 싶을 때 사용
•
앞서 다룬 서식 태그(b, i 등의 요소)도 이에 속함
1) span
•
아무 의미도 내포하지 않은 대표적인 inline 요소
•
영역을 설정하는 태그로 div 태그처럼 주로 CSS 스타일과 함께 특정 내용을 강조하거나 구분하고 싶을 때 사용
•
div와 달리 줄바꿈이 되지 않고, 문장 단위로 지정(inline 속성)
•
사용 예
<!--emmet 문법: span{span_tag_$}*3-->
<span>안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.</span>
<span>안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.</span>
<span>안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.</span>
HTML
복사
→ 적용시 이렇게 나타난다.
안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.
안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.
안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.
2. Table 표
•
row & column이 있는 table 모양을 나타낼 때 사용하는 element
•
사용하는 태그
표 태그의 구조
◦
table 태그: 표의 시작과 끝
◦
caption 태그: 표 제목 생성
◦
tr 태그: table row. 표의 하나의 행(row) 생성
◦
th 태그: table heading. 컬럼명이 들어가는 셀 생성
td 태그: table 내용이 들어가는 셀 생성
▪
colspan 속성: td, th 태그에 사용. 열 합치기. 가로로 셀을 합칠 때 사용 (e.g.colspan="2")
▪
rowspan 속성: td, th 태그에 사용. 행 합치기. 세로로 셀을 합칠 때 사용 (e.g.rowspan="2")
◦
각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분
•
emmet 문법
◦
+: 동일한 레벨로 element 생성
◦
>: 하위 레벨에 생성
◦
^: 상위 depth로 한 단계 올라감
◦
@: $ 쓸 때 초기값 설정
•
사용 예시
<!--emmet: table>caption{table title}+thead>tr>th{col$}*4^^tbody>tr>td{value$@3}*4 -->
<table>
<caption>table title</caption>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>v3</td>
<td>v4</td>
<td>v5</td>
<td>v6</td>
</tr>
</tbody>
</table>
HTML
복사
→ 적용시 아래와 같이 나타난다.
| col1 | col2 | col3 | col4 |
|---|---|---|---|
| v3 | v4 | v5 | v6 |
3. Hypermedia 하이퍼미디어
웹 페이지 내의 미디어를 통해 다른 연관 정보로 넘어갈 수 있게 하는 연결고리, 즉 링크
3.1 a
•
anchor 태그, link element
•
href 속성에 이동할 리소스(url, 미디어의 주소) 지정
•
link도 크롤링의 대상으로 많이 사용됨
•
상대경로도 사용 가능
◦
e.g. <a href="01_html_basic.html">html_basic</a><br>
•
target="_blank" 속성을 넣어주면 새 탭을 띄워서 이동
3.2 img
•
image 태그로 홀태그 형식으로 사용됨
•
src(source) 속성: url을 넣음
•
style 속성: size를 지정해줄 수 있음 (e.g. style="width:200px;")
•
alt 속성: 이미지가 없을 경우 뜨는 문자 (어떤 이미지인지 알려줄 수 있음) (alt 속성은 꼭 넣어야 함)
•
사용 예시
<img style="width:200px;" src="https://www.google.com/logos/doodles/2021/seasonal-holidays-2021-6753651837109324.3-ladc.gif" alt="Google">
HTML
복사
→ 적용시 아래와 같이 나타난다.
3.3 embed
•
외부 콘텐츠를 삽입할 때 사용
•
영상, 음성, 플래시 파일 등 외부 미디어 객체를 웹사이트에 포함시키고 싶을 때 사용
•
e.g.: <embed src=”객체의 주소”>
참고자료
•
패스트캠퍼스, ⟪데이터사이언스스쿨 8기⟫ 수업자료
•
인프런, ⟪프로그래밍 시작하기: 웹 입문⟫ 수업자료