국비교육6일차 학습일지 - css

오늘은 실습 위주로 홈페이지 구조를 만들어보는 시간이 길어서 새로운 개념들은

몇가지만 학습했다!

5.clear 속성

: float 속성에서 설정한 좌우 정렬을 해제 시키는 속성

: float 설정은 float다음에 오는 태그도 영향을 받아서 자기 자리를 못 찾는 경우가 있음

 

속성 값                            설명

left	left의 속성을 해제
right	right의 속성을 해제
both	left와 right의 속성을 해제

 

6.box-sizing 속성

: 기본적으로 width, height 값에 padding 값이나 border 값은 포함되지 않는다.

속성 값                          설명

content-box	(기본값) width 속성 값을 padding, border값을 포함시킴.
border-box	width 속성 값을 padding, border값을 포함시키지 않음.

 

7.display 속성

: HTML에는 블록요소와 인라인요소 두 가지가 있디/

: 이 해당 요소를 block 또는 inline으로 바꿔 보여줄 때 사용하거나 안보이게 만드는데 사용하는 것

:block 요소를 inline 요소로 변경하면 줄 바꿈이 일어나지 않는다.

: inline 요소를 inline-block 으로 변경하면 줄 바꿈은 하지 않으면서 block 요소만 줄 수 있는 속성을 적용할 수 있다.

 

속성 값         설명

none	태그를 보이지 않게 숨기고 흔적도 숨김
block	inline요소를 block으로 변경(줄바꿈이 일어남)
inline	block요소를 inline으로 변경(줄바꿈이 일어나지 않음)
inline-block	inline요소를 inline-block으로 변경 (줄바꿈은 일어나지 않으나 block요소만 사용할 수 있는 text-align 등의 속성을 사용할 수 있음)

1)block

: 가로 길이가 기본적으로 100%이며 block 태그를 이어서 사용하면 줄바꿈이 되어 세로로 보인다.

: 높이, 너비 값을 지정할 수 있다.

: 레이아웃 배치시 주로 사용이 된다.

블록요소 태그 <p> <h1>~<h6> <ul> <ol> <div> <form> <hr> <table> <address>

2) inline

:블록과 달리 줄 바꿈이 되지 않고 width와 height 사용할 수 없다.

인라인요소 태그

<img> <br> <a> <span> <input> <textarea> <button>

3) inline-block

: 요소를 인라인, 블록을 동시에 가진 형태로 보여준다.

: 요소 자체로 줄 바꿈이 일어나지는 않으나 높이와 너비 값을 가질 수 있다.

(마치 하나의 블록 형태를 가진 글자처럼)

: 이런 형태 때문에 버튼 같은 형태를 만들 때 사용된다.)

 

인라인-블록 요소태그 <img> <table> <input>

8.position 속성

: 배치방법을 지정하는 요소

: 원하는 자리에 태그를 배치시키기 위해서는 top, left, right, bottom 속성을 사용하거나 좌표값으로 위치를 조절할 수 있다.(양수, 음수 모두 사용)

속성 값	설명
static(기본값)	position의 기본값으로 요소를 나열한 순서대로 배치 top, left, right, bottom 속성을 사용할 수 없고 float 속성으로 좌우 배치 만 가능 요소를 이동하거나 겹칠 수 없는 원래 그대로의 상태 relative, absolute, fixed 했던 박스를 원상태로 회복
relative	이전 요소에 연결하여 배치하도록 위치를 지정 top, left,right, bottom 속성으로 이동을 할 수 있음. position:absolute로 지정된 요소의 ‘부모요소’역할을 할 수도 있음
absolute	원래 위치에서 따로 떼어내 독립적으로 새로운 위치를 설정함 left, right, top, bottom 속성으로 위치 지정할 수 있음 부모 박스를 기준으로 위치를 지정함
fixed	요소의 위치를 screen 기준으로 지정함 left, right, top, bottom 속성으로 위치 지정할 수 있음

 

 

9. z-index 속성

: 각 요소들의 위치가 겹칠 때 어떤 요소를 위로 올릴지 내릴지 조정하는 속성

: 높은 숫자가 위로 올라감