정리하고 기록하며 성장하는

인라인이냐 블록이냐 본문

프론트/CSS

인라인이냐 블록이냐

개발하는묭이 2021. 12. 23. 16:53

 

블록 레벨 요소 vs 인라인 요소

 

블록 레벨 요소

자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다

(ex. div , p , h1 등)

 

인라인 요소

자기에게 필요한 만큼의 공간만 차지한다

(ex. span , a 등)

 

display 속성

  • display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할 지 정의한다
  • 블록 레벨 요소인 div 요소를 인라인으로 처리하고 싶다면 
    div {
  display: inline;
}​
  • 인라인 요소인 a 요소를 블록 레벨로 처리하고 싶다면
a {
  display: block;
}

 

display 속성 값

  • display에는 미리 정의되어 있는 키워드를 속성값으로 지정한다
속성값 의미
inline 인라인으로 처리한다 (필요한 만큼의 공간 차지)
block 블록 레벨로 처리한다 (자기가 속한 영역의 너비를 모두 차지하여 블록 형성)
inline-block 인라인으로 배치하되 블록 레벨 요소의 속성을 추가할 수 있도록 처리한다
none 표시하지 않는다 (요소 자체가 아얘 문서에서 사라지는 것은 아니다)

 

inline-block

  • inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다
  • 하지만 inline 요소에서 불가능하던 width 와 height 속성 지정 및 margin 과 padding 속성의 상하 간격 지정이 가능해 진다
  • ex . button , input , select 등
  • 참고 - https://www.daleseo.com/css-display-inline-block/

 

border 속성

  • border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다
  • border 속성에는 속성값으로 테두리의 두께 , 모양 , 크기 등을 함께 지정할 수 있다
  • 한꺼번에 여러개의 속성을 지정하는 것을 단축속성 이라고 한다

 

예)

두께가 2px인 직선 모양(solid)의 초록 테두리가 만들어 진다

span {
  border: 2px solid green;
}

 

border 속성의 하위 속성

  • border 속성에 지정하는 값들을 따로따로 지정할 수도 있다
  • 각 속성은 다음과 같다
속성명 속성값 예
border-color color 정의 방식과 동일
border-width thin , medium , thick 등의 키워드 또는 px , em , rem  등의 단위
border-style none(기본값) , solid(직선) , dotted(점선) , dashed(긴 점선) 등

 

border 속성을 사용하여 인라인 인지 블록인지 확인 하는 예제

  • border 속성을 사용하여 요소가 차지하는 영역에 대해 테두리를 그려보았다
  • 인라인 요소의 경우 자기에게 필요한 공간 만큼의 영역을 차지한다
  • 블록 요소의 경우 자기가 속한 영역의 전체 너비를 차지한다
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            div {
                border: 3px solid red;
            }

            span {
                border-width: 5px;
                border-style: dashed;
                border-color: rgb(100% , 50% , 0%);
            }
        </style>
    </head>
    <body>
        <div>나는야 블록 레벨</div>
        <span>나는야 인라인</span>
    </body>
</html>

 

display 속성을 활용 해보는 예제

  • div 전체 영역을 너비로 갖는 block 요소이다
  • 이를 자기에게 필요한 공간 만큼만 너비를 차지하도록 display 속성을 사용하여 inline으로 변경
  • span은 자기에게 필요한 공간 만큼만 너비를 차지하는 inline 요소이다
  • 이를 자기가 차지하고 있는 영역 전체를 너비로 갖도록 display 속성을 사용하여 block 으로 변경
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            div {
                border: 3px solid red;
                display: inline;
            }

            span {
                border-width: 5px;
                border-style: dashed;
                border-color: rgb(100% , 50% , 0%);
                display: block;
            }
        </style>
    </head>
    <body>
        <div>나는야 블록 레벨</div>
        <span>나는야 인라인</span>
    </body>
</html>

 

  • display 속성의 속성값을 none 으로 주어 요소를 웹브라우저에서 안보이게 한다
  • 단 , 요소 자체가 문서에서 사라지는 것은 아니다
  • div 요소의 display 속성 값을 none으로 주어 웹브라우저에서 보이지 않게 처리했다
  • 개발자 도구를 열어 확인해 보면 div 태그는 존재하는 것을 확인할 수 있다
  • 단지 웹브라우저에 보이지만 않는것이다
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            div {
                border: 3px solid red;
                display: none;
            }

            span {
                border-width: 5px;
                border-style: dashed;
                border-color: rgb(100% , 50% , 0%);
                display: block;
            }
        </style>
    </head>
    <body>
        <div>나는야 블록 레벨</div>
        <span>나는야 인라인</span>
    </body>
</html>

 

inline-block

  • inline 요소는 자기가 필요한 영역 만큼만 차지하기 떄문에 width 와 height를 가질수 없다
  • 그러나 block은 width와 height를 가질 수 없다
  • 따라서 , inline 요소의 너비와 높이를 임의로 조절하기 위해 inline-block 속성값을 사용한다
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            div {
                border: 3px solid red;
                display: none;
            }

            span {
                border-width: 5px;
                border-style: dashed;
                border-color: rgb(100% , 50% , 0%);
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div>나는야 블록 레벨</div>
        <span>나는야 인라인</span>
    </body>
</html>

 

내용 정리

  • display 속성은 요소의 블록 레벨 , 인라인 여부를 갖도록 변경 및 처리할 수 있다
  • display 속성은 요소를 배치할 레이아웃을 결정할 때도 사용될 수 있다
  • border 속성은 요소가 차지하는 영역에 테두리를 그릴 수 있다
  • border는 여러가지 속성을 함께 정의할 수 있는 단축속성이다
  • border의 하위 속성은 border-stype , border-width , border-color 이다

 

'프론트 > CSS' 카테고리의 다른 글

박스모델 1편  (0) 2021.12.23
박스모델 1편  (0) 2021.12.23
텍스트 관련 속성  (0) 2021.12.22
선택자 1편  (0) 2021.12.21
CSS 기본 문법 및 사용 방법  (0) 2021.12.20
'프론트/CSS' Related Articles more