3.Properties

1. CSS 박스 모델

2. Border 속성

3. Width, Height 속성

4. Background

5. LIST

6. TABLE

7. LINK

8. 마우스 커서

1. CSS 박스 모델

---

모든 HTML 요소들은 박스로 간주된다. CSS 박스 모델은 웹페이지의 디자인과 레이아웃을 나타낸다.

Margins, borders, padding, 컨텐츠로 구성된다. 

Properties는 같은 순서로 동작한다 : top, right, bottom, left

HTML 요소의 전체 가로길이 : left right 마진 + left right 테두리 + left right 패딩 + 컨텐츠 가로

HTML 요소의 전체 세로길이 : top bottom 마진 + top bottom 테두리 + top bottom 패딩 + 컨텐츠 세로길이

(css의 width나 height를 설정하면 컨텐츠의 길이가 변한다. Background-color는 패딩영역까지 포함한다.

2. Border 속성

---

1. CSS의 border 속성은 HTML 요소의 테두리를 조작하도록 허용한다. 

  테두리를 만들기 위해 크기, 스타일, 색깔을 결정해야 한다.

p { padding: 10px; border: 5px solid green; }

각 면에 다른 테두리를 적용할 수도 있다.

Border 대신 border-top, border-bottom, border-left, border-right 사용

2. Border의 속성들은 한번에 쓸 수도 있지만 분리할수도 있다. 

  -Border-width 속성은 테두리의 굵기를 조절한다.

  - Border-color 속성은 테두리의 색을 결정한다. 색의 이름, RGB, 16진수 값으로 표현 가능하다.

  - Border-style 속성은 테두리의 형태를 결정한다. 기본값은 none인데 테두리가 없다는 것이다.

    Solid, dotted, dashed, double, groove, ridge, inset, outset, hidden 등의 값이 사용 가능하다.

p { padding: 10px; border-style: solid; border-width: 2px; border-color: rgb(0, 153, 0); }

3. Width, Height 속성

---

1. 컨텐츠의 가로 세로 길이를 조절할 수 있다. px, %등이 사용된다.

div { border: 5px solid green; width: 100%; height: 90px; }

2. Minimum, Maximum 길이

  - Min-width : 해당 요소의 최소 길이를 나타낸다.

  - Min-height : 해당 요소의 최소 높이를 나타낸다.

  - Max-width : 해당 요소의 최대 길이를 나타낸다.

  - Max-height : 해당 요소의 최대 높이를 나타낸다.

p { border: 5px solid green; min-height: 100px; }

4. Background

---

1. Background-color 속성

   요소의 배경색을 설정할 때 사용한다. 색이름, 16진수값, rgb값으로 표현 가능하다.

body { background-color: #C0C0C0; } h1 { background-color: rgb(135,206,235); } p { background-color: LightGreen; }

2. Background-image 속성

   요소의 배경을 이미지로 할 때 사용한다. Background이므로 padding 범위까지 이미지가 그려진다.

p { padding: 30px; background-image: url("green_photo.jpg"); color: white; }

3. Background-repeat 속성

   Background-image가 어떻게 반복될 것인가를 결정한다. 수평반복, 수직반복, 양방향 반복, 반복 없음, inherit이 있다.

   Repeat-x : 가로 방향으로 이미지를 반복한다.

body { background-image: url("css_logo.png"); background-repeat: repeat-x; }

   Repeat-y : 세로 방향으로 이미지를 반복한다.

body { background-image: url("css_logo.png"); background-repeat: repeat-y; }

   No-repeat : 이미지를 반복하지 않는다.

   Inherit : 부모 요소의 배경 반복 속성을 물려받는다.

4. Background-attachment

   배경 이미지를 고정할 것인지 스크롤 되게 할것인지 결정한다. 고정을 하면 페이지를 스크롤 하더라도 배경은 고정된다.     Fixed, scroll, inherit이 가능하다.

body { background-image: url("css_logo.png"); background-repeat: no-repeat; background-attachment: fixed; }

5. LIST

---

1. CSS를 이용하여 LIST를 다르게 표현할 수 있는 속성들이 있다. HTML에 두가지 타입의 LIST가 있다.

   - 정렬되지 않은 리스트 <ul> : 항목들 앞에 점이 표시된다.

   - 정렬된 리스트 <ol> : 항목들 앞에 숫자나 문자가 표시된다.

2. CSS를 사용하면 리스트를 더 스타일링 할 수 있고 이미지를 목록 표식으로 사용할 수 있다.

   1) List-style-type 속성을 사용하며 circle, square, decimal, disc, lower-alpha 등을 값으로 사용한다.

ol.lower-alpha { list-style-type: lower-alpha; } ul.circle { list-style-type: circle; } ul.square { list-style-type: square; }

   2) List-style-image 속성을 사용하면 목록 표식으로 이미지를 사용할 수 있다.

      List-style-position 속성을 사용해서 목록 표식이 안으로 올지 밖으로 올지 결정한다. 기본값은 outside 이다.

ul { list-style-image: url("logo.jpg"); list-style-position: inside; }

   3) List-style 속성을 사용하면 1,2번의 내용을 한줄에 쓸 수 있다. 아래 두 ul은 같다.

ul { list-style: square outside none; }

ul { list-style-type: square; list-style-position: outside; list-style-image: none; }

6. TABLE

---

CSS로 table이 보이는 모양을 변경할 수 있다.

1. Border-collapse 속성을 사용해서 테이블의 테두리가 한줄로 보이게 할지 2줄로 보이게 할지 결정할 수 있고 2줄로 보일시 줄 간격을 border-spacing 속성으로 조절할 수 있다.

table { border-collapse: separate; border-spacing: 20px 40px; }

2. Caption-side 속성으로 테이블 캡션의 위치를 정할 수 있다. (top, bottom)

caption { caption-side: top; }

3. Empty-cells 속성으로 내용이 빈 셀의 테두리와 배경 표시여부를 결정할 수 있다. (show, hide)

table { border-collapse: separate; empty-cells: hide; }

4. Table-layout 속성으로 테이블 컬럼의 가로길이가 어떻게 계산되는지 결정할 수 있다.

    - Auto : 셀 너비가 명시적으로 설정되지 않은 경우, 셀의 내용에 따라 달라진다.

    - Fixed : 셀 너비가 명시적으로 설정되지 않은 경우, 셀의 내용에 상관없이 너비 고정한다.

table.auto { table-layout: auto; } table.fixed { table-layout: fixed; }

7. LINK

---

CSS로 Link도 스타일 할 수 있다. 

1. 링크의 상태에 따라 각각 설정할 수 있다.

    A:link - 클릭되지 않은 링크를 스타일한다.

    A:visited - 클릭된 링크를 스타일한다.

    A:active - 클릭하는 순간을 스타일한다.

    A:hover - 마우스가 링크 위에 올라갔을 때를 스타일한다.

a:hover { color: red; }

2. 링크 텍스트 스타일 : 기본적으로 브라우저는 링크에 밑줄처리를 한다. 이를 지울 수 있다.

a:link { text-decoration: none; }

8. 마우스 커서

---

CSS로 마우스 커서 모양을 변경할 수 있다.

span { cursor: help; }

    

<연관게시글>