지난번 때 공부했던 내용을 바탕으로 코드를 적으면서 해보겠다.
<html>
<head>
</head>
<body>
<h1>자기소개서</h1>
<hr>
<h2>좋아하는 음식</h2>
</body>
</html>head 태그 사이에는 아직 아무것도 넣지 않고 자기소개서를 강조하기 위해 h1을 사용하고 비교를 위해 h2 태그를 사용해봤다. 그 사이에 hr이라는 horizonal rule을 넣어 구분선을 만들어봤다.
좋아하는 음식을 적어봤으니 순서를 가릴 수 없는 음식들이 있어 Unordered list를 통해 나열해보겠다.
<html>
<head>
</head>
<body>
<h1>자기소개서</h1>
<hr>
<h3>좋아하는 음식</h3>
<ul>
<li>치킨</li>
<li>피자</li>
</ul>
</body>
</html>
이렇게 확인할 수 있다.
반대로 이번에는 순서를 나타내는 Orderd list 태그를 사용해보겠다.
<html>
<head>
</head>
<body>
<h1>자기소개서</h1>
<hr>
<h3>좋아하는 음식</h3>
<ul>
<li>치킨</li>
<li>피자</li>
</ul>
<h3>가고싶은 여행지 순위</h3>
<ol>
<li>발리</li>
<li>유럽</li>
<li>몰디브</li>
</ol>
</body>
</html>
ol 태그를 사용하면 ul 태그와는 달리 순서를 확인할 수 있다.
이번에는 Paragraph 태그를 활용해서 문장을 적어보겠습니다.
<html>
<head>
</head>
<body>
<h1>자기소개서</h1>
<hr>
<h3>좋아하는 음식</h3>
<ul>
<li>치킨</li>
<li>피자</li>
</ul>
<h3>가고싶은 여행지 순위</h3>
<ol>
<li>발리</li>
<li>유럽</li>
<li>몰디브</li>
</ol>
<h3>나를 소개한다면?</h3>
<p>저는 인천에서 태어났고 22살입니다.</p>
<p>저는 컴퓨터공학과를 전공하고 있습니다.</p>
</body>
</html>
bold 태그나 strong 태그를 사용하면 굵게 표시해서 강조가 가능합니다.
HTML 요소의 두 형태
- 화면 영역을 차지하는 형태에 따라 Block과 Inline 형태로 나뉨
- Block
태그의 내용과 관계 없이 상위 요소의 너비에 맞게 너비를 차지함. 레이아웃 영역을 지정할 때 주로 사용
- Inline
태그의 내용에 맞춰서 너비가 결정됨. 레이아웃에 영향을 주지 않고 일부 내용에만 스타일이나 내용의 구분을 주고 싶을 때 사용
Block과 Inline은 상위인지 아니면 태그의 내용인지 잘 확인하면 된다.
태그(Tag)? 요소(Element)?
- 태그는 HTML의 문법적 규칙이자 코드를 의미하고, 요소는 실제 웹 페이지 화면에 그려지는 구성 요소들을 의미함. 보통은 하나의 HTML 태그가 웹 페이지의 요소에 일대일로 연결됨.
<h1> 제목입니다.</h1> ▶ 제목입니다.
h1이라는 부분을 웹브라우저가 해석을 하게 되고 h1 태그를 빼고 '제목입니다' 만 내보내는 과정이다. 여기서 좌측을 태그, 우측을 요소라고 한다. 보편적인 경우, 태그와 요소는 일대일로 관계가 맺어진다.
Block 요소
- 화면의 레이아웃, 얼개를 짜거나 구성을 나눌 때 자주 사용. 이 요소에 CSS 스타일을 적용해서(크기, 위치 등) 화면의 레이아웃을 완성함.
- div : block 요소의 대표적인 태그로 아무 의미를 담지 않는 블록 요소로 아래의 블록 요소들의 상위 개념
- section : 서로 다른 내용 구성이 들어갈 영역을 구분하는 블록 요소
- article : 동일한 내용 구성이 반복될 때 구분하기 위한 블록 요소
- header : 본문 내용의 머리말의 영역을 구성하기 위한 블록 요소
- footer : 본문 내용의 바닥글의 영역을 구성하기 위한 블록 요소
- div에서 더 확장된 개념이 section, article, header, footer 임.
div 태그에서 확장된 개념이 section, article, header, footer 임.
Inline 요소
- 화면의 레이아웃에 영향을 미치지 않고 특정 내용을 강조하거나 구분하고 싶을 때 사용합니다. 우리가 앞에서 배운 b, i 등의 요소가 이에 속하고 대표적인 태그로 span이 있다.
- span : 아무 의미도 내포하지 않은 대표적인 inline 요소. CSS 스타일과 함께 특정 내용을 강조하거나 구분하고 싶을 때 사용
스판 바지를 생각하면 되는데, 몸에 맞게 늘었다 줄었다 하는 것과 같다고 생각하면 된다.
블록 / 인라인 요소의 사용
- section, header 등의 레이아웃 구성을 위한 태그들은 전부 div로 대체해서 사용은 가능하지만 스크린리더 등의 Accessibility 를 고려해서 가능하면 의미를 내포하고 있는 태그를 사용할 것을 권장함.
- CSS 스타일 중 display 속성을 이용하면 div 등의 기존 block 요소를 위한 태그를 inline 요소로 바꿔서 보여지게 할 수 있고 span 등의 inline 요소도 block 요소로 표현하는 것도 가능함. 하지만 가능하면 기본 형태에 맞게 사용하는 걸 권장.
하이퍼미디어
- 웹 페이지의 내의 미더으를 통해 다른 연관 정보로 넘어갈 수 있게 하는 연결고리. 즉, 링크를 의미함
ex) 한글 클릭 -> 한글 관련 나무위키 페이지로 이동.
이미지 클릭 했을 때도 관련 페이지로 이동할 수 있어 HyperMedia 라고 한다.
a(anchor) 태그
- 특정 내용에 링크를 생성할 때 사용한다. href(hyper reference) 속성으로 이동할 리소스를 지정합니다. 이동할 리소스는 URL과 같은 웹 페이지 주소나 미디어의 주소가 된다.
<a href="이동할 url"> ▶ 페이지 이동
페이지 이동</a>
img(image) 태그
- 이미지를 삽일할 때 사용. src(source) 속성으로 이미지의 주소를 지정하면 해당 이미지가 표시된다. 홀태그 형식으로 사용
<img src = " 표시될 이미지 주소"/> ▶ 이미지
embed 태그
- 외부 콘텐츠를 삽일할 떄 사용. 보통 유튜브, 플래시와 같은 외부 미디어 객체를 웹 사이트에 포함시키고 싶을 때 사용한다.
<embed src = "객체의 주소"/>
'Front-End' 카테고리의 다른 글
| [CSS] 기초 공부 1 (1) | 2025.01.29 |
|---|---|
| [HTML] 기초 공부 5 (3) | 2025.01.28 |
| [HTML] 기초 공부 4 (0) | 2025.01.27 |
| [HTML] 기초 공부 3 (0) | 2025.01.01 |
| [HTML] 기초 공부 (1) | 2024.12.28 |