TIL | CSS Layout 정복

display

display 속성을 사용하면 html 요소의 유형을 설정할 수 있습니다.
html의 태그들은 다양한 유형을 가지고 있습니다.

block, inline

대표적으로 p 태그와 span 태그를 예를들어 보겠습니다.

<body>
    <p>안녕하세요 p태그입니다.</p>
    <span>안녕하세요 span태그입니다.</span>
</body>

이렇게 p태그와 span태그를 사용한 각각의 텍스트를 작성하고,
css 에서 background-color:red; 를 주었습니다.

결과는

이렇게 나오네요.

p 태그는 css에서 따로 width 값을 주지 않으면 현재 내 웹브라우저의 크기에 맞춰 자동으로 넓이가 잡힙니다.
반대로 span 태그는 width 값을 주지 않았는데도 텍스트 길이에 넓이가 자동으로 잡히네요!

이러한 태그들은 각 속성이 있습니다.
대표적으로 예를 들었던 p 태그는 display:block; 속성, span 태그는 display:inline 속성을 default 값으로 가지고 있습니다.

html에서 최대한 디자인적 요소를 고려해야 한다면 inline, block 값을 고려하면 좋겠지만
html 은 정보를 정확히 전달하는 용도로 사용하는 것이 가장 좋겠죠.
그러니 html에서는 semantic tag의 사용성을 고려하시고, 디자인적인 부분은 css에서 고민합시다!

css에서 inline 과 block 이 각각 기본값인 태그들의 속성을 바꾸어 주는 속성이 바로 display 입니다.

display 를 사용하여 p와 span의 속성을 서로 반대로 바꾸어 보겠습니다.

p, span{
    background-color:red;
}/* 기존 p와 span에 배경색 추가 */

p{
    display:inline;
} /* p태그를 inline으로 변경 */

span{
    display:block;
} /* span태그를 block으로 변경 */

이렇게 display 의 속성이 block 이었던것을 inline으로 inline 이었던 것을 block으로 바꾸어 주니

바꾸고자 했던대로 span이 block 속성을 가지게 되었고 p가 inline 속성을 가지게 되었습니다.

❣️주의❣️
inline 특성을 가진 요소는 가로와 세로 너비를 지정할 수 없습니다!
가로 세로 너비 지정이 필요할때는 block으로 바꿔주면 되겠습니다!

inline-block

inline-block 요소는

inline 의 유동적인 너비 + block의 너비조절 가능함

이 더해진 특성을 가지고 있다고 생각하면 좋겠습니다.

대표적인 태그는 input 입니다.

none

작업중에 아직은 불필요한 요소가있거나 안보였으면 좋겠는 요소가 있다면
none 을 사용할 수 있습니다.

none은 요소의 박스 타입이 없어 태그는 존재하나 요소가 사라진것처럼 안보이게 할 수 있습니다.

p 태그를 display:none; 을 사용하여 안보이게하면 어떻게 변하는지 보겠습니다.

<body>
    <p>나는 p태그 내가 한번 사라져볼께!</p>
    <span>뿅!</span> 
   
</body>

이렇게 p와 span요소를 우선 작성하였습니다.
간단히 background-color 를 추가하였습니다.

display:none;을 주지 않으니 사라지려던 p가 눈에보이네요.
p가 사라질 수 있도록 css로 도와주겠습니다.

p{
    display:none;
}

p가 사라졌습니다. 텍스트만 사라진것이 아니라 background 도 남지않고 사라졌네요.
그와 동시에 원래 p태그가 차지하던 공간이 사라지면서
span태그가 첫줄을 대신하여 올라왔습니다.

이것처럼 display:none;은 텍스트나만 단순히 사라지는 것이 아니라
원래 작성하지 않았던 태그처럼 공간 자체가 사라집니다!
html에서 존재는 하지만, 브라우저에서는 존재를 확인할 수 없습니다.

이렇게 display:block; 을 사용하면
css 작성중 아직 작성하지 않았지만 길이가 너무 길어 다른 요소의 확인이 불편할 때, 포함되어야 하는 요소이지만
보여주고 싶지 않을때 등등 주의사항을 인지하며 사용하고, 기존처럼 다시 보여야하는 상황이라면 display:none;을 삭제하거나
diplay:block; display:inline; 등으로 변경 해줄 수 있습니다.

Author And Source

이 문제에 관하여(TIL | CSS Layout 정복_ display !), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ttakku-park/TIL-CSS-Layout-정복-display

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

TIL | CSS Layout 정복_ display !

display

block, inline

inline-block

none

Author And Source

좋은 웹페이지 즐겨찾기