[CSS] 레이아웃의 이해 - inline & block, overflow 속성

레이아웃의 이해 - inline & block

 

블럭구조: 사각형, 덩어리

블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 형태가 상위 영역의

전체 너비만큼 만들어지는 형태

ex) div, p, h1~6, ul, li, ol, di, dt, table, form, section, figure, footer

 

인라인구조: 글자, 일직선

인라인 요소는 글자와 같이 옆으로 나열되는 형태

줄 바꿈이 일어나지 않는 요소들

span, a, em, i, stron, b, del, ins, sub, sup, textarea

 

블럭 구조는 스타일 요소(width, height, padding) 등이 다 적용이 되나

인라인구조는 박스 사이즈에 영향을 주는 요소가 적용 x

 

 

구조의 포함관계

블럭 요소에는 일부를 제외한 블럭요소(p,div,h태그 등)를 포함, 인라인 요소까지 포함 가능

인라인 요소에는 같은 인라인 요소끼리만 포함, 블럭요소는 포함 불가

대부분의 요소는 같은 요소끼리 포함 가능함.

 

        div,span{

          /*쉼표를 사용하게 되면 모든 태그 적용 가능 구문법*/

        }

 

인라인 요소는 박스 관련 스타일이 적용되지 않음. width, height, margin(top,bottom) 적용 x

padding값은 적용됨

 

display: block; 이나 inline; 으로 요소의 속성을 변경 가능

 

 

inline-block (인라인 블록)

      옆으로 나열되는 성격을 가진 인라인의 속성 +

      폭을 가지는, 스타일이 모두 적용이 되어지는 block의 속성 대표) 이미지

 

        img{

          width: 300px;

          height: auto;

          margin: 30px;

        }

 

옆으로 나열되는 성격을 갖고 있으나, 크기와 높이 등 박스 속성이 적용됨.

 

 

이미지는 글자처럼 옆으로 나열되는 성격을 가지기 때문에 엔터나 띄어쓰기에 영향을 받음.

공간을 주지 않아도 여백의 오류처럼 느낄 수 있으므로 이미지를 사용할 때는

블록처리를 해서 사용하는 것이 좋음.

 

        img{

          width: 300px;

          height: auto;

          display: block;

          float: left; >> 여백은 사라지나 밑으로 내려가기 때문에

        }

 

 

 

overflow 속성 - 어떻게 보여질까?

 

오버플로우 속성: 자식 요소가 부모 요소의 범위를 초가할 때 어떻게 처리할 것인가를 지정해주는

속성

overflow: hidden;

overlfow: scroll;

 

1. 콘텐츠의 양이 일정 -> 기존과 동일, 콘텐츠의 양이 많거나 유동적일 때 흘러넘침

2. 콘텐츠의 양에 따라서 높이가 늘어남

overflow: hidden 사용

 

      .contents3{

        width: 200px;

        /* height: 200px; */

        border: 2px solid black;

        float: left;

        margin: 10px;

 

        overflow: hidden;

        /*높이값이 없을 때는 높이값을 대신, 안에 있는 내용물에 따라서 높이가 유동적으로 달라짐*/

      }

    전반적인 큰 박스에 띄우는 것이 좋음.

 

3. 박스의 지정된 내용물만큼만 콘텐츠가 보임

      .contents4{

        width: 200px;

        height: 200px;

        border: 2px solid black;

        float: left;

        margin: 10px;

        overflow: hidden;

        /*높이가 있는 상태로 적용했을 때, 높이만큼 흘러넘치는 내용물이 잘려서 보여지게 됨.*/

      }

 

4.  overflow: scroll

overflow: scroll -> x,y축 모두

overflow-x: scroll; -> x축에서 발생되는 스크롤에 관련한 부분

overflow-y: scroll; -> y축에서 발생되는 스크롤을 숨기거나 나타내는 부분

 

      .contents5{

        width: 200px;

        height: 200px;

        border: 2px solid black;

        float: left;

        margin: 10px;

        /*overflow: scroll;*/

        overflow-x: scroll;

        overflow-y: hidden;

      } --> x축 스크롤만 보임

 

      .contents5{

        width: 200px;

        height: 200px;

        border: 2px solid black;

        float: left;

        margin: 10px;

        /*overflow: scroll;*/

        overflow-x: hidden;

        overflow-y: scroll;

      } --> y축 스크롤만 보임

 

 

www.evernote.com/l/AldPEDWRCHxLk7cznpb20rf4CQu_OfkDcO4/

레이아웃의 이해 - inline & block, overflow 속성 - 어떻게 보여질까?