[TIL] CSS_ block, inline, inline-block

14848 단어 TILWeCodehtmlcss위코드TIL

1. Block

블록은 위아래로 쌓는다.
그래서 블록 속성인 태그들을 사용하면 콘텐츠 크기에 상관없이 한 칸 , 한 칸씩을 몽땅 차지한다.

- block 요소인 tag들

<div>
<p>
<img>
<footer>
<h1~h6>
<hr>
... 등등

- width 값과 height 값을 입력해서 크기를 변경할 수 있다.

- widht에 원하는 값을 입력하고 margin: auto; 를 설정하면 가운데 정렬이 된다

<style>

 .bigbox {
 border: 1px solid red;
 width: 700px;
 height: 300px;
 margin: auto;
 }

 .samllbox {
 border: 1px solid green;
 width: 400px;
 height: 200px;
 margin: auto;
 }
    
</style>

 <body> 
     <div class = "bigbox">700X300 크기의 블록 박스</div>
     <div class = "samllbox">400X200 크기의 블록 박스</div>
 </body>

2. inline

in line , 말 그대로 라인 안에.. 라인 한 줄에 쭈우우욱 위치한다.
inline는 콘텐츠 내용의 크기가 inline의 크기가 된다.
예를 들어서 '안녕' 이라는 단어를 inline 요소로 써주면 안녕 딱 두 글자만큼의 길이와 글자 크기만큼의 높이를 가진다.

- inline 요소인 tag들

<span>
<a>
<br>
<strong>
... 등등

- inline은 width, height 로 크기를 변경할 수 없다 !


3. inline-block

inline의 특징과 block의 특징을 섞었다.
inline처럼 옆으로 나란히 위치시킬 수 있고, block 처럼 width,height 로 크기 조정이 가능하다

- inline-block 요소인 tag들

<button>
<img>
<input> 
<select>
<textarea>
... 등등

block이나 inline의 요소를 가진 태그를 썼는데 inline-block처럼 사용해야한다면??

display와 float 속성을 사용하면 된다!


4. display

display될 상태를 정한다.

1) inline-block

inline-block 속성 부여

span {
display: inline-block;
}

2) block

block 속성 부여 

span {
display: block;
}

3) none

화면에서 보이지 않게 한다. none을 활용해서 검색어 목록 등의 더 인터랙티브한 웹 페이지를 만들어줄 수 있다. 

div {
display: none;
}

5. float

float을 이용해서 inline처럼 사용해줄 수 있다.
아래처럼 코드를 적어주면 img 태그에 있는 요소가 왼쪽 혹은 오른쪽으로 붙는다! 

img {
float: left 혹은 right;
}

display: inline; 과 float: left;의 차이점

display: inline 도 왼쪽 정렬이고, float: left;도 왼쪽 정렬이다. 뭐가 다르지?? 눈으로 확인하고 싶었다.

block 요소를 가진 div 태그를 사용해서 테두리를 설정해 박스 2개를 만들었다.

* 2개 모두 display: inline; 설정했을 때


(인라인은 width, height가 따로 설정할 수 없기 때문에 노란색 밑줄 표시가 뜬다..! 일종의 경고!)

* 결과 : 둘 다 inline 처럼 요소 크기 만큼의 크기를 가졌다.

그리고 박스와 박스 사이에 여백이 있다.



* 2개 모두 float: left; 설정했을 때

* 결과 : 둘 다 block처럼 설정한 값만큼의 크기를 가졌다.

또 박스와 박스사이에 여백이 없었다.

  • float은 block 으로 정렬된다.
    display : inline 은 말그대로 inline으로 정렬된다.
    inline 요소의 정렬은 text-align으로 정렬된다.


근데 float 너는 진짜 뭐니..?

사실 float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 속성이며 위에서 찾았듯, block의 정렬이다.

float 속성은 3가지가 있다.

  • none : Default. Object displays where it appears in the text.
  • left : Text flows to the right of the object.
  • right : Text flows to the left of the object.

그러나 ....
float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모의 위치를 벗어나고,
float을 사용한 후 뒤에 오는 요소는 무조건 바로 옆으로 붙어버린다! (위에서 여백이 없었던 것처럼!!)

이걸 해결하기 위해서는 clear 속성이 필요하다.

clear? float 요소 옆에 채워지는 요소들에게 적용하는 속성이다.

clear 속성은 4가지가 있다.

  • none
  • left
  • right
  • both

float 해결 방법은 4가지가 있다.

(1) 부모 요소에게도 float 적용

.parent {
float : left 혹은 right;
}

이렇게 하면 부모 요소는 자식 요소의 높이를 인지하게 되지만 부모 요소도 float 된 요소가 되어 인라인 블럭의 특징을 가지게 된다. 때문에 비주얼 디자인 레이아웃에 따라 상황에 맞도록 사용해야한다.

(2) 부모 요소에 display: inline-block; 속성 사용

.parent {
display: linline-block;
}

부모 요소는 자식 요소의 높이를 인지하게 되지만 되지만 부모 요소에 정의된 인라인블럭 속성 특성 때문에 본인 영역만큼만 너비를 가지게 된다.

(3) 부모 요소에 overflow: hidden; 속성 적용

.parent {
overflow: hidden;
}

이 속성은 자식 요소가 부모 요소 박스보다 클 경우에 자식 요소 박스의 콘텐츠를 숨기는 속성이다.

overflow: auto;를 적용해도 되지만 자식 요소 박스의 너비가 부모 요소 박스의 너비보다 클 경우에 스크롤이 생기기 때문에 권장되지 않습니다.overflow 특징대로 넘치는 것을 숨겨주는 속성인데, 여기선 다른 의미도 포함하고 있습니다.
넘치는 콘텐츠를 숨긴다는 의미는 부모 요소 박스가 그 자식 요소 콘텐츠를 숨긴다는 것입니다.
그런데 부모 요소가 플롯된 자식 요소로 인해 높이를 인지하지 못하고 있는 상황에서 overflow: hidden; 속성을 적용하게 되면 부모 요소(컨테이닝 박스)는 넘치는 요소를 숨김 처리를 하려고 하기 때문에 자식 요소의 높이를 인지하기 위해 자동으로 높이값을 계산하게 됩니다.
출처: https://webclub.tistory.com/606 [Web Club]

(4) float된 요소 마지막 (형제)요소로 clear 속성 적용

float된 요소 마지막에 형제 요소로 아무 태그를 사용해서 clear 속성을 적용한다. 의미없는 태그를 사용하는 거라 보통은 권장하지 않는다. 

<div class="box-group"> 
  <div class="box is-blue"></div> 
  <div class="box is-yellow"></div> 
  <div class="box is-green"></div> 
  <div class="clear"></div> </div>
.clear {
clear: none, left, right, both 중 사용;
}
[Redux] redux toolkit - createAction

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage