Block 2

[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

[CSS3]BOX (Block,Inline,Inline Block)

🤔BOX란 무엇인가? Box는 Box Model만을 이해한다고해서 바로 사용 가능한 것이 아니다. 내가 어떠한 BOX Type을 쓰느냐에 따라 Box Model은 달라진다. 우리에게 중요한 Box type은 4가지가 있다. Block / Inline / Iline Block / Flex 📢BoxModel Box Model는 4가지 영역으로 나뉜다. 1. Content content는 content가 들어가있는 상자로 가로는 width, 세로는 height로 표현한다. 2. Padding 안쪽 여백, 즉 content와 border 사이의 공간을 나타내는 것을 padding이라 한다. 3. Border 테두리를 나타내는 border, 사용법이 다른 BOX들과 다르다. /*border: 굵기 스타일 색상*/..

Front-end/CSS 2022.03.13