[1] HTML 개념과 서식에 관한 태그
- 2021.08.20 -
- 2023.05.05 -
기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다
HTML은 web을 구성하는 가장 기초적인 구성요소로, 웹 페이지의 내용을 서술하고 정의하는데 사용한다.
태그(Tag)라는 개념으로 구분한다.
HTML의 문법에는 크게 여는 태그와 닫는태그가 있는데 이 태그는 중첩될 수 있다는것을 알아두자
| <html> 컨텐츠 </html> |
간단하게 이렇게 구성이 되는데 왼쪽부터 설명을 하면
<html> 여는 태그 라고 하며 태그네임 혹은 태그 타입이라고 지칭한다.
컨텐츠 콘텐츠로 여는태그 다음에 나오는 내용이 들어가는 부분이다.
</html> 닫는 태그 라고 지칭한다.
HTML의 기본 구조는 크게 html, head, body 태그로 구분한다.
html 태그는 문서의 시작과 끝을 정의
head 태그는 문서의 메타(meta) 정보를 정의
body 태그는 실제 사용자에게 보여질 화면을 구현하는 영역
이어, 글의 내용을 정의하는 태그들을 학습하였다.
heading 태그
태그 : h
제목을 구성할 때 사용하는 태그로 제목의 단계에 따라 구분하고 heading 태그의 h를 따서 h1부터 h6태그로 나뉘어 사용한다.
| <h1> 내용 </h1> <h2> 내용 </h2> <h3> 내용 </h3> <h4> 내용 </h4> <h5> 내용 </h5> <h6> 내용 </h6> |
<h1>태그 부터 <h6>태그 순으로 최상위 주제, 그러니까 대주제 부터 하위 주제 순으로 작성할 수 있고
<h1>태그가 가장 큰 글씨이고 <h6>태그로 갈 수록 작은 글씨를 표현한다.
블로그의 게시판 설정잘못인지 글자 크기를 수정할 수가 없어서 우선은 그대로 올린다.
다음에 바꿔야지.
Paragraph 태그
태그 : p
하나의 문단을 지정할 때 사용하는 태그. 이 태그로 지정된 문장은 하나의 문단으로 묶여서 화면에 출력한다.
작성(입력)
| <p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세</p> |
출력
| 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 |
Break 태그
태그 : br
줄바꿈을 위한 태그. html 코드에서는 줄바꿈을 해도(enter) 웹 페이지 상에서는 줄바꿈이 되지 않는다.
Parapraph태그를 이용해 문단을 입력하다 줄바꿈이 필요할때 Break태그를 이용해 줄바꿈을 행한다.
* break태그는 다른 태그처럼 </br>을 쓰지 않는다.
작성(입력)
| <p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세<br>무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p> |
출력
| 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 |
Italic 태그
태그 : i
특정 글자들에 기울임체를 적용하고 싶을 때 사용한다.
작성(입력)
| <p>동해물과 백두산이 마르고 <i>닳도록</i> 하느님이 보우하사 우리나라만세</p> |
출력
| 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 |
Strong, Bold 태그
태그 : strong, b
특정 글자들을 강조하고 싶을때 사용한다.
작성(입력)
| <p>동해물과 백두산이 <b>마르고</b> 닳도록 하느님이 <strong>보우하사</strong> 우리나라만세</p> |
출력
| 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 |
Horizontal Rule 태그
태그 : hr
문서 내 가로선. 그러니까 구분선을 넣을때 사용한다. 홀 태그 형태로 하나의 태그만 사용한다.
작성(입력)
| . . . <h1>애국가</h1> <hr> <p>동해물과 백두산이 마르고 닳도록</p> |
출력
애국가
동해물과 백두산이 마르고 닳도록
오늘 서식태그에 배웠던것을 html코드를 이용하여 활용해보자.
작성(입력)
 |
출력
 |
<h1>의 heading 태그를 사용하여 대제목이될 애국가를 입력
<hr>의 horizontal Rule 태그를 이용하여 문서 내 가로선. 즉, 구분선을 표시
<p>의 Paragraph 태그를 이용하여 문단을 작성하였다.
<i>의 Italic 태그를 이용하여 '닳도록'을 기울임 표시를 하였다.
<b>, <strong>의 bold, strong 태그를 이용하여 각각 '보우하사'와 '무궁화'를 굵은글씨체로 표현하였다.
<br>의 Break태그를 이용하여 문단을 줄바꿈하였다.
이렇게 오늘 배운 서식 태그인 Heading, Horizontal Rule, Paragraph, Italic, Bold&Strong, Break 태그를 사용해 보았다.
마 치 며
언어는 사실 C언어를 포함한 Java도 공부해보았다.
그땐 그렇게 재미없고 지루하고 에러만 나던 문장들이 내가 짧게라도 배웠던 것을 이용하여 눈으로 직접 확인할 수 있다는게 신기했다.
모든 프로그래밍언어가 그렇듯 처음은 내가 C와 java를 접했을때 처럼 재밌다.
아직 깊게 배우려면 많은 시간과 공부가 필요로 하는데
그때까지도 내가 지금처럼 흥미를 갖고 이렇게 글을 쓰며 마무리 할 수 있기를...
'Develope > HTML' 카테고리의 다른 글
| [4] form 태그, meta 태그, fields 태그, legend 태그 알아보기 (0) | 2023.05.05 |
|---|---|
| [3] Inline과 Block. 그리고 표 만들어보기 (0) | 2023.05.05 |
| [2-1] 서식태그 Bold와 Strong의 차이점 (0) | 2023.05.05 |
| [2] List 태그에 대하여 (0) | 2023.05.05 |