CSS CSS
CSS CSS의 기본서식
@import < link 요소 < style 요소 < style 속성 CSS 기본서식 CSS < 웹 표준화 CSS 지정 방식 @import < link 요소 < style 요소 < style 속성 style 속성 @import <p style=“padding:10px;”> … <head> .. @import url(“/css/base.css”); … </head> style 요소 CSS 지정에도 다음과 같은 순위를 같습니다. link 요소 사용을 권장 하구요 <head> .. <style type=“text/css”> p {padding:10px;} </style> … </head> ↑ 크로스 브라우징 지원과 렌더링 속도 문제 link 요소 <link rel="stylesheet“ type="text/css" href=“base.css” /> 3
선택자 {속성:값;} 선택자 스타일을 적용하는 대상 속성 선택자에 스타일 지정 CSS 기본서식 선택자 {속성:값;} 선택자 스타일을 적용하는 대상 속성 선택자에 스타일 지정 유니버샬 셀렉터(Universal selector) body {color:#666666;} * {margin:0;padding:0;} General Positioning Font Text Box Background List 타입 셀렉터(Type selector) p {margin:0;padding:0;} 스타일은 선택자와 속성/값으로 이루어 지는데, 약 45개 정도의 선택자가 있지만 하위 브라우저 호환성을 고려해서 현재 사용할 수 있는 선택자는 다음과 같은 6개 정도 입니다. 유사 셀렉터(pseudo-classes ) a:link, a:visited, a:hover, a:active {color:red;} 클래스 셀렉터(Class selectors) .class {margin:0;padding:0;} ID 실렉터(ID selectors) #id {margin:0;padding:0;} 자손 셀렉터(Descendant combinator) p span .note {color:red;} 4
id/class 선택자 지정 id/class 선택자 위치 CSS 기본서식 id class 엘리먼트에 고유한 이름을 부여한다. 문서 링크에서 목표 anchor(앵커)로 사용된다. 스크립트로부터 특정 엘리먼트를 호출할 수 있다. 문서로부터 데이터 추출할 때 필트를 지정하거나 문서를 다른 양식으로 번역 처리를 위해 사용된다. class 여러 엘리먼트에 동일하게 부여할 경우 엘리먼트에 하나 또는 여러 클래스 이름을 부여한다. 선택자 선언시 ID와 CLASS는 다음과 같은 상화에 맞게 쓰면되구요 한페이지에 ID는 하나만 존재 해야된다는것만 기억 하심 될꺼에요 id/class 선택자 위치 표현 하고자하는 엘리먼트의 부모 엘리먼트에 주는 것이 좋다. <ul> <li><a href=“#” class=“go_cafe”>cafe</a></li> <li><a href=“#” class=“go_blog”>blog</a></li> </ul> <ul> <li class=“go_cafe”><a href=“#”>링크</a></li> <li class=“go_blog”><a href=“#”>링크</a></li> </ul> 5
시맨틱 네이밍 CSS 기본서식 의미를 가진 네이밍 사용하라. .bluetext .redborder .d_11_666 .b .notice_list .gnb .more .footer 앞서 유스크리에이트 미디어존 콘텐츠 설명시 역할에 대해 이야기 드렸었죠 선택자 네이밍시 역할에 맞게 이름을 지어주는 것이 중요합니다. bluetxt, redborder 와 같이 디자인 표현요소는 변경되더라도 그 역할은 변경되지 않기 때문이죠. 이름을 지을때는 왜 필요한가를 생각해야 한다. 어떻게 보이는가를 생각해서 이름을 지으면 곤란할 수 있다. 생김새야 언제든지 바뀔 수 있지만, 이유는 항상 그대로 있기 때문이다. 6
CSS General color: #ff00ff, #f0f, brown, rgb(100%,0%,100%); cursor: pointer, crosshair, text, wait, default, help, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, auto; display: block, inline, list-item, none ; visibility: visible, hidden, inherit; overflow: visible, hidden ,scroll ,auto; <p style=“color:#333333;”> 본문 </p> 7
CSS General color: #ff00ff, #f0f, brown, rgb(100%,0%,100%); cursor: pointer, crosshair, text, wait, default, help, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, auto; display: block, inline, list-item, none ; visibility: visible, hidden, inherit; overflow: visible, hidden ,scroll ,auto; <p style=“color:#333333;”> 본문 </p> 8
Named colors aqua fuchsia lime olive red white black gray CSS Named colors aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal
RGB rgb(0, 0, 0) rgb(255, 255, 255) rgb(0%, 0%, 0%) CSS RGB rgb(0, 0, 0) rgb(255, 255, 255) rgb(0%, 0%, 0%) rgb(100%, 100%, 100%)
16진수 RGB color: #FF0033; color: #F03; 웹 안전 색상: 00, 33, 66, 99, CC, FF CSS 16진수 RGB color: #FF0033; color: #F03; 웹 안전 색상: 00, 33, 66, 99, CC, FF color: #F03; color: #693; color: #F0F;
Positioning Float: left, right, none ; CSS Positioning Float: left, right, none ; clear: both, left, right, none ; position: static, relative, absolute ; left, top, right, bottom: auto, length values (pt, in, cm, px) ; z-index: auto, integer (higher numbers on top); <div style=“position:relative;”> <img src=“images.gif” width=“100” height=“100” alt=“이미지” > 본문 내용과 이미지의 포지셔닝 방법에 대해서 알아보겠습니다. 먼저 이미지에 float:left 방식으로 스타일을 넣어보고, 다음엔 position:absolute 방식으로 스타일을 적용해보고 어떤 차이가 있는지 확인 해보세요~ </div> 12
Positioning Float: left, right, none ; CSS Positioning Float: left, right, none ; clear: both, left, right, none ; position: static, relative, absolute ; left, top, right, bottom: auto, length values (pt, in, cm, px) ; z-index: auto, integer (higher numbers on top); <div style=“position:relative;”> <img src=“images.gif” width=“100” height=“100” alt=“이미지” > 본문 내용과 이미지의 포지셔닝 방법에 대해서 알아보겠습니다. 먼저 이미지에 float:left 방식으로 스타일을 넣어보고, 다음엔 position:absolute 방식으로 스타일을 적용해보고 어떤 차이가 있는지 확인 해보세요~ </div> 13
CSS positioning 실습
position사용 - relative가 있을 때와 없을 때 float사용 - 기본 레이아웃 CSS position사용 - relative가 있을 때와 없을 때 float사용 - 기본 레이아웃 - 02_blogLayout.html사용
CSS CSS < 웹 표준화 Font font-style: italics, oblique, normal; font-variant: small-caps, normal; font-weight: bold, normal, lighter, bolder, integer (100-900) ; font-size: xx-small, x-small, small, medium, large, x-large, xx-large, size(length: px); font-family: Specific font(s) to be used = font: font-style | font-variant | font-weight | font-size | line-height | font-family; - 순서 유지 <span style=“font-weight:bold; font-size:12px;”>글자</span> 16
CSS CSS < 웹 표준화 Font font-style: italics, oblique, normal; font-variant: small-caps, normal; font-weight: bold, normal, lighter, bolder, integer (100-900) ; font-size: xx-small, x-small, small, medium, large, x-large, xx-large, size(length: px); font-family: Specific font(s) to be used = font: font-style | font-variant | font-weight | font-size | line-height | font-family; - 순서 유지 <span style=“font-weight:bold; font-size:12px;”>글자</span> <span style=“font:normal 12px '굴림', gulim; ”>글자</span> 17
CSS font 단축속성
font-family: arial, sans-serif; CSS font-size: 12px; font-weight: bold; font-family: arial, sans-serif; font: bold 12px arial, sans-serif; font-size와 font-family는 필수 나머지는 생략되면 normal로 대체
font-family: arial, sans-serif ; } CSS h3 { font-size: 12px; font-weight: bold; font-family: arial, sans-serif ; } h3 { font: 12px bold dotum, sans-serif ; } - 순서 h3 { font: bold dotum, sans-serif } - 크기 빠짐 h3 { font: ‘12px’ ‘bold’ ‘dotum’, ‘sans-serif’ } - 인용부호 h3 { font: bold, 12px, dotum, sans-serif ; } - 쉼표사용 h3 { font: bold 12px 돋움, sans-serif ; } - 한글 가능, 정상 h3 { font: 12px 돋움, sans-serif ; } - 정상표기
CSS font 실습
기본폰트: ‘12px, normal, dotum체’로 설정’ h1: ‘16px, bold, dotum체’ CSS 회원가입_예제.html에서 기본폰트: ‘12px, normal, dotum체’로 설정’ h1: ‘16px, bold, dotum체’ h2: ‘12px, bold, dotum체’ th: bold 적절한 진한 색상 td: normal 적절한 덜 진한 색상
CSS Text letter-spacing: normal, length values(em, px, in, cm, mm, pt, pc); word-spacing: normal, length values(em, px, in, cm, mm, pt, pc); line-height: normal, length values(em, px, in, cm, mm, pt, pc, %); text-align: left, center, right, justify; text-decoration: blink, line-through, none, overline, underline; text-indent: length values(em, px, in, cm, mm, pt, pc, %); text-transform: none, capitalize, lowercase, uppercase; vertical-align: baseline, sub, super, top, middle, bottom, text-top, text-bottom, length values(%); <strong style=“letter-spacing:-1px;”>강조글자</strong> 23
CSS Text letter-spacing: normal, length values(em, px, in, cm, mm, pt, pc); word-spacing: normal, length values(em, px, in, cm, mm, pt, pc); line-height: normal, length values(em, px, in, cm, mm, pt, pc, %); text-align: left, center, right, justify; text-decoration: blink, line-through, none, overline, underline; text-indent: length values(em, px, in, cm, mm, pt, pc, %); text-transform: none, capitalize, lowercase, uppercase; vertical-align: baseline, sub, super, top, middle, bottom, text-top, text-bottom, length values(%); <strong style=“letter-spacing:-1px;”>강조글자</strong> 24
CSS Box Model 25
CSS Box Model margin-top, margin-bottom, margin-left, margin-right: length values(em, px, in, cm, mm, pt, pc, %), auto; = margin: length values(em, px, in, cm, mm, pt, pc, %), auto; padding-top, padding-bottom, padding-left, padding-right: length values(em, px, in, cm, mm, pt, pc, %), auto; = padding: length values(em, px, in, cm, mm, pt, pc, %), auto; border-width: thin, medium, thick, length values(em, px, in, cm, mm, pt, pc); border-style: dashed, dotted, double, groove, inset; outset, ridge, solid, none; border-color: #FF00FF, #F0F, brown, rgb(100%,0%,100%); - Color of the border = border-top, border-bottom, border-left, border-right, border: border-width | border-style | border-color ; width,height: auto, length values (%, px); <div style=“width:100px;padding:10px 0;border:1px solid red;”>…내용…</div> 26
CSS Box Model margin-top, margin-bottom, margin-left, margin-right: length values(em, px, in, cm, mm, pt, pc, %), auto; = margin: length values(em, px, in, cm, mm, pt, pc, %), auto; padding-top, padding-bottom, padding-left, padding-right: length values(em, px, in, cm, mm, pt, pc, %), auto; = padding: length values(em, px, in, cm, mm, pt, pc, %), auto; border-width: thin, medium, thick, length values(em, px, in, cm, mm, pt, pc); border-style: dashed, dotted, double, groove, inset; outset, ridge, solid, none; border-color: #FF00FF, #F0F, brown, rgb(100%,0%,100%); - Color of the border = border-top, border-bottom, border-left, border-right, border: border-width | border-style | border-color ; width,height: auto, length values (%, px); <div style=“width:100px;padding:10px 0;border:1px solid red;”>…내용…</div> 27
CSS Box model 단축속성
padding-left: 2px; padding-bottom: 5px; padding: 0 0 5px 2px; CSS padding-left: 2px; padding-bottom: 5px; padding: 0 0 5px 2px; 0은 px이나 em과 같은 단위를 사용하지 않는다. 단축속성의 순서는 top부터 시계방향이다.
padding-top: 2px; padding-right: 0; padding-bottom: 4px; CSS padding-top: 2px; padding-right: 0; padding-bottom: 4px; padding-left: 0; padding: 2px 0 4px 0; padding: 2px 0 4px; 상하나 좌우가 같은 숫자인 경우 생략할 수 있다.
CSS border 단축속성
border-top-style: solid; border-left-width: 1px; CSS border-top-style: solid; border-left-width: 1px; border-bottom-color: #000; border-left: 1px solid #000; border: 1px solid #F03;
CSS 길이 단위
CSS 절대 단위 in, cm, mm, pt, pc
상대 단위 em: 주어진 font-size = 1em ex: 사용폰트의 소문자 x 높이 CSS 상대 단위 em: 주어진 font-size = 1em ex: 사용폰트의 소문자 x 높이 px: 모니터를 보여주는 픽셀의 크기 기준
CSS Box model 실습
회원가입_예제.html에서 전체를 감싸는 너비 800px, 1px 검은색 border로 div 전체 좌측 정렬, 상단정렬 CSS 회원가입_예제.html에서 전체를 감싸는 너비 800px, 1px 검은색 border로 div 전체 좌측 정렬, 상단정렬 h1: 가운데 정렬, 위아래 각 10px 공간 h2: 위 5px 아래 3px th: 우측 정렬, 위 3px 우 5px td: 위 3px 좌 5px 하단 저장 버튼 가운데 정렬, 위 20, 아래 15 모든 input text에 border 1px 파란계통색 강조에 주황계통색
CSS CSS < 웹 표준화 Background background-color: transparent, #ff00f, #f0f, brown, rgb(100%,0%,100%); background-image: url(../img.gif); background-repeat: repeat, no-repeat, repeat-x, repeat-y; background-attachment: scroll, fixed; background-position: (x y), top/center/bottom, left/center/right; = background: background-color | background-image | background-repeat | background-attachment | background-position; <p style=“background:#fefefe url(../img.gif) no-repeat left center;”>…내용…</p> 38
CSS CSS < 웹 표준화 Background background-color: transparent, #ff00f, #f0f, brown, rgb(100%,0%,100%); background-image: url(../img.gif); background-repeat: repeat, no-repeat, repeat-x, repeat-y; background-attachment: scroll, fixed; background-position: (x y), top/center/bottom, left/center/right; = background: background-color | background-image | background-repeat | background-attachment | background-position; <p style=“background:#fefefe url(../img.gif) no-repeat left center;”>…내용…</p> 39 39
CSS CSS < 웹 표준화 Background background-color: transparent, #ff00f, #f0f, brown, rgb(100%,0%,100%); background-image: url(../img.gif); background-repeat: repeat, no-repeat, repeat-x, repeat-y; background-attachment: scroll, fixed; background-position: (x y), top/center/bottom, left/center/right; = background: background-color | background-image | background-repeat | background-attachment | background-position; <p style=“background:#fefefe url(../img.gif) no-repeat left center;”>…내용…</p> 40 40
CSS Background 단축속성
background-image: url(image.gif); background-repeat: no-repeat; CSS background-image: url(image.gif); background-repeat: no-repeat; background-color: #FFF; background-position: center top; background: #FFF url(image.gif) no-repeat center top; 속성들의 순서는 상관없으나 position의 두 값은 함께 사용
List list-style-type: list-style-position: inside, outside; CSS CSS < 웹 표준화 List list-style-type: (ul) decimal, lower-roman, upper-roman, lower-alpha, upper-alpha; (ol) disc, circle, square, none; list-style-position: inside, outside; list-style-image: URL, none; - Image to be used as the bullet in a list = list-style: list-style-type | list-style-position | list-style-image; 43 43
CSS 우선순위
ilnine선언: style=“font-size: 12px;” CSS !important 선언 ilnine선언: style=“font-size: 12px;” <style type=“text/css”>, <link rel=“” /> 문서상에서 뒤에 있는 선언
CSS 구체화 수
< ! important < 구체화 수가 같을 경우 나중에 선언 된 것이 지정 CSS 우선순위 CSS < 웹 표준화 Casading 구체화 수 Default css < 전체선택자 * ( = 0) < 요소 (= 1) < .class (= 10) < #id (= 100) < ! important < 구체화 수가 같을 경우 나중에 선언 된 것이 지정 LI {...} /* a=0 b=0 c=1 -> 구체화 수 = 1 */ UL LI {...} /* a=0 b=0 c=2 -> 구체화 수 = 2 */ UL OL LI {...} /* a=0 b=0 c=3 -> 구체화 수 = 3 */ LI.red {...} /* a=0 b=1 c=1 -> 구체화 수 = 11 */ UL OL LI.red {...} /* a=0 b=1 c=3 -> 구체화 수 = 13 */ #x34y {...} /* a=1 b=0 c=0 -> 구체화 수 = 100 */ Casading 우선순위다음과 같습니다. 나중에 선언했는데 적용이 안된다고 하면 바로 우선순위가 낮아서 그런겁니다 예를 보시면 요소 하나는 1 ... 아이디는 100 정도를 가져서 우선순위가 높습니다. 기존에 사용했던 구체화 수보다 높게 적용하시면 되는거죠 47 47
CSS List 실습 최근방명록.html
CSS 실습
CSS 감사합니다.