01. <br>태그
웹 문서 작성 시 한 줄을 띄울 때 사용된다.
코드
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> br태그는 <br> 줄 바꾸기가 가능한 <br> 태그이다. </body> </html> | cs |
실행 결과
02. <p>태그
문단(Paragraph)을 나눌 때 사용한다. 사용 시 위아래에 약간의 공백이 생기며, p태그를 연속해서 사용해도 한 번만 사용한 것 처럼 인식된다.
관련 속성
<p align="left"> |
문단을 왼쪽 정렬한다. |
<p align="center"> |
문단을 가운데 정렬한다. |
<p align="right"> |
문단을 오른쪽 정렬한다. |
<p align="justify"> |
문단을 양쪽 정렬한다. |
코드
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <p align="left">첫번째 문단</p> <p align="center">두번째 문단</p> <p align="right">세번째 문단</p> </body> </html> | cs |
실행 결과
03. <pre>태그
텍스트를 입력한 형태 그대로 웹 문서에 보이게 하는 태그이다.
코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <pre> 이 태그는 편집기에 입력한 모습 그대로 표시되도록 하는 태그입니다. </pre> </body> </html> | cs |
실행 결과
04. <div>와 <span>태그
웹 문서의 부분 또는 섹션을 나누거나 블록을 지정하는 용도로 사용되며, 순수 웹 문서의 작성 보다는 CSS를 적용하는 웹 문서에 많이 쓰인다.
문서의 레이아웃 설정이나 CSS 적용, JavaScript 이용을 위한 대상을 묶는 역할을 한다.
코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <div>div 태그의 div는 division(분할, 분배)라는 단어에서 나온 것이다. 이 div의 요소는 웹 페이지 레이아웃에 CSS와 함께 사용된다. 기본적으로 브라우저는 항상 div요소 앞뒤에 줄 바꿈을 배치한다.</div> <div>align 속성은 이전의 HTML4에서는 지원됐지만 HTML5에선 지원되지 않는다.</div><br> <span>span 태그는 문서의 인라인 요소를 그룹화 하는 데 사용되고, 태그 사용 시 시각적으로 변경되는 점은 없다.</span> <span>텍스트를 span요소에 연결하면 CSS로 스타일을 지정하거나 JavaScript로 조정이 가능하다.</span> </body> </html> | cs |
실행 결과
* <div>와 <span>태그의 차이점 : 블록 처리 이후 줄 바꿈이 일어나는지 안 일어나는지
'프로그래밍 > 웹표준' 카테고리의 다른 글
| 7. 이미지 삽입 태그 <img> (0) | 2017.01.13 |
|---|---|
| 6. 목록을 만드는 태그 <ul>, <ol>, <dl> (0) | 2017.01.11 |
| 4. 제목을 나타내는 태그 <h1>~<h6> (0) | 2017.01.08 |
| 3. 시맨틱 요소와 시맨틱 웹 (0) | 2017.01.07 |
| 2. <meta>태그 (0) | 2017.01.04 |
댓글,
