본문 바로가기

Frontend/CSS

[CSS] Box Model(margin, border, padding, content)
Frontend/CSS 2023. 1. 29. [CSS] Box Model(margin, border, padding, content) CSS에서 가장 기초적인 Box Model에 대한 공부 기록이다. 개요 box model은 HTML의 요소를 둘러싼 박스의 구성을 말한다. margin, border, padding, content로 구성되어 있다. 위와 같은 위치를 가진다. margin border의 바깥 여백이다. 주로 요소들 간의 공간을 지정할 때 사용한다. margin은 top, bottom, left, right 각각 지정해 줄 수도 있지만, 한 번에 여러 값들을 지정할 수도 있다. div { margin-top: 50px; margin-bottom: 50px; margin-right: 100px; margin-left: 100px; } 위 코드는 각각 값을 지정해준 예시이다. div { margin : 50px 100px 50..
[CSS] Grid (repeat,minmax,fr)
Frontend/CSS 2022. 9. 10. [CSS] Grid (repeat,minmax,fr) flex box에서 grid 형태를 만들기 어렵다. grid 기능을 활용하면 쉽게 만들 수 있다. 사용법 부모 요소에서 display를 grid로 지정해준다. grid-template-columns속성과 grid-template-rows속성을 이용해서 grid의 전체적인 틀을 만들어준다. grid의 간격을 지정해줄 수도 있다. column-gap : 열끼리의 사이 공간 row-gap : 행끼리의 사이 공간 gap : 열과 행의 공간 크기가 같다면 한 번에 지정 가능 위의 내용만을 사용해 grid를 만들어보자! 부모 요소 안에 4개의 자식 div 태그를 넣어줬다. .container { display:grid; grid-template-columns : 100px 100px; grid-template-ro..
[CSS] Flex 정리 (justify-content, align-items, main axis, cross axis)
Frontend/CSS 2022. 9. 10. [CSS] Flex 정리 (justify-content, align-items, main axis, cross axis) flex는 레이아웃을 하는 데에 있어서 필수적인 기능이다. 사용법 부모 요소의 display를 flex로 바꿔준다. 부모 요소는 flexbox container가 된다. 움직이고자 하는 자식 요소는 flexbox가 된다. 바디 태그 내부의 모습이다. class가 container인 부모 div태그와 자식 div태그 두 개가 있다. .container { display: flex; } .container > div { width: 100px; height: 100px; background-color : black; margin :10px; } 부모 태그의 display를 flex로 지정해줬다. 자식 요소들이 수평 방향으로 정렬된 것을 볼 수 있다. 따라서 정렬 방향의 기본값은 수평 방향이라는 것을 알 수 ..

티스토리툴바