CSS에 대하여 2편 : 색, 테두리, 표, 여백

이번에도 '이지스퍼블리싱'에서 출판된 고경희님의 'HTML5+CSS3 웹 표준의 정석'을 참조하며 공부하고 적었습니다. 




CSS 2편


8.색상 표기법

1)16진수 컬러코드 : #기호 다음에 6자리의 16진수로 된 색상코드 형태


2)rgb 표기 : rgb(red값, green값, blue값)

*rgb색상표를 이용한 컬러코드 찾기 : http://html-color-codes.info/korean/, http://colorpicker.com


3)색상 이름 표기 : 16가지 기본 색상을 포함한 216가지의 색상은 기본 이름으로 표시 가능

*16가지의 기본 색상 : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow


9. 배경 색과 배경 이미지

ⓐbackground-color 속성 => 배경 색 지정

기본형 : {background-color:색상값;}


ⓑbackground-clip 속성 => 배경 적용 범위 조절

기본형 : {background-clip:속성값;}

<가능한 속성유형>

-border-box : 박스 가장 외곽인 테두리까지 적용.

-padding-box : 박스에서 테두리를 제외한 패딩(공백)부분까지 부분까지 적용.

-content box : 박스에서 콘텐츠 내용 부분에만 적용.


ⓒbackground-image 속성 => 배경 이미지 넣기

기본형 : {background-image:이미지경로;}

*여러개를 사용할 수 있으며, 그 경우엔 첫번째부터 순서대로 표현한다.


ⓓbackground-repeat 속성 => 배경 이미지 반복 방법 지정

기본형 : {background-repeat:속성값;}

<가능한 속성유형>

-repeat : 브라우저 화면에 가득차게 배경 이미지를 가로-세로로 반복.

-repeat-x : 브라우저 창 너비와 같아질 때까지 배경 이미지 가로로 반복.

-repeat-y : 브라우저 창 높이와 같아질 때까지 배경 이미지 세로로 반복.

-no-repeat : 반복X.


ⓓbackground-size 속성 => 배경 이미지 크기 조절

기본형 : {background-size:속성값;}

<가능한 속성유형>

-auto : 원래 배경 이미지 크기

-contain : 요소(창)안에 배경 이미지가 다 들어오도록 이미지를 확대/축소

-cover : 요소(창)를 모두 배경 이미지로 덮어버리도록 이미지를 확대/축소

-크기 값 : 너비와 높이를 px단위로 지정. 너비 값만 지정하면 축소/확대 비율을 자동으로 계산해 높이가 설정됨.

-백분율 : 화면에 차지할 배경 이미지의 백분율 값


ⓔbackground-position 속성 => 배경 이미지 위치 조절

기본형 : {background-position:속성값;}

<가능한 속성유형>

-center : 중앙

-right : 우측

-left : 좌측

-top : 창 맨 위측

-bottom : 창 맨 아래측

-백분율 : 화면에 위치할 부분에 대한 백분율 값

-길이 값(px) : 화면에 위치할 좌표 값


ⓕbackground-origin 속성 => 배경 이미지 배치 기준 조절

기본형 : {background-origin:속성값;}

<가능한 속성유형>

-border-box : 박스 가장 외곽인 테두리 기준.

-padding-box : 박스에서 테두리를 뺀 패딩(공백)이 기준.

-content-box : 박스 안쪽 콘텐츠 내용 부분 기준.


ⓖbackground-attachment 속성 => 배경 이미지 고정

기본형 : {background-attachment:속성값;}

<가능한 속성유형>

-scroll : 화면 스크롤과 함께 배경 이미지도 스크롤. (*기본값)

-fixed : 화면이 스크롤되도 배경 이미지 고정.


ⓗ위의 background속성들은 background로 하나로 묶어서 사용이 가능하다.

기본형 : {background:속성값 ,로 구분하여 나열;}


10. 블록 레벨 요소 / 인라인 레벨 요소

1)블록 레벨 요소 : 태그를 사용해 요소를 삽입했을때 혼자 한 줄(너비 100%)을 차지하는 요소

=> <p>, <h1~6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address> 등


2)인라인 레벨 요소 : 화면에 표시되는 콘텐츠 영역을 차지하고 나머지 공간에는 다른요소가 오는게 가능한 요소

=> <img>, <object>, <br>, <sub>, <span>, <input>. <textarea>, <label>, <button> 등


11. 박스 모델

※박스 모델의 구성

-마진(margin) : 박스 모델 사이의 여백

-테두리(border) : 박스 모델의 테두리

-패딩(padding) : 박스와 콘텐츠 영역 사이의 여백

-콘텐츠(Content)영역


ⓐwidth, height 속성 => 콘텐츠 영역의 크기 지정

기본형 : {width:속성값; height:속성값;} - 패딩이나 테두리의 영역값 지정은 {padding:속성값; border:속성값;}형태

<가능한 속성유형>

-크기값 : 너비나 높이의 값을 px(픽셀)이나 cm(센티미터)같은 단위와 함께 수치로 지정.

-백분율 : 박스 모델을 포함하는 상위 요소를 기준으로 너비나 높이 값을 백분율로 지정.

-auto : 콘텐츠 양에 따라 자동으로 결정. 기본값


ⓑdisplay 속성 => 화면 배치 방법 결정

기본형 : {display:속성값;}

<가능한 속성유형>

-block : 해당 요소를 블록 레벨 요소로 지정.

-inline : 해당 요소를 인라인 레벨 요소로 지정.

-inline-block : 해당 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정.

-none : 해당 요소를 아예 화면에 표시하지 않음. ={visibility:hidden;}

-inherit : 상위요소의 display 속성을 상속.

-table : 블록 레벨의 표로 만듬.

-inline-table : 인라인 레벨의 표로 만듬.



12. 테두리 관련 속성

ⓐborder-style 속성 => 테두리 스타일 지정

기본형 : {border-style:속성값;}

<가능한 속성유형>

-none : 테두리 없음. 기본값

-hidden : 테두리 숨김.

-dashed : 테두리를 짧은 선(점선으로 된 직선)으로 표시.

-dotted : 테두리를 점선으로 표시.

-double : 테두리를 이중선으로 표시. 두 선 사이의 간격은 border-width 값으로 지정.

-solid : 테두리를 실선으로 표시.


ⓑborder-width 속성 => 테두리 두께 지정

기본형 : {border-width:속성값;}

<가능한 속성유형>

-크기값 : px값을 이용하여 직접 입력.

*위, 아래, 왼쪽, 오른쪽 순서대로 수치를 나열해서 테두리마다 굵기가 달라도 한번에 입력 가능.

-thin : 얇게

-medium : 중간굵기

-thick : 두껍게


ⓒborder-color 속성 => 테두리 색상 지정

기본형 : {border-color:색상값;}

*역시 위, 아래, 왼쪽, 오른쪽 순서대로 색상을 나열해서 테두리마다 색상이 달라도 한번에 입력 가능.


ⓓborder-radius 속성 => 박스 모서리 둥글게 만들기

기본형 : {border-radius:속성값;}

<가능한 속성유형>

-크기값 : 둥글게 처리할 반지름의 크기를 px단위로 수치값 표시.

-백분율 : 현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정.

*왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래의 순서대로 수치를 나열해서 테두리마다 반지름값이 달라도 한번에 입력 가능.

*타원형으로 테두리를 만들고 싶다면, 각 모서리의 반지름의 가로-세로 값으로 2개를 따로 나열해서 함께 지정하면 된다.


ⓔbox-shadow 속성 => 선택요소에 그림자 효과

기본형 : {box-shadow:속성값;}

<가능한 속성유형>

-수평 거리 : 그림자가 수평으로 얼마나 떨어져 있는지에 대한 값. 양수 값은 요소의 오른쪽, 음수 값은 요소의 왼쪽에 그림자를 만들며 필수속성

-수직 거리 : 그림자가 수직으로 얼마나 떨어져 있는지에 대한 값. 양수 값은 요소의 아래쪽, 음수 값은 요소의 위쪽에 그림자를 만들며 필수속성

-흐림 정도 : 그림자의 흐림 정도값이며, 수치가 커질수록 부드럽고 옅은 그림자가 됨

-번짐 정도 : 그림자가 번지는 정도값이며, 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나가서 박스보다 크게 표시되며, 음수 값은 그림자가 모든 방향으로 축소되어 보임. 기본 값은 0

-색상 : 그림자의 색상값

-inset : 이 키워드를 같이 표시하면 안쪽 그림자로 그림


13. 여백을 조절하는 속성

ⓐmargin 속성 => 요소 주변 여백 설정

기본형 : {margin:속성값;} / {margin-top:속성값;} / {margin-right:속성값;} / {margin-bottom:속성값;} / {margin-left:속성값;}

: margin 속성에 속성값을 적용할때 값이 1개라면 네 방향 모두, 값이 2개 라면 top/bottom, 값이 3개라면 top-(right=left)-bottom, 값이 4개라면 top, right, left, bottm의 시계방향으로 속성값이 적용됨

<가능한 속성유형>

-크기 : 너비나 높이값을 px, cm 단위같은 수치로 지정

-백분율 : 박스 모델을 포함하는 상위요소를 기준으로 너비나 높이값을 %로 지정

-auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정


ⓑpadding 속성 => 콘텐츠 영역과 테두리 사이의 여백 설정

기본형 : {padding:속성값;} / {padding-top:속성값;} / {padding-right:속성값;} / {padding-bottom:속성값;} / {padding-left:속성값;}

:margin 속성과 속성값 갯수에 따라 적용되는 방식 같음

<가능한 속성유형>

-크기 : 너비나 높이값을 px, cm 단위같은 수치로 지정

-백분율 : 박스 모델을 포함하는 상위요소를 기준으로 너비나 높이값을 %로 지정

-auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정


14. CSS 포지셔닝과 주요 속성

ⓐbox-sizing 속성 => 박스 너비 기준 정하기

기본형 : {box-sizing:속성값;}

<가능한 속성유형>

-conteng-box : width 속성 값을 콘텐츠 영역 너비값을 사용. 기본 값

-border-box : width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용


ⓑfloat 속성 => 왼쪽이나 오른쪽으로 배치하기

기본형 : {float:속성값;}

<가능한 속성유형>

-left : 해당 요소를 문서 왼쪽에 배치

-right : 해당 요소를 문서 오른쪽에 배치

-none : 좌우 어느쪽으로도 배치하지 않음


ⓒclear 속성 => float 속성 해재하기

기본형 : {clear:속성값;}

<가능한 속성유형>

-left : 왼쪽 배치 종료

-right : 오른쪽 배치 종료

-both : 상관없이 기본 상태로 돌리기

-none : float속성 해재하지 않음


ⓓposition 속성 => 배치 방법 지정

기본형 : {position:속성값;}

<가능한 속성유형>

-static : 요소를 문서의 흐름에 맞추어 배치

-relative : 이전 요소에 자연스럽게 연결하여 배치하되 위치 지정 가능

-absolute : 원하는 위치를 지정 배치 -> 자유자재로 요소를 배치하기 위해선 반드시 상위요소가 relative로 지정

-fixed : 지정한 위치에 고정 배치 (화면에서 요소가 잘릴 수도 있다. / 스크롤 내려도 고정)


ⓔvisibility 속성 => 요소를 보이거나 보이지 않게 하기

기본형 : {visibility:속성값;}

<가능한 속성유형>

-vidible : 화면에 요소를 표시. 기본값

-hidden : 화면에서 요소를 감춤 (크기는 그대로 유지하기 때문에 배치에 영향)


ⓕz-index 속성 => 요소 쌓는 순서 정하기

기본형 : {z-index:숫자;}

-> 숫자가 낮을수록 아래에 쌓이고, 숫자가 높을수록 위에 쌓임

-> <div> 숫자만 적고 z-index를 명시하지 않으면 첫째 태그가 제일 밑에 쌓이고 순서대로 쌓임


15. 다단으로 편집

ⓐcolumn-width 속성 => 단의 너비 고정하고 다단 구성

기본형 : {column-width:속성값;}

<가능한 속성유형>

-크기 : 단의 너비를 직접 지정

-auto : 단의 개수같은 다른 속성에 따라 단의 너비가 자동 계산


ⓑcolumn-count 속성 => 단의 개수 고정하고 다단 구성

기본형 : {column-count:속성값;}

<가능한 속성유형>

-개수 : 콘텐츠가 들어갈 단의 개수 지정. 0보다 큰 수만 사용

-auto : 단의 너비같은 다른 속성에 따라 단의 개수가 자동 계산


ⓒcolumn-gap 속성 => 단과 단 사이 여백 지정

기본형 : {column-gap:속성값;}

<가능한 속성유형>

-크기 : 단과 단 사이의 여백을 숫자로 지정

-normal : 여백을 자동으로 지정


ⓓcolumn-rule 속성 => 구분선의 색상, 스타일, 너비 지정

기본형 : {column-rule-color:색상;} / {column-rule-style:속성값;} / {column-rule-width:속성값;} / {column-rule:너비|스타일|색상;}

<가능한 속성유형>

*color : 색상값

*style

-none : 없음

-hidden : 숨김

-dotted : 점선 표시

-dashed : 짧은 선(점선으로 된 직선)으로 표시

-solid : 실선 표시

-double : 이중선 표시

-groove : 오목한 실선 표시

-ridge : 볼록한 실선 표시

-inset : 안쪽 그림자 같이 표시

-outset : 바깥쪽 그림자 같이 표시

*width : 크기, thin, medium, thick


ⓔbreak- 속성 => 다단 위치 지정

{break-after:속성값;} -> 특정 요소 뒤

{break-before:속성값;} -> 특정 요소 앞

{break-inside:속성값;} -> 특정 요소 안

<가능한 속성유형>

-column : 단 나눔

-avoid-column : 단 나누지 않음


ⓕcolumn-span 속성 => 여러 단을 하나로 합치기

기본형 : {column-span:속성값;}

<가능한 속성유형>

-1 : 단을 하나만 합치는 것이므로 합치지 않는 것과 같다. 기본값

-all : 전체 단을 하나로 합쳐 표현


16. 표 스타일

ⓐcaption-side 속성 => 표 제목 위치 정하기

기본형 : {caption-side:속성값;}

<가능한 속성유형>

-top : 캡션을 표의 윗부분에 표시. 기본값

-bottom : 캡션을 표의 아랫부분에 표시


ⓑborder 속성 => 표의 테두리 스타일 결정

기본형 : {border:속성값;} / 태그에 사용시 <table border="테두리굵기 숫자">

<가능한 속성유형>

-위쪽 테두리<border> 관련 스타일 참조


ⓒborder-collapse 속성 => 테두리 통합, 분리

기본형 : {border-collapse:속성값;}

<가능한 속성유형>

-collapse : 테두리 하나로 합쳐 표시

-separate : 테두리 따로 표시. 기본값


ⓓborder-spacing 속성 => 인접한 셀 테두리 사이 거리 지정

기본형 : {border-spacing:거리크기;} - border-collapse:seperate;를 사용한 경우

-거리크기는 값이 하나라면 수평 거리값만, 두개라면 수평-수직 거리값.


ⓔempty-cells 속성 => 빈 셀의 표시 여부 지정

기본형 : {empty-cells:속성값;} - border-collapse:seperate;를 사용한 경우

<가능한 속성유형>

-show : 빈 셀 주위에 테두리를 그려 빈 셀을 표시. 기본값

-hide : 빈 셀에 테두리를 그리지 않고 비워둠


17. 링크

4가지 형태

-a:link{속성:속성값;} (방문하지 않은 링크)

-a:visited{속성:속성값;} (방문했던 링크)

-a:hover{속성:속성값;} (마우스를 오버한 링크 - a:link와 a:visited 뒤에 와야 함)

-a:active{속성:속성값;} (마우스를 누른 상태의 링크 - a:hover 뒤에 와야 함)

댓글(0)

Designed by JB FACTORY