글자태그(h, br, span, ul, ol)
1. 줄바꿈, 띄어쓰기(공백)
웹 페이지에 아래 사진과 같은 문구를 작성하려 합니다.
html문서 내 <body>태그안에 아래와 같이 코딩하여 확인 해 봅니다.
<body>
웹브라우저에 실제로 보이는 부분
웹브라우저에 실제로 보이는 부분
웹브라우저에 실제로 보이는 부분
</body>
웹페이지에 글을 작성 할 때 한글이나 워드에서처럼 띄어쓰기와 줄바꿈을 하여도 다른 결과가 나온걸 볼 수 있습니다.
html문서에서 띄어쓰기는 한 칸만 인식, 줄바꿈은 엔터를 쳐도 띄어쓰기 한 칸 으로 간주합니다.
따라서 줄바꿈과 한 칸 이상의 띄어쓰기를 할 때는 태그가 필요합니다.
줄바꿈태그 <br>
워드에서 엔터와 같은 역할을 합니다. 태그의 위치에서 갯수만큼 줄바꿈이 이루어집니다.
추가공백(띄어쓰기)태그
한 칸 이상 띄어쓰기(공백)가 필요한 경우 사용합니다. 태그의 갯수만큼 공백이 생깁니다.
<body>
웹브라우저에 실제로 보이는 부분<br>
웹브라우저에 실제로 보이는 부분<br><br>
웹브라우저에 실제로 보이는 부분
</body>
2. 제목, 문장, 문단, 단어
<body>
<!--제목태그-->
<h1>제목1입니다.</h1>
<h2>제목2입니다.</h2>
<h3>제목3입니다.</h3>
<h4>제목4입니다.</h4>
<h5>제목5입니다.</h5>
<h6>제목6입니다.</h6>
<br><br><br>
<!--문단, 문장 입력태그-->
<p>문단또는 문장을 입력할 때 사용하는 태그</p>
<p>문단또는 문장을 입력할 때 <br> 사용하는 태그</p>
<p>문단또는 문장을 <br> 입력할 때 <br> 사용하는 태그</p>
<br><br><br>
<!--한 단어만 입력하는 태그-->
<span>컴퓨터</span>
<span>키보드</span>
<span>마우스</span>
<br><br><br>
</body>
제목태그 <h1> ~ <h6>
6가지 태그가 있으며 한 구역의 제목을 지정할때 사용하는 태그입니다. 숫자가 커질수록 글씨크기는 작아집니다.
문단 또는 문장 태그 <p>
문단 또는 문장을 작성할 때 쓰는 태그입니다. 줄 바꿈시 <br>과는 다르게 더 많은 여백이 생깁니다. <p>태그 안에서 <br>태그 사용도 가능합니다.
단어 태그 <span>
한 단어씩 작성 할 때 사용하는 태그입니다.
<p> 태그와 <span> 태그는 나중에 CSS 스타일을 적용할 때 활용 가능할것이라 예상 해 봅니다.
3. 리스트
<body>
<ul>
<li>웹호스팅</li>
<li type="circle">도메인</li>
<li type="square">포워딩</li>
</ul>
<ol>
<li>웹호스팅</li>
<li>도메인</li>
<li>포워딩</li>
</ol>
<ol type="A">
<li>웹호스팅</li>
<li>도메인</li>
<li>포워딩</li>
</ol>
</body>
리스트 태그는 크게 2가지 종류가 있습니다.
순서없는 리스트 <ul>
기본값은 검정 원이며 <li>태그의 type속성으로 기호 모양을 변경 할 수 있습니다.
순서있는 리스트 <ol>
연속된 숫자나 문자로 나타나며 <ol> 태그에 직접 type를 설정 해 주어 숫자, 영문자 등으로 변경 할 수 있습니다.
<ul>또는 <ol>리스트 태그를 작성 한 후 태그 사이에 <li>태그를 이용해 데이터를 삽입합니다.
'프론트엔드 > html' 카테고리의 다른 글
| html 테이블 구조 연습 (1) | 2021.06.28 |
|---|---|
| html 테이블 태그 - table (0) | 2021.06.23 |
| html 하이퍼링크 태그 - a (0) | 2021.06.23 |
| html 이미지태그 - img (0) | 2021.06.23 |
| html 에디터 설치 및 html 기본 구조 (0) | 2021.06.23 |