Skip to content
- 교재 예제
- ex4-01.html
- ex4-02.html
- ex4-03.html
- ex4-04.html
- ex4-05.html
- ex4-06.html
- ex4-07.html
- ex4-08.html
- ex4-09.html
- ex4-10.html
- ex4-11.html
- ex4-12.html
- ex4-13.html
- ex4-14.html
- ex4-15.html
- ex4-16.html
- ex4-17.html
- ex4-18.html
- ex4-19.html
- ex4-20.html
- ex4-21.html
- fig4-04.html
- fig4-05.html
- fig4-06.html
- fig4-07.html
- fig4-08.html
- fig4-09.html
- fig4-10.html
- fig4-13-a.html
- fig4-13-b.html
- fig4-15.html
- fig4-22.html
- fig4-24.html
- fig4-25.html
- p-border-shorthand.html
- p-border.html
- p-left-border.html
- universalSelectorSample.html
- 참조 : http://www.tcpschool.com/css/intro
- background : 배경
- background : 모든 background 속성을 이용한 스타일을 한 줄에 설정
- background-color : 배경색 설정
- background-image : 배경 이미지 설정
- background-repeat : 설정된 배경 이미지의 반복 유무 설정
- background-position : 반복되지 않는 배경 이미지의 상대 위치 설정
- background-attachment : 배경 이미지를 스크롤과는 무관하게 해당 위치에 고정
- text : 텍스트
- color 텍스트의 색상을 설정함.
- direction 텍스트가 쓰이는 방향을 설정함.
- letter-spacing 텍스트 내에서 문자 사이의 간격을 설정함.
- word-spacing 텍스트 내에서 단어 사이의 간격을 설정함.
- text-indent 단락의 첫 줄을 들여쓰기할지 안 할지를 설정함.
- text-align 텍스트의 수평 방향 정렬을 설정함.
- text-decoration 텍스트에 여러 가지 효과를 설정하거나 제거함.
- text-transform 텍스트에 포함된 영문자에 대한 대소문자를 설정함.
- line-height 텍스트의 줄 간격을 설정함.
- text-shadow 텍스트에 그림자 효과를 설정함.
- unicode-bidi direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정함.
- vertical-align HTML 요소 내의 수직 방향 정렬을 설정함.
- white-space HTML 요소 내의 여백을 설정함.
- font : 글꼴
- font 모든 font 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
- font-family 텍스트의 글꼴 집합(font family)을 설정함.
- font-style 주로 이탤릭체를 사용하기 위해 사용함.
- font-variant 텍스트에 포함된 영문자 중 소문자만을 작은 대문자(small-caps) 글꼴로 변경시킴.
- font-weight 텍스트를 얼마나 두껍게 표현할지를 설정함.
- font-size 텍스트의 크기를 설정함.
- link : 링크
- link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다.
- visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태입니다.
- hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태입니다.
- active : 사용자가 마우스로 링크를 클릭하고 있는 상태입니다.
- focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태입니다.
- 예제
|
<style> a:link { color: olive; } a:visited { color: brown; } a:hover { color: coral; } a:active { color: khaki; } </style> |
- list : 리스트
- list-style 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
- list-style-type 리스트 요소의 마커(marker)를 설정함.
- list-style-image 리스트 요소의 마커로 사용할 이미지를 설정함.
- list-style-position 리스트 요소의 위치를 설정함.
- table : 테이블
- border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
- border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정함.
- border-spacing 테이블 요소(th, td)간의 여백을 설정함.
- caption-side 테이블의 캡션(caption)을 설정함.
- empty-cells 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함.
- table-layout 테이블에 사용되는 레이아웃 알고리즘을 설정함.
- 크기 단위 : %, em, px, cm, mm, inch 등이 있음
- 백분율 단위(%) : 170%
- 배수 단위(em) : 1.7em
- 픽셀 단위(px)
- dimension : 크기
- height 해당 HTML 요소의 높이를 설정함.
- width 해당 HTML 요소의 너비를 설정함.
- max-width 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정함.
- min-width 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정함.
- max-height 해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정함.
- min-height 해당 HTML 요소가 가질 수 있는 최소 높이(height)를 설정함.
- box model
- 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.
- 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.
- 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.
- 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.
- padding(margin은 padding과 똑같음)
- padding 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
- padding-top 윗쪽의 패딩(padding) 값을 설정함.
- padding-right 오른쪽의 패딩(padding) 값을 설정함.
- padding-bottom 아래쪽의 패딩(padding) 값을 설정함.
- padding-left 왼쪽의 패딩(padding) 값을 설정함.
- border
- border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
- border-style 테두리(border)를 다양한 모양으로 설정함.
- dotted : 테두리를 점선으로 설정함.
- dashed : 테두리를 약간 긴 점선으로 설정함.
- solid : 테두리를 실선으로 설정함.
- double : 테두리를 이중 실선으로 설정함.
- groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.
- ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.
- inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
- outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
- none : 테두리를 없앰.
- hidden : 테두리가 존재하기는 하지만 표현되지는 않음.
- border-width 테두리(border)의 너비를 설정함.
- border-color 테두리(border)의 색상을 설정함.
- border-top 테두리(border)의 top 부분 속성을 한 번에 설정함.
- border-top-style 테두리(border)의 top 부분의 스타일을 설정함.
- border-top-width 테두리(border)의 top 부분의 너비를 설정함.
- border-top-color 테두리(border)의 top 부분의 색상을 설정함.
- border-right 테두리(border)의 right 부분 속성을 한 번에 설정함.
- border-right-style 테두리(border)의 right 부분의 스타일을 설정함.
- border-right-width 테두리(border)의 right 부분의 너비를 설정함.
- border-right-color 테두리(border)의 right 부분의 색상을 설정함.
- border-bottom 테두리(border)의 bottom 부분 속성을 한 번에 설정함.
- border-bottom-style 테두리(border)의 bottom 부분의 스타일을 설정함.
- border-bottom-width 테두리(border)의 bottom 부분의 너비를 설정함.
- border-bottom-color 테두리(border)의 bottom 부분의 색상을 설정함.
- border-left 테두리(border)의 left 부분 속성을 한 번에 설정함.
- border-left-style 테두리(border)의 left 부분의 스타일을 설정함.
- border-left-width 테두리(border)의 left 부분의 너비를 설정함.
- border-left-color 테두리(border)의 left 부분의 색상을 설정함.
- outline
- outline 모든 outline 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
- outline-style 아웃라인(outline)를 다양한 모양으로 설정함.
- dotted : 아웃라인을 점선으로 설정함.
- dashed : 아웃라인을 약간 긴 점선으로 설정함.
- solid : 아웃라인을 실선으로 설정함.
- double : 아웃라인을 이중 실선으로 설정함.
- groove : 아웃라인을 3차원인 입체적인 선으로 설정하며, outline-color 속성값에 영향을 받음.
- ridge : 아웃라인을 3차원인 능선효과가 있는 선으로 설정하며, outline-color 속성값에 영향을 받음.
- inset : 3차원인 내지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받음.
- outset : 3차원인 외지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받음.
- none : 아웃라인(outline)을 없앰.
- hidden : 아웃라인(outline)이 존재하기는 하지만 표현되지는 않음.
- outline-width 아웃라인(outline)의 너비를 설정함.
- outline-color 아웃라인(outline)의 색상을 설정함.
- outline-offset 테두리(border)와 아웃라인(outline) 사이의 여백을 설정함.
- 위치
- display : block, inline, inline-block
|
<style> .inline { display: inline; } .inline-block { display: inline-block; } </style> |
- visibility : visible, hidden,l collapse
- opacity : 0.0~1.0
- position
- position HTML 요소의 위치를 결정하는 방식을 설정함.
|
<style> .static { position: static; } .relative { position: relative; } .fixed { position: fixed; } .absolute { position: absolute; } </style> |
- top 위치가 설정된 조상 요소의 위로부터의 여백을 설정함.
- right 위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정함.
- bottom 위치가 설정된 조상 요소의 아래로부터의 여백을 설정함.
- left 위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정함.
- z-index 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정함.
- clip 절대 위치(absolute position) 지정 방식으로 위치한 요소를 자름.
- cursor 표시되는 마우스 커서의 모양을 설정함.
- overflow 내용(content)의 크기가 해당 요소의 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
- overflow-x 내용(content)의 크기가 해당 요소의 수평 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
- overflow-y 내용(content)의 크기가 해당 요소의 수직 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
error: Content is protected !!