CSS 2 - Float, Position, Flexbox
1. Float
💻1) Float
Float
를 사용하는 이유?
-> 가로 배치를 하기 위해
💻2) Float를 사용하게 되면
- 부모는 그 자식을 집 나간 자식으로 여김. 부모도, 형제들도 그 넘을 알 길이 없어진다.😬
Inline
, Inline-block
요소 모두 Block
으로 신분 상승
Block
은 되지만 길막을 못함🤪.
- 자기가 가진 컨텐츠 크기만큼만 자리 차지함.
width
선언한 경우 남은 공간 자동으로 margin
채우는 것도 🙅♀️🙅♂️
margin
을 줄 수는 있음. but 자동으로 채우는 걸 못함
- 모든 자식이 집을 나가면 부모의
height
는 0이 됨. 즉, 공간을 1도 차지하지 않음. 즉, Layout의 붕괴가 일어남😨😱
- 나만 볼 수 있는
Float
(Inline
)👻
Inline
요소들은 집 나간 Float
를 볼 수 있음
- 이런 점들 때문에 요즘은 잘 사용하지 않는다..😇
💻3) How to fix
- Honeyful Trick:
overflow: hidden;
overflow: hidden;
을 사용하면 부모가 집 나간 자식놈을 찾아올 수 있음
- 그치만 왜 이렇게 쓰는지는 알 수 없다..🤔
- FM: Clearfix -
clear
Float
로 인해 망가진 Layout을 고치기 위해 생긴 Property
clear
를 사용하여 올바르게 전체 자식의 세로 영역을 파악할 수 있음
clear
는 display가 block
인 요소들에만 사용 가능함
Clear
종류: left
| right
| both
left
: float: left;
가 앞에 있다면 그 위치를 파악해서 영향을 받지 않겠다는 뜻
right
: float: right;
both
: 둘 다
clear
사용 방법
- 부모한테
clear
를 주어도 되지만, 범용화 및 재사용성을 위해 clearfix
라는 클래스를 사용해도 좋음
.클래스명::after {
content: "";
display: block;
clear: left | right | both;
}
💻4) Pseudo-Element (가상 유도)
Float
를 위해 HTML에 임의의 요소를 추가하는 것은 그닥 좋은 방도가 아님
- Pseudo-Element를 사용해보자
- CSS로 Fake 요소를 만들어서 clear 주기
- 각 요소 당 2개 씩 만들 수 있음
::before
, ::after
- Pesudo-Element란?
- 선택자에 추가하는 키워드로, 선택한 요소의 지정된 부분에 스타일을 입힐 수 있음
- 사용 시 반드시
content
property 작성해야 함
💻5) 참고사항
- 같은 태그의 내용을 한번에 수정하고 싶을 때에는 태그를 클릭하고 ctrl+shift+L을 눌러주자.
- CSS에서 그냥 태그 이름을 쓰지 말고, class를 선언해서 쓰도록 하자.
padding
과 margin
구분 잘 하기.
padding
이나 margin
이 먹히지 않으면 inline
박스인지 확인해보자.
- 피그마 보면서 마크업하는 연습을 해야겠다. 놓친 부분 꽤 되는듯. 꼼꼼히 하기.
margin
사용 시 top, bottom 혼용하는 것보다 하나만 정해서 사용하는 것이 좋음.
strong
태그는 inline
임. margin
안 먹으니까 block
이나 inline-block
으로 변경해주기
2. Position
💻1) Position
position
을 사용하는 이유?
-> 요소를 원하는 위치에 자유롭게 이동시키기 위해
position
종류
static
, relative
, absolute
, fixed
, sticky
sticky
는 아직 지원하는 브라우저가 많이 없음
- top or bottom / left or right: 하나씩만 사용하는 것이 좋음.
💻2) Position을 사용할 때는
- type -> 기준점
- 어떤 종류의
Position
을 사용하는지
- 사용하는
Position
은 무엇을 기준에 두고 사용하는지 유의해야 한다.
💻3) Position 종류
- static
- 모든 요소의 기본 포지션 값
- 가장 일반적인 상태
- relative
- 기준점: 자기 자신이 원래 있던 자리
- ex)
top: 20px;
-> 자신의 top을 기준으로 20px 이동
- float와 마찬가지로 부모를 떠나서 붕 뜸.
- but, Layout이 붕괴되거나 다른 요소에 영향을 주지 않음. 부모, 형제가 자신의 위치를 기억하고 있음.
- absolute
float
사용할 때와 비슷함!
- 부모가 absolute 사용하는 자식을 집 나간 자식 취급함
- diplay가
block
으로 신분 상승
- 그러나 길막을 하지 못하는
block
..
- 기준점: 자신이 기준으로 삼고 싶은 기준점을 새로 정할 수 있음
position: static
이 아닌 요소를 기준으로 잡을 수 있음
postion: relative
인 요소를 기준으로 잡는 것이 좋다
- fixed
- absolute를 사용했을 때 동일한 현상이 일어남
- 다른 점: 기준점이 명확함 => viewport
- viewport: 브라우저 창의 전체 크기
💻4) z-index
- postion 된 요소들의 수직 방향으로서의 레벨을 알려주는 property
💻5) 참고사항
img
태그는 display: inline
이지만 width
, height
사용이 가능하다.
파일 자체가 가지고 있는 사이즈가 있기 때문에!
따라서 이미지 사이즈를 변경할 때, display: block
으로 바꾸어주면 더 깔끔하게 마크업할 수 있다✨
img
사이즈를 부모 요소에 맞출 때, 아래와 같이 해주면 좋다.
img {
display: block;
width: 100%;
height: auto;
}
- 반복적으로 쓰이는 요소는 묶어서 쓰고, 다른 부분만 태그를 따로 써주기
transform
: 어떤 요소의 모양을 변화시킬 때 사용하는 프로퍼티
ratate()
(회전), scale()
(배율), translate();
(위치 이동)
translate
는 자기 자신이 기준
- 정 가운데에 위치시킬 때 필요한 프로퍼티임
#prev,
#next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
position: fixed;
를 사용하면 컨텐츠 크기만큼만 width를 가지게 된다.
3. Flexbox
💻1) Flexbox 사용 방법
.flexbox {
display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap;
}
- 나 플렉스박스 쓸거임
- flex는 block과 비슷하지만 block은 할 수 없고 요소를 쉽게 정렬할 수 있음
- inline-flex: inline-block과 비슷하지만 위와 동일
- 선언은 누구한테? 정렬하고자하는 요소를 지니고 있는 부모에게😜
- 가로 정렬? 세로 정렬?
- 방향 정해줘야 함
- flex를 하게 되면 우리 눈에 보이지 않는 2개의 Axis(축) 생김
- Main axis(flex-direction 방향대로 생김), Cross axis(Main axis와 수직)
row
를 주면 main: 왼->오 | cross: 위->아래
row-reverse
를 주면 main: 오->왼 | cross: 위->아래
column-reverse
를 주면 main: 아래->위 | main: 왼->오
- 무조건 한 줄 안에 다 정렬?
flex-wrap: nowrap
: 감싸지 않고 자식의 사이즈를 줄여서라도 한 줄로 정렬해버림
flex-wrap: wrap
: 한 줄에 모두 정렬하기에 공간이 넉넉하지 않으면 여러 줄로 만들어버림
- 씬나는 플렉스박스 party time!🤸♀️🤸♂️
- 원하는 대로 정렬하기
💻2) Main axis & Cross axis
- Main axis를 기준으로 정렬하고 싶을 때는
justify-content
사용
justify-content: flex-start
-> 왼쪽에서부터 정렬 시작
justify-content: center
-> 가운데 정렬
justify-content: space-between
-> 요소 사이의 간격을 같게 해줌
- Cross axis는
aline-items
나 align-content
사용
aline-items: center
-> 세로축 가운데 정렬
aline-items
는 하나의 flexline을 흐르는 cross axis 기준으로 정렬
align-content
는 flex-wrap: wrap
이어야 함
flex-wrap: wrap
을 하게 되면 flexline이 여러 개가 생길 수 있음
align-content
는 전체 큰 축을 기준으로 정렬
align-content: space-between
사용 가능
- 사용 시엔 선
aline-items
후 align-content
해보기🤣
💻3) order
- flexbox를 쓰게 되면 사용 순서를 정리할 수 있음😇👍
order: 1;
💻4) 참고사항
- flex를 쓰게 되면 원하지 않는데 자식 요소의 width 간격이 좁아질 수 있다.
-> width: 100%;
사용하면 원래대로 됨
📝 짧은 후기
- 프로젝트를 진행하면서
justify-content: center
나, aline-items
를 의미도 모르고 사용한 적이 굉장히 많은데 (그러면서 안 먹혀서 당황한 적도 한 두번이 아니다..ㅎㅎ) 명료하게 알 수 있었다. 이 강의.. 넘 맘에 들어👍👍
- 아직 명확하게 float, position, flex를 안다고 자부할 수는 없을 거 같다. 다른 예제들을 마크업하면서 내 걸로 만드는 연습을 해봐야 할 것 같다. flex 위주로!
Author And Source
이 문제에 관하여(CSS 2 - Float, Position, Flexbox), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@theseda2s/CSS-2
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Float
를 사용하는 이유?
-> 가로 배치를 하기 위해
- 부모는 그 자식을 집 나간 자식으로 여김. 부모도, 형제들도 그 넘을 알 길이 없어진다.😬
Inline
,Inline-block
요소 모두Block
으로 신분 상승Block
은 되지만 길막을 못함🤪.- 자기가 가진 컨텐츠 크기만큼만 자리 차지함.
width
선언한 경우 남은 공간 자동으로margin
채우는 것도 🙅♀️🙅♂️margin
을 줄 수는 있음. but 자동으로 채우는 걸 못함- 모든 자식이 집을 나가면 부모의
height
는 0이 됨. 즉, 공간을 1도 차지하지 않음. 즉, Layout의 붕괴가 일어남😨😱
- 나만 볼 수 있는
Float
(Inline
)👻Inline
요소들은 집 나간Float
를 볼 수 있음
- 이런 점들 때문에 요즘은 잘 사용하지 않는다..😇
- Honeyful Trick:
overflow: hidden;
overflow: hidden;
을 사용하면 부모가 집 나간 자식놈을 찾아올 수 있음- 그치만 왜 이렇게 쓰는지는 알 수 없다..🤔
- FM: Clearfix -
clear
Float
로 인해 망가진 Layout을 고치기 위해 생긴 Property
clear
를 사용하여 올바르게 전체 자식의 세로 영역을 파악할 수 있음clear
는 display가block
인 요소들에만 사용 가능함
Clear
종류:left
|right
|both
left
:float: left;
가 앞에 있다면 그 위치를 파악해서 영향을 받지 않겠다는 뜻right
:float: right;
both
: 둘 다
clear
사용 방법- 부모한테
clear
를 주어도 되지만, 범용화 및 재사용성을 위해clearfix
라는 클래스를 사용해도 좋음
- 부모한테
.클래스명::after {
content: "";
display: block;
clear: left | right | both;
}
Float
를 위해 HTML에 임의의 요소를 추가하는 것은 그닥 좋은 방도가 아님- Pseudo-Element를 사용해보자
- CSS로 Fake 요소를 만들어서 clear 주기
- 각 요소 당 2개 씩 만들 수 있음
::before
,::after
- Pesudo-Element란?
- 선택자에 추가하는 키워드로, 선택한 요소의 지정된 부분에 스타일을 입힐 수 있음
- 사용 시 반드시
content
property 작성해야 함
- 같은 태그의 내용을 한번에 수정하고 싶을 때에는 태그를 클릭하고 ctrl+shift+L을 눌러주자.
- CSS에서 그냥 태그 이름을 쓰지 말고, class를 선언해서 쓰도록 하자.
padding
과margin
구분 잘 하기.padding
이나margin
이 먹히지 않으면inline
박스인지 확인해보자.- 피그마 보면서 마크업하는 연습을 해야겠다. 놓친 부분 꽤 되는듯. 꼼꼼히 하기.
margin
사용 시 top, bottom 혼용하는 것보다 하나만 정해서 사용하는 것이 좋음.strong
태그는inline
임.margin
안 먹으니까block
이나inline-block
으로 변경해주기
💻1) Position
position
을 사용하는 이유?
-> 요소를 원하는 위치에 자유롭게 이동시키기 위해position
종류
static
,relative
,absolute
,fixed
,sticky
sticky
는 아직 지원하는 브라우저가 많이 없음- top or bottom / left or right: 하나씩만 사용하는 것이 좋음.
💻2) Position을 사용할 때는
- type -> 기준점
- 어떤 종류의
Position
을 사용하는지- 사용하는
Position
은 무엇을 기준에 두고 사용하는지 유의해야 한다.
💻3) Position 종류
- static
- 모든 요소의 기본 포지션 값
- 가장 일반적인 상태
- relative
- 기준점: 자기 자신이 원래 있던 자리
- ex)
top: 20px;
-> 자신의 top을 기준으로 20px 이동- float와 마찬가지로 부모를 떠나서 붕 뜸.
- but, Layout이 붕괴되거나 다른 요소에 영향을 주지 않음. 부모, 형제가 자신의 위치를 기억하고 있음.
- absolute
float
사용할 때와 비슷함!- 부모가 absolute 사용하는 자식을 집 나간 자식 취급함
- diplay가
block
으로 신분 상승- 그러나 길막을 하지 못하는
block
..- 기준점: 자신이 기준으로 삼고 싶은 기준점을 새로 정할 수 있음
position: static
이 아닌 요소를 기준으로 잡을 수 있음postion: relative
인 요소를 기준으로 잡는 것이 좋다- fixed
- absolute를 사용했을 때 동일한 현상이 일어남
- 다른 점: 기준점이 명확함 => viewport
- viewport: 브라우저 창의 전체 크기
💻4) z-index
- postion 된 요소들의 수직 방향으로서의 레벨을 알려주는 property
💻5) 참고사항
img
태그는display: inline
이지만width
,height
사용이 가능하다.
파일 자체가 가지고 있는 사이즈가 있기 때문에!
따라서 이미지 사이즈를 변경할 때,display: block
으로 바꾸어주면 더 깔끔하게 마크업할 수 있다✨img
사이즈를 부모 요소에 맞출 때, 아래와 같이 해주면 좋다.img { display: block; width: 100%; height: auto; }
- 반복적으로 쓰이는 요소는 묶어서 쓰고, 다른 부분만 태그를 따로 써주기
transform
: 어떤 요소의 모양을 변화시킬 때 사용하는 프로퍼티
ratate()
(회전),scale()
(배율),translate();
(위치 이동)translate
는 자기 자신이 기준- 정 가운데에 위치시킬 때 필요한 프로퍼티임
#prev, #next { position: absolute; top: 50%; transform: translateY(-50%); }
position: fixed;
를 사용하면 컨텐츠 크기만큼만 width를 가지게 된다.
3. Flexbox
💻1) Flexbox 사용 방법
.flexbox {
display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap;
}
- 나 플렉스박스 쓸거임
- flex는 block과 비슷하지만 block은 할 수 없고 요소를 쉽게 정렬할 수 있음
- inline-flex: inline-block과 비슷하지만 위와 동일
- 선언은 누구한테? 정렬하고자하는 요소를 지니고 있는 부모에게😜
- 가로 정렬? 세로 정렬?
- 방향 정해줘야 함
- flex를 하게 되면 우리 눈에 보이지 않는 2개의 Axis(축) 생김
- Main axis(flex-direction 방향대로 생김), Cross axis(Main axis와 수직)
row
를 주면 main: 왼->오 | cross: 위->아래
row-reverse
를 주면 main: 오->왼 | cross: 위->아래
column-reverse
를 주면 main: 아래->위 | main: 왼->오
- 무조건 한 줄 안에 다 정렬?
flex-wrap: nowrap
: 감싸지 않고 자식의 사이즈를 줄여서라도 한 줄로 정렬해버림
flex-wrap: wrap
: 한 줄에 모두 정렬하기에 공간이 넉넉하지 않으면 여러 줄로 만들어버림
- 씬나는 플렉스박스 party time!🤸♀️🤸♂️
- 원하는 대로 정렬하기
💻2) Main axis & Cross axis
- Main axis를 기준으로 정렬하고 싶을 때는
justify-content
사용
justify-content: flex-start
-> 왼쪽에서부터 정렬 시작
justify-content: center
-> 가운데 정렬
justify-content: space-between
-> 요소 사이의 간격을 같게 해줌
- Cross axis는
aline-items
나 align-content
사용
aline-items: center
-> 세로축 가운데 정렬
aline-items
는 하나의 flexline을 흐르는 cross axis 기준으로 정렬
align-content
는 flex-wrap: wrap
이어야 함
flex-wrap: wrap
을 하게 되면 flexline이 여러 개가 생길 수 있음
align-content
는 전체 큰 축을 기준으로 정렬
align-content: space-between
사용 가능
- 사용 시엔 선
aline-items
후 align-content
해보기🤣
💻3) order
- flexbox를 쓰게 되면 사용 순서를 정리할 수 있음😇👍
order: 1;
💻4) 참고사항
- flex를 쓰게 되면 원하지 않는데 자식 요소의 width 간격이 좁아질 수 있다.
-> width: 100%;
사용하면 원래대로 됨
📝 짧은 후기
- 프로젝트를 진행하면서
justify-content: center
나, aline-items
를 의미도 모르고 사용한 적이 굉장히 많은데 (그러면서 안 먹혀서 당황한 적도 한 두번이 아니다..ㅎㅎ) 명료하게 알 수 있었다. 이 강의.. 넘 맘에 들어👍👍
- 아직 명확하게 float, position, flex를 안다고 자부할 수는 없을 거 같다. 다른 예제들을 마크업하면서 내 걸로 만드는 연습을 해봐야 할 것 같다. flex 위주로!
Author And Source
이 문제에 관하여(CSS 2 - Float, Position, Flexbox), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@theseda2s/CSS-2
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.flexbox {
display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap;
}
- 나 플렉스박스 쓸거임
- flex는 block과 비슷하지만 block은 할 수 없고 요소를 쉽게 정렬할 수 있음
- inline-flex: inline-block과 비슷하지만 위와 동일
- 선언은 누구한테? 정렬하고자하는 요소를 지니고 있는 부모에게😜
- 가로 정렬? 세로 정렬?
- 방향 정해줘야 함
- flex를 하게 되면 우리 눈에 보이지 않는 2개의 Axis(축) 생김
- Main axis(flex-direction 방향대로 생김), Cross axis(Main axis와 수직)
row
를 주면 main: 왼->오 | cross: 위->아래row-reverse
를 주면 main: 오->왼 | cross: 위->아래column-reverse
를 주면 main: 아래->위 | main: 왼->오
- 무조건 한 줄 안에 다 정렬?
flex-wrap: nowrap
: 감싸지 않고 자식의 사이즈를 줄여서라도 한 줄로 정렬해버림flex-wrap: wrap
: 한 줄에 모두 정렬하기에 공간이 넉넉하지 않으면 여러 줄로 만들어버림
- 씬나는 플렉스박스 party time!🤸♀️🤸♂️
- 원하는 대로 정렬하기
- Main axis를 기준으로 정렬하고 싶을 때는
justify-content
사용justify-content: flex-start
-> 왼쪽에서부터 정렬 시작justify-content: center
-> 가운데 정렬justify-content: space-between
-> 요소 사이의 간격을 같게 해줌
- Cross axis는
aline-items
나align-content
사용aline-items: center
-> 세로축 가운데 정렬aline-items
는 하나의 flexline을 흐르는 cross axis 기준으로 정렬align-content
는flex-wrap: wrap
이어야 함flex-wrap: wrap
을 하게 되면 flexline이 여러 개가 생길 수 있음align-content
는 전체 큰 축을 기준으로 정렬align-content: space-between
사용 가능- 사용 시엔 선
aline-items
후align-content
해보기🤣
- flexbox를 쓰게 되면 사용 순서를 정리할 수 있음😇👍
order: 1;
- flex를 쓰게 되면 원하지 않는데 자식 요소의 width 간격이 좁아질 수 있다.
->width: 100%;
사용하면 원래대로 됨
- 프로젝트를 진행하면서
justify-content: center
나,aline-items
를 의미도 모르고 사용한 적이 굉장히 많은데 (그러면서 안 먹혀서 당황한 적도 한 두번이 아니다..ㅎㅎ) 명료하게 알 수 있었다. 이 강의.. 넘 맘에 들어👍👍 - 아직 명확하게 float, position, flex를 안다고 자부할 수는 없을 거 같다. 다른 예제들을 마크업하면서 내 걸로 만드는 연습을 해봐야 할 것 같다. flex 위주로!
Author And Source
이 문제에 관하여(CSS 2 - Float, Position, Flexbox), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@theseda2s/CSS-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)