DISPLAY / POSITION / VISIBILITY ATTRIBUTE

목차

*** DISPLAY ATTRIBUTE ***

***POSITION***

*** VISIBILITY ATTRIBUTE ***

 

 

*** DISPLAY ATTRIBUTE ***

1. block

 - 요소 안 내용 길이에 상관없이 요소 자체가 한 줄 전체를 차지하는 요소

 - 부모 태그의 최대 넓이 가짐 (max width)

 - 2개 이상의 "블록 레벨" 요소가 있으면 위에서 아래로 하나씩 쌓인다.

 - <div>, <p>, <section>, <ul>, <li>, <nav> 등
 - width, height 설정 가능

 

2. inline

 - just text line height "in" line

 - 텍스트 크기 만큼만 공간을 차지한다.

 - 2개 이상의 "인라인" 요소가 있으면 오른쪽으로 나열된다.

 - <span>, <a>, <strong> 등
 - width, height 설정 불가능

 - display: inline-block 적용하면 width와 height 설정 가능

 

3. inline-block

 - inline, but behave like a "block"

 - 2개 이상의 "인라인-블록" 요소가 있으면 오른쪽으로 나열된다. (inline처럼 옆으로 배열된다.)

 - <img>, <button>, <input> 등

 - width, height 설정 가능

 

4. none

 - 존재하지 않는 것과 같다

 

 

***POSITION***

속성 - top, right, bottom, left

 

1. static (기본값)

 - position 지정하지 않았을 때 기본적으로 적용되는 기본값

 

2. relative

 - 자신의 static을 기준으로 하여 속성 값에 따른 상대적인 위치에 배치

 

3. absolute

 - 상위 요소를 기준으로 하여 속성 값에 따라 위치 결정

 - 부모 태그 안에 이미지나 아이콘 등을 넣고자 할 때 상위 요소를 기준으로 하는 점 때문에 부모 태그에 relative를 지정하고 해당 태그에는 absolute를 사용하여 속성 값에 따라 위치 결정 

 

4. fixed

 - 브라우저 화면을 기준으로 하여 속성 값에 따라 해당 위치에 고정

 - 스크롤을 내리는 등 화면이 바뀌어도 정해진 위치에 계속 고정

 

 

*** VISIBILITY ATTRIBUTE ***

1. hidden

 - 보이지는 않지만 존재한다. (보이지는 않지만 자리는 차지한다는 의미)

 - "none"과는 다르다. (display: none이 되면 없는 것과 같은듯하다.)

 

 

틀린 부분이 있다면 언제든지 댓글로 알려주시면 확인 후에 수정하도록 하겠습니다~! 감사합니다!