이번에 다룰 CSS는 inline과 block이다.
block
대부분의 HTML element는 block 요소이다.
예를들어, header, footer, p, li, table, div, h1~ 등 이 모든 요소가 block요소이다.
block 요소는 모든 인라인 요소를 포함할 수 있으며, 블럭요소도 포함 할수있다.
또한 width(너비), height(높이), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며, 블럭요소가 끝나는 지접에서 자동으로 줄바꿈이 된다.
display:inline은 CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경 할 수 있고,
div {display:inline}은 모든 div태그를 inline요소로 변경할 수 있다.
inline
인라인 요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있다.
그리고 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 된다.
이 사진을 보면 첫 번째부터 네 번째까지는 p태그 같은 block요소를 사용했다.
하지만 마지막 줄은 inline요소 이다. span태그 같은 inline요소를 사용하여 block요소를 사용했을 때와 노란색의 범위가 확연히 눈에 띈다.
이처럼 inline은 컨텐츠가 끝날때 딱 끝이나지만, block은 과도한 칸을 잡아먹는다.
하지만 block요소를 사용해도 inline요소 처럼 사용할수 있게 만들수있다.
.inline-p {
display: inline-block;
.float-left {
float: left;
.float-right {
float: right;inline의 성질을 갖도록 하는 CSS요소에는 display와 float이 있다.
display에 inline-block이 주어지면 그 해당 값은 block의 요소가 inline의 요소가 된다.
float또한 마찬가지이다.
반대로 inline의 성질을 가진 태그를 block으로 바꿀수있다.
.block-span {
display: block;
}위의 CSS를 작성함으로써 span은 p태그와 똑같은 성질을 가지게 된다.
이로써 inline과 block을 알아보았다. 서로 상극인듯 하지만 서로 변환함으로써 적재적소에 쓰일수있다는것을 알게되었다.
Float
float이라는 단어의 의미는 '뜨다' 라는 의미이며, 웹페이지에서 이미지를 어떤식으로 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.
사진 속의 모습은 정말 난잡하다. 사진과 텍스트가 널부러져있는 모습이다. 하지만 이러한 모습은 float을 사용하여 정리할 수 있다.
그전에 float과 같이 쓰이는 것들을 알아보려 한다.
inherit 은 부모 요소에서 상속을 받는다.
left 는 왼쪽에 부유하는 블록 박스를 생성하고, 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐른다.
right 는 오른쪽에 부유하는 블록 박스를 생성하고, 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐른다. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다. none 이 아니라면 display 속성은 무시가된다.
float의 적절한 사용유무가 그 페이지에서의 beauty와 가독성을 증가시켜주는것같다.
