<!DOCTYPE html> <html> <head> #p1{background:#ff0000;} 1 배경색을 16진수지정방식사용 #p2{background:rgb(255,0,0);} 2 배경색을 rgb 지정방식사용 #p3{background:rgba(255,0,0,0

Size: px

Start display at page:

Download "<!DOCTYPE html> <html> <head> #p1{background:#ff0000;} 1 배경색을 16진수지정방식사용 #p2{background:rgb(255,0,0);} 2 배경색을 rgb 지정방식사용 #p3{background:rgba(255,0,0,0"

빈우 남
5 years ago
Views:

1 1. 색상이해하기 1.1 색모델 Ÿ RGB 색모델 R( 빨강 ), G( 녹색 ), B( 파랑 ) 를삼원색으로하는색모델로서삼원자극이론에근거한색모델이다. 16진수색상지정방식으로 rgb() 색상지정방식과 RGBA() 색상방식지정방식이있다. Ÿ HSL 색모델 H( 색조 ), S( 채도 ), L( 밝기 ) 의쌍으로색상지정이다. HSL() 색상지정방식 HSLA() 색상지정방식이있다 RGB 색모델 삼원색의성분이더해져서혼합색을만드는가산색모델이기때문에디스플레이장 치 (CRT, LCD 모니터 ) 에적합한모델이다. 16진수색상지정방식은 # 기호이후에 3자리또는 6자리의 16진수값을적용한다. # 기호다음에빨간색 (r), 녹색 (g), 파란색 (b) 의각값을지정하되, 3자리의표기는 #rgb와같이사용하고 6자리표기는 #rrggbb로변환이되기때문에 #abc는 #aabbcc로변환된다. RGB 색모델 rgb 색상지정은 RGB(3개의정수값또는백분율 ) 와같은방식으로지정하고각값들은쉼표 (,) 로구분한다. 최대 100% 및 167 진수 F또는 FF와같다. 다음은표기법만다를뿐모두같은색을표현하는것이다. rgb(255, 255, 255) = rgb(100%, 100%, 100%) = #fff RGBA 색상지정방식은 RGB 방식에투명도 A(alpha) 를포함하도록확장한것으로 RGBA(3개의정수값또는백분율, 투명도 ) 와같은방식으로지정하는방식이다. 투명도 A는 0.0 ( 투명 ) 에서 1.0 ( 불투명 ) 의범위를가질수있으며 0.5값을지정하면반투명을의미하게된다

com/cssref/css_colors.asp 표준화문서 1 : http://www.w3.org/tr/css3-color 표준화문서 2 : http://dev.w3.org/csswg/css-color/ 1.1.2 HSL 색모델 사람이생각하는직관적인개념에근접한색모델을사용하는 HSL 색상지정방식이다.

2 <!DOCTYPE html> <html> <head> #p1{background:#ff0000;} 1 배경색을 16진수지정방식사용 #p2{background:rgb(255,0,0);} 2 배경색을 rgb 지정방식사용 #p3{background:rgba(255,0,0,0.5);} 3 배경색을 rgba 지정방식사용 <p id="p1"> 16진수 </p> 1 <p id="p2"> RGB사용 </p> 2 <p id="p3">rgba사용 </p> 스타일적용화면 CSS3 색상관련웹사이트 다음사이트에서는사용할수있는사전정의된색상을확인해볼수있다. 표준화문서 1 : 표준화문서 2 : HSL 색모델 사람이생각하는직관적인개념에근접한색모델을사용하는 HSL 색상지정방식이다. 색은태양이나전등과같은광원을통해전달된빛이물체의표면에서반사되거나물체스스로내는빛을사람의눈이감지한결과라할수있다. HSL 지정방식은 HSL( 색조, 채도, 밝기 ) 와같이 3개의쌍으로지정한다. 색조 (Hue) 는색상환의각도로지정하기때문에 red=0=360, green=120, blue=240 등원을따라서표시된다. 채도 (Saturation) 는색상의선명함을나타내기때문에백분율로표시되며채도가 0% 이면무채색이고채도가100% 이면순색이다. 밝기 (Lightness / Lum

{background:hsl(200,100%,25%);} 3 배경색을 hsl 지정 #p4 {background:hsla(200,100%,50%,0.

3 inance) 는색상의밝기를나타낸다. 백분율로표시되며밝기가 0% 이면검은색, 50% 이면평균, 100% 이면흰색을표시한다. HSLA 색상지정방식은 HSL지정방식에투명도를지정하는 A(Alpha) 를포함하도록확장된것으로, HSLA( 색상, 채도, 밝기, 투명도 ) 와같이지정한다. <!DOCTYPE html> <html> <head> #p1 {background:hsl(200,100%,50%);} 1 배경색을 hsl 지정 #p2 {background:hsl(200,100%,75%);} 2 배경색을 hsl 지정 #p3 {background:hsl(200,100%,25%);} 3 배경색을 hsl 지정 #p4 {background:hsla(200,100%,50%,0.5);} 4 배경색을 hsla 지정 <p id="p1"> 파랑 </p> 1 <p id="p2"> 밝은파랑 </p> 2 <p id="p3"> 어두운파랑 </p> 3 <p id="p4"> 파랑에투명도지정 </p> 색상지정의다른방식 Ÿ 영문색상키워드를사용하는방식이있다. Ÿ 사용자의시스템색상을이용하는것이다. 이시스템색상은 CSS3 에서는권장하지않 는방법으로중요도가떨어지기때문에사람들이잘사용하지않지만, 사용자가선호 하는환경에맞게색상을자동으로지정할수있다는장점이있다

<!DOCTYPE html><html> <head> #p1{background:activecaption;} 1 활성창의테두리색상을지정 #p2{background:graytext; } 2 회색 ( 비활성화된 ) 색상 #p3{background:aqua;} 3 색상키워드를사용 <p id="p1">activecaption</p> 1 <p

id="p3">graytext</p>3 1.3 color 속성 Ÿ HTML 요소의텍스트등의색상을지정할때사용되는것으로하위요소로의상속이이루어진다. inherit는부모 ( 상위 ) 요소의색상을상속받아서부모와동일한색으로지정하는키워드이다. 키워드 transparent와 currentcolor를사용할수도있다. <!

4 <!DOCTYPE html><html> <head> #p1{background:activecaption;} 1 활성창의테두리색상을지정 #p2{background:graytext; } 2 회색 ( 비활성화된 ) 색상 #p3{background:aqua;} 3 색상키워드를사용 <p id="p1">activecaption</p> 1 <p id="p2">graytext</p>2 <p id="p3">graytext</p>3 1.3 color 속성 Ÿ HTML 요소의텍스트등의색상을지정할때사용되는것으로하위요소로의상속이이루어진다. inherit는부모 ( 상위 ) 요소의색상을상속받아서부모와동일한색으로지정하는키워드이다. 키워드 transparent와 currentcolor를사용할수도있다. <!DOCTYPE html><html><head> div { width:150px; height:150px; border: 1px solid black; background-color: rgb(192,192,192); padding:10px; margin:5px; color: blue } 1 테두리가사각형에회색바탕의파랑색등 div 스타일지정 #p1 { color: rgb(255, 0, 0) } 2 텍스트색빨강색지정 #p2 { color: inherit } 3 부모의속성 (div 속성 ) 을상속받는다. #p3 { color: transparent } 4 완전투명도를의미한다. 화면에는보이지않는다. #p4 { color: currentcolor } 5 현재색상을의미한다. <div> 1 <p id=p1>rgb(255, 0, 0)</p> 2 <p id=p2>inherit</p> 3 <p id=p3>transparent</p> 4 <p id=p4>currentcolor</p> 5 </div> - 4 -

1 } 2 투명도 0.1 지정 #back2 { opacity: 0.5 } 3 투명도 0.5 지정 #back3 { opacity: 1.0 } 4 불투명 <div id="back1"><p>opacity 0.

5 1.4 opacity 속성 Ÿ 투명도를지정하는것으로부모요소로부터상속을받을수있다. 투명도는 0.0( 투명 )~1.0( 불투명 ) 의범위를가진다. <!DOCTYPE html> <html> <head> div { font-size: 14pt; border: 1px solid black; background-color: olive; color: blue} 1 div 요소에스타일지정 #back1 { opacity: 0.1 } 2 투명도 0.1 지정 #back2 { opacity: 0.5 } 3 투명도 0.5 지정 #back3 { opacity: 1.0 } 4 불투명 <div id="back1"><p>opacity 0.1</p></div> 2 <div id="back2"><p>opacity 0.5</p></div> 3 <div id="back3"><p>opacity 1.0</p></div> 그라데이션색상지정 Ÿ 그라데이션은어느한색상에서다른색상으로부드럽게변하는이미지를말한다. 이러한그라데이션은일반적으로배경이미지나버튼, 서서히변하는음영등에사용된다 선형그라데이션 : linear-gradient 두개이상의색상을지정해두고좌표간의사이를직선으로이동하면서색상을점점변화시킨다

#div4{background:linear-gradient(to top, blue, yellow);} 4 #div5{background:linear-gradient(to bottom, yellow 0%, blue 100%);} 5 <div id="div1">1</div> <br

6 <!DOCTYPE html> <html><head> div{width:100px; height:100px; float:left;} #div1{background:linear-gradient(yellow, blue);} 1 각도생략시 180deg 기본이다. #div2{background:linear-gradient(to bottom, yellow, blue);} 2 #div3{background:linear-gradient(180deg, yellow, blue);} 3 #div4{background:linear-gradient(to top, blue, yellow);} 4 #div5{background:linear-gradient(to bottom, yellow 0%, blue 100%);} 5 <div id="div1">1</div> <br /> 1 <div id="div2">2 </div> <br /> 2 <div id="div3">3</div> <br /> 3 <div id="div4">4</div><br /> 4 <div id="div5">5</div> <br /> 5 1~5 동일한각도를의미하며같은모습으로표현된다. 색상의위치를지정하고자하려면색상의위치를 (%) 색상뒤에함께지정한다

선형그라데이션의반복 : repeating-linear-gradient 1.5.

이때, 중심위치는생략이가능하며, 10px, 20px와같이중심에서떨어진위치를지정할수있다.

7 선형그라데이션의반복 : repeating-linear-gradient 원형그라데이션 : radial-gradient 중심위치 (center) 를기준으로 0~100% 가계산되기때문에중심에서시작하여원바깥쪽으로색상을점점변화시킨다. 이때, 중심위치는생략이가능하며, 10px, 20px와같이중심에서떨어진위치를지정할수있다. 원형의모양 (shape) 은타원형의 ellipse와원형의 circle값을가질수있으며, 지정하지않으면기본적으로 ellipse 값이지정된다. <!DOCTYPE html> <html><head> div{ height: 150px; width: 200px; float:left;} 1 div 요소에적용 #grad1 {background: radial-gradient(red, green, blue); } 2 #grad2 {background: radial-gradient( red 5%, green 15%, blue 60%);} 3-7 -

8 #grad3 {background: radial-gradient( circle,red, green, blue); } 4 #grad4 {background: radial-gradient( circle, red 5%, green 15%, blue 60%); } 5 <div id="grad1"></div> 2 ellipse 균일변화 <div id="grad2"></div> 3 ellipse 0~5% 빨간색, 60~100% 파란색으로채워진다. <div id="grad3"></div> 4 circle 균일변화 <div id="grad4"></div> 5 circle 0~5% 빨간색, 60~100% 파란색으로채워진다. 결과화면 2345 순 그라데이션중심을기준으로원의끝모양이결정되면 size 키워드를사용할수있 다. 사용법 <!DOCTYPE html> <html><head> div { width: 150px; height: 150px; float: left; } #size1 { 1 중심에서가장가까운박스면과가로, 세로면이정확하게일치하도록형성 background: radial-gradient(closest-side at 60% 55%, red, blue, green, purple);} #size2 { 2 background: radial-gradient( farthest-side at 60% 55%, red, blue, green, purple);} #size3 { background: radial-gradient( closest-corner at 60% 55%, red, blue, green, purple); } 3-8 -

#size4{ background: radial-gradient(farthest-corner at 60% 55%, red, blue, green,

style="color:white">farthest-side</div> 2 <div id="size3"

style="color:white">farthest-corner</div> 4 결과화면 2345 순 키워드에따른의미 원형그라데이션의반복

9 #size4{ background: radial-gradient(farthest-corner at 60% 55%, red, blue, green, purple); } 4 <div id="size1" style="color:white">closest-side</div> 1 <div id="size2" style="color:white">farthest-side</div> 2 <div id="size3" style="color:white">closest-corner</div> 3 <div id="size4" style="color:white">farthest-corner</div> 4 결과화면 2345 순 키워드에따른의미 원형그라데이션의반복 repeating-radial-gradient 다음사이트들은 CSS3 그라데이션효과를브라우저에서직접확인하면서소스를 자동으로생성해주는곳이다. Ultimate CSS Gradient Generator:

10 CSS Gradient Generator: 벤더프리픽스 (Vendor Prefix) CSS3 표준안이아직확정되지않았기때문에모든웹브라우저들에서동일한결과가나타나지않는다. 따라서권고전의 CSS3의기능을웹브라우저제조업체 (vendor) 가지원하는경우는선택자앞에접두사 (Prefix) 를붙일것을권장하고있는데이를벤더프리픽스라고한다. 웹킷엔진을사용하는 Chrome, safari : -webkit- Opera : -o- 모질라계열의 Firefox: - moz- MS의인터넷익스플로러 (IE) : -ms- 2. 글꼴스타일 2.1 기본글꼴스타일 font-family 속성 Ÿ 지정한요소에서사용할글꼴의종류를지정하는속성으로, 해당웹문서를보는사용자의시스템환경에따라서결정된다. Ÿ 속성값 <family-name> <generic-family> inherit family-name 이름들의목록을지정할때, 여러개의글꼴을지정하고자할때는콤마 (,) 로구분하여지정한다. 글꼴의이름이공백을포함하는경우에는인용부호 ( 또는 ) 를사용한다. 기본글꼴그룹 (generic-family) 들의이름을키워드로지정할수도있다 font-size 속성 Ÿ 지정하고자하는글꼴의크기를지정하는속성으로하위요소들에대하여상속되는값이다. 글꼴의크기를지정할때, 픽셀이나포인트를비롯해여러단위로크기를지정할수있고백분율크기를사용할수도있다. Ÿ 속성값 < 절대크기키워드 > < 상대크기키워드 > < 절대크기단위 > < 상대크기단위 > inherit Ÿ 절대적크기를지정하는 7단계의키워드 xx-small, x-small, small, medium, large, x-large, xx-large 중에하나로지정할수있으며, 글꼴크기는사용자의글꼴기본설정에따라비율로조정된다. Ÿ 상대적크기키워드는 smaller와 larger로지정하면, 글꼴크기는부모 ( 상위 ) 요소의글꼴크기에비해상대적으로 1단계적게, 1단계크게지정된다. Ÿ 절대적크기단위는포인트 (pt), 파이커 (pc), 센티미터 (cm), 밀리미터 (mm), 인치 (in) 와같이정확한수치이다. Ÿ 상대적크기단위는부모요소의글꼴크기를기준으로절대글꼴크기를지정하는것으로, 글꼴의크기를상대적인단위 %, em로지정할때는 1%, 1em 형태로표현할수있지만음수단위로는지정할수없다

2.1.3 font-style 속성 Ÿ 글꼴그룹의스타일을지정하는것으로, 지정된값은하위요소로상속이된다. 글꼴그룹의종류에따라서일반적으로기본값인표준글꼴 (normal) 과이탤릭 (italic) 및기울임 (oblique) 전용글꼴을지정할수있다. 해당글꼴이없는경우에는표준글꼴이이용된다. 2.1.4 font-weight 속성 Ÿ 글꼴그룹의굵기를지정하는것으로지정된값은하위요소로상속이된다.

11 2.1.3 font-style 속성 Ÿ 글꼴그룹의스타일을지정하는것으로, 지정된값은하위요소로상속이된다. 글꼴그룹의종류에따라서일반적으로기본값인표준글꼴 (normal) 과이탤릭 (italic) 및기울임 (oblique) 전용글꼴을지정할수있다. 해당글꼴이없는경우에는표준글꼴이이용된다 font-weight 속성 Ÿ 글꼴그룹의굵기를지정하는것으로지정된값은하위요소로상속이된다 font-variant 속성 Ÿ 글꼴을변화시키는것으로, 하위요소로상속이된다. small-caps값을지정하여영어알파벳의대문자로표시하지만소문자크기의작은글꼴로나타나게한다. 이속성은영어알파벳만효과가있다 일괄지정 font 속성 Ÿ 글꼴의스타일을지정하는것으로, font-style, font-variant, font-weight, font-size, line-height, font-family 속성들을한번에묶어서표현하는속성이다. 2.2 CSS3 에서확장된글꼴스타일 속성 Ÿ 사용자가정의한글꼴을사용하기위한속성이다. 사용자가지정한글꼴의종류는 TTF, OTF, EOT, WOFF, SVG 등이있으며, 글꼴파일의확장자에따라서이를지원하는브라우저는각각다르다 무료웹글꼴사용하기 Ÿ 한글글꼴의경우용량이크기때문에하나이상의글꼴을사용하기에는웹사이트의로딩속도에영향을끼친다는것이문제점이있다. 이러한문제를해결할수있는방법중에구글웹글꼴을사용할수있다. ( Ÿ 사이트 ( 에서무료글꼴을다운로드받아사용할수있다. <!DOCTYPE html><html> url( /* * Hanna (Korean)

$정의되어있다. */ @font-face { font-family: 'Hanna'; font-style: normal; font-weight: 400; } ---------------------------------------------- @font-face { font-family: 'My_ 훈검정고무신 '; src: url( 훈검정고무신R.$

12 정의되어있다. { font-family: 'Hanna'; font-style: normal; font-weight: 400; } { font-family: 'My_ 훈검정고무신 '; src: url( 훈검정고무신R.ttf); } 2 무료로다운받은폰트 ( 훈검정고무신 ) { font-family: 'My_ 훈하얀고양이 '; src: url( 훈하얀고양이R.ttf); } 3 3 무료로다운받은폰트 ( 훈하얀고양이 ) 를정의한다..user-KorFont1 { font-family: My_ 훈검정고무신 ; font-size: 30pt } 2.user-KorFont2 { font-family: My_ 훈하얀고양이 ; font-size: 30pt } 3.webfont { font-family: 'Hanna', serif; } 1 webfont 클래스에폰트적용 <ul> <li class="user-korfont1"> 무료한글글꼴 훈검정고무신 </li> 2 <li class="user-korfont2"> 무료한글글꼴 훈하얀고양이 </li> 3 </ul> <div class="webfont"> 1 <h3> 구글웹글꼴 - 한나체 (Hanna)</h3> <p> 가나다라마바사아자차카타파하 <br></p> </div> font-size-adjust 속성 Ÿ 글꼴의크기를조정하는속성으로, 텍스트와관련된모든요소에적용이가능하다. Ÿ 요소에지정된첫번째글꼴이표시되지않는경우에두번째글꼴또는기본글꼴이표시되어가독성이떨어지게되는데, 이때글꼴의기본크기가달라서발생하는차이를조정하기위해사용되는것이다. <!DOCTYPE html> <head> <title>css3 대체글꼴크기조정연습 </title> span { border: solid 1px green }.adjust1 { font-family: Times New Roman; font-size: 100px }.adjust2 { font-family: Verdana; font-size: 100px }

$.adjust3 { font-family: Verdana; font-size: 100px; font-size-adjust: 0.447 }.adjust_v0 { font-family: Verdana; font-size: 24pt }.adjust_t0 { font-family: Times New Roman; font-size: 24pt }.$

13 .adjust3 { font-family: Verdana; font-size: 100px; font-size-adjust: }.adjust_v0 { font-family: Verdana; font-size: 24pt }.adjust_t0 { font-family: Times New Roman; font-size: 24pt }.adjust_t1 { font-family: Times New Roman; font-size: 24pt; font-size-adjust: 0.54 } <p><span class="adjust_t0"> 글꼴 Times New Roman 24pt </span><span class="adjust_v0"> 글꼴 Verdana 24pt</span></p> <p><span class="adjust_t1"> 글꼴 Times New Roman 24pt </span><span class="adjust_v0"> 글꼴 Verdana 24pt </span></p> <p><span class="adjust1">aa</span><span class="adjust2">aa</span></p> <p><span class="adjust1">aa</span><span class="adjust3">aa</span></p> </body 글꼴에대한소문자비율다음은 W3C에서보여주는일부글꼴의측정된값으로다음웹사이트에서확인해볼수있다 font-stretch 속성 Ÿ 글꼴의늘림을지정하는것으로, 글자한자의좌우 ( 가로 ) 의폭과위아래 ( 세로 ) 의길이를기준으로하여글자간의좌우폭을지정하여글꼴을축소및확대하는것이다

Ÿ 위아래의길이와좌우폭의기준을 100 으로설정하고, 좌우의폭이기준보다넓어지면 100 을초과하는값을갖게되고, 기준보다좁아지면 100 미만의값을갖게된다. 2.2.5 font-synthesis 속성 Ÿ 지정된글꼴에굵기및기울임체가포함되어있지않을경우, 웹브라우저에게굵은글꼴이나기울어진글꼴을합성하여표현할것인지의여부를지정하는속성이다.

14 Ÿ 위아래의길이와좌우폭의기준을 100 으로설정하고, 좌우의폭이기준보다넓어지면 100 을초과하는값을갖게되고, 기준보다좁아지면 100 미만의값을갖게된다 font-synthesis 속성 Ÿ 지정된글꼴에굵기및기울임체가포함되어있지않을경우, 웹브라우저에게굵은글꼴이나기울어진글꼴을합성하여표현할것인지의여부를지정하는속성이다. Ÿ 속성값 none [ weight style ] #p01 { font-synthesis: none } #p02 { font-synthesis: weight } #p03 { font-synthesis: style } #p04 { font-synthesis: weight style } 2.3 글꼴기능확장 Ÿ CSS3에추가된글꼴규격관련속성 글자간여백을상황에맞게조정하는것을커닝 (Kerning) 이라한다. font-kerning 속성은글꼴에포함되어있는공백을조절하여글자간격을일정하게유지하도록지정한다. font-feature-setting속성은글꼴의문자모양과대체문자, 글자위치와레이아웃등을조절한다. font-language-override속성은 lang 속성으로정의된언어를다른언어로대체하는속성이다. font-variant-ligatures속성은발음기호형태와같은문자간의묶음표시형태를지정한다. font-variant-position속성은글자 ( 위첨자, 아래첨자 ) 의표시위치를지정한다. font-variant-caps속성은작은대문자또는제목에사용되는대체문자를선택하도록지정한다. font-variant-numeric속성은분수또는회계용숫자등의표시형태를지정한다. font-variant-alternates속성은글꼴의장식요소나특수문자등의대체문자선택에대한제어기능을지정한다. font-variant-east-asian속성은동아시아텍스트 ( 한자, 일본어등 ) 의크기를조정할수있도록지정한다

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width