HTML&CSS 본문

CSS Properties

Display

엘리먼트의 박스타입을 지정할 수 있다.

타입은 대표적으로 none, inline, block, inline-block 이 있으며, 그 외 table, table-cell 등의 타입이 있다.

inline-block 속성은 해당 엘리먼트가 inline요소처럼 배치되면서 block요소의 기능(width, height, margin, padding)들을 사용 할 수 있는 속성

display:none;
display:block;
display:inline;
display:inline-block;

Overflow

자식엘리먼트의 영역이 해당 엘리먼트의 영역보다 더 클 경우 자식엘리먼트를 보여주는 영역을 설정할 수 있다.

주로 스크롤바 표시여부를 지정할 때 많이 사용 된다.

overflow:visible; (기본)
overflow:hidden;
overflow:scroll;
overflow-x:scroll;
overflow-y:scroll;
overflow:auto;

Float

엘리먼트를 block형태로 부유시킬때 사용 (display:block을 안해주어도 블럭화됨)

block형태로 특정방향(left, right)으로 정렬

float:inherit; (기본 : 밖의 float속성을 상속받음)
float:left;
float:right;
float:none;

Position

엘리먼트의 위치를 조정하기 위한 방법을 설정한다.

position:relative 속성을 position:absolute 요소의 부모요소에 적용하면, 부모요소는 position:absolute 요소의 기준점이 된다.

position:static; (기본, offset을 가지지 않음)
position:relative; (상대적, 원래 위치를 기준)
position:absolute; (절대적, 부모위치를 기준)
position:fixed; (화면에서 고정, ie6 지원 불가)
 
top:10px;
left:20px;
bottom:10px;
right:20px;

Z-index

엘리먼트의 입체적인 순서를 정의

수치가 작을수록 아래쪽에 있다는 것을 의미

z-index의 수치는 엘리먼트 동일한 위치선상에서 적용된다.
(두 요소중 한 요소의 z-index가 높아도 상위(부모) 엘리먼트끼리의 수치가 낮으면 아래쪽에 위치하게 된다.)

z-index:3;
z-index:10000;
z-index:400;

Width & Height

엘리먼트의 가로, 세로 사이즈를 지정

width:150px;
width:50%;
height:300px;
height:100%;

※ 박스모델

브라우저의 렌더링모드에 따라 표준모드(standards) 와 호환모드(quirks) 로 렌더링되는데,
표준모드는 W3C에서 정의한 웹표준방식을 따르며 호환모드는 오래된 구브라우저를 위한 렌더링모드이다.
이러한 렌더링 모드에 따라 박스모델 계산방식이 다른데 표준모드는 width/height 값에 padding값과 border값이 포함이 안되어 있으나,
호환모드에서는 width/height 값 계산시 padding값과 border값을 포함 시킨다.


표준모드와 호환모드에서의 width값 차이
  • tip) 호환모드(quirks)를 고려한다면 width값에 좌우 padding값과 좌우 border값을 같이 선언하지 않고,
    height값 역시 상하 padding값과 상하 border값을 같이 선언하지 않는 방식으로 구현한다면 표준모드와 동일한 레이아웃을 구현할 수 있다.

Margin & Padding

엘리먼트(Content)의 바깥여백(margin)과 안쪽 여백(padding)을 지정

축약형의 순서는 위, 오른쪽, 아래, 왼쪽(시계방향) 순서로 인식

margin 병합 : 세로 방향으로 마진을 지정한 두개의 서로 다른 요소가 수직 방향으로 접해 있을 때 두 요소 사이의 마진 간격은 두 요소의 마진값 중 큰값으로 병합됨.

margin-top:10px;
margin-right:40px;
 
margin:10px 40px 20px 10px ;
padding:20px ;
margin:20px 10px;
margin:20px 10px 30px;

Border

엘리먼트 바깥에 선을 그려줌(외곽선)

방향에 따라 스타일을 따로 지정가능

width, height 값과는 별개로 엘리먼트의 padding 바깥쪽에 영역을 차지

border-width:3px; (선 굵기)
border-style:solid; (선 모양, solid:실선, dashed:끊어진 실선, dotted:점선)
border-color:red; (선 색깔)
 
border:3px solid red; (축약형)

방향에 따라 선의 스타일을 각각 지정할 수 있다.

border-top-width:3px;
border-right-style:dotted;
border-left-color:blue;

Font

글자와 관련된 스타일을 지정할 수 있는 속성

font-style:italic; (폰트 기울기, normal:일반, italic:이탤릭체, oblique:기울기)
font-variant:small-caps; (폰트 변형, normal:일반, small-caps:작은대문자)
font-weight:bold; (폰트 굵기, normal:일반, bold:굵게)
font-size:12px; (폰트 크기)
line-height:14px; (줄 간격)
font-family:gulim; (폰트 서체)
 
font:italic bold 12px/14px gulim; (축약형)

※ Font 축약형을 쓸때에 다음과 같은 이슈가 있어, 축약형 보다는 풀어서 쓰는 것을 권장한다.

  • 폰트 축약형을 쓰면 기존 element 의 속성이 지워질수도 있다.

    폰트 축약형이 모두 적용되어 기존 속성을 가지고 오지 못한다.


    기존 속성을 가지고 오지 못하는 폰트 축약형의 문제점
    <style type="text/css">
    #font * {font:12px/15px dotum}
    </style>
    <div id="font">
    	안녕하세요
    	<h3>이부분은 H3 요소이다</h3>
    	<p>p태그입니다</p>
    	<i>기울임체</i>
    	<b>굵은글씨</b>
    	<strong>굵은글씨</strong>
    </div>

    축약형을 안 썼을때 기존 속성을 가지고 온다.


    폰트 축약형보다는 풀어서 쓰는 것을 권장한다.
    <style type="text/css">
    .dd * {font-size:14px;font-family:dotum}
    </style>
    <div class="dd">
    	안녕하세요
    	<h3>이부분은 H3 요소이다</h3>
    	<p>p태그입니다</p> 
    	<i>기울임체</i>
    	<b>굵은글씨</b>
    </div>
  • 모바일 웹 (Opera Mobile에서 공통으로 폰트 축약형을 적용하였을 경우 하위에서 상속받지 못하는 경우가 있다.) Opera Mobile 에서 상속받지 못하는 경우
    body,th,td,input,select,textarea,button {font:14px/1.5 'Malgun Gothic', '맑은 고딕', sans-serif}
    Opera Mobile 에서 상속받을수 있는 경우
    body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;
    font-family:'Malgun Gothic', '맑은 고딕', sans-serif}
  • 폰트축약형을 쓸때에 font 속성중 지정안된 것들을 기본값으로 불러서 렌더링 하게 되어 불필요한 성능 낭비가 된다. 축약형 예제
    .txt {font-weight:bold;font-size:12px;font-family:dotum}
    .txt p {font:15px/20px gulim}
    렌더링 시 표현되는 CSS

    여기서 주의해야될 점은 이 부분은 폰트가 읽히는대로 써놓았기때문에 마크업상에는 font-family를 맨 뒤로 해주어야 함.

    .txt {font-weight:bold;font-size:12px;font-family:dotum}
    .txt p {font-family:gulim;font-style:normal;font-variant:normal;font-weight:normal;font-size:15px;
    line-height:normal}

    아래와 같은 순서로 풀어서 쓰는 것을 권장

    font-style > font-variant > font-weight > font-size > line-height > font-family

Background

엘리먼트 영역에 색상, 이미지를 채우는 속성

background-color:#000; (배경색)
background-image:url(http://aaa.gif); (배경 이미지)
background-repeat:no-repeat; (배경 이미지 반복여부, no-repeat:반복안함, repeat-x:가로로 반복, repeat-y:세로로 반복)
background-position:0 25px; (배경 이미지 위치지정, left, top 기준)
 
background:#000 url(http://aaa.gif) no-repeat 0 25px; (축약형)
background:red url(daum.gif) repeat-y left top;
background:url(daum.gif) repeat-x 0px 0px;

Color

글자의 색상을 변경하는 속성

color:red;
color:rgb(255,0,0);
color:#FF0000;
color:#F00;

Text-indent

글자를 들여쓰거나 내어쓸때 사용

text-indent:10px;
text-indent:-10px;

Text-decoration

글자의 윗줄, 중간줄, 밑줄 등을 적용시에 사용

text-decoration:none;
text-decoration:underline; (밑줄)
text-decoration:line-through; (글자중간줄)
text-decoration:overline; (윗줄)

Text-align

글자의 정렬 기준을 지정

text-align:left;
text-align:right;
text-align:center;
text-align:justify; (양쪽 정렬)

Clear

float 를 해제할 때 사용

이전 엘리먼트의 float값을 상속받아 같은 방향으로 정렬되는 현상을 막기 위해 사용

clear:inherit; (기본)
clear:left; (왼쪽으로 float된 엘리먼트의 하단에 위치)
clear:right; (오른쪽으로 float된 엘리먼트의 하단에 위치)
clear:both; (모든 float의 하단에 위치 – 개념상 float상속을 받지 않음)