6.30(목) CSS 3 (2)

조합 선택자

 

기존의 여러 선택자를 복합적으로 조합하는 방법을 제공

 

• 후손 선택자: 선택자A 선택자B
  - 선택자B가 선택자A에 반드시 포합되어 있을 경우에 선택
• 자손 선택자: 선택자A> 선택자B
  - 부모 선택자 A의 직계 자손인 선택자 B를 선택
• 인접 형제 선택자: 선택자A+선택자B
  - 선택자 A 바로 다음에 위치한 선택자 B를 선택
• 일반 형제 선택자: 선택자A~선택자B
  - 선택자 A 뒤에 인접하여 나타나는 모든 선택자 B를 선택
• 그룹 선택자: 선택자A, 선택자B
  - 선택자 A와 선택자 B를 모두 선택

Test_4 후손 선택자 사용

Test_4_1 자손 선택자 사용

박스 모델의 개념

 

박스모델이란?

• 웹 문서에 텍스트, 이미지, 테이블 요소를 배치하기 위해 사용
• 웹 문서의 전체 레이아웃을 정의
• 각종 요소들을 원하는 위치에 배치

박스의 속성

• content: 실제 내용이 표현되는 곳
• padding: 콘텐츠와 테두리 사이의 여백
• border: 박스의 테두리 두께
• margin: 테두리와 박스의 최종 경계 사이의 여백

박스의 크기 설정

• 실제 내용이 표현되는 곳
• 속성: width(너비 지정), height(높이 지정)

Test_4_3

• padding: 박스의 안쪽 여백 설정
• Margin: 박스의 바깥쪽 여백 설정
  - top, bottom, left, right 원하는 여백 설정 가능

 

border-width

• 테두리 두께 설정
  - 수치, thin, medium, thick
• top, bottom, left, right를 이용하여 네 방향으로 설정 가능
  
  

border-color

• 테두리 색상 설정

 

border-style

• 테두리 스타일 설정
  none, hidden, dotted 등

Test_4_3 테두리 스타일 설정 예제

border- radius

• 둥근 모서리 설정

 

position 속성

 

텍스트, 이미지, 표 등의 요소를 웹 문서에 배치할 때 사용하는 속성

 

1. 정적 위치 설정
   - 텍스트, 이미지, 표 등을 웹 문서의 흐름에 따라 배치하는 방법
   - 블록 요소는 위에서 아래로 쌓이고, 인라인 요소는 같은 줄에 순서대로 배치
2. 상대 위치 설정
   - 각종 요소가 웹 문서의 정적 위칫값에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치하는 방법
3. 절대 위치 설정
   - 웹 문서의 흐름과는 상관없이 전체 페이지를 기준으로 top, right, bottom, left의 속성을 이용하여
     원하는 위치에 배치시키는 방법
   
   
4. 고정 위치 설정
   - 창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있음

float 속성

 

화면을 구성하는 요소 간의 관계를 고려하여 각 요소를 배치하는 방법

 

• inherit
  - 요소를 감싸는 부모 요소의 float 속성을 상속받는다.
• left
  - 요소를 왼쪽으로 떠 있는 상태로 만든다.
• right
  - 요소를 오른쪽으로 떠 있는 상태로 만든다.
• none
  - float 속성을 적용하지 않는다.(요소를 떠 있지 않게 한다.)
• clear
  - float 속성이 적용되지 않도록 할 때 사용한다.(초기화)
• overflow
  -auto로 설정하면 이미지가 박스 영역을 벗어나는 현상을 해결할 수 있다.

시맨틱 문서 구조에서 float 속성의 사용

 

z- index 속성

 

• 한 요소 위에 다른 요소를 쌓을 때 사용
• z-index 속성값이 작을수록 아래에 쌓임

 

table-layout

 

셀 안 내용의 양에 따라 셀 너비를 조절

• table-layout: auto;
  - 내용 분량에 따라 셀 너비가 자동으로 조절된다.(기본값)
• table-layout: fixed;
  - 내용 분량과 관계없이 셀 너비를 고정한다.
• table-layout: initial;
  - 변경된 테이블 레이아웃을 기본값 상태로 설정한다.
• table-layout: inherit;
  - 부모 요소의 값을 상속 받아 셀 너비를 결정한다.

Test_4_4 표의 레이아웃 설정하기

Test_4_5 빈 셀을 보이게 하거나 숨기기