1월 25, 2022

CSS: display

display 속성의 외부 디스플레이 유형은 레이아웃의 흐름에 요소가 어떤식으로 참여하는지를 나타냅니다. 이에 해당하는 값으로 block, inline, inline-block이 있습니다.


1. inline

 : 인라인 요소 박스를 만듭니다. 새로운 줄을 만들지 않으며, 필요한 너비만 차지합니다. 공간이 있다면 다음 요소도 같은 라인에 위치합니다. 

<span><a><img>등이 대표적인 인라인 요소입니다.


inline 요소를 알아보기 위한 간단한 예제가 있습니다

1
2
    <div> 다음의 span은 <span class="inlinecl">인라인 요소</span>입니다. inline의 시작과 끝을 알기 위해 배경색을 지정합니다
    </div>



1
2
3
.inlinecl {
  background-color: blue;
}

블록 요소인 div 안에 inline 요소인 span 이 존재합니다. inline의 성향을 살려 문단이 끊어지지 않고 이어지는 모습을 확인할 수 있습니다.




2. block

: 블록 요소 박스를 만듭니다. 줄바꿈을 하여 시작하며, 좌우로 최대한으로 늘어납니다. 

앞서 예제의 span을 <p>태그로 바꾸어 보았습니다

1
2
<div> 다음의 p는 <p class="blockcl">블록 요소</p>입니다. block의 시작과 끝을 알기 위해 배경색을 지정합니다
    </div>

앞서 css의 클래스명을 .blockcl로 바꾸어주면, 차이를 확인할 수 있습니다.


p요소는 p 이전과, 자기 자신, p 이후의 세 부분으로 레이아웃을 바꿔 놓았습니다. 

줄바꿈을 강제하는 블록요소의 특성이 드러나는 부분입니다. 


만약 inline 요소 안에 block을 넣는다면 줄바꿈이 일어나지 않을까요? css를 그대로 두고 html을 변경해 보았습니다.
1
2
 <span> 과연 block을? <p class="blockcl">block</p>과연?
    </span>

block요소인 p가 줄바꿈을 강제하여 세줄로 나눠지는 것을 확인할 수 있습니다.


3. inline-block

: inline 요소와 비슷하지만, 높이와 너비를 지정할 수 있습니다. 줄바꿈이 일어나지 않습니다.  지정하지 않을 시 inline과 같이 컨텐츠 영역이 잡힙니다.  

브라우저 너비를 채우며, 알맞게 줄바꿈되는 박스 그리드가 생성됩니다.

display 프로퍼티에 inline-block값을 설정합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <div class="container">
      <nav>
        <li>밥1</li>
        <li>밥2</li>
        <li>밥3</li>
        <li>밥4</li>
      </nav>
      <div class="column2">
        <section>안녕안녕나는지수야</section>
        <section>헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지</section>
      </div>
    </div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
nav {
  display: inline-block;
  vertical-align: middle;  #inline-block은 vertical-align의 영향을 받음
  width: 20%;
  background-color: rebeccapurple;
}
.column2 {
  display: inline-block;
  vertical-align: middle;
  width: 70%;
  background-color: yellowgreen;
}

inline-block을 이해하기 위해 예제를 설정했습니다. 

<nav>의 vertical-align을 변경하게 되면 보라색 란의 위치가 변경되는 것을 확인할 수 있습니다. 또한, 각 요소의 width와 height값을 바꿔줌으로써 보라색과 연두색 란의 크기를 조절할 수 있습니다. 이처럼 inline-block은 width와 height를 가진 inline요소를 생성합니다. 

nav와 .column2의 width를 각각 26%, 75%로 지정하면 줄바꿈이 되어 보라색 란 밑에 연두색 란이 오는 것을 확인할 수 있습니다. 이처럼  inline-block은 너비를 채우고 나면 자연스럽게 줄바꿈 됩니다.
태그 :
1월 25, 2022

CSS: position의 속성 - relative, absolute, fixed

 CSS...css는 어렵습니다... 

마치 초등학교 시절로 돌아가 종이 접기를 하며 공간에 대해 다시금 배우는 느낌이에요..


이번에는 CSS중에서도 헷갈리는 position의 속성에 대해 알아보겠습니다.

position 속성은 문서상에 요소를 배치하는 방법을 지정합니다. position의 기본값은 static이며, 요소를 일반적 문서 흐름에 따라 배치합니다. static일때 left right top 등은 비활성화 되기에, 아무런 영향을 미치지 않습니다.

1. relative 

요소를 일반적인 흐름에 따라 배치하고, 자기 자신을 기준으로 top,right,bottom등 을 적용합니다.(원래 있어야 되는 그 자리를 기준으로) .

예를 들어, 

1
2
3
4
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

(출처: https://developer.mozilla.org/ko/docs/Web/CSS/position )


를 보시면, two id를 가진 박스가 원래 있어야 할 위치를 기준으로 

위(top)에서 20px , 왼쪽(left)에서 20px 떨어져 위치한 것을 볼 수 있습니다


relative 요소는 다른 요소들에는 영향을 주지 않습니다. Two를 제외한 다른 요소들은 Two가 원래 위치에 있는 것처럼 배치되는 것을 확인할 수 있습니다.


2. absolute

요소는 일반적인 문서 흐름에서 벗어나고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 부모의 position 값이 static이 아닐때, 자신의 left,right,top,bottom의 기준을 부모로 잡습니다. 만약 부모의 position 값이 static이라면, 그 위의 부모를 찾아나섭니다. 없다면 전체 문서를 기준으로 잡습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
}아

앞서의 HTML과 CSS에서 position 값 만을 absolute로 바꿔주었습니다. 

static이 아닌 부모를 찾지 못하여, 전체 문서를 기준으로 잡아 20px씩 이동을 한 모습입니다.

앞서의 예제와 다르게, 다른 요소들이 Two의 자리를 채웠습니다. absolute로 배치된 요소는 흐름에서 제거되기에, 다른 요소들은 마치 Two가 없는 것처럼 배치됩니다.

3. fixed

상자에서 완전히 벗어나 웹페이지를 기준으로 자신의 위치를 잡습니다. 따라서 스크롤를 하더라도 화면의 특정 지점에 고정되어있는 요소를 생성할 수 있습니다. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: fixed;
  top: 20px;
  right: 20px;
  background: blue;
}
body {
  height: 2000px;
}

앞서 예제에서 position 값을 fixed로 변경하고, 스크롤을 확인하기 위해 body에 height값을 주었습니다.

right에 20px을 주었기에, 화면 위와 오른쪽에서 20px 떨어진 곳에 위치한 모습입니다.


위에서 보이듯이 스크롤을 해도 그 자리에 고정돼 있음을 확인할 수 있습니다. 

position 속성은 페이지 레이아웃을 이해하는데 있어 매우 중요하기에 다양하게 사용하며 이해하는 과정이 필요합니다.





태그 :
피드 구독하기: 글 (Atom)