본문 바로가기
프로그래밍/HTML5 태그 를 뛰어넘어라

(HTML/HTML5) 1.기본태그 <body> 5/10

by it-수다쟁이증후군 2019. 3. 25.

직전 포스트 복습
1)head태그 안에 포함시킨다.
2)웹페이지의 제목이며 툴바에 표시된다.
3)검색사이트가 웹페이지를 찾기 위한 기본 중에 기본이다. 반드시 꼭 적을 것.

이전의 강의를 간략하게 줄이면 위와 같다. body- 태그에 대해서 알아보자.

html5 태그완전정복 body편


body- 태그는 기본태그 10개 중에서 5번째에 있다. 아래 그림을 보면 간단히 알 수 있다.


1.html태그 <body> 간단 정리


의미/역활 : 실제 눈에 보이는 작업공간이다. 사용자에게 보여주고 싶은 내용들을 이곳에 넣어두면 된다.
사용법 : <body> 와 <body> 사이에 적힌 내용이 화면에 표시된다

화면에서 body영역



2.html태그 <body> 한걸음 더.


이 공간에서 작업이 이루어진다. 라고 간단하게 설명했다. 마치 모든 것이 해결될 것 같은 느낌으로 말이다. 그러나 사용자에게 보여주고 싶은 내용 즉 컨텐츠를 어디에 위치시킬 것인가? 어떻게 예쁘게 꾸밀 것인가 에 대한 이야기로 넘어오면 body에 대한 설명이 좀 달라진다.
2-1) 화면에 어떤 컨텐츠를 넣을 것인가?
2-2) 화면에 넣은 컨텐츠들 간의 관계는 어떤가?(포함시킬 것인가? 포함될 것인가?) ex)글, 그림, 영상 등등
2-3) 컨텐츠를 화면 어떤 부분에 위치 시킬 것인가?
2-4) 컨텐츠를 좀 더 멋지게 예쁘게 할 것인가?


의미적으로 1번, 2번, 3번, 4번 body영역에서 이루어지나 프로그램 적으로 1번 2번은 html-body태그 안에서, 3번과 4번은 CSS 안에서 이루어진다. 대부분의 추세가 그렇다.



3.html태그 <body>의 속성Attributes 정리.


body 속성 전체
속성Attribute 속성값Value 설명
1 link color 링크연결 된 텍스트의 색깔
2 alink color 링크를 클릭 할 때 변경되는 색깔
3 vink color 방문한적이 있는 링크의 색깔
4 bgcolor color 배경색깔
5 background URL 배경이미지
6 text color body안에 들어가는 글자의 기본 색깔

사용법은 아래와 같다.


그런데. html5의 공식문서에 보면 html5에서는 더 이상 지원하지 않는다고 나온다. 무슨 말일까? 2-4)번 설명에 따르면 에쁘게 꾸미는 일, 즉 디자인에 관한 내용은 CSS로에서 작성한다고 했다. 그에 따라 body에 속성들 또한 CSS에서 구현한다. 이러면 코드의 가독성이 높아질 뿐만 아니라 추후에 코드수정 할 때도 편해진다. 다음 그림은 어떻게 변경되는지 간단히 보여준다.  


정리하면

body 속성을 CSS로
속성Attribute CSS에서 구현
1 link a:link{color:#FF0000}
2 alink a:alink{color:#FFA500}
3 vink a:vlink{color:#1010B5}
4 bgcolor body{background:#F3F3F3}
5 background body{background-image: url()}
6 text body{color:"#591717"}
이렇게 정리 할 수 있다.

여기에 더해서 CSS로 body를 꾸미는 방법은 body태그 속성에서 유래된 것 외에도 아니라 다양하게 존재한다. 워낙에 많은 관계로 나중에 CSS정리 하면서 알아보기로 하고 가장 많이 그리고 기본적으로 적용하는 것이 있는데 바로

1.폰트 사이즈와
2.폰트의 종류
3.배경색
4.글자색

이렇게 4가지 이다. 물론 이 4가지는 CSS - body 외에도 적용이 가능하나. body에 적용해주면 웹페이지의 전체에 적용 가능하므로 주로 body에 작성한다.
body{
font-size: 12px;
font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
background:#F3F3F3
color:"#591717"
}
이렇게 말이다. 참고=>폰트를 적용하는 방법은 위와 다르다. 참고용일뿐



4. <body>최종정리


4-1)body태그는 화면에 보이는 부분이다.
4-2)어떤 콘텐츠를 넣을지 콘텐츠간의 포함관계를 결정
4-3)디자인에 관한 내용은 전부 CSS에서 결정함.
4-3)폰트크기,폰트종류,폰트기본색,배경색깔 정도를 작성함.

다음은 제목 <h1> ~ <h6>태그에 대해서 알아보자


댓글