[CSS]정렬에 쓰이는 속성 display,float

display : 화면에서에서 엘리먼트들이 어떻게 보여지고
                   다른 엘리먼트와 어떻게 상호 배치되는지를 결정

• none: 화면에서 보이지 않음. 크기를 차지 하지도 않는다.
• flex: 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정
• block: 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치(가로행을 모두 차지함)
• inline : 컨텐츠를 감쌀 정도의 크기. 한 줄에 모두 나열(컨테이너 블록의 상단에서 하나씩 차례로 수평으로 배치).가로 다 차지
• inline-block : inline과 block의 특성을 합쳐놓은 속성, inline의 속성이지만 크기 변경이 가능.해당 요소만큼만 가로 크기 차지

*display:block을 기본값으로 갖고 있는 태그들:<div>, <h1>, <p>, <li>, <section>

*display:inline-block을 기본값으로 갖고 있는 태그들: <button>, <input>, <select>, <textarea>

*display:inline을 기본값으로 갖고 있는 태그들: < span>, <a>, <img>, <em>, <i>, <strong>

---

*inline 요소에 width, height 값 적용 불가! ( 요소 내부 컨텐츠 자체의 사이즈에 따라 결정된다.)

*inline-block 사용할 때는 태그끼리 공백이 없어야함 

<div class="left"></div><div class="right"></div>

---

*inline-block 사용 후 다른요소의 정렬이 이상해진다면 형제요소 중 첫번째 있는 요소에

vertical-align: top;

(top에 정렬할 경우)위의 속성을 적용해준다 -> base liine을 정리해줌
간단하게 말해서 inline/inline-block 요소간의세로정렬 할 때 쓰임

[*inline 요소(블록 포함)에 수직 정렬을 위해서 Vertical-align 사용]

---

*inline-block으로 가운데 정렬하기 (wrap div가 필요하다)

.btn-box {
  width: 100%;
  height: 100px;

  text-align: center;
}

.shaky-btn {
  width: 100px;
  height: 70px;

  display: inline-block;
}

안녕하세유

---

float : 요소를 붕~띄워서 정렬  
              (좌우 정렬시킬 때 매우 유용, normal flow으로부터 빠져서 배치되기 때문)

*display: inline-block; 과 float: left;는 모두 동일한 결과를 가져오지만

함께 사용하는 것은 안됨.

*display 속성은 none을 제외하고 모두 무시된다.

• none
• left
• right
• inline-start
• inline-end

float: none;

none

float: left;

left

float: right;

right

float: inline-start;

inline-start

float: inline-end;

inline-end

 

공중에 띄워서 배치를 하기 때문에 float를 준 다음 요소는 붕 뛰어진 요소 아래에
덮혀질/가려지는 상황이 발생

이럴때는 clear:both;를 사용해서 해결한다!

혹은

빈 <div>박스를 만들어서 base-line을 정리해주는 방법도 많이 사용된다!

빈 박스 생성

이렇게 float가 적용된 태그 중 맨 아래에 적어도 된다.

 

 

 float 사용했는데 부모 영역이 없어졌다면?!

Oops 부모님 호출해오거라

overflow : hidden을 적용해준다!!!

yay

 

 

 

https://www.youtube.com/watch?v=8xKDSdHQ35U&t=774s 

10:24 부터 float나옵니당

 

https://opentutorials.org/course/2418/13527

float - 생활코딩

https://mingportal0.github.io/css/2021/05/07/css-float/

가로 정렬.CSS Float · 밍밍이의 작업실

 

https://developer.mozilla.org/ko/docs/Web/CSS/float

float - CSS: Cascading Style Sheets | MDN

---

이것도 공부하자!!

[CSS]flexbox

---

 

position : absolute
 박스의 절대위치기준으로 이동하여 스크롤시 화면에 크기에 따라 이동

 

position : fixed 
화면 기준으로 절대 위치한다 . 스크롤해도 변함 없음
ex)화면 맨아래 네비 바(navigation bar)를 고정할 때

 

https://hans-j.tistory.com/113

[CSS]position

---

공부할 때 도움 많이 된 블로그!! +설명 출처

https://velog.io/@iamhayoung/CSS-Position-Display-Float%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

💅 CSS :: Position, Display, Float에 대해 알아보기

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Inline elements - HTML: HyperText Markup Language | MDN

https://programming119.tistory.com/97

[CSS] display란? / display 속성 / display 종류 / 🖼

https://www.tcpschool.com/css/css3_expand_flexbox

코딩교육 티씨피스쿨