[CSS] CSS 입문 03 (170327)

CSS 입문 03

• Page Layout

• 2단 레이아웃 배치법 01

-navigation, content

-navigation에 width를 주고 content에 margin값을 준다.

** 출력 결과 **

• 2단 레이아웃 배치법 02

- navigation, content

- content에 맞춰 navigation의 height 나타나게 하기

- navigation의 position을 absolute로 주고 넓이를 지정한다.

- content의 border-left를 200px로 지정하여 색을 지정한다.

** 출력 결과 **

• 3단 레이아웃 배치법

- 좌, 우 navigation과 content

- 위와 동일한 방법에서 각각의 navigation에 right:0과 left:0 을 지정한다.

- content의 좌우에 margin을 준다.

** 출력 결과 **

• 3단 레이아웃 배치법 02
  

- float을 이용한다.

- border을 이용하여 navigation에 색상을 준다.

** 출력 결과 **

• 상단 고정 navigation bar

- navigation bar의 position은 fixed로 한다.

- 좌우 navi와 상단 navbar는 같은 자식으로써 z-index가 동일하여 겹치므로 z-index를 설정해준다.

- navbar 때문에 가려진 컨텐츠를 보이게 하려면 body에 padding-top을 준다.

 

** 출력 결과 **

• Form (TextBox, Select, CheckBox, RadioButton)

• TextBox

- 1rem의 이용: 1rem의 기준이 되는 크기를 html에 입력해준다.

- fieldset 안에 legend와 label, input창이 들어간다.

** 출력 결과 **

• Select
  

- select 속 option이 존재한다.

- select 속 분류를 위해서는 optgroup을 이용한다.

- 다중선택은 select 속에 multiple="multiple"속성을 준다.

** 출력 결과 **

• CheckBox / RadioButton
  

- input type을 checkbox, radio로 지정

** 출력 결과 **

• Rollover

• 이미지 위치를 이용한 rollover

- 이미지 위의 글씨를 안보이게 하기 위해서 text-indent를 -9999px로 하여 이미지 저 먼 곳에 위치하게 한다.

- background-position : 배경이미지의 top, left를 이용해서 다른 이미지 보이게 한다. 

-background-position: 0 -63px; 일 경우 margin-top을 -63만큼 준다고 이해하면 쉽다.

** 출력 결과 **

- hover 전

- hover 후

- active 후

• :after 를 이용한 rollover
  

- :after를 이용한다.

- image를 겹치는 방법을 이용한다.

- opacity를 이용해 투명도 조절로 겹친 이미지가 안보이게 한다.

- hover후 opacity를 1로 하여 겹친 이미지가 보이게 한다.

- transition-property: opacity를 주고 duration을 1s로 설정한다.

** 출력 결과 **

    

• Transition

- transition-property로 transition을 줄 항목을 선택한다.

- transition-duration 으로 변화되는 주기를 설정한다.

** 출력 결과 **

- 전

- 후 : 배경색과 margin-left가 변했다.