* CSS Tutorial ( 기초 강좌 )
CSS Introduction
What is CSS?
- CSS는 Cascading Style Sheets의 약자.
- HTML Element 의 display를 담당
- HTML 4.0 부터 도입
- External Style Sheets 가져다 쓸 수 있음. ( css 파일 )
Styles Solved a Big Problem
- 큰 규모의 웹 페이지를 만드는 경우 같은 정보( font size, family 등 ) 를 모든 페이지에 기입해줘야 하는
수고 발생. CSS 가 솔루션으로 등장.
CSS Syntax
CSS Syntax
- selector{ property:value; property:value; … }
- selector 는 html tag element, class, id 등 정의.
CSS Comments
- /* */ 사용
CSS Id and Class
The id and class Selectors
- Selector에는 HTML element 뿐만 아니라 "id" 와 "class" 도 정의 가능.
The id Selector
- 특정 id를 가진 element에만 정의된다. 보통 1개의 element이다.
- id selector #과 함께 정의한다.
# id
{
text-align:center;
color:red;
}
The class Selector
- element group 에 적용된다. 보통 여러개의 elements 이다.
- .으로 시작한다.
.cetner{
text-align:center;
}
CSS How To...
Three Ways to Insert CSS
1. External style Sheet
2. Internal style Sheet
3. Inline style.
External Style Sheet
- <link rel="stylesheet" type="text/css" href="mystyle.css"/>
- property value unit 사이에 스페이스를 넣지 말아야 한다. ( 20px (o) / 20 px (x) )
Internal Style Sheet
- <style type="text/css">
// declarations
</style>
Inline Styles
- <p style="color:sienna;">Test</p>
Multiple Style Sheets
- 여러개의 style sheet 가 중복되는 경우 더 구체적인 style 이 적용된다. ( 예를 들어 external에서 test라는 id로 2개의 property에 대해서만 정의하고 internal 에서 test라는 id로 앞서 정의한 2개 property에 이어 1개 더 정의하면 test라는 최종 스타일은 3개가 된다. ) 이때 원칙은 상속이 적용된다. ( external < internal < inline )
Multiple Styles Will Cascade Into One.
- multiple style 이 있을 때 priority 는..
1. inline
2. internal
3. external
4. browser default
- 만약 external style sheet link 가 internal style sheet 정의 뒤에 온다면 priority 가 바뀐다. html 은 순차적 실행이라는 사실을 명심..
CSS Background
Background Color
- background-color:#ff0000 or rgb(255,0,0) or red
- CSS Legal Color Values
Background Image
- background-image:url('paper.gif');
Background Image - Repeat Horizontally or Vertically
- background-image:url('gradient2.png');
background-repeat:repeat-x;
Background Image - Set position and no-repeat
- background-repeat:no-repeat
- background-position:right top;
Background - Shorthand property
- style 은 축약형으로도 쓸 수 있다.
- { background:#ffffff url('img_trr.png') no-repeat right top; }
- 축약형 기술 순서는 color, image, repeat, attachment, position 이다.
( 중간에 기술하고 싶지 않은 property 들은 생략할 수 있다. order 만 잘 지켜지면 된다. )
All CSS Background Properties
- background
- background-attachment ( fixed or scroll )
- background-color
- background-image
- background-position
- background-repeat
CSS Text
Text Color
- color property 를 define 하면 background-color property 도 변경하는 것이 좋다. ( text 가 잘 보이도록.. )
- color:blue or #00ff00 or rgb( 0, 0, 255 );
Text Alignment
- {text-align:left or right or justify;}
- justify 는 line 을 늘려서 모든 라인이 같은 width 를 갖도록 한다. ( 왼쪽과 오른쪽 글 끝 라인이 같다. - 워드프로세서 생각 하면 쉽다. )
Text Decoration
- 보통 link 의 underline 을 제거하는데 사용된다.
- {text-decoration:none or overline or line-through or underline or blink;}
- link 가 아닌 것에 underline 을 넣는 것은 좋지 않다.
Text Indentation
- {text-indent:50px;}
All CSS Text Properties
- color
- direction : writing direction 설정
- letter-spacing
- line-height : 문단 간격
- text-align
- text-decoration
- text-indent
- text-shadow
- text-transform : capitalization
- unicode-bidi
- vertical-align
- white-space
- word-spacing
CSS Font
CSS Font Families
- 두가지 타입의 font family 가 있다.
1. generic family : 비슷한 look 을 가진 font family group - Serif, Sans-serif, Monospace
2. font family : 특정한 font family
Font Family
- font-family 는 "fallback"을 위해 여러 특정 폰트 이름들을 assign 한다. 만약 브라우저가 특정 폰트를 지원하지 못한다면, 해당 폰트에서 지정하는 다른 특정 폰트들을 사용한다. 차우선 폰트를 선택해보고, 그래도 안 되면 generic family 에서 선택한다.
- 만약 font family 의 이름이 한 단어 이상이라면 반드시 quotation mark 안에 들어가야 한다. ( "Times New Roman" )
- {font-family:"Times New Roman", Times, serif;}
- Web safe font combinations
Font Style
- {font-style:normal or italic or oblique;}
- oblique 은 italic 과 매우 비슷
Font Size
- font size 만으로 heading 과 paragraph 를 구분하는 방법은 좋지 않다. <h1> <p> 등의 적절한 태그를 사용하는 것이 권장된다.
- absolute size 와 relative size 를 지정할 수 있다.
- absolute size 는 특정 사이즈로 설정하고, 모든 브라우저에서 텍스트 사이즈를 변경하지 못하게 한다. 좋은 방법은 아니나 물리적 사이즈를 유지하고플 때 사용한다.
- relative size 는 주변 element 에 비례한 사이즈를 설정하며, 유저가 브라우저를 통해 변경할 수 있다.
- 값을 설정하지 않으면 기본값은 16px ( 1em ) 이다. ( p 기준 )
Set Font Size With Pixels
- {font-size:40px;}
- text size 는 모든 브라우저의 줌 툴을 이용해서 조정될 수 있다.
Set Font Size With Em
- 오래된 브라우저 문제때문에 많은 개발자들이 pixel 대신 em 을 사용하곤 한다.
- em 은 W3C에서 권장하는 size unit 이다.
- 1em 은 현재 font size 와 동일하다. 기본 브라우저 text size는 16px 이다.
- {font-size:2.5em;}
- 대부분의 브라우저에서 작동을 잘 하지만, 확대와 축소의 비율이 브라우저마다 조금씩 다를 수 있다.
Use a Combination of Percent and Em
- 모든 브라우저에서 정확히 작동하기 위해서는 percent 로 나타내는 것이 좋다.
- {font-size:100%}
All CSS Font Properties
- font : all declaration at once
- font-family
- font-size
- font-style
- font-variant : text 가 small-caps( lower case 가 작은 대문자로 변경됨 ) font 로 표시되어야 하는지 여부
- font-weight : font의 무게 ( bold )
CSS Links
Styling Links
- 4개의 링크 스테이트는
1. a:link : normal unvisited link
2. a:visited
3. a:hover : mouseover case
4. a:active : click 된 순간
- a:link{color:#ff0000;}
- a:hover 는 반드시 a:link와 a:visited 다음에 와야 한다. ( 정의 순서 )
- a:active는 반드시 a:hover 다음에 와야 한다. ( 정의 순서 )
Text Decoration
- underline 제거를 위해 보통 사용된다.
Background Color
- link 를 강조하기 위해 보통 사용된다.
CSS Lists
List
- 2가지 타입의 리스트가 있다.
1. unordered lists
2. ordered lists ( 숫자나 문자로 순서 정의 )
Different List Item Markers
- ul{list-style-type:circle;}
- ol{list-style-type:upper-roman;}
An Image as The List Item Marker
- ul{list-style-image:url('sqpurple.gif');
- list 에 image 적용하는 것은 모든 브라우저에 똑같이 적용되지는 않는다.
Crossbrowser Solution
- 아래 코드를 사용하면 모든 브라우저에 똑같은 view 를 제공할 수 있다.
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
List-Shorthand Property
- 한줄에 명시할 수 있다.
- ul{list-style: square url("sqpurple.gif");}
- shorthand 사용시 순서는 list-style-type, list-style-position, list-style-image 순서이다.
All CSS List Properties
- list-style
- list-style-image
- list-style-position
- list-style-type
CSS Tables
Table Borders
- table, th, td{border:1px sold black;}
Collapse Borders
- table{border-collapse:collapse;}
table, th, td{ border: 1px solid black; }
- border-collapse는 border들이 충돌할 경우 하나로 합칠것인지 여러개로 둘 것인지를 결정하는 속성 ( Table 에 2줄 border 가 생길 경우에, 이를 원치 않는다면 collapse 를 설정해 주는 것이 좋다. )
Table Width and Height
- table{width:100%;}
th{height:50px;}
Table Text Alignment
- td{text-align:right; vertical-align:bottom;}
Table Padding
- td{padding:15px;}
Table Color
- table, td, th{border:1px solid green;}
th{background-color:green; color:white;}
CSS Box Model
The CSS Box Model
- 모든 HTML element 들은 box 로 취급될 수 있다. CSS 에서의 box model은 design 과 layout을 이야기할 때 이야기된다.
- CSS box 는 HTML element를 감싸고 있으며, margin, borders, padding, actual content 로 구성되어 있다.
Width and Height of an Element
- content area 의 width와 height만 설정한다. 나머지 box property는 margin 과 padding으로 조정한다.
- Total element width = width + left padding + right padding + left border + right border + left margin + right margin
- Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Browsers Compatibility Issue
- IE8 이전의 브라우저들은 DOCTYPE이 명시되어 있지 않으면 padding과 border를 width에 포함시켰다. 이를 해결하기 위해서는 최상단에 다음과 같은 DOCTYPE 정의 코드를 넣어주어야 한다.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS Border
Border Style
- none
- dotted
- dashed
- solid
- double
- groove : 3D grooved border, border-color에 영향을 받는다.
- ridge
- inset
- outset
Border Width
- border-width 는 border-style 없이 혼자 작동하지는 않는다. 함께 써 주어야 한다.
- p{border-style:sold; border-width:5px;}
Border Color
- border-color 역시 border-style 없이 혼자 작동하지는 않는다. 함께 써 주어야 한다.
- p{border-style:solid; border-color:red;}
Border - Individual Sides
- p{border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;}
- p{border-style:dotted solid;} // 한줄로 쓰기
- 4개의 argu는 각각 top, right, bottom left
- 3개의 argu는 각각 top, right & left, bottom
- 2개의 argu는 각각 top & bottom, left & right
- 1개의 argu는 4방향 모두 적용
Border - Shorthand property
- {border:5px solid red;}
- shorthand 순서는 border-width, border-style( required ), border-color
All CSS Border Properties
- border
- border-bottom
- border-bottom-color
- border-bottom-style
- border-bottom-width
- border-color
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-style
- border-top-width
- border-width
CSS Outlines
CSS Outline
- outline 은 border 밖의 최종 element 를 감싸는 영역을 말한다. outline 은 element dimension 에 포함되지 않고, element의 총 넓이와 높이를 계산하는데도 쓰이지 않는다.
All CSS Outline Properties
- outline : one declaration
- outline-color
- outline-style
- outline-width
CSS Margin
Margin
- border 바깥쪽의 공백영역
Possible Values
- auto : browser 가 계산
- length : px, pt, cm 등으로 계산 기본은 0px
- % : element를 가진 width를 기준으로 percent 계산
- inherit : parent element 상속
Margin - Individual Sides
- margin-top
- margin-bottom
- margin-right
- margin-left
Margin - Shorthand property
- {margin:100px 50px}
- border와 같은 규칙 적용
All CSS Margin Properties
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
CSS Padding
Padding
- content 주변의 padding을 조절한다.
- padding 은 background color에 영향을 받는다.
Padding Values
- length, %
Padding - Individual sides
- padding-top
- padding-bottom
- padding-right
- padding-left
Padding - Shorthand property
- {padding:25px 50px;}
- shorthand 규칙은 border와 같음.
All CSS Padding Properties
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
CSS Grouping and Nesting Selectors
Grouping Selectors
- h1, h2, p{ color:green; }
Nesting Selectors
- p{ … }
.marked{ … }
p.marked{ … }
CSS Dimension
All CSS Dimension Properties
- height
- max-height
- max-width
- min-height
- min-width
- width
CSS Display and Visibility
Hiding an Element - display:none or visibility:hidden
CSS Display - Block and Inline Element
- block element 는 full width 를 가지고 line break 를 하는 element들로 예를 들면 <h1> <p> <div> 들이 있다.
- inline element 는 필요한 만큼의 width 만 갖고, line break 를 하지 않는다. 예를 들면 <span> 이나 <a>
Changing How an Element is Displayed
- li{display:inline;}
- span{display:block;}
- display 속성은 외형만 바꾸지 element 자체의 속성을 바꾸지는 못한다. 예를 들어 <span> 의 display 속성을 block으로 했다고 해서 child 를 가질 수 있는 것은 아니다
CSS Positioning
Positioning
- positioning은 위치는 물론이고, element간의 앞뒤, element의 크기가 클 경우의 액션 등을 정의할 수 있다.
Static Positioning
- 기본으로 static 배치된다. normal page flow에 따라 배치되는 것을 말한다. static으로 배치된 element들은 top, bottom, left, right property에 영향을 받지 않는다.
Fixed Positioning
- p{position:fixed;} // scroll 되어도 위치를 고수한다.
- IE7 과 IE8은 !DOCTYPE이 명시되어 있어야만 fixed positioin 을 지원한다.
- fixed position은 normal flow 에서 제외되고, 모든 element 를 overlap 한다.
Relative Positioning
- {position:relative; left:-20px;} // normal position 기준
Absolute Positioning
- parent 좌표에 대한 절대좌표.
Overlapping Elements
- position 값이 normal 이 아닌 경우 element끼리 overlap 될 수 있다.
- z-index 값을 조정할 수 있다.
- 값이 클수록 eye pos 에 가깝다.
- 두 element 의 z-index 값이 같다면 HTML code순서가 나중에 오는 것이 overlap 한다.
All CSS Positioning Properties
- bottom : bottom margin edge, auto, length, % inherit
- clip : shape, auto, inherit
- cursor : url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
- left
- overflow : auto, hidden, scroll, visible, inherit
- position : absolute, fixed, relative, static, inherit
- right
- top
- z-index : number, auto, inherit
CSS Float
What is CSS Float?
- element 들이 왼쪽, 오른쪽으로 push 되면서 다른 element들이 그 자리를 차지하도록 할 수 있다.
- image에서 주로 쓰인다.
How Elements Float
- element들은 가로방향으로 float 될 수 있다. up down 은 안 된다.
- {float:right;}
Floating Elements Next to Each Other
- floating element들을 여러개 사용할 경우, 공간이 있는 경우 차례차례 붙는다.
- {float:left; width:110px; height:90px; margin:5px;}
Turning off Float - Using Clear
- {clear:both}; // 어느 방향으로 float를 막을지를 결정
All CSS Float Properties
- clear : left, right, both, none, inherit
- float : left, right, none, inherit
CSS Horizontal Align
Center Aligning Using the margin Property
- block element들은 left, right margin을 auto로 설정함으로서 center align을 할 수 있다.
- 이 사항은 IE8이하 버전에서는 !DOCTYPE이 명시되기 전에는 작동하지 않는다.
- width가 100%인 경우에는 align 이 작용하지 않는다.
Left and Right Aligning Using the position Property
- {position:absolute; right:0px;} // right align
Crossbrowser Compatibility Issues
- IE8 이하 버전에서는 !DOCTYPE을 명시하지 않으면 다른 브라우저들과 view 가 다른 경우가 생긴다. 반드시 !DOCTYPE을 넣도록 한다.
- 브라우저마다의 뷰 차이를 바꾸려면 body의 마진과 패딩을 0으로 설정하고 시작하는 것이 좋다
Left and Right Aligning Using the float property
- {float:right;}
CSS Pseudo-classes
Syntax
selector:pseudo-class{property:value;}
selector.class:pseudo-class{property:value;}
Anchor Pseudo-classes
a:link
a:visited
a:hover
a:active
CSS - The :first-child Pseudo-class
Match the fist <i> element in all <p> elements
- p > i:first-child{ color:blue; }
CSS - The :lang Pseudo-class
- q:lang(no){ quotes: "~" "~";} // language, no 는 국가코드
All CSS Pseudo Classes/Elements
- :link
- :visited
- :active
- :hover
- :focus
- :first-letter
- :first-line
- :first-child
- :before
- :after
- :lang(it)
CSS Navigation Bar
Navigation Bar = List
Vertical Navigation Bar
- a의 width 를 명시해주는 것이 좋다.
Horizontal Navigation Bar
- inline 혹은 floating 방법으로 구현할 수 있다.
- 같은 사이즈로 만드록 싶다면 floating 방법이 좋다.
Inline List Items
Floating List Items
CSS Image Gallery
Image Gallery
CSS Image Opacity / Transparency
- opacity 속성은 CSS3의 권장되는 속성 항목이다.
Example 1 - Creating a Transparent Image
- {opacity:0.4;filter:alpha(opacity=40);} // filter는 IE8 이하버전을 위한 코드
Example 2 - Image Transparency - Hover Effect
Example 3 - Text in Transparent Box
CSS Image Sprites
Image Sprites
- Image Sprite 는 여러개의 이미지를 하나의 이미지로 모아 놓은 것을 말한다.
- 웹 페이지에 그림이 많이 있으면 서버에 여러번 요청하고 따라서 시간이 오래 걸린다.
- image sprite를 이용하면 서버 요청 횟수를 줄일 수 있어 속도 향상에 기여할 수 있다.
Image Sprites - Simple Example
- 여러개의 이미지를 합친 한장의 이미지를 다운받아 부분을 나누어 보여준다.
- img.home{width:46px; height:44px; background:url(img_navsprites.gif) 0 0;} // 0, 0 은 이미지의 위치
CSS Media Types
Media Types
- print와 screen에서의 font size 와 font family 의 최적화정도가 다르다. 스크린에서 더 큰 사이즈, sans-serif서체를 사용해야 보기 쉽고, 프린트 아웃된 종이에서는 조금 작은 사이즈, serif 체가 보기 쉽다.
The @media Rule
- @media 는 다른 미디어에 다른 style 을 적용할 수 있게 해준다.
- @media screen{ p{font-family:verdana;} }
@media print{ p{font-family:times;} }
@media screen, print{ p.test{ font-weight:bold; } }
Different Media Types
- media type 은 not case-sensitive
- all
- aural ( speech and sound synthesizer )
- braille ( 점자 )
- embossed ( 점자 프린터 )
- handheld ( handheld device )
- print ( 프린터 )
- projection ( 프로젝터 )
- screen( 컴퓨터 스크린 )
- tty ( terminal 류 )
- tv ( tv type device )
CSS Attributes Selectors
Style HTML Elements With Specific Attributes
- class 나 id 가 아닌 attribute를 기준으로도 style 적용이 가능하다.
- IE6 이하는 지원되지 않는다.
Attribute Selector
- [title]{color:blue;} // title 이라는 속성이 있는 것들은 색상 blue
Attributes and Value Selector
- [title=Gamza]{border:5px solid green;}
Attributes and Value Selector - Multiple Values
- [title~=hello]{ color:blue; } // contains hello in the value ( space separate ok )
- [lang|=en] { color:blue; } // en으로 시작하는 경우 - ( separate ok )
Styling Forms
- input[type="text"]{ … }
- input[type="button"]{ … }
Examples & References
'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [SDK] PhoneGap 이란? ( from Nitobi ) (0) | 2012.10.29 |
|---|---|
| [SDK] Titanium 이 뭔가요? ( from Appcelerator ) (0) | 2012.10.29 |
| [Script] NPM module download 방법 (0) | 2012.10.06 |
| [HTML] HTML5 에 대해 간단히 알아보자. ( 소개 ) (0) | 2012.10.06 |
| [HTML] xhtml 이 뭔지 간단히 알아보자. (0) | 2012.10.06 |
댓글