WebStandards-Basic 3.Starting style

Understanding HTML/CSS

기초 스타일링

을수

eulsoo.jung@gmail.com

이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.

1. 스타일 시작하기
2. 이름짓고 선택하기
3. 우선순위
4. 폰트 스타일링
5. 텍스트 스타일링

컨텐츠(HTML)에 표현(CSS)을 연결하는
방법은 세가지입니다
첫째. 대상 태그에 속성으로

!doctype
html
style속성을 넣은
head
태그만 표현을
meta charset=utf-8 /
적용합니다.
titlehello world!/title
/head
body
!
p style=color:red;hello world!/p
!
/body
/html

둘째. head안에 style를 이용해서
!doctype
html
head
style type=text/css
p {color:red;}
/style
/head
body
!
phello world!/p
!
/body
/html

해당 페이지내의
표현을 style안에
처리합니다.

세째. CSS를 파일로 만들어 html파일에 링크하기
basic.css
!doctype
p {color:red;}
html
head
link href=css/basic.css rel=stylesheet type=text/css media=all /
/head
body
하나의 CSS
!
파일로 링크가
phello world!/p
걸린 모든 HTML의
!
표현을 변경수정 할 수
/body
있기 때문에 주로
/html
사용하게
되는 방법입니다

링크된 CSS파일에서 다른CSS를
불러올 수도 있습니다
board.css
common.css

!

@import url('board.css'); /* 게시판 */
@import url('table.css'); /* 표 */

table.css

!

/* 기초 스타일 */
h1 {font-size:24px;}
p {color:red;}

head
titlelink style/title
link href=css/common.css rel=stylesheet type=text/css media=all /
/head

!
body
h1Second style/h1
pstyle태그를 이용하여 스타일을 더한다./p
/body

HTML은 위에서 아래로 처리합니다

head
link href=css/basic.css rel=stylesheet type=text/css media=all /
link href=css/table.css rel=stylesheet type=text/css media=all /
link href=css/board.css rel=stylesheet type=text/css media=all /
/head

!
body
h1Second style/h1
/body

위에서 부터
순서대로 처리한다

1
2
3

중복될 경우 덮어 씌우게(override) 됩니다
head
link href=css/basic.css rel=stylesheet ... /
link href=css/table.css rel=stylesheet .../
link href=css/board.css rel=stylesheet ... /
/head

basic.css
h1, p{color:black;}

!

table.css
p {color:lime;}

board.css

body
h1Second style/h1

p {color:red;}

/body

body

Second style
style태그를 이용하여 스타일을 더한다.

style안에서도 마찮가지고
head
style type=text/css
h1 {color:black}
p {color:yellow;}
p {color:red;}
/style
/head

동일한 방법으로 동일한 대상을 선택했을 경우

위에서 아래의 순서로 처리하는 브라우저에

의해서 윗선언 후 재선언(override)하여 결국

아래 선언만 적용됩니다.

!

body
h1Second style/h1
/body
body

Second style

CSS 파일 안에서도 마찮가지입니다
basic.css

head

h1 {color:black}

link href=css/basic.css ... /

p {color:black}

/head

p {color:lime}

!

p {color:red}

body
h1Second style/h1
/body
body

Second style
style태그를 이용하여 스타일을 더한.다

위에서 아래로 덮어지게(cascading)적용됩니다
basic.css
p {color:black}
p {color:green}

head
link href=css/table.css ... /

table.css
p {color:lime}

style type=text/css
h1 {color:black;}
p {color:yellow;}
p {color:red;}
/style
/head

!
body
h1Second style/h1
/body

body

Second style
style태그를이용하여 스타일을 더한다.
이용하여 스타일을 더한다.
style태그를

@import 된 스타일도 Cascading됩니다
table.css
basic.css
head
style type=text/css

p {color:lime}

@import url(‘table.css’);

!

p {color:black}
p {color:green}

h1 {color:black;}
p {color:yellow;}

body

p {color:red;}

Second style

/style
/head

!
body

style태그를

h1Second style/h1
/body

head
style type=text/css
h1 {color:black;}
p {color:yellow;}

그렇기 때문에 순서를
잘 사용해야 합니다

p {color:red;}
/style

basic.css

link href=css/table.css ... /

p {color:black}
p {color:green}

/head

!
body
h1Second style/h1

table.css
p {color:lime}

/body
body

Second style
style태그를

효과적으로 표현을 적용시키기 위하여
CSS는 상속을 이용합니다
head
style type=text/css
body {color:red;}
h1 {color:red;}
p {color:red;}
/style
/head

!

글씨크기, 줄간격, 글씨색, 서체등등의 속성은

일일이 모든 태그에 적용시킬 필요없이 상속을
이용해서 적용시킬 수 있도록 되어있습니다

body
div

body
div

First style

h1Second style/h1
/div
/body

body에 적용한 글씨색 속성이 div를 거쳐

h1p에 까지 각 각 상속되어

붉은색으로 되었습니다

대상에서 가까이 지정할 수록 우선합니다
head
style type=text/css
body {color:red;}
div {color:lime;}
/style

body
div

/head

First style
First style

!
body
div


h1Second style/h1
/div
/body

body에 지정한 color:red보다 div에 지정
한 color:lime이 대상인 h1p에서

더 가까이 지정되어 상속되었기 때문에
color:lime이 우선하여 보이게 됩니다

당연히 상속이 된 속성보다 직접 선언된
속성이 우선합니다
head
style type=text/css
body {color:red;}
p {color:blue;}
/style
/head

!
body

body
div

First style

div
h1Second style/h1
/div
/body

body에 지정되어 상속을 통해 p에 color:red
가 적용된 후에 다시 p를 직접 선택하여
color:blue가 재지정 되었습니다

!

이렇듯 상속된 속성은 직접 선언한 속성보다

우선순위가 낮습니다

a에는 상속되지 않아 별도 지정합니다.
head
style type=text/css
body {color:red;}
a {color:blue;}
/style
/head

!
body
div
h1Second style/h1
pa href=””style태그를 이용하여
스타일을 더한다./a/p
/div
/body

body
div

First style
body에 지정한 color:red보다 div에 지정
한 color:lime이 대상인 h1p에서

더 가까이 지정되어 상속되었기 때문에
color:lime이 우선하여 보이게 됩니다

배경,넓이,높이,여백,간격,위치값등 상속되면
않되는 속성들도 많습니다
상속 속성

color 글씨색
cursor 커서
font-family 서체
font-size 글씨크기
font-weight 글씨굵기

font 폰트관련 축약
letter-spacing 글씨 사이의 간격
line-height 글줄의 간격
list-style 목록 스타일
text-align 글 좌,우,가운데 정렬
text-indent 들여쓰기
text-transform 대소문자
word-spacing 단어의 간격
visibility 보이는 상태 조절
border-collapse 테이블 보더 병합
border-spacing 테이블 보더 간격
caption-side 테이블 제목 위치

비상속 속성

background 배경
width 넓이지정
height 높이지정
padding 여백
margin 간격
border 선

top, left, right, bottom 위치값 지정
float 띄워서 좌우 배치
position 배치 상태 지정
display 박스타입 지정
overflow 넘치는 상황
vertical-align 글줄안에서 상하 정렬 기준
z-index 보이는 순서

사실, 브라우저는 기본적인 스타일을
자체적으로 가지고 있습니다.
브라우저 기본스타일
li
{ display: list-item }

head
{ display: none }

table { display: table }

tr
{ display: table-row }

thead { display: table-header-group }

tbody { display: table-row-group }

tfoot { display: table-footer-group }

col
{ display: table-column }

colgroup { display: table-column-group }

td, th { display: table-cell }

caption { display: table-caption }

th
{ font-weight: bolder; text-align: center }

caption { text-align: center }

body
{ margin: 8px }

h1
{ font-size: 2em; margin: .67em 0 }

h2
{ font-size: 1.5em; margin: .75em 0 }

ul박스 왼쪽에 여백이 설정되고

중점을 찍어 주었습니다
ul박스에 상하로 간격이 설정하였습니다

head
title네이버서비스/title
/head

!

body
ul
listrong소설/strong에 관하여/li
lia href=역사적 인물들/a/li
li패션에 대하여/li
/ul
/body

CSS가 없어도 기본적인 시각적 인지를
할 수 있도록 들어가 있습니다.
li

head
{ display: none }


tr




col




th


body
{ margin: 8px }

h1

h2

h1~h6단계별사이즈, 볼드, 상하마진

p 상하마진

q 쌍따옴표

em 이텔릭

중점과 들여쓰기

a글씨색,밑줄

head
/head

!

body
div
h2네이버서비스/h2
div
h3네이버 캐스트/h3
pq우리가 일상생활에서 환경을 위해
할 수 있는 가장 손쉽고 간편한 방법은
무엇이 있을까?/q em아마도 전력을 아껴 쓰는
일일 것이다./em/p
/div
div
h3오픈 캐스트/h3
ul
/ul
/div
/div
/body

브라우저가 가지고 있는 기본 스타일
html, address,!
blockquote,!
body, dd, div,!
dl, dt, fieldset, form,!
frame, frameset,!
h1, h2, h3, h4,!
h5, h6, noframes,!
ol, p, ul, center,!
dir, hr, menu, pre
{ display: block; unicode-bidi: embed }!
li
{ display: list-item }!
head
{ display: none }!
table
{ display: table }!
tr
{ display: table-row }!
thead
{ display: table-header-group }!
tbody
{ display: table-row-group }!
tfoot
{ display: table-footer-group }!
col
{ display: table-column }!
colgroup
{ display: table-column-group }!
td, th
{ display: table-cell }!
caption
{ display: table-caption }!
th
{ font-weight: bolder; text-align: center }!
caption
{ text-align: center }!
body
{ margin: 8px }!
h1
{ font-size: 2em; margin: .67em 0 }!
h2
{ font-size: 1.5em; margin: .75em 0 }!
h3
{ font-size: 1.17em; margin: .83em 0 }!
h4, p,!
blockquote, ul,!
fieldset, form,!
ol, dl, dir,!
menu
{ margin: 1.12em 0 }!
h5
{ font-size: .83em; margin: 1.5em 0 }!
h6
{ font-size: .75em; margin: 1.67em 0 }!
h1, h2, h3, h4,!
h5, h6, b,!
strong
{ font-weight: bolder }!
blockquote
{ margin-left: 40px; margin-right: 40px }

i, cite, em,!
var, address
{ font-style: italic }!
pre, tt, code,!
kbd, samp
{ font-family: monospace }!
pre
{ white-space: pre }!
button, textarea,!
input, select
{ display: inline-block }!
big
{ font-size: 1.17em }!
small, sub, sup { font-size: .83em }!
sub
{ vertical-align: sub }!
sup
{ vertical-align: super }!
table
{ border-spacing: 2px; }!
thead, tbody,!
tfoot
{ vertical-align: middle }!
td, th, tr
{ vertical-align: inherit }!
s, strike, del { text-decoration: line-through }!
hr
{ border: 1px inset }!
ol, ul, dir,!
menu, dd
{ margin-left: 40px }!
ol
{ list-style-type: decimal }!
ol ul, ul ol,!
ul ul, ol ol
{ margin-top: 0; margin-bottom: 0 }!
u, ins
{ text-decoration: underline }!
br:before
{ content: A; white-space: pre-line }!
center
{ text-align: center }!
:link, :visited { text-decoration: underline }!
:focus
{ outline: thin dotted invert }!

!

/* Begin bidirectionality settings (do not change) */!
BDO[DIR=ltr] { direction: ltr; unicode-bidi: bidi-override }!
BDO[DIR=rtl] { direction: rtl; unicode-bidi: bidi-override }!

!

*[DIR=ltr]
*[DIR=rtl]

!

{ direction: ltr; unicode-bidi: embed }!
{ direction: rtl; unicode-bidi: embed }!

@media print {!
h1
{ page-break-before: always }!
h1, h2, h3,!
h4, h5, h6
{ page-break-after: avoid }!
ul, ol, dl
{ page-break-before: avoid }!
}!

작업자는 이런 “브라우저의 기본스타일”을 초
기화(reset)하기 위해 초기화 CSS를 만듭니다.

브라우저
기본스타일

li

head
{ display: none }


tr




col




th


body
{ margin: 8px }

h1

h2

reset.css

브라우져가 CSS를 넣지 않았을 경우에도 기
본적인 인지를 위해 자동으로 주는 간격과 중
점, 들여쓰기 제목의 글씨 크기들을 새로운 디
자인을 적용하기 위해 초기화 된 상태입니다.

초기화CSS는 각 태그에 적용되어 “브라우저
기본스타일”을 덮어버립니다.
!

reset.css

body {
body에 글씨크기 색, 줄간격등을 주어
font:normal 12px Arial, sans-serif;
line-height:1.3;
모든 태그에 상속시켜 적용 되도록 하였습니다.
color:#666666;
background-color:#fff;
모든 제목에 1em을 주어 가장 부모인 body
margin:0;
의 글씨크기 12px를 그대로 받아 적용하게
padding:0;
하였습니다.
}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, ul, ol, li, form, fieldset, blockquote,
address, table, thead, tbody, tfoot, tr, td, caption {
margin:0;
기본적인 인지를 위해 박스의 간격과 여백이 들어가 있는 태그들에
padding:0;
“0” 값을 선언함으로 모두 초기화 하였습니다.
}
ul, ol {list-style:none;}
리스트에 중점과 숫자표시를 없앴습니다.

!

img {border:0;}

ie에서 이미지에 기본으로 생기는 보더 초기화

a {text-decoration:none;}

링크에 기본으로 생기는 밑줄을 없앱니다.

table {
border-collapse: collapse;
border-spacing: 0;
}

테이블의 선을 합친 스타일로 초기화합니다.

!
!

그렇기 때문에 초기화CSS는 항상 제일 위에
넣어 가장 먼저 적용되게 만들어야 합니다
reset.css
head
link href=css/reset.css...
link href=css/naver.css...
/head

!

글씨크기, 간격...초기화

naver.css

body
div
p {color:red}
div
/div
div
ul
/ul
/div
/div
/body

초기화 CSS가 브라우저의 기본표현을 초기화
시킨후 naver.css을 이용해 p의 글씨색상을
다시 지정하게 하였습니다.
네이버서비스
네이버서비스
우리가 일상생활에서 환경을 위해 할 수 있는 가
장 손쉽고 간편한 방법은 무엇이 있을까? 아마
장도 전력을 아껴 쓰는 일일 것이다.
손쉽고 간편한 방법은 무엇이 있을까? 아마
도 전력을 아껴 쓰는 일일 것이다.
오픈 캐스트
소설에 관하여
역사적 인물들
패션에 대하여

head
link href=css/reset.css...
style type=text/css

reset.css
글씨크기, 간격...초기화

p {color:red;}
/style
/head

!

초기화 CSS가 브라우저의

기본표현을 초기화 시킨후

style안에 글씨색을

재지정 하였습니다.

body
div
div
/div
div
ul
/ul
/div
/div
/body

네이버서비스
네이버서비스
오픈 캐스트
소설에 관하여
역사적 인물들
패션에 대하여

다양한 선택을 하기위해 이름이 필요합니다
div {border:2px solid red;}
HTML안의 모든 div가 선택되어 바깥
div와 안쪽 div를 구분하여 다양하게
표현할 수 없습니다.

div
div
p우리가 일상생활에서 환경을 위해
무엇이 있을까? 아마도 전력을 아껴 쓰는
일일 것이다./p
/div
div
p스티커의 디자인이 참 독특하다. 전
이 생산되는 과정을 보여주는 스티커,
전력 소비로 인한 환경 오염을 노골적으로
보여주는 스티커 등 다양하다./p
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트
스티커의 디자인이 참 독특하다. 전이 생산되는
과정을 보여주는 스티커, 전력 소비로 인한 환경
오염을 노골적으로 보여주는 스티커등 다양하다.

두가지 방법으로 이름을 지을 수 있습니다
아이디 #service {border:2px solid black;}
클래스 .castbox {background-color:lime;}

div id=service
div class=castbox
일일 것이다./p
/div
div class=castbox
보여주는 스티커 등 다양하다./p
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트

단 하나뿐인 이름을 사용하기 위해서
identity 속성을 사용합니다
#service {border:2px solid red;}
“#”을 이용해 id이름인것을 표시합니다.

id를 이용해서 붙여진 이름은 하나의

html안에서 단한번만 사용할 수 있습니다.

div id=service
div class=castbox
할 수 있는 ... 중략/p
/div
div class=castbox
이 생산되는 ... 중략./p
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트

class는 여러개의 요소에 한가지 이름을 주어
한번에 명령을 내릴때 사용합니다
물론 id처럼 한가지 요소에만도

사용할 수 있습니다
.service {border:2px solid red;}
.castbox {background-color:lime;}
“.”을 이름에 붙여 castbox를 클래스이
름으로 가진 모든 요소를 선택하여 한
번에 여러요소에 표현을 선언합니다.
div class=service
div class=castbox
/div
div class=castbox
이 생산되는 ... 중략/p
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트

한가지 요소가 여러반(class)에
속할 수 도 있습니다.
.service {border:2px solid black;}
.castbox {background-color:lime;}
.red {color:red;}
castbox와 red사이에 한칸을 띄워서 castbox에도

속하고 red에도 속해 있는 상태(글씨는 붉고

배경색이 들어간)로 만듭니다.
div class=service
h2 class=red네이버서비스/h2
div class=castbox red
/div
div class=castbox
이 생산되는... 중략/p
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트

이름을 지을때는 몇가지 규칙이 있습니다

p id=”3service”

숫자로 시작하면 안됩니다.

p class=”service3”

숫자가 뒤에 붙는것은 괜찮습니다.

p class=”Service”

XHTML은 대소문자를 구분합니다. 대소문자를 구분하지
않는 HTML을 사용한다고 해도 좋은 코드를 위해서 소문
자만 사용하는 것을 원칙으로 하는 것이 좋습니다.

p class=”service_three”

“_”를 사용해서 의미를 구분지어 줄 수 있습니다.

p class=”service-three”

“-”를 사용해서 의미를 구분지어 줄 수 있습니다.

여러가지 요소를 한번에 선언할 수 도있습니다

h2, .castbox {border:2px solid red;}
“, ”콤마를 이용해서 여러가지 선택에

대해 한번에 보더를 주었습니다.

div class=service
div class=castbox
/div
div class=castbox
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트

의미있는 이름을 부여할때
비로소 구조적으로 생각할 수 있습니다
service안에 두개의 같은 모양을 CSS로 한번에 만들어 내기 위해
castbox라는 이름을 지었습니다. 즉 “네이버서비스안에 두개의 서
비스가 있어” 라는 구조를 만들기 원했던 것입니다
div class=service
div class=castbox
일일 것이다./p
/div
div class=castbox
보여주는 스티커등 다양하다./p
/div
/div

service
h2

castbox
h3
p

castbox
h3
p

구조와 연관성을 생각해서 이름을 짓습니다
navercast
cast_menu
cast_body
game_hot

game_etc

game_recom
game_more
cast_setting

navercast라는 컨텐츠를 이루고 있는 세가지 박스이므로

모두 cast라고 붙이고 “_”뒤로는 용도에 따라 menu, body,
setting이라고 이름을 주었습니다.

navercast

cast_menu
cast_body
cast_setting

game_hot
game_etc
game_more

현재 게임 카테고리 안에 있으므로 cast_body안
에는 들어갈 박스들에는 모두 game이라고 붙이
고 “_”뒤로는 컨텐츠 성격에 맞는 hot, etc, more
의 이름을 주었습니다.

div class=navercast
div class=cast_menu.../div
div class=cast_body
div class=game_hot.../div
div class=game_ect.../div
div class=game_more.../div
/div
div class=cast_setting.../div
/div

그렇다면 이름과 더불어 더 구조적으로 선택
할 수 있는 방법은 없을까요?
한 칸을 띄워서 자손을 표기합니다
.castbox h3 {border:2px solid red;}
castbox의 자손중에 h3가 있으면 모두

선택하여서 결국 castbox안에 있는 h3만

선택하게 되었습니다

이렇게 해서 h3를 선택하기 위해 class이름을

또 만들지 않고 castbox를 이용한 구조적인

선택이 되었습니다
div class=service
div class=castbox
할 수 있는... 중략/p
/div
div
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트

리셋을 하기 전의 리스트여서

아직 중점이 찍혀있습니다.

category의 자손중에 모든 li를 찾아

선택하였습니다.
.category li {border:2px solid red;}
.category {color:blue;}
글씨색의 경우 상속되는 성질을

이용해서 효과를 주었습니다.
ul class=category
li오늘의 집/li
li오늘의 심리학
ul
li부모의 심리학/li
li경제의 심리학/li
li그림의 심리학/li
li연애의 심리학/li
/ul
/li
li오늘의 경제/li
li오늘의 학교/li
li오늘의 선생님/li
/ul

오늘의 집
오늘의 심리학
부모의 심리학
경제의 심리학
그림의 심리학
연애의 심리학
오늘의 경제
오늘의 학교
오늘의 선생님

붙여서 부를 수도 있습니다.
칸을 붙였습니다.
div#service.service {border:2px solid lime;}

div라는 태그 이름, 아이디 service, 클래스 service를 모두
가지고 있는 요소를 선택함

h2.red {border:2px solid blue;}

h2라는 태그 이름에 클래스red를 동시에 가지고 있는

요소를 선택함

.castbox.red h3 {border:2px solid red;}

클래스 castbox와 red를 동시에 가지고 있는 요소의

자손인 h3를 선택함.

!
!

div id=service class=service
h2 class=red 네이버서비스/h2
div class=castbox red
/div
div class=castbox
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트

직계 자식들만 선택할 수 도 있습니다.
기호가 들어갈 때는칸을 붙여도

되고 띄어도 됩니다.
.category li {border:2px solid red;}
category의 직계자식들만

선택하여 보더를 주었습니다.

ul class=category
li오늘의 집/li
ul
/ul
/li
/ul

오늘의 집
오늘의 심리학
부모의 심리학
경제의 심리학
그림의 심리학
연애의 심리학
오늘의 경제
오늘의 학교
오늘의 선생님

바로뒤에 붙어있는 형제를 선택할 수 있습니다.
castbox중에서 h2의 바로뒤에

붙어있는 castbox를 선택하였습니다.
h2 + .castbox {border:2px solid red;}
.service div + div {border:2px solid lime;}
service의 직계 자식들중에 div의

바로뒤에 붙어있는 div를 선택해서

보더를 선언하였습니다.
div class=service
div class=castbox
/div
div class=castbox
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트

뒤에 나오는 모든 형제를 선택할 수 있습니다.
h2뒤로 나오는 형제들 중에서 castbox라는

이름을 가진 요소들을 전부 선택합니다.
h2 ~ .castbox {border:2px solid red;}
h2 ~ div {color:red;}
h2뒤로 나오는 형제들 중에서 모든 div를

선택합니다. div에 color를 선언하자 상속되어

h3p가 빨강색이 되었습니다.
div class=service
div class=castbox
/div
div class=castbox
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트

첫번째 글자만 선택할 수 있습니다.
.castbox p:first-letter {
background-color:lime;
font-size:24px;
}
castbox의 모든 자손중에서 p를 찾아

첫번째 글짜를 가상으로 마크업한것 처럼

선택합니다.
div class=service
div class=castbox
/div
div class=castbox
/div
/div

네이버서비스
네이버 캐스트

우리가 일상생활에서 환경을 위해 할 수 있는

가장 손쉽고 간편한 방법은 무엇이 있을까? 아
마도 전력을 아껴 쓰는 일일 것이다.
오픈 캐스트



첫째줄만 선택할 수 있습니다.
.service p:first-line {
color:red
}
service의 모든 자손중에서 p를 찾아

첫째줄을 가상으로 마크업한것 처럼

선택합니다.

div class=service
div class=castbox
/div
div class=castbox
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트

첫번째 요소만 선택할 수 있습니다.
.category li:first-child {
border:2px solid red;
category의 직계 자식 li들 중에서

}
첫번째를 선택합니다.
.category li li:first-child {
border:2px solid blue;
}
category의 자손 중에서 li안에 들어있는
li들을 찾아서 그중에 첫번째를 선택합니다.
ul class=category
li오늘의 집/li
ul
/ul
/li
/ul

오늘의 집
오늘의 심리학
부모의 심리학
경제의 심리학
그림의 심리학
연애의 심리학
오늘의 경제
오늘의 학교
오늘의 선생님

.service p:first-child {
}
p들 중에서는 첫번째일지 모르지만 부
모(castbox)입장에서는 둘째이기 때문에

선택되지 않습니다.
.service h3:first-child {
}
비록 h3는 혼자지만 부모(castbox)입장
에서 첫번째 자식이기 때문에 선택됩니다.
네이버서비스
div class=service
div class=castbox
/div
/div

네이버 캐스트

마지막 요소만 선택할 수 있습니다.
.category li:last-child {
category의 직계 자식 li들 중에서

}
마지막 요소를 선택합니다.
.category li li:last-child {
}
category의 자손 중에서 li안에 들어있는 li
들을 찾아서 그중에 마지막요소를 선택합니다.
ul class=category
li오늘의 집/li
ul
/ul
/li
/ul

오늘의 집
오늘의 심리학
부모의 심리학
경제의 심리학
그림의 심리학
연애의 심리학
오늘의 경제
오늘의 학교
오늘의 선생님

IE7지원안함

앞쪽과 뒤쪽에 컨텐츠를 넣어줄 수 있습니다.
IE7지원안함
.service:before {
content:’hi hello’;
}
:after선택자와 content속성을 이용해서
service의 직계자식들의 제일 앞에

hi hello라는 컨텐츠를 넣어줍니다.
.service:after {
content:’bye bye’;
color:red;
:after선택자와 content속성을 이용해서
}
service의 직계자식들의 마지막에

bye bye라는 컨텐츠를 넣어줍니다.
div class=service
div class=castbox
/div
/div

hi hello
네이버서비스
네이버 캐스트
bye bye

포커스를 받을때를 선택합니다.

IE7지원안함

포커스 받았다는 것은 웹문서의 링크나 입력상자 체크박스 라디오버튼등 사용자와 상호작용이 일어나는 곳을
사용자가 클릭하거나 탭키를 이용하여 지나갈 때 포커스를 받았다라고 말합니다.
.info input:focus {
background-color:yellow;
}
input에 포커스를 받으면 선택하여

배경색을 바꿔 주었습니다.

일반상태

포커스를 받았을 때

div class=info
label for=phone전화번호 입력/label
input id=phone type=text/
/div

.menu a:focus {
color:blue;
}
a에 포커스를 받으면 a링크글씨색을

바꿔줍니다.
div class=menu
a href=http://test.com공감각 마케팅/a
a href=http://test.com무의식 소비/a
a href=http://test.com디지털 치매증후군/a
/div

일반상태

포커스를 받았을 때

상태와 반응에 따라 선택할 수 있습니다.
.menu a:link {color:lime;}
아직 방문하지 않은 링크
.menu a:visited {color:red;}
이미 방문했던 링크
.menu a:hover {background-color:yellow;}
마우스를 오버할때
.menu a:active {color:blue;}
클릭하는 순간 (버튼이 눌렸을때)
a 상자 영역에 커서가

올라가면 작동합니다.

div class=menu
/div

공감각 마케팅 무의식 소비 디지털 치매증후군

:hover와 :active는
a가 아니어도 사용할 수 있습니다.
.category li:hover {
}
li에 마우스를 오버할때

.category li:active {
IE7지원안함
background-color:red;
}
li를 클릭하는 순간 (버튼이 눌렸을때)

ul class=category
li오늘의 집/li
li오늘의 심리학/li
li오늘의 선생/li
/ul

li 상자 영역에 커서가

올라가면 작동합니다.

오늘의 집
오늘의 심리학
오늘의 경제
오늘의 학교
오늘의 선생님

속성을 이용해서 선택할 수 있습니다.
input[value] {color:red;}
input중에 value속성이 있
으면 선택합니다.
.person input[type=text] {
}
.person의 자손인 input중에 type이라
는 속성의 값을 text로 가지고 있는 요소를

선택합니다.

div class=person
input type=text id=email /
input type=submit value=입력하기 /
/div

asdf

입력하기
input은 모두 인라인 요소
이므로 옆으로 이어집니다.

service 자손중에서 class속성을

가지고 top이라는 값을 하나라도

가지고 있는 요소를 선택합니다.
.service [class~=red] {
background-color:yellow; service 자손중에서 class속성을

}
가지고 cast이라는 글자로 시작하
.service [class^=cast] { 고 있는 요소를 선택합니다.
}
service 자손중에서 class속성을

.service [class$=02] { 가지고 02이라는 글자로 끝나는

color:red;
요소를 선택합니다.
}
.service [href*=naver.com] {
color:lime;
service 자손중에서 href속성을

}
가지고 naver.com이라는 글자를

가지고 있는 요소를 선택합니다
div class=service
h2 class=top red네이버서비스/h2
div class=castbox01 red
/div
div class=castbox02
a href=”http://blog.naver.com”더보기/a
/div
/div

네이버서비스
네이버 캐스트
오픈 캐스트
더보기

구체적으로 부를수록 순위가 올라갑니다.

001

div h2 {font-size:24px;}

002

h1을 직접 부르는 것보다
div자손인 h1이라고 부르면
우선순위가 높습니다. 태그1개보다
2개를 이용해서 불렀기 때문입니다.
font-size:16px
body
font-size:24px
div class=service
div class=castbox
p 우리가 일상생활에서 환경을 위해 할 수
있는 가장 손쉽고 간편한 ...중략/p
/div
div class=castbox
/div
/div
/body

네이버 서비스

네이버서비스

네이버 캐스트
오픈 캐스트

class이름이 태그이름보다 높습니다.
h2 {color:red;}

001

div h2 {color:blue;}

002

.service h2 {color:yellow;}

011

div.service h2 {color:lime;} 0 1 2
태그2 클래스1로 총12가 되었습니다.
body
div class=service
div class=castbox
/div
div class=castbox
/div
/div
/body

네이버 서비스
네이버서비스
네이버서비스
네이버서비스
네이버 캐스트
오픈 캐스트

class이름과 :after(가상선택자)는 같습니다.
:first-child, :last-child, :before, :after, :hover, :active, :link, :visited

.castbox h3 {color:yellow;}

011

h3:first-child {color:lime;}

011

둘다 class1, 태그1로 총011이됩니
다. 하지만 아래줄이 우선하기 때문에
lime색이 되었습니다.
body
div class=service
div class=castbox
/div
div class=castbox
/div
/div
/body

네이버 서비스
네이버 캐스트
네이버캐스트
오픈 캐스트
오픈 캐스트

div class=menu
/div

가상선택자의 구체성이 같기 때문에
아래코드가 우선하여 :hover, :active가
적용되지 않는다.

방문전


010


010


마우스오버


010


방문후

마우스클릭

.menu a:hover {color:yellow} 0 1 0



010


010

.menu a:hover {color:yellow} 0 1 0

방문전


방문후


010
마우스오버


마우스클릭


순서를 바꾸어 모두 작동하게 만든다.

id이름이 class이름보다 높습니다.
div div.castbox h3 {color:yellow;}

013

#service h2 {color:lime;}

101

태그2 클래스1로 총12가 되었습니다.

body
div id=service
div class=castbox
/div
div class=castbox
/div
/div
/body

네이버 서비스
네이버 캐스트
네이버 캐스트
오픈 캐스트
오픈 캐스트

“” “*” “+” “,”는 영향을 미치지 않습니다.
.castbox h3 + p {color:yellow;}

012

div.castbox p {color:lime;}

012

둘다 class1, 태그2로 총012가됩니
다. 하지만 아래줄이 우선하기 때문에
lime색이 되었습니다.
body
div class=service
div class=castbox
/div
div class=castbox
/div
/div
/body

네이버 서비스
네이버 캐스트
오픈 캐스트
스티커의보여주는 스티커, 전력 소비로 인한 환경
과정을 디자인이 참 독특하다. 전이 생산되는
과정을 보여주는 스티커, 전력 스티커등 다양하다.
오염을 노골적으로 보여주는 소비로 인한 환경

!important
인라인 스타일
구체성
하향우선
직접선택한 선언
제작자 스타일중 상속된 선언

7위) 브라우저 기본 스타일만 적용되어진
상태입니다.
head
/head

!

body
div
div
/div
div
ul
/ul
/div
/div
/body

6위) 브라우저 기본 스타일 보다 작성한
스타일이 우선합니다.
head
link href=css/reset.css ...중략 /
/head

!

reset.css
body{color:#666;}
초기화CSS에 기본설정을
각요소로 상속시킨상태.
브라우저 기본스타일을
덮었습니다.

body
div
div
/div
div
ul
/ul
/div
/div
/body

5위) 작성한 스타일중 직접선택된 선언이
상속된 선언보다 우선합니다.
head
style type= text/css
p {color:red;}
/style
/head

!

reset.css
기타초기화...
...
body{color:#666;}
...

body
div
div
할 수 있는 가장..중략/p
/div
div
ul
/ul
/div
/div

4위) 직접선택한 요소가 같을 경우
아래코드가 우선합니다.
reset.css
기타초기화...
head
basic.css
p {color:lime}
001
link href= css/basic.css ...중략 /
p {color:red;} 0 0 1
/style
태그이름으로 같은 요소를
/head
선택했기 때문에 아래요소
!
가 우선한다.
body
div
div
/div
div
ul

3위) 아무리 위에 있더라도
구체적으로 부르면 우선합니다.
reset.css
head

초기화스타일...

p {color:red;}
#service p {color:orange;}
div div p {color:yellow;}
.castbox p {color:blue;}
/style
/head

4

p {color:lime}

001

1

basic.css

101
003
011

3
2

!
body
div id=”service”
div class=”castbox”
/div

5

001

reset.css

head

basic.css

p {color:red;}
div div p {color:yellow;}
.castbox p {color:blue;}

!

5

001

2

#service div p {color:lime}

101
003
011

4
3

/style
/head

!
body
div id=”service”
/div
div
ul

1

구체성이 높아지면서 하향
1 0 2 우선법칙이 무시됩니다.

2위) 아무리 구체성이 높더라도
인라인스타일이 우선합니다.
reset.css
head



basic.css

p {color:red;}
/style
/head

p {color:lime} 0 0 1

001
101

!
body
div
p style=”color:blue”q우리가 일상생활에서 환경을 위해
/div
div

1위) !important는 어떤것 보다 우선합니다.
reset.css
head



basic.css

p {color:red !important;}
/style
/head

p {color:lime} 0 0 1

101

!
body
div
p style=”color:blue”q우리가 일상생활에서 환경을 위해
/div
div

색에 사용되는 값
워드

{color:orange;}
red, orange, yellow, green, blue, aqua, black, fuchsia, gray, lime, maroon
navy, olive, purple, silver, teal, white

퍼센트RGB

{color:rgb(100%,40%,0%);}
rgb(100%,100%,100%)검정과 rgb(0%,0%,0%) 흰색의 사이를 사용한다.
소숫점이하도 허용되며, 243%는 100%와 같으며, -232%는 0%와 같이 인식한다.

숫자RGB

{color:rgb(255,102,0);}
rgb(255,255,255)검정과 rgb(0,0,0) 흰색의 사이를 사용한다.
소숫점이하는 허용되지 않으며 444는 255와 같으며, -293는 0과 같이 인식한다.

16진수RGB

{color:#ff6600;}
16진수 RGB값은 단축형으로 사용할 수 있다. #ff6600은 #f60으로 #ffffff는 #fff로
단축할 수 있지만, #808000의 경우에는 가장 비슷한 값 #888800의 #880으로 단축한다.

먼저 font-size에 대해서 알아보겠습니다.
font-size:12px; (px,%,em,pt)
캡하이트(cap height)
엑스하이트(x-height)
베이스라인(baseline)

They 안녕
어센더(ascender)

12px

디센더(descender)

12px

아직 한글을 배려한 기준은 없으므로 영문글자의 특성을 따라 계산하게 됩니다.
영문서체의 기준인 Baseline 위에 올라가 Ascender까지 위치하게 되며
font-size의 계산또한 영문서체를 따르므로 한글은 실제보다 조금 작게 렌더링 됩니다.

font-size를 완전히 이해하기 위해서는 세가지
요소가 있다는 것을 알아두어야 합니다.
브라우저

font-size:16px

브라우저에 설정되어 있는 기본 글씨크기

h1 {font-size:2em;}
h2 {font-size:1.5em;}
big {font-size:1.17em;}
small, sub, sup {font-size:0.83em}
… 중략
HTML

reset.css
body {font-size:12px;}

head
link href=“reset.css” … /
/head
body
h1한국의 인사/h1
p안녕하세요./p
/body

브라우저가 가지고 있는 기본 스타일에
지정되어 있는 글씨크기
(h1~h6, big, small, sub, sup)

우리가 만들어 넣는 스타일에
지정되는 글씨크기

우리가 font-size를 지정하면 브라우저의
기본 설정값이나 기본스타일은 무시됩니다.
브라우저

font-size:16px
h1 {font-size:2em;}
… 중략
HTML

reset.css

head
/head
body
p안녕하세요./p
/body

h1에 대해서는 브라우저 기본 스
타일에 font-size가 지정되어 있어
2em이 적용되었습니다.

우리가 만들어 넣은 reset.css에
body에 12px로 선언되어 있으므
로 p로 12px이 상속됩니다.

그렇기 때문에 브라우저에 설정된 기본
글씨 크기만 적용될 때가 있습니다.
브라우저

font-size:16px
h1 {font-size:2em;}
HTML

reset.css

head
/head
body
p안녕하세요./p
/body

h1에 대해서는 브라우저 기본 스
타일에 font-size가 지정되어 있어
2em이 적용되었습니다.

p에 대해서는 브라우저 기본 스타
일에 지정된 글씨크기가 없으므로
브라우저에 설정된 기본 글씨 크기
16px이 상속되어 그대로 적용됩니다.

제목의 경우 브라우저 기본 스타일에
각기 다른 크기가 정해져 있습니다.
브라우저

font-size:16px

브라우저에 설정된 기본 글씨크기

h1 {font-size:2em;}
… 중략

h4는 명시되지 않았으므로
body의 16px을 그대로
상속받습니다.

HTML
body
h1우리가
h2우리가
h3우리가
h4우리가
h5우리가
h6우리가
/body

일상생활에서
일상생활에서
일상생활에서
일상생활에서
일상생활에서
일상생활에서

환경을/h1
환경을/h2
환경을/h3
환경을/h4
환경을/h5
환경을/h6

브라우저 기본스타일에 명시되지 않은 body에 기본
설정값인 16px이 적용되고 body의 자식인
h1~h6은 각 각 명시된 em단위의 글씨크기를
부모인body태그의 16px을 기준으로 계산하게
됩니다.

길이에 사용되는 단위
pt

전통적인 인쇄에서 사용되는 단위로서, 워드프로세스와 같은 프로그램에
서도 사용되며. CSS에서는 폰트사이즈를 지정할 때 종종 사용됩니다.
하지만 해상도에 따라 달라지기 때문에 실제 종이에 사용하는 이 단위는
큰 의미가 없습니다.

px

디지털 화면에 대한 최소단위로서 기기의 해상도에 따라 상대적이다.
즉 같은 100px이라고 해도 기기의 화면밀도(ppi)에 따라 각각
다른 길이가 됩니다. 데스크탑(72ppi), 아이폰(336ppi)…

em
%

감싸고 있는 부모(상황)의 폰트사이즈에 따라 상대적으로 지정하는 단위입니다.
부모상자에 폰트사이즈가 16px이고 자식을 0.5em으로 지정하면 폰트사이즈
는 8px로 바뀌게 됩니다. 이렇듯 감싼 상자(상황)에 상대적으로 자식의 길이를
제어할 수 있어서 유용합니다.
감싸고 있는 부모의 길이에 따라 지정하는 단위입니다. 부모상자에
폰트사이즈가 16px이고 자식을 50%로 지정하면 폰트사이즈는 8px로
바뀌게 됩니다. 이렇듯 감싼 상자에 상대적으로 자식의 길이를 제어 할 수
있어서 유용합니다.

em은 감싼부모(상황)의 글씨 크기를 기준삼아
상대적으로 계산하는 단위입니다.
body 16px

h12em

브라우저

font-size:16px

우리가 일상생활에서 환경을


…

h1 {font-size:2em;}
… 중략

16px x 2em = 32px
감싼부모(상황)의
font-size

대상요소의
px값

대상 요소의
상대값

32px

HTML
body
h1우리가
h2우리가
h3우리가
h4우리가
h5우리가
h6우리가
/body

24px
일상생활에서
일상생활에서
일상생활에서
일상생활에서
일상생활에서
일상생활에서

환경을/h1
환경을/h2
환경을/h3
환경을/h4
환경을/h5
환경을/h6

18.72px
16px
13.28px
12px
소수점이하는 브라우저마다 다르지만
일반적으로 반올림으로 계산합니다.

내가 원하는 글씨크기로 초기화를
할 경우를 생각해 봅시다.
body 12px

브라우저

font-size:16px


12 x 2 = 24px

h1 {font-size:2em;}
… 중략
HTML

12 x 1.5 = 18px
12 x 1.17 = 14.04px
12px
12 x 0.83 = 9.96px
12 x 0.75 = 9px

reset.css


head
/head
body
h1우리가 일상생활에서 환경을/h1
/body

제작자가 만든 reset.css를 넣자 body에 적용된
브라우저 설정값 16px이 무시되고 reset.css의
선언된 font-size:12px가 재정의 되었고

!

h1~h6는 reset.css에 선언하지 않았기에
브라우저 기본스타일에 명시된 글씨 크기가 적용됩니다.

!

즉 제작자가 body에 선언한 글씨크기가 기준이 되어
브라우저 기본스타일의 h1~h6의 em사이즈가
계산되어 body(상황)에 상대적인 폰트사이즈가 대
상인 제목태그에 적용되었습니다.

제목도 초기화를 해보겠습니다.
브라우저

font-size:16px

body 12px


12 x 1 = 12px
12 x 1 = 12px

h1 {font-size:2em;}
reset.css
… 중략
h1,h2,h3,h4,h5,h6 {
HTML
font-size:1em;
}
head
/head
body
/body

12 x 1 = 12px
12 x 1 = 12px
12 x 1 = 12px
12 x 1 = 12px

제작자가 만든 reset.css를 넣자 body에 적용된
브라우저 설정값 16px이 무시되고 reset.css의
body에 선언된 font-size:12px이 재정의 되었고

!

h1~h6또한 reset.css에 선언하자 브라우저
기본스타일에 선언된 값들이 무시되어 결국 제작자가 넣
은 12px(상황)을 기준으로 1em을 계산하여 모두 같은
크기의 제목으로 초기화 되었습니다.

만약 제목을 14px로 바꾸고 싶다면
얼마를 em값으로 주어야 할까요?
브라우저

font-size:16px


h1 {font-size:2em;}
reset.css
… 중략
h1,h2,h3,h4,h5,h6 {
HTML
font-size:1.1666666em;
}
head
/head
body
/body

상황(context)

12

x

상대값

? = 14px

대상(target) 상황(context)

14

대상(target)

상대값

/ 12 = 1.1666666
소숫점 이하는 충분히 적어주면
최대한 가까운 계산을 해주게 됩니다

body font-size:12px

12 x 1.1666666 = 14px

em은 박스의 넓이나 높이
여백과 간격을 지정할때도 사용됩니다.
reset.css

bodyfont-size:12px

head
style type=“text/css”
.box1 {
width:8.333333em;
height:8.333333em;
background-color:yellow;}
.box2 {
width:100px;
height:100px;
background-color:lime;}
/style
/head
body
p class=“box1”안녕하세요. 박스1입니다./p
/body

body에 선언된 font-size를 기준
으로 100px이 되기 위한 상대값(em)
으로 지정하였습니다.

상황과 상관없이 100px을 넓이 높이로
고정하였습니다.

상황(context)

12

상대값

대상(target)

x ? = 100px

대상(target) 상황(context)

100

상대값

/ 12 = 8.333333

부모박스의 글씨크기를 키우면
자동으로 커지는 상자를 만들수 있습니다
reset.css

body font-size:18px

head
style type=“text/css”
.box1 {
width:8.333333em;
height:8.333333em;
background-color:yellow;}
.box2 {
width:100px;
height:100px;
background-color:lime;}
/style
/head
body
/body

150px

100px

상황(context)

18

상황(context)이 변하자 즉 body
의 font-size가 변하자 em으로 지정
한 box1의 넓이와 높이가 상대적으로
늘어납니다.

상황이 변해도 px값으로 고정한
box2는 변하지 않습니다.

상대값

대상(target)

x 8.333333 = 149.999

WebStandards-Basic 3.Starting style

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à WebStandards-Basic 3.Starting style

Similaire à WebStandards-Basic 3.Starting style (20)

WebStandards-Basic 3.Starting style