링크 스타일

1. a : link → 방문하지 않은 링크 스타일
2. a : visited → 방문한 링크 스타일
3. a : active → 마우스 클릭시 스타일
4. a : hover → 마우스오버시 스타일

폰트 스타일

1. font-size : 수치 ; → 폰트 크기 조절
2. font-family : 폰트명 ; → 폰트 타입 조절
3. font-weight : nomal / bold ; → 폰트의 굵기 조절
4. color : 색상코드(#000000) ; → 폰트 색상 조절

폰트 크기 단위

1. pt(포인트)

2. px(픽셀)
3. pc(파이카) → (1파이카=12포인트)
4. in(인치) → (1인치=2.54cm)
5. cm(센티미터) → (1cm=10mm)
6. em → 영문 글꼴 높이를 1em
7. ex → 영문소문자 x 글꼴 높이를 1ex

폰트 장식 효과 스타일

text-decoration : 값 ;
◎ 종류 : none / underline / overline(윗줄) / line-through(취소선)

커서 모양 변경 스타일
cursor : 값 ;
◎ 종류 : default / hand / move / help / crosshair / text /n-resize / w-resize / e-resize / s-resize

margin 스타일
1. margin-top : 수치 (픽셀) ; 상단마진
2. margin-bottom : 수치(픽셀) ; 하단마진
3. margin-right : 수치(픽셀) ; 오른쪽마진
4. margin-left : 수치(픽셀) ; 왼쪽마진
◎ 사방에 margin스타일주기 → margin : top right bottom left ; (시계 방향 순)

border 스타일
1. 테두리 모양 → border-style : none, solid, dashed, dotted, double, ridge, groove
2. 테두리 두께 → border-width
3. 테두리 색상 → border-color

◎ 사방에 border 속성 지정 → border : 색상 두께 모양 ;
◎ 세부위치 지정하여 각각 적용.
border-top, border-bottom, border-left, border-right
◎ 한꺼번에 테두리 모양, 두께, 색상 적용.
border-style : top right bottom left ;
border-width : top right bottom left ;
border-color : top right bottom left ; (시계 방향 순)

padding 스타일
1. padding-top : 수치(픽셀) ; 상단패딩
2. padding-bottom : 수치(픽셀) ; 하단패딩
3. padding-right : 수치(픽셀) ; 오른쪽패딩
4. padding-left : 수치(픽셀) ; 왼쪽패딩
◎ 사방에 padding 스타일 → padding : top right bottom left ; (시계방향 순)

수평정렬 스타일
text-align : left / center / right ;

수직정렬 스타일
vertical-align : top / middle / bottom
sub(아래첨자) / super(윗첨자)

줄 간격 스타일
line-height : 수치 ;
1. 수치에 단위를 표기하지 않을 경우 : 글자 크기에 비례함.
2. 수치에 단위를 표기할 경우 : 해당 단위로 적용됨.

글자 사이의 간격(자간) 스타일
letter-height : 수치 ;

영문 대소문자 변경 스타일
text-transform : 값 ;
none : 변형하지 않음
capitalize : 첫글자만 대문자
uppercase : 모두 대문자
lowercase : 모두 소문자

배경 그림 스타일
background-image : url("그림파일") ;

배경이미지 반복 스타일
background-repeat : 값 ;
◎ 값의 종류 : no-repeat(1번반복) / repeat-x(가로로반복) / repeat-y(세로로반복) / repeat(연속반복)

배경이미지 고정 스타일
background-attachment : fixed / scroll ;

배경이미지 위치 스타일
background-position : 가로위치 세로위치 ;

스크롤바 스타일

1. scrollbar-face-color : 화살표가 들어있는 박스나 이동박대의 색을 설정
2. scrollbar-shadow-color : 안쪽(우측, 하단) 색을 설정
3. scrollbar-highlight-color : 안쪽(좌측, 상단) 색을 설정
4. scrollar-3dlight-color : 바깥쪽(좌측, 상단) 색을 설정
5. scrollbar-darkshadow-color : 바깥쪽(우측, 하단) 색을 설정
6. scrollbar-track-color : 이동줄의 색을 설정
7. scrollbar-arrow-color : 화살표의 색을 설정(▲, ▼)

<span> 태그
텅빈 태그로 특별한 기능이 없이 스타일을 적용할 경우에 사용됨.
(한 줄에 스타일을 적용할 경우에 사용)

<div> 태그
특별한 기능이 없이 문단단위로 스타일을 적용할 경우에 사용됨.
<br> 태그처럼 자동으로 라인 스킵(line skip) 기능이 있음.
IE에서 <div> 태그는 레이어를 만드는데 많이 활용됨.
(NE에서는 <layer> 태그를 이용하여 레이어를 만들기도 하지만
브라우저와 상관없이 레이어를 작성하는 태그는 <div> 태그를 사용함)

플로트를 이용한 간단한 2단 레이아웃을 만들어 보도록 하겠습니다.

구조는 아래 이미지를 참고해 주세요.

이번 레이아웃을 만들기 위한 CSS는 아주 간단합니다.

각 단에 원하는 너비값을 지정하고 네비게이션은 왼쪽으로 본문 영역은 오른쪽으로 플로트를 지정하면 됩니다.

푸터가 확실히 이 두개의 플로트 아래에 오도록 하기 위해서 푸터에는 플로트 해제해야합니다.

만약 플로트해제를 하지 않는다면 푸터는 content의 오른쪽에 위치하게 될것입니다.

이렇게 기본적인 레이아웃이 완성되었습니다.

CSS 레이아웃 기법은 1.포지션 ,2.플로팅, 3.마진 다루기 이렇게 크게 세 가지 개념으로 구성됩니다.

핵심 개념을 이해한다면 여러 가지 다양한 기법들은 그렇게 큰 차이가 없다는 걸 알게 되고 여러분 자신만의 방법으로 그리 어렵지 않게 직접 레이아웃을 만들 수 있습니다.

디자인 가로 중간에 배치하기

큰 모니터가 널리 보급되면서 화면 가독성을 위해 근래 계발된 사이트 대부분은 화면 중간 배치를 하고 있습니다.

중간 배치하는 디자인 크게 두가지가 있습니다.

하나는 auto마진을 이용하 방법이고 하나는 포지션과 마진에 음수값을 지정하는 방법입니다.

auto마진 이용 방법

전체를 감싸는 div가 수평 중앙에 오도록 하는 전형적인 레이아웃을 만들어 보겠습니다.

포지셔닝과 음수 마진값 이용 방법

auto마진 방법을 가장 많이 사용하지만, 이 방법은 인터넷 익스플로러 문제를 해결하기 위한 핵을 불가피하게 써야하는

경우가 발생하기도 합니다. 또한 두 개의 엘리먼트에 스타일을 적용해야 하기도 합니다. 이런 이유로 이 방법 대신

포지션과 음수 마진갑을 이용해 중간 배치를 하기도 합니다.

너비 폭을 지정하고, position 속성값을 relative로 지정합니다. 그리고 left 속성에 50%를 지정하면 왼쪽 끝에서 중간으로 오게 됩니다.

하지만 레페의 왼쪽 끝을 페이지 중간에 놓으려는 게 아니라 래퍼의 중간 점이 페이지 가운데로 오게 해야겠죠. 이를 위해서 래퍼의 왼쪽 면에 래퍼 너비 반으로 나눈 길이를 음수값 마진으로 적용하면 됩니다. 이렇게 정가운데 지점이 화면의 중간에 오게 됩니다.

툴팁은 title 태그를 사용한 엘리먼트에 마우스를 올리면 웹 브라우저가 표시하는 노란색 작은 텍스트 상자입니다.

자바스크립트와 CSS를 이용해서 멋진 스타일의 툴팁을 직접 만드는 사례가 있었습니다만, CSS 포지셔닝을 이용하면 순수하게 CSS만으로도 툴팁을 만들 수 있습니다.

먼저 의미를 살리면서 구조화된 마크업을 만듭니다.

이제 앵커 위로 마우스가 올라오면 span의 내용이 나타나게 해야 합니다.

먼저 span의 diaplay속성값을 block으로 지정하는데, 마우스가 올라오는 상태에만 지정해야 합니다.

이 상태에서 코드를 실행해 보면, 링크 위로 마우스를 올렸을 때 링크 옆에 span에 지정한 텍스트가 표시되는 게 보일 겁니다.

앵커 오른쪽 하단에 span 텍스트가 표시되도록 하려면 span position 속성을 absolute로 바꾸고 위에서 1em만큼, 왼쪽에서 2em만큼에

해당하는 위치를 지정합니다.

a.tooltip:hover span{
display:block;
position:absolute;
top:1em;
left:2em;
padding:0.2em 0.6em;
border:1px solid #996633;
background-color:#ffff66;
text-decoration:none;
color::#000;
}

좀더 툴팁다운 모양을 만들기 위해 패딩,테두리선, 배경색까지 지정해 봅니다.

<마우스 롤오버시 나타난다>
 

링크를 꾸미는 기본적인 코드는 아래와 같습니다.

코딩 전 스타일시티에 우선적으로 선언해 주는 것이 편리합니다.

* :link와 :visited 스타일이 :hover와 :active 스타일을 덮어쓰게 되니 링크 스타일 순서를 지켜 적용하는게 좋습니다.

a:link, a:visited, a:hover, a:active

버튼과 롤오버 효과 만들기

이미지를 사용한 롤오버 효과

픽시 방법을 이용한 롤오버 효과

픽시 방법은 이미지 하나를 위치 조정을 통해 불러오는 방법으로 서버 요청을 줄이고 버튼을 한곳에 모아둘수 있다는 장점이 있습니다.