직전 포스트 복습
1)head태그 안에 포함시킨다.
2)웹페이지의 제목이며 툴바에 표시된다.
3)검색사이트가 웹페이지를 찾기 위한 기본 중에 기본이다. 반드시 꼭 적을 것.
이전의 강의를 간략하게 줄이면 위와 같다. body- 태그에 대해서 알아보자.
body- 태그는 기본태그 10개 중에서 5번째에 있다. 아래 그림을 보면 간단히 알 수 있다.
1.html태그 <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 정리.
| 속성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에서 구현한다. 이러면 코드의 가독성이 높아질 뿐만 아니라 추후에 코드수정 할 때도 편해진다. 다음 그림은 어떻게 변경되는지 간단히 보여준다.
정리하면
| 속성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>태그에 대해서 알아보자
'프로그래밍 > HTML5 태그 를 뛰어넘어라' 카테고리의 다른 글
| (HTML/HTML5) 1.기본태그 <hr> 9/10 (0) | 2019.03.26 |
|---|---|
| (HTML/HTML5) 1.기본태그 <br/> 8/10 (0) | 2019.03.26 |
| (HTML/HTML5) 1.기본태그 <p> 7/10 (0) | 2019.03.25 |
| (HTML/HTML5) 1.기본태그 <h1> ~ <h6> 6/10 (0) | 2019.03.25 |
| (HTML/HTML5) 1.기본태그 <title> 4/10 (0) | 2019.03.24 |
| (HTML/HTML5) 1.기본태그 <head> 3/10 (0) | 2019.03.23 |
| (HTML/HTML5) 1.기본태그 <html> 2/10 (0) | 2019.03.23 |
| (HTML/HTML5) 1.기본태그 <!DOCTYPE> 1/10 (0) | 2019.03.15 |
댓글