CSS - display

열심히 CSS에서 style을 주고 있었는데
가운데 정렬 하고 싶은데 text-align은 적용 안되고
그렇다고 아예 그 태그에 style이 적용 안되는 것도 아니고

....... 빡 쳤을때 .......
뒤늦게 알았지뭐야

display에 inline과 block속성 때문에 해당 되는게 있고 안되는 게 있다는걸

 

 

 

 # 디스플레이 CSS Display : 웹페이지의 레이아웃을 결정하는 속성

 

 1. block 

디스플레이 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하고 해당 라인의 모든 너비를 차지 * 대표적인 block 엘리먼트 : <p> <div> <h1>

 

 2. inline 

- 디스플레이 속성값이 인라인인 요소는 새로운 라인에서 시작되지 않고 나란히 배치됨 * 대표적인 inline 엘리먼트 : <span> <a> <em> - 너비도 해당 라인 전체가 아닌 해당 html요소의 내용만큼 사용

 

 3. inline-block 

- 전,후 줄바꿈 없이 다른 엘리먼트들과 나란히 배치 (가로배열 가능) - width와 height, padding, margin도 적용가능 / line-height도 적용가능 - 명시적으로 헤당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 함

 

 4. none : 웹페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라짐

.p { display: none; } 웹페이지에서 해당 요소가 나타나지 않고 사라짐

.p { visibility: hidden; } 웹페이지 상에는 보이지 않는 상태로 숨어있음 *visiblity: hidden; ex) 아이디 : [            ][중복확인]

 

 5. flex :  레이아웃 배치를 위한 style.

레이아웃을 만들 때 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많음