웹 페이지에서 가장 큰 비중을 차지하는 것은 텍스트다.
텍스트는 다양하게 있는데 글의 제목이나 부제목일 수도 있고, 글의 인용, 그림, 등 많은 텍스트 들이 있는 만큼 텍스트의 목적에 맞는 태그를 사용해야 한다.
1. 텍스트 작성하기
1-1. hn 태그
<h1></h1> ~ <h6></h6>- hn 태그는 제목이나 부제목, 주제를 나타내는 텍스트를 표현할 때 사용하는 태그
- h1 ~ h6 까지 6개가 있고 짧은 숫자 일수록 중요도가 높아 글자가 크고 굵다, 반대로 높은 숫자 일수록 글자가 작고 얇아진다.
- hn 태그로 작성된 텍스트는 검색 엔진에서 키워드로 인식한다, 따라서 검색 엔진 최적화를 위해 본문에서 핵심이 되는 내용으로 제목이나 주제를 잘 선택해야 함.
1-2. p 태그
<p>내용</p>- p 태그는 본문의 문단(paragraph)을 작성할 때 사용한다.
- 제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기 때문에 p 태그를 주로 사용
1-3. br 태그
<br>- br 태그는 문단에서 줄 바꿈할 때 사용된다.
- HTML은 모든 명령이나 지시를 태그로 해야하기 때문에 br(줄 바꿈 태그)을 사용하지 않으면 텍스트는 줄 바꿈이 되지 않음
1-4. blockquote 태그
<blockquote cite="출처 url">문단 단위 인용문</blockquote>- blockquote 태그는 출처에서 인용한 문단 단위의 텍스트를 작성할 때 사용되며, 출처가 확실한 인용문은 cite 속성으로 출처 겅료를 명시해야 함.
- blockquote 태그는 반드시 한 개 이상의 p 태그를 포함하여야 함.
1-5. q 태그
<q cite="출처 url">짧은 인용문</q>- q 태그는 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용할 수 있는 태그
- q 태그를 사용한 컨텐츠는 큰따옴표("")로 묶임
1-6. ins와 del 태그
<ins>추가 텍스트</ins>
<del>삭제 텍스트</del>- ins 태그는 추가된 텍스트를 나타낼 때 쓰이고, del 태그는 기존에 있는 텍스트가 삭제 된 텍스트라는 것을 표현할 때 쓰인다.
- ins 태그를 사용한 컨텐츠는 밑줄이 생기고, del 태그를 사용한 컨텐츠는 취소선이 생긴다.
1-7. sub와 sup 태그
<sub>아래 첨자</sub>
<sup>위 첨자</sup>- sub 태그와 sup 태그는 각각 아래 첨자, 위 첨자에 해달하는 텍스트를 작성할 때 사용한다.
2. 그룹 짓기
- HTML 코드를 작성하면 관련 있는 부분을 그룹으로 묶어야 하는 경우가 많다.
- 인스타 그램을 보면 베너 영역, 검색 영역, 사이드 영역 등 관련 있는 요소를 그룹으로 묶어 사용한다.
- 웹페이지를 만들 때 그룹으로 묶게 되면 레이아웃을 구성하기 쉽고 HTML 페이지의 구조를 더 깔끔하게 작성할 수 있고, 이러한 그룹 짓기 작업을 div 태그와 span 태그로 수행한다.
- 관련있는 요소끼리 그룹 짓는 작업을 다른 영역과 분리한다는 의미로 공간 분할이라고 하며 div와 span 태그를 공간 분할 태그 라고도 함.
2-1. div 태그
<div>내용</div>- div 태그는 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<p>좌측 내 프로필</p>
<p>좌측 홈</p>
<p>좌측 검색</p>
<p>좌측 릴스</p>
<p>우측 내 프로필</p>
<p>우측 친구 프로필</p>
<p>우측 소개</p>
<p>우측 도움말</p>
</body>
</html>- 이렇게 코드를 작성하면 코드가 복잡해 보이고 더 많은 텍스트가 생길 시에 구분짓기가 어려워 진다. 그러므로 div 태그를 사용하여 묶어주면 훨신 구분하기 쉬워진다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<div class="Left">
<p>좌측 내 프로필</p>
<p>좌측 홈</p>
<p>좌측 검색</p>
<p>좌측 릴스</p>
</div>
<div class="Right">
<p>우측 내 프로필</p>
<p>우측 친구 프로필</p>
<p>우측 소개</p>
<p>우측 도움말</p>
</div>
</body>
</html>2-2. span 태그
<span></span>- span 태그는 인라인 요소를 그룹으로 묶을 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<p>좌측 내 프로필</p>
<p>좌측 <span>홈</span></p>
<p>좌측 검색</p>
<p>좌측 릴스</p>
</body>
</html>- 홈 부분의 텍스트 부분만 다른 디자인으로 표현하고 싶다면 span 태그로 묶어 사용한다, 텍스트도 인라인 요소 이기 때문에 내부 컨텐츠를 span 태그로 그룹 지을 수 있다.
- 이렇게 그룹으로 묶어 요소의 공간을 분할하면 분할된 요소에 CSS로 스타일을 적용할 수 있다.
3. 목록 만들기
- 목록(list)은 목차와 메뉴를 구성할 떄 주로 사용하지만, 이 외에도 웹페이지의 다양한 곳에서 사용가능하며 사용하는 태그로는 ul, ol, dl 태그 등이 있다.
3-1. ul 태그
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>- ul(unordered list) 태그는 순서가 없는 비순서형 목록을 생성할 때 사용한다.
- ul 태그를 사용하면 목록 내용마다 글머리 기호(bullet point)가 붙는다.
- 목록 내용은 li(list item) 태그로 구성된다.
3-2. ol 태그
<ol>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ol>- ol(order list) 태그는 순서형 목록을 생성할 때 사용한다.
- ol 태그를 사용하면 목록 내용마다 번호가 붙는다.
- 목록 내용은 ul 태그와 같이 li 태그로 구성된다.
3-3. dl 태그
<dl>
<dt>용어 1</dt>
<dd>용어 설명 1</dd>
<dt>용어 2</dt>
<dd>용어 설명 2</dd>
</dl>- dl(description list) 태그는 정의형 목록을 생성할 때 사용한다.
- 정의형 목록은 용어와 용어 설명을 나열한 형태의 목록이다.
- 목록 내용은 li 태그 대신에 dt (description term) 태그, dd (description details) 태그로 용어 설명을 작성한다.
3-4. 목록 태그에서 알면 도움되는 것
리스트 스타일링
<ol type="I">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ol>- 순서 리스트에서는 type 속성으로 기호를 바꿀 수 있다.
- 사용되는 예로는 a(a, b, c, d), i(i, ii, iii, iv), I(I, II, III, IV), 1(1, 2, 3, 4) 등이 있다.
- CSS 속성 중 list-style 으로도 바꿀 수 있다.
ul {
list-style: disc; /* 동그라미 */
}- 기호를 없애고 싶을 때는 none을 사용한다.
ul {
list-style: none;
}- 리스트 항목을 한 줄로 쓰고 싶으면 display: inline-block을 활용할 수도 있다
ul > li {
display: inline-block;
}
프로그래밍 공부하는 찬우입니다👋