[CSS] CSS 기본 속성 : 색, 배경, 텍스트, 글꼴, 링크, 리스트, 테이블, 이미지 스프라이트

728x90

CSS에서 색을 표현하는 방법

1. 색상 이름으로 표현

2. RGB 색상값으로 표현

3. 16진수 색상값으로 표현

CSS 배경 속성

1. background-color

2. background-image

3. background-repeat : 배경 이미지의 반복에 대한 설정

4. background-position : 배경 이미지의 상대 위치

5. background-attachment : 스크롤과 무관하게 배경 이미지를 화면의 위치에서 고정시킬 수 있다.

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: left bottom;
        background-attachment: fixed;
    }
</style>

<style>
    body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; }
</style>

CSS 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 요소 내 여백 설정

CSS 글꼴

1. font-family : 여러개 설정할 수도 있으며, 컴퓨터에서는 첫 번째부터 컴퓨터에 존재하는 글꼴로 표시

2. font-style : 이탤릭체 사용

3. font-variant : 모든 소문자를 작은 대문자 글꼴로 변경시킬 수 있음

4. font-weight : 두께

5. font-size : <h1>~<h6> 태그를 사용해야 한다. 절대적 / 상대적 크기의 방식으로 표현 가능

CSS 링크

링크의 상태

1. link

2. visited

3. hover : 마우스 커서가 링크 위에 올라가 있는 상태

4. active : 마우스로 링크를 클릭하고 있는 상태

5. focus

<style>
    a:link { color: olive; }
    a:visited { color: brown; }
    a:hover { color: coral; }
    a:active { color: khaki; }
</style>

링크를 버튼처럼 만들기

<style>
    a:link, a:visited {
        background-color: #FFA500;
        color: maroon;
        padding: 15px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }
    a:hover, a:active { background-color: #FF4500; }
</style>

CSS 리스트

1. list-style-type : marker(리스트 요소 앞 숫자나 기호) 적용

2. list-style-image

3. list-style-position

CSS 테이블

1. border : <th><td>태그가 자신만의 테두리 가져서 테두리가 두줄씩 나타남

2. border-collapse : 테두리를 한줄씩 나타나도록

3. border-spacing

4. text-align, vertical-align : th,td 내부에서 텍스트의 정렬

5. caption-size

6. empty-cells : 빈 셀의 테두리, 배경색을 설정

7. table-layout : 테이블에 사용되는 레이아웃 알고리즘 설정

CSS 이미지 스프라이트 (Image Sprite)

: 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지

→ 이미지를 다운받기 위한 서버 요청 횟수를 줄일 수 있다

[참고] http://tcpschool.com/css/intro