CSS display
-
[생활코딩] CSS Box modelStudy/HTML & CSS 2019. 11. 26. 19:55
태그와 같이 제목으로 지정된 태그는 화면 전체(좌에서 우 끝까지)를 차지하고, 태그와 같이 화면 전체를 차지하지 않아 줄바꿈이 되지 않는 태그도 있다. 왜 이렇게 각 태그가 차지하는 공간이 다를까? 그 이유는 각 태그마다 차지하는 공간의 크기가 다르게 기본값이 설정되어있기 때문이다. block level element & inline element 화면 전체를 쓰는 태그를 block level element 라고 한다. 하지만 display: inline 속성을 추가하여 컨텐츠 크기만큼으로 변환할수도 있다. 자신의 컨텐츠 크기 만큼 화면의 부분만을 쓰는 태그를 inline element 라고 한다. 하지만 display: block 속성을 추가하면 화면 전체크기만큼으로 변환할 수 있다. 콤마를 활용하면 ..
-
[코드스테이츠 TIL] CSS LAYOUT : Display, Box model, Positioning, FloatStudy/HTML & CSS 2019. 11. 23. 10:32
[ 브라우저에서 사용하는 좌표계 ] : 기본적으로 element는 위에서 아래로, 왼쪽에서 오른쪽으로 확장된다. 왼쪽 상단의 좌표가 (0,0) 이다. 좌표는 px 단위 또는 % 단위 등을 쓸 수 있다. 좌표계를 바탕으로 절대/상대적인 위치에 포지셔닝 할 수 있다. [ Display 요소 ] 각 요소는 고유한 크기를 가질 수 있으나, inline 요소는 컨텐츠가 차지하는 크기로 고정된다. inline block 은 width와 height를 별도로 설정할 수 있다. - 한 줄을 다 차지하는 block ex) , , ... - 컨텐츠 공간만 차지하는 inline ex) , , ... - 높이 + 넓이를 제어할 수 있는 inline-block (span 태그에 css속성으로 display : inline-bl..