CSS CSS CSS CSS import link style import

CSS 기본서식 CSS < 웹 표준화 CSS 지정 방식 @import < link 요소 <

CSS 기본서식 선택자 {속성: 값; } 선택자 • 스타일을 적용하는 대상 유니버샬 셀렉터(Universal selector)

CSS General color: #ff 00 ff, #f 0 f, brown, rgb(100%, 100%); cursor: pointer,

CSS Named colors aqua fuchsia lime olive red white black gray maroon orange silver

CSS RGB rgb(0, 0, 0) rgb(255, 255) rgb(0%, 0%) rgb(100%, 100%)

CSS 16진수 RGB color: #FF 0033; color: #F 03; 웹 안전 색상: 00, 33,

CSS Positioning Float: left, right, none ; clear: both, left, right, none ; position:

CSS position사용 - relative가 있을 때와 없을 때 float사용 - 기본 레이아웃 - 02_blog.

CSS < 웹 표준화 Font font-style: italics, oblique, normal; font-variant: small-caps, normal; font-weight: bold,

CSS font-size: 12 px; font-weight: bold; font-family: arial, sans-serif; font: bold 12 px arial,

CSS h 3 { font-size: 12 px; font-weight: bold; font-family: arial, sans-serif ; }

CSS Text letter-spacing: normal, length values(em, px, in, cm, mm, pt, pc); word-spacing: normal,

CSS Box Model margin-top, margin-bottom, margin-left, margin-right: length values(em, px, in, cm, mm, pt,

CSS padding-top: 2 px; padding-right: 0; padding-bottom: 4 px; padding-left: 0; padding: 2 px

CSS border-top-style: solid; border-left-width: 1 px; border-bottom-color: #000; border-left: 1 px solid #000; border:

CSS < 웹 표준화 Background background-color: transparent, #ff 00 f, #f 0 f, brown,

CSS background-image: url(image. gif); background-repeat: no-repeat; background-color: #FFF; background-position: center top; background: #FFF url(image.

CSS < 웹 표준화 List list-style-type: (ul) decimal, lower-roman, upper-roman, lower-alpha, upper-alpha; (ol) disc,

CSS !important 선언 ilnine선언: style=“font-size: 12 px; ” <style type=“text/css”>, <link rel=“” /> 문서상에서

Slides: 50

Download presentation

CSS

CSS 기본서식 CSS < 웹 표준화 CSS 지정 방식 @import < link 요소 < style 속성 • @import <p style=“padding: 10 px; ”> … <head>. . @import url(“/css/base. css”); … </head> • style 요소 <head>. . <style type=“text/css”> p {padding: 10 px; } </style> … </head> ↑ 크로스 브라우징 지원과 렌더링 속도 문제 • link 요소 <link rel="stylesheet“ type="text/css" href=“base. css” />

CSS 기본서식 선택자 {속성: 값; } 선택자 • 스타일을 적용하는 대상 유니버샬 셀렉터(Universal selector) * {margin: 0; padding: 0; } • 타입 셀렉터(Type selector) p {margin: 0; padding: 0; } • 유사 셀렉터(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; } 속성 선택자에 스타일 지정 body {color: #666666; } • • General Positioning Font Text Box Background List

CSS General color: #ff 00 ff, #f 0 f, brown, rgb(100%, 100%); cursor: pointer, crosshair, text, wait, default, help, e-resize, n-resize, nwresize, w-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>

CSS Named colors aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

CSS RGB rgb(0, 0, 0) rgb(255, 255) rgb(0%, 0%) rgb(100%, 100%)

CSS 16진수 RGB color: #FF 0033; color: #F 03; 웹 안전 색상: 00, 33, 66, 99, CC, FF color: #F 03; color: #693; color: #F 0 F;

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>

CSS positioning 실습

CSS position사용 - relative가 있을 때와 없을 때 float사용 - 기본 레이아웃 - 02_blog. Layout. html사용

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, medium, large, x-large, xx-large, px); size(length: 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: 12 px; ”>글자</span>

CSS font 단축속성

CSS font-size: 12 px; font-weight: bold; font-family: arial, sans-serif; font: bold 12 px arial, sans-serif; font-size와 font-family는 필수 나머지는 생략되면 normal로 대체

CSS h 3 { font-size: 12 px; font-weight: bold; font-family: arial, sans-serif ; } h 3 { font: 12 px bold dotum, sans-serif ; } - 순서 h 3 { font: bold dotum, sans-serif } - 크기 빠짐 h 3 { font: ‘ 12 px’ ‘bold’ ‘dotum’, ‘sans-serif’ } - 인용부호 h 3 { font: bold, 12 px, dotum, sans-serif ; } - 쉼표사용 h 3 { font: bold 12 px 돋움, sans-serif ; } - 한글 가능, 정상 h 3 { font: 12 px 돋움, sans-serif ; } - 정상표기

CSS font 실습

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: -1 px; ”>강조글자</strong>

CSS Box Model

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: #FF 00 FF, #F 0 F, brown, rgb(100%, 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: 100 px; padding: 10 px 0; border: 1 px solid red; ”>…내용…</div>

CSS Box model 단축속성

CSS padding-top: 2 px; padding-right: 0; padding-bottom: 4 px; padding-left: 0; padding: 2 px 0 4 px; 상하나 좌우가 같은 숫자인 경우 생략할 수 있다.

CSS border 단축속성

CSS border-top-style: solid; border-left-width: 1 px; border-bottom-color: #000; border-left: 1 px solid #000; border: 1 px solid #F 03;

CSS 절대 단위 in, cm, mm, pt, pc

CSS Box model 실습

CSS < 웹 표준화 Background background-color: transparent, #ff 00 f, #f 0 f, brown, rgb(100%, 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>

CSS Background 단축속성

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의 두 값은 함께 사용

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;

CSS !important 선언 ilnine선언: style=“font-size: 12 px; ” <style type=“text/css”>, <link rel=“” /> 문서상에서 뒤에 있는 선언