웹프로그래밍응용

Size: px

Start display at page:

Download "웹프로그래밍응용"

지후 장
5 years ago
Views:

1 7 주차 CSS 다루기

2 1. CSS3 개요 2. 선택자 3. 스타일시트선언 4. 스타일속성 5. 박스모델 6. CSS3 레이아웃 7. 확장폰트요약 >> 학습목표 << CSS3 스타일시트의선언형식을이해한다. 다양한선택자유형에대한명세방법을알아본다. 스타일시트선언방식과다양한 CSS3 스타일속성사용방법을살펴본다. 박스모델의개념과레이아웃구성방법을이해한다. 확장폰트의사용방법을이해한다.

3 1.1 스타일시트기초 1.CSS3 개요 p.76 스타일 (style) 문서를멋지게장식하거나정해진양식에맞게내용을다듬는역할 문서작성프로그램에서작성하는모든문서는스타일을적용함 스타일시트 (stylesheet) 문서의스타일을정의 화면에출력하기위한외형적인모양과형식에관한스타일규칙들의모임 스타일시트에의해웹문서가브라우저에어떻게보여지는지가결정됨 예 ) 똑같은 HTML5 웹페이지에다른디자인의스타일시트를적용한결과 3

4 CSS 1.CSS3 개요 p.77 CSS(Cascading Style Sheet) HTML 문서에적용하는표준스타일시트 W3C 웹컨소시엄에서개발한스타일시트언어로 1996 년 CSS1, 1998 년 CSS2, 2007 년 CSS2.1 현재는 CSS3 가개발중임 기존의스타일시트개념을웹에적용한것 마크업문서의스타일을정의하는속성 (property) 들을모아놓은언어이기때문에 HTML 문서뿐만아니라 XML 문서에도적용가능 화면구성이나표현형식등디자인부분은 HTML 대신에 CSS 에위임함으로써문서구조와문서표현을자연스럽게분리할수있다. CSS 사용의이점 확장성 : 표현을더욱다양하게확장하거나표현기능의변경이가능 편의성 : 훨씬간편하게레이아웃등의스타일을구성 재사용성 : 독립된스타일모듈을작성, 여러 HTML 문서에공통으로활용 생산성 : 역할분담에따른전문화, 모듈단위의협업과생산성향상이가능 4

5 1.2 CSS3 스타일선언방법 1.CSS3 개요 p.78 CSS3 스타일선언형식 선택자 (selector) - 스타일을적용할대상을지정 - 특정태그영역만원하는스타일또는특별한기능 ( 제이쿼리사용 ) 을적용 스타일속성 (property) 블록 - 선택자에의해선택된영역에적용할색상, 크기등의구체적인스타일을명세 - 스타일속성블록은중괄호 ({ }) 로둘러싸며하나이상의스타일속성선언을포함 선택자 { 스타일속성이름 : 스타일속성값 ; 스타일속성이름 : 스타일속성값 ;... } 스타일속성이름 - 선택자에대해어떤스타일을부여할지적용할실질적인기능에해당하는이름을지정 ( 기능을쉽게유추할수있는단어로구성 ) 스타일속성값 - 스타일속성의종류에따라설정값의유형과범위가제한됨 - 의미를표현하는키워드나숫자를단위와함께명세 5

6 6 [ 예제 3-1] CSS 스타일시트정의하기 1.CSS3 개요 p.80 스타일시트 : <head> 태그안에 <style> 태그의내용으로명세 [ 예제 3-1] CSS 스타일시트정의하기 /ch03/stylesheet.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 전체 / 태그선택자 </title> <style> h1 { color: blue; background-color: gray; } /* h1 엘리먼트에스타일지정 */ h1, h2 { font-size: 16pt; } /* h1 와 h2 엘리먼트에스타일지정 */ </style> </head> <body> <h1>h1 스타일 </h1> <h2>h2 스타일 </h2> </body> </html>

7 7 선택자유형 1.CSS3 개요 p.81 [ 표 3-1] 선택자유형 종류 형식 내용 전체선택자 * 모든태그에스타일적용 태그선택자 태그명 지정한이름의태그에만스타일적용 클래스선택자. 클래스명 지정한클래스속성을갖는태그에만스타일적용 아이디선택자 # 아이디명 지정한아이디속성을갖는태그에만스타일적용 계층선택자 선택자태그명선택자 > 태그명선택자 + 태그명선택자 ~ 태그명 태그들의계층구조에서특정위치의태그에만스타일적용자손선택자자식선택자형제 ( 근접후행 ) 선택자형제 ( 후행 ) 선택자 상태선택자선택자 : 상태조건지정된특정상태조건을충족하는태그에만스타일적용

8 2.1 기본선택자유형 (1) 2. 선택자 p.81 전체선택자 (universal selector) '*' 기호를선택자로사용 HTML5 페이지내부의모든태그를대상으로선택 <head>, <title>, <style>, <body> 태그와 <html> 태그까지모든태그가선택 - 예 ) 모든태그의 color 속성을 'green' 색상값으로지정, 문서의모든내용이녹색으로변경됨 * { color: green; } - 예 ) <body> 태그뿐만아니라 <html> 태그영역에도빨간경계선이표시 * { border: solid red; } - 예 ) 모든엘리먼트영역의외부여백과내부여백전체를 '0' 으로초기설정 * { margin: 0; padding: 0; } 8

9 기본선택자유형 (2) 2. 선택자 p.82 태그선택자 (tag selector) 태그이름을선택자로사용하여문서내부의특정태그를모두선택 같은이름을갖는문서내의모든태그들에대해서같은스타일을적용 기본선택자로가장많이사용 - 예 ) p { background: blue; border: red; } /* 복수스타일속성선언 */ 하나의선택자에여러스타일속성을적용할수도있고반대로하나의스타일속성을여러선택자에함께적용할수도있음 여러태그를함께선택하여같은스타일을적용하고싶다면 ',' 를사용하여나열 선택된태그들에여러스타일을동시에적용할수도있음 - 예 ) 다음노란배경색의스타일은 <h1>, <h3>, <p> 태그에함께동일하게적용 h1, h3, p { background: yellow; } /* 복수선택자 */ 9

10 기본선택자유형 (3) 2. 선택자 p.82 아이디선택자 (ID selector) 보통고유한 id 속성값을가지고있는태그하나만을선택 선택자로 '#' 기호를앞에붙여 id 속성값을명세 태그이름이같더라도 id 값으로구별하여스타일을적용하고자할때사용 클래스선택자 (class selector) 특정 class 속성값을가지고있는여러태그들에스타일을적용하기위해사용 선택자로 '.' 기호를앞에붙여 class 속성값을명세 보통같은태그들을다시나누어그룹화하거나태그종류에상관없이다양한태그들을그룹화하여같은스타일을적용하고자할때사용 ( 같은태그라도다른스타일을적용하거나다른태그라도같은스타일을적용하고자할때유용 ) - 예 ) 태그이름에상관없이 class 속성값이 'class1' 인모든태그들이선택.class1 { border: solid purple ; } - 예 ) 'p.class1' 은 <p> 태그중에서 class 속성값이 'class1' 인태그들만선택 p.class1 { border : solid purple ; } h1.class1 { border : solid purple ; } 10

11 기본선택자유형 (4) 2. 선택자 p.83 계층선택자 (hierarchy selector) HTML5 문서안의엘리먼트들은계층구조의구조적특성을이용 자식선택자 (child selector) 특정태그바로아래에위치한하위태그 여러자식태그들중에서특정자식을선택할때사용하는선택자 자손선택자 (descendant selector) 특정태그아래의자식, 또그자식의자식들을반복해서모두포함하는선택자 특정태그안에포함된모든하위태그 ( 자손태그 ) 를선택 - 예 ) 형제선택자 (sibling selector) 같은부모태그아래에있는자식태그들중에서태그하나또는일부를선택 '+' 기호 : 선택자태그기준으로바로인접해서뒤에오는형제태그하나를선택할경우 '~' 기호 : 바로인접하지는않더라도뒤에오는모든형제태그들을선택할경우 - 예 ) #id > p { border: purple; } /* 선택자 > 자식선택자 */ #id p { border: purple; } /* 선택자자손선택자 */ h3 + h4 { text-align: center; } /* 선택자 + 근접후행형제선택자 */ h3 ~ h4 { background: gray; } /* 선택자 ~ 후행형제선택자 */ 11

12 12 [ 예제 3-2] CSS3 기본선택자정의하기 2. 선택자 p.84 [ 그림 3-3] basic-selector.html 의실행결과 ( 예제 3-2) <!DOCTYPE html> <html> <head> purple; } <meta charset="utf-8"> <title> 선택자유형 </title> <style> /* 전체, 아이디, 클래스, 태그선택자 */ * { margin: 5px; padding: 5px; } #id1 { border: dashed red; }.class2 { border: dotted blue; color: span { font-weight: bold; }

13 [ 예제 3-2] CSS3 기본선택자정의하기 <body> [ 그림 3-3] basic-selector.html 의실행결과 ( 예제 3-2) 3</span> <div id="id1">div스타일1 <span>span스타일1</span> <span>span스타일2</span> <p>p스타일1 <span>span 스타일 </p> <ul class="class1"> <li> 하늘 </li> <li> 바다 </li> </ul> </div> <div id="id2">div스타일2 <span>span스타일4</span> <span>span스타일5</span> 6</span> </div> <p>p스타일2 <span>span 스 타 일 </p> <div class="class2"> <h4> 전나무 </h4> <h3> 소나무 </h3> <h4> 개나리 </h4> <h5> 밤나무 </h5> <h4> 진달래 </h4> </div> 13

14 2.2 확장선택자유형 2. 선택자 p.86 상태선택자 (state selector) 콜론 (:) 뒤에엘리먼트를선택할수있는특별한상태즉, 조건을나타내는예약어를명세 단독으로사용되기보다는다른선택자와함께짝을이루어선택자를꾸며주는역할을 가상클래스 (pseudo class) 선택자라고도함 [ 표 3-2] 상태선택자 종류상태기능 링크선택자 선택자 :link 선택자 :visited href 속성을가진 ( 방문전 ) <a> 태그를선택 방문했던링크를가진 <a> 태그를선택 반응선택자 선택자 :hover 선택자 :active 마우스포인터를올려놓은 ( 누르지않고 ) 태그를선택 마우스포인터로클릭한태그를선택 부정선택자선택자 :not 선택대상을반대로적용 14

15 15 [ 예제 3-3] CSS3 상태선택자정의하기 2. 선택자 p.87 [ 그림 3-4] state-selector.html( 예제 3-3) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 상태선택자 </title> <style> div { margin-top: 15px; } a { margin: 0 ; padding : 3px ; border : 2px solid purple ; text-decoration : none ; background : purple; color : white ; } span > a:hover { background : white ; color : purple ; } span > a:active { background : #ff00ff ; color : white ; } div > a:link { background : white ; color : purple; } div > a:visited { background : white ; color : green ; } </style>

16 [ 예제 3-3] CSS3 상태선택자정의하기 2. 선택자 p.87 [ 그림 3-4] state-selector.html( 예제 3-3) <body> <span><a href="4-2.html"> 버튼 1 </a></span> <span><a href="4-2.html"> 버튼 2 </a></span> <span><a href="#"> 버튼 3 </a></span> <span><a href="#"> 버튼 4 </a></span> <div> <a href="#"> 버튼 5 </a> <a> 버튼 6 </a> <a href="4-3.html"> 버튼 7 </a> <a> 버튼 8 </a> </div> </body> 16

17 스타일시트선언방식 3. 스타일시트선언방식 p.88 CSS3 스타일시트를선언하는 4 가지방식 스타일시트의내용이어디에위치해있는지에따라결정 [ 표 3-3] 스타일시트선언방식 선언방식내용특성 내부방식외부방식인라인방식임포트방식 HTML5 문서내부에스타일시트를삽입하는형식 ( 임베디드형식 ) HTML5 문서외부에독립된스타일시트파일을작성하여연결하는형식 ( 링크형식 ) HTML5 문서안의각엘리먼트에속성으로스타일을끼어넣는형식 스타일시트안에서또다른스타일시트파일을포함시키는방식 <style> 태그안에스타일시트를명세 <link> 태그를통해외부 CSS3 파일을연결 HTML5 태그안에 style 속성을설정 규칙을사용하여외부 CSS3 파일을포함

18 [ 예제 3-4-1] CSS3 스타일선언방식혼용하기 3. 스타일시트선언방식 p.90 <!DOCTYPE html> [ 그림 3-5] style-type.html 의실행결과 ( 예제 3-4-1,2,3) <html> <head> <meta charset="utf-8"> <title> 스타일시트선언방식 </title> <link rel="stylesheet" href="external1.css"/> <style> h1 { color: blue; } /* 내부스타일시트 */ </style> </head> <body> <div> <h1> 실습 </h1> <h2 style="color: yellow"> 스타일시트 </h2>  </div> </body> </html> 18

19 스타일적용의우선순위 3. 스타일시트선언방식 p.91 4가지스타일시트선언방식을함께사용하여스타일충돌 (conflict) 이발생할경우 우선순위와상속의의해서결정 우선순위는가장제한적으로, 가장하위수준에서, 가장나중에정의할수록높음 여러스타일시트방식이결합적용된경우의적용우선순위 같은선언방식안에서의상속의개념을고려한규칙 상위엘리먼트에서정의한스타일은하위엘리먼트에도상속될수있음 상속받은스타일과하위엘리먼트에서정의한스타일이겹쳐서충돌이발생할경우, 상속받은스타일보다직접정의한스타일이우선 만약, 직접정의한스타일속성도없고상속받은속성도없다면기본값으로설정 직접스타일을정의하는경우의선택자유형에따른적용우선순위 19

20 CSS3 의글자스타일속성 4. 스타일속성 p.92 [ 표 3-4] 글자스타일속성 (1) 스타일속성속성값의미 font-family font-size font-style font-weight font-variant font 글꼴명예 ) 고딕, 돋움, serif, sans-serif, "Times New Roman", aria, cursive, monospace 수치값 크기유형예 ) 12pt, 2em, xx-small, x-small, small, medium, large, x-large, xx-large 기울기유형명예 ) normal( 기울임없음 ), italic( 약간기울임 ), obli que( 보통기울임 ) 두께유형명또는수치값 (100 ~ 900) 예 ) lighter( 얇게 ), bold(=700), normal(=400), bo lder( 두껍게 ) 대소문자유형예 ) normal, small-caps, large-caps [ 굵기 ] [ 기울기 ] 크기 [/ 줄간격 ] 글꼴예 ) 20px cursive 글꼴 ( 글자체 ) 을지정 글자의크기를지정각크기유형간 1.2 배크기차이 글자의기울기를지정 글자의굵기 ( 두께 ) 를지정 글자의대소문자전환을지정 글자관련속성을한꺼번에지정 ( 크기, 글꼴은필수, 줄간격은슬래시뒤에지정 )

21 21 CSS3 의글자스타일속성 4. 스타일속성 p.93 [ 표 3-4] 글자스타일속성 (2) 스타일속성속성값의미 text-align vertical-align text-indent 장식효과명예 ) none( 없음 ), overline( 윗줄 ), line-through( 취소선 ), underline( 밑줄 ) 수평정렬기준예 ) left, center, right, justify( 좌우정렬 ) 수직정렬기준예 ) top, bottom, middle, text-top, text-bottom, super, sub, baseline 수치값 예 ) 4pt, -2pt 변환유형명예 ) capitalize( 알파벳첫글자대문자지정 ), upp ercase( 대문자로변환지정 ), lowercase ( 소문자로변환지정 ) textdecoration texttransform letterspacing 예 ) 2pt, -4pt, normal( 보통 ; 브라우저마다다름 ) 수치값 word-spacing 수치값예 ) 6pt, normal line-height 수치값예 ) normal, 16pt, 120% text-shadow x축간격 y축간격번짐크기그림자색상예 ) 4px 2px 7px red 글자의장식효과를지정 글자 ( 문장 ) 의가로방향정렬유형을지정글자 ( 문장 ) 의세로방향정렬유형 ( 윗첨자, 아래첨자 ) 을지정 들어쓰기 ( 양수 ), 내어쓰기 ( 음수 ) 간격을지정대소문자변환을지정 글자사이의간격을지정 단어사이의간격을지정 줄간격을지정 글자에그림자효과를지정

22 22 CSS3 스타일속성값의단위 4. 스타일속성 p.93 CSS3 스타일을지정할때다양한유형의단위를사용하여크기를지정 상대단위 ( 상대적크기 ) 단위 의미 %( 퍼센트 ) 백분율단위 ( 해당엘리먼트가차지할전체공간에서의비율 ) em( 엠 ) 배수단위 ( 상속받거나직접설정된현재글꼴 ( 대문자 M) 의높이 ) ex( 엑스하이트 ) 배수단위 ( 상속받거나직접설정된현재글꼴 ( 소문자 x) 의높이 ) px( 픽셀 ) 화면한점크기 ( 화면해상도를측정하는화소점의개수 ) 절대단위 ( 절대적크기 ) 단위 의미 cm 센티미터단위 mm 밀리미터단위 (0.1cm) in 인치단위 (2.54cm) pt( 포인트 ) 포인트 ( 인쇄용 ) 단위 (1/72인치) pc( 피카 ) 피카단위 (1/6인치, 12pt) 가장많이사용되는단위는 px, % 그리고 em 등, 1em(100%) 이보통 16px(12pt) 모든레이아웃수치에는단위를꼭붙이자! height: 30px; (O) height: 30 px; (X) 레이아웃수치에가급적 %, em, ex 상대적단위를활용하자!

23 [ 예제 3-5] 글자스타일속성선언하기 4. 스타일속성 p.95 [ 그림 3-6] char-style.html 의실행결과 ( 예제 3-5) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 글자스타일속성 </title> <style> h1 { font-size: 32px; text-shadow: 6px 7px red; } h3 { font-size: 2em; background-co #800080; color: black; display: inline; text-shadow: 2px 2px 10px white, 2p 2px 10px silver, -2px 2px 10px silver, -2px - 10px silver; } </style> </head> <body> <h1>h1 Shadow효과 </h1> <h3>h3 Shadow효과 </h3> </body> </html> 23

24 CSS3 의색상 ( 배경 ) 스타일속성 4. 스타일속성 p.97 [ 표 3-5] 색상 ( 배경 ) 스타일속성 스타일속성속성값의미 color background-color backgroundimage backgroundposition backgroundrepeat background-size 색상유형 색상값예 ) red, #ff0000, rgb(255,0,0) rgb(100%, 0%, 0%) 색상유형 색상값예 ) red(=#ff0000 또는 rgb(255,0,0) 또는 rgb(100%, 0%, 0%) ), transparent( 투명 ; 기본값 ) URL 예 ) url(star.jpg), none [ 가로위치명세로위치명 ] 수치예 ) left top(=0% 0%) right bottom(=100% 100%) center center(=50% 50%) 30% 50% 60px 40px 반복유형예 )repeat-x repeat-y no-repeat repeat( 기본값 ) 수치 크기유형예 ) 80%, 150px, auto( 기본값 ), cover, contain 글자의색상을지정 배경의색상을지정 배경이미지를지정 url( 배경이미지파일경로명 ) 배경이미지의시작위치 ( 수평위치, 수직위치 ) 를지정영역과이미지의왼쪽상단일치영역과이미지의오른쪽하단일치영역과이미지의중심점일치이미지의 30% 50% 부분과영역의 30% 50% 부분을일치시킴영역왼쪽상단에서 60px만큼오른쪽, 40px만큼아래쪽지점에이미지왼쪽상단을일치시킴 배경이미지의반복여부또는반복방향을지정 x 축 ( 수평 ) 방향으로만반복 y 축 ( 수직 ) 방향으로만반복반복하지않음 ( 하나의배경이미지 ) x 축, y 축양방향으로반복 ( 바둑판형식의배경이미지 ) 배경이미지의폭과높이를지정 background 색상이미지내용반복형태위치배경관련속성을한꺼번에지정 ( 순서무관, 생략시기본값적용 )

25 25 [ 예제 3-6] 색상스타일속성선언하기 4. 스타일속성 p.98 [ 그림 3-7] color-style.html 의실행결과 ( 예제 3-6)

26 색상 (color) 속성값유형 4. 스타일속성 p.100 CSS3 색상스타일을지정방법 red, blue 등색상명을직접지정 색상값으로수치를 10 진수와 16 진수또는비율 (%) 로지정 종류형식지정예 색상유형 색상명 black 검은색 white 흰색 색상값 RGB 유형 HEX 유형 rgb(r, G, B) rgb(r%, G%, B%) #RRGGBB #RGB rgb(0,0,0) 검은색 rgb(255,255,255) 흰색 rgb(0%,0%,0%) 검은색 rgb(100%,100%,100%) 흰색 #000000( 혹은 #000) 검은색 #FFFFFF( 혹은 #FFF) 흰색 RGBA 유형 rgba(r, G, B, Alpha) rgba(0,0,255,0.5) 반투명파란색 26

27 4.3 CSS3 의목록스타일속성 4. 스타일속성 p.100 목록스타일 -> 항목앞에오는글머리기호 (marker) 의유형이나위치를설정 [ 표 3-6] 목록스타일속성 스타일속성속성값의미 list-style-type list-styleimage list-styleposition list-style 글머리기호유형 (ul 유형 ) 예 ) disc( 기본값 ; 검은동그라미 ), circle( 하얀동그라미 ), square( 검은사각형 ), none( 글머리표시안함 ) 글머리기호유형 (ol 유형 ) 예 ) decimal(1, 2, 3.. ), upper-alpha(i, II, III.. ), lower-alpha(i, ii, iii.. ), upper-roman(a, B, C.. ), lower-roman(a, b, c.. ) 이미지파일명예 ) none( 기본값 ), url("image.jpg") 표시위치예 ) inside( 내용영역에위치 ), outside( 기본값 ; 내어쓰기, 왼쪽여백영역에위치 ) [ 글머리기호 이미지위치 ] 예 ) url(img.jpg) outside, circle inside 비순서목록의글머리기호유형을지정 순서목록의글머리기호유형을지정 글머리기호이미지를지정 글머리기호의박스모델안 ( 바깥 ) 표시위치를지정 글머리기호속성을한꺼번에지정 27

28 28 [ 예제 3-7] 목록스타일속성선언하기 4. 스타일속성 p.101 [ 그림 3-8] list-style.html 의실행결과 ( 예제 3-7)

29 CSS3 의테이블스타일속성 4. 스타일속성 p.103 스타일속성속성값의미 table-layout width border borderspacing bordercollapse empty-cells caption-side 열크기유형예 ) auto( 기본값 ; 자동계산 ), fixed( 크기고정 ) 수치예 ) 100px, 80% 너비유형색상예 ) 3px solid blue 수치예 ) 2px( 수평및수직간격 ) 3px 4px( 수평간격수직간격 ) 구분선유형예 ) collapse( 기본값 ; 단일선 ), separate( 이중선 ) 표시유형예 ) hide( 숨김 ), show( 기본값 ; 표시 ) 위치유형예 ) bottom, top( 기본값 ), left, right 각열의크기결정방식을지정 테이블 ( 셀 ) 의너비를지정 테이블구분선의형식을지정 ( 박스모델의경계선스타일과동일 ) 셀구분선 ( 이중선일경우 ) 사이의간격을지정 테이블 ( 셀 ) 구분선의분리여부를지정 빈셀의구분선표시여부를지정 표제목의위치를지정

30 30 [ 예제 3-8] 테이블스타일속성선언하기 4. 스타일속성 p.103 [ 그림 3-9] table-style.html 의실행결과 ( 예제 3-8)

31 5.1 박스모델구조 5. 박스모델 p.105 박스모델 (box model) 다양한스타일속성들이적용되는박스모양의스타일관련공간개념 CSS3 를사용할때가장기본이되는개념 모든엘리먼트들은표시될때줄의일부, 줄전체또는여러줄에걸친사각형모양의공간을차지 -> 웹브라우저가모든엘리먼트들을작은박스로간주, 공간배치하기때문 박스모델의구조 스타일측면에서문서는하나이상의엘리먼트박스들로구성됨 안쪽박스모델영역은바깥쪽상위박스모델의내용영역안으로만제한됨 31

32 5.2 박스모델스타일속성 5. 박스모델 p.106 [ 표 3-8] 영역스타일속성 스타일속성 속성값 의미 width 수치예 ) 100px 글자가입력되는영역의너비를지정 height 수치예 ) 30px 글자가입력되는영역의높이를지정 margin 수치예 ) 10px 10px 20px 10px 20px 30px 10px 20px 30px 40px margin-top, margin-right margin-bottom, margin-left margin-color padding padding-top, padding-right padding-bottom, padding-left padding-color 수치예 ) 10px auto( 자동조절 ) 색상 수치예 ) 10px 10px 20px 10px 20px 30px 10px 20px 30px 40px 수치예 ) 10px auto( 자동조절 ) 색상 경계선바깥의외부여백 ( 위쪽, 오른쪽, 아래쪽, 왼쪽순서로 ) 크기를지정 경계선바깥의외부여백 ( 위쪽, 오른쪽, 아래쪽, 왼쪽 ) 크기를지정 경계선바깥의외부여백 ( 위쪽, 오른쪽, 아래쪽, 왼쪽 ) 색상을지정 경계선안쪽의내부여백 ( 위쪽, 오른쪽, 아래쪽, 왼쪽순서로 ) 크기를지정 경계선안쪽의내부여백 ( 위쪽, 오른쪽, 아래쪽, 왼쪽 ) 크기를지정 경계선안쪽의내부여백 ( 위쪽, 오른쪽, 아래쪽, 왼쪽 ) 색상을지정 32

33 영역스타일속성 5. 박스모델 p.107 영역스타일속성적용시고려사항 width 와 height 는엘리먼트내용공간의크기만을지정하므로박스공간의실제크기를고려할때는그주위의안쪽여백, 경계선, 바깥쪽여백의크기도추가로포함해야함 속성값을한꺼번에나열할경우의정해진순서 - 시계방향으로 ' 위쪽 오른쪽 아래쪽왼쪽 ' 순 - 바깥여백이나안쪽여백, 경계선속성을지정할때도똑같이적용 4 개가아닌 2 개, 3 개방향의속성값만지정가능 - 위쪽여백부터값을지정하고시계방향으로각여백의값이순서대로적용 - 생략된나머지값은상하, 좌우대칭값이쌍을이루어같은값으로결정 - 1 개값을지정하면네방향의여백이모두같은값으로설정 margin: 10px ; /* 상하좌우모두 10픽셀로설정 */ margin: 0px 10px ; /* 위, 아래는 0픽셀, 좌우는 10픽셀로설정 */ margin: 10px 10px 20px ; margin: 10px 20px 40px 30px ; /* 위 10픽셀, 좌우 10픽셀, 아래 20픽셀로설정 */ /* 위 10픽셀, 아래 40픽셀, 왼쪽 30픽셀, 오른쪽 20픽셀로설정 */ 인접한박스블록간의여백크기 - 겹쳐지는블록의여백크기중가장큰크기만큼빈여백공간이표시 33

34 경계선스타일속성 5. 박스모델 p.108 [ 표 3-9] 경계선스타일속성 스타일속성속성값의미경계선유형 border-style 예 ) solid( 실선 ), dashed( 긴점선 ), dott border-top-style ed( 짧은점선 ), double( 이중선 ), hidde border-right-style n, none( 기본값 ), inset( 오목내용 ), ou border-bottom-style tset( 볼록내용 ), ridge( 볼록선 ), groov border-left-style e( 오목선 ) border-width border-top-width border-right-width border-bottom-width border-left-width border-color border-top-color border-right-color border-bottom-color border-left-color border border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius 수치 굵기유형예 ) 5px, thick( 두꺼운선 ), medium( 중간선 ), thin( 얇은선 ) 색상예 ) red(#ff0000 또는 rgb(255,0,0) 또는 rgb(100%, 0%, 0%) ), transparen t( 투명 ) 경계선유형굵기유형색상예 ) double thick red 모서리반지름예 ) 10px 20px 30px 40px 경계선의모양을지정 경계선의굵기 ( 두께 ) 를지정 경계선의색상을지정 경계선의유형과두께, 색상을한꺼번에위 / 오른 / 아래 / 왼쪽순서대로 1~4 개지정 둥근경계선의모서리반지름을지정 ( 순서 : 왼쪽위오른쪽위오른쪽아래왼쪽아래 ) 34

35 표현효과스타일속성 5. 박스모델 p.109 [ 표 3-10] 표현효과스타일속성 스타일속성속성값의미 display visibility opacity box-shadow 박스모델표시유형값예 ) block, inline, none, inline-block 숨김여부예 ) visible, hidden 투명도 (0.0~1.0) 예 ) 0.2 x 축간격 y 축간격번짐크기그림자크기그림자색상예 ) 4px 4px 10px 6px orange 엘리먼트의박스모델표시유형을지정엘리먼트의공간표시여부를지정엘리먼트공간의투명도를지정박스모델영역에그림자효과를지정 display 스타일속성값으로 'inline-block' 속성값을지정 - 인라인형식이면서도블록형식처럼상하좌우여백과블록공간의폭과높이를설정하고싶은경우 display 스타일속성값으로 'none' 을지정 - 해당공간 ( 자식엘리먼트공간포함 ) 이생략되어화면에서사라짐 visibility 속성값을 'hidden' 으로설정 - 화면에보이지않도록숨겨지지만엘리먼트내용대신에빈공간이표시됨 35

36 6.1 컨테이너 6.CSS3 레이아웃 p.110 공간배치에있어서상위엘리먼트와하위엘리먼트간의관계는중요함 하위엘리먼트박스공간은기본적으로컨테이너라고하는상위엘리먼트박스공간안에위치하기때문 컨테이너 (container) 하위에자식엘리먼트를포함하는부모엘리먼트의공간배치상의역할을의미 물건을담는상자처럼하위엘리먼트들을자신의공간안에서좌표를통해배치 예 ) <body> <div>aaa <span>bbb</div> </div> </body> <body> 와 <div> 가컨테이너역할을함 <body> 컨테이너안에 'AAA' 와 'BBB' 내용이포함하며 'BBB' 는그안에서 <div> 컨테이너안에도이중으로속함 컨테이너의위치가이동하면포함된자식엘리먼트들의박스공간도함께이동함 36

37 화면배치스타일속성 (1) 6.CSS3 레이아웃 p.111 [ 표 3-11] 화면배치스타일속성 스타일속성속성값의미 position left right top bottom 위치지정방식예 ) absolute, fixed, static( 기본값 ), relative 수치예 ) 10px 수치예 ) 10px 수치예 ) 10px 수치예 ) 10px 공간위치를지정 왼쪽간격 ( 시작위치 ) 을지정 오른쪽간격 ( 시작위치 ) 을지정 위쪽간격 ( 시작위치 ) 을지정 아래쪽간격 ( 시작위치 ) 을지정 position 속성은 4 가지의위치지정방식을설정 4가지방향의간격을지정하는 left, right, top, bottom 속성과함께사용 top 속성값이설정되면 bottom 속성값이지정되더라도무시됨 left 속성값도 right 속성값에우선함

38 화면배치스타일속성 (2) 6.CSS3 레이아웃 p.112 화면배치스타일속성 left, right, top, bottom 속성은상위박스와의경계로부터얼마나간격 (offset) 을둘것인지를지정 보통 left, top 속성으로배치공간의좌측상단위치를결정 엘리먼트박스모델의 width 와 height 속성으로배치공간의크기를결정 right, bottom 속성으로배치공간의우측하단위치를결정하고그위치를기준점으로배치하고자하는엘리먼트공간의크기를결정할수도있음 38

39 39 position 속성의위치지정방식 6.CSS3 레이아웃 p.112 position 위치지정방식 : CSS3 레이아웃에서매우중요하고자주사용되는개념 속성값지정방식의미 absolute fixed static relative 절대위치고정위치정적위치상대위치 상위부모엘리먼트를기준으로위치지정상위박스위치가바뀌면따라서위치이동됨다른박스와독립적이며다른박스와중첩가능 웹브라우저창을기준으로위치지정페이지안의다른박스와독립적이며중첩가능 웹문서에나열된엘리먼트순으로위치지정 ( 표준방식 ) 다른박스와의앞뒤순서관계를유지하며중첩불가능표시후이동불가 엘리먼트자신의원래정적위치를기준으로상대적인위치지정다른박스와독립적

40 40 [ 예제 3-9] 레이아웃스타일속성선언하기 6.CSS3 레이아웃 p.113 [ 그림 3-12] layout-style.html 의실행결과 ( 예제 3-9)

41 6.3 float 모드관련스타일속성 6.CSS3 레이아웃 p.115 [ 표 3-12] float 스타일속성 스타일속성속성값의미 float clear overflow 박스정렬방향예 ) left, right, none( 기본값 ) 박스정렬해제방향예 ) left, right, both hidden 박스부유배치기준설정 ( 왼쪽, 오른쪽정렬, 부유비적용 ) 박스부유배치해제를지정 ( 왼쪽, 오른쪽, 모든 ) 박스의부유설정해제 하위태그에서설정한부유속성을내부로만제한함 ( 뒤에오는태그에는영향미치지않음 ) float 스타일속성 ( 모드 ) ' 떠다니다 ' 라는뜻 화면상에떠있는것과같은박스공간을만들때사용 이미지와문단을함께배치하거나수평으로박스공간들을좌우로정렬할때사용 박스공간의위치를고정시키고남는옆공간을채우도록주변요소들을끌어당김 float 속성을적용하면태그사이의상하계층구조에상관없이뒤에오는태그들이지속적으로영향을받는다. 41

42 float 스타일속성적용 6.CSS3 레이아웃 p.115 float 스타일속성적용예 float 설정이후에오는문자열박스공간이정렬된나머지공간을채워서표시 많이사용되는화면레이아웃사례 이미지와문자열내용이함께하는레이아웃구성 화면크기가동적으로변경 ( 단말기화면을수평, 수직으로회전 ) 되는레이아웃구성 42

43 float 모드를해제하는 2 가지방법 6.CSS3 레이아웃 p.116 clear 속성값을 'both' 로설정하는방법 설정한새로운태그영역위로 float 모드가설정된이전태그영역이더이상떠있지못하도록함 float 모드를설정한태그들을묶어상위부모태그를생성하고, 부모태그에 overflow 속성값을 'hidden' 으로설정하는방법 원래 overflow 는하위엘리먼트내용이상위엘리먼트의영역을벗어날때표시방법을지시하는속성 overflow 속성값 overflow 속성값 visible( 기본값 ) scroll auto hidden 기능넘치는부분도감추지않고표시넘치지않아도스크롤바를표시넘치는부분은감추고스크롤바를통해표시넘치는부분을감춤 - 'hidden' 속성값 범위를벗어난부분을보이지않도록하는방법 범위밖으로영향을미치지않는다는특성때문에 float 모드해제할때도적용 43

44 44 [ 실습 3-1] 시맨틱태그레이아웃적용하기 6.CSS3 레이아웃 p.117 [ 그림 3-14] semantictag-layout.html 의실행결과 ( 실습 3-1)

45 7.1 웹폰트 7. 확장폰트 p.118 특정글꼴의설치유무에따라문서의실행결과가달라지는문제 기존해결방식 - 필수적으로설치되는기본글꼴만을사용 - 독특하고멋있는글꼴을이미지로만들어삽입 새로운해결방식 - 웹폰트를사용 [ 예제 3-10] 웹폰트정의하기 [ 그림 3-15] web-font.html 의실행결과 ( 예제 3-10) 45

46 7.2 사용자정의폰트 7. 확장폰트 규칙 저장된글꼴파일의경로명을이용하여사용자정의폰트를정의 { font-family : ' 새글꼴이름 ' ; src : url( 글꼴파일 URL 경로명 1), url( 글꼴파일 URL 경로명 2)... ; } p { font-family : ' 새글꼴이름 ' ; } [ 표 3-13] font-face 속성속성값의미 font-family 글꼴명예 ) Nanum 글꼴이름을지정 src URL 주소예 ) url('nanum.eot') url('nanum.ttf') url('nanum.woff') 글꼴파일위치를지정 font-weight 예 ) normal, bold, 100 글꼴두께를지정 font-style 예 ) normal, italic, oblique 글꼴스타일을지정 46

47 [ 예제 3-11] font-face 사용자정의폰트정의하기 7. 확장폰트 p.118 'Nanum' 이라는자신만의글꼴을 'NanumPenScript-Regular.ttf' 글꼴파일을이용하여정의 [ 그림 3-16] user-font.html 의실행결과 ( 예제 3-11) (1) Nanum 글꼴이적용된결과 (2) 'NanumPenScript-Regular.ttf' 파일이없어 Nanum 글꼴을적용하지못하는경우, serif' 글자체가적용됨 47

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

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