float 2

[CSS3]Position

🤔Position이란? 요소를 원하는 위치에 자유롭게 이동하기 위해서 사용하는 property이다. Position에는 5가지의 종류가 존재한다. 1. static 2. relative 3. absolute 4. fixed 5. sticky (sticky는 지원하는 브라우저가 많지 않기 때문에 내용을 스킵하겠다.) ✨position공부 시 중요 포인트 ❗ 1. 내가 어떤 종류의 position을 사용하고 있는지 ❗ 2. 내가 사용하는 position은 무엇을 기준으로 사용하는지 기준점이 각각의 포지션 type에 따라 많이 달라진다. 💡 Type 1. static static은 모든 요소의 기본 position값이다. 모든 요소의 포지션은 모두 static으로 설정되어있다. 우리가 생각하는 일반적인 요소의..

Front-end/CSS 2022.03.20

[CSS3]Float란? / Layout 오류 시 해결 방법

🤔Float란 무엇일까? float는 사전적 의미로 (물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다 등 뜬다는 의미를 가지고 있다. 🤨Float는 왜 필요할까? 우리가 Float를 배우는 이유는 block요소들을 가로 배치하기 위함이다. block은 자기의 영역을 침범 받지 않은 길막의 특징을 가지고 있어 가로 배치에 어려움이 있는데 이를 float가 해결해준다! 📑Float사용법과 원리 float는 부모태그 안에 존재하는 자식 태그들에 적용해 사용된다. Float Float Float 한번 예시로 사용법을 배워보자. 우리가 여러 자식 요소(red, blue, green)중 요소 red에 float를 넣으면 red는 부모 요소(float) 로부터 뜨게 된다. .red{ float: left; ..

Front-end/CSS 2022.03.14