'📃 Front-End/CSS' 카테고리의 글 목록 (2 Page)

Flex

2022.10.20

flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다. display : flex 정렬 하고자 하는 요소를 감싸는 부모에게 display : flex 를 선언 합니다. flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지 합니다. 선언 시, 보이지 않는 두 개의 축(Axis)이 생깁니다. .flexBox{ display: flex; } 메인축(Main Axis), 수직축 또는 교차축(Cross Axis) Main axis : flex-direction 방향에 따라 Cross axis : main과 수직을 이루는 방향 flex-direction 자식들이 배치되는 축의 방향을 결정하는 속성 .flexBox{ display: flex; f..

📃 Front-End/CSS

Grid

2022.10.20

2차원적으로 수평과 수직을 동시에 나눌 수 있는 레이아웃 방법 입니다. display : grid , column 과 rows 1 2 3 4 4 4 4 4 .father{ display: grid; /* 자식의 부모에게 선언 */ grid-template-columns:250px 250px 250px; /* 원하는 열만큼 입력 한다 */ grid-template-rows: 100px 80px 300px; /*원하는 row의 크기를 입력 */ column-gap: 10px; /* column 간의 차이 */ row-gap: 10px; } .child{ flex-basis: 300px; background: peru; color: white; font-size: 50px; } repeat .grid{ dis..

📃 Front-End/CSS

position 속성

2022.10.19

static, relative, absolute, fixed, sticky 가 있습니다. static 기본 상태이며, 차례대로 왼쪽 → 오른쪽, 위 → 아래 위치 합니다. body{ margin: 0; } div{ width : 50px; height : 50px; margin-bottom : 20px; background : red; } section{ background : yellow; } .box{ background-color : blue; } position을 지정하지 않으면 위와 같이 위에서 아래로(div는 block요소) 나타납니다. relative 기존 static이었을 때 위치를 기준으로 top, right, bottom, left 속성을 사용해 위치 조절이 가능 합니다. 아래 그림에서..

📃 Front-End/CSS

display 속성

2022.10.19

요소가 화면에 어떻게 드러나게 할지를 결정하는 속성 입니다. 대표적으로 inline, block, inline-block, none inline inline은 text크기만큼만 공간을 점유하고 줄바꿈을 하지 않습니다. width, height, top, bottom 속성은 무시 됩니다. left, right 속성은 사용 가능 margin 은 상하는 적용 되지 않고, 좌우만 가능합니다. padding 은 다 가질 수 있습니다. block block은 한 영역 전체를 차지하는 박스 형태를 가지는 형태 width, height, margin, padding 속성이 모두 반영 됩니다. 항상 새로운 라인에서 요소가 시작 합니다. 따로 부모의 height를 선언하지 않을 경우, 자식 요소의 height의 합 = 부..

📃 Front-End/CSS

Box Model & box-sizing

2022.10.19

Box Model CSS 박스 모델은 HTML Element가 웹페이지에서 차지하는 공간을 정의한 모델 입니다. Box Model 이미지 Element의 내용이 담긴 Content 영역 Element를 감싸는 경계 Border 영역 Border와 Content 영역 사이의 Padding 영역 Border 바깥의 Margin 영역 box-sizing box-sizing 속성을 사용하면, width 와 height 이 컨텐츠 영역 기준인지, 테두리 영역 기준인지 정할 수 있습니다. box-sizing 종류 box-sizing: content-box 기본값이며 컨텐츠 영역 기준. Padding 영역부터 포함하지 않습니다. box-sizing: border-box 테두리 영역 기준. Margin 영역부터 포함하..

📃 Front-End/CSS

id & class

2022.10.19

id & class html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 id 값 또는 class 명을 할당하여 처리가 가능 합니다. id id를 불러올 때 샵(#) 를 사용 합니다. 하나의 요소에 하나의 id만 사용 가능 합니다. 중복으로 사용 불가능 하나의 아이디는 페이지에서 딱 한 번만 사용해야 합니다. id 예제 제목 제목2 제목 #title{ font-size : 20px; } class class를 불러올 때 마침표(.) 를 사용 합니다. 하나의 요소에 여러 개의 class 를 사용 할 수 있습니다. class를 추가할 때는 띄어쓰기로 구분 중복 사용이 가능하며, 동일한 클래스명을 페이지의 여러 곳에 사용 할 수 있습니다. class 예제 제목 제목 제목 .title{ font-s..

Flex

Grid

position 속성

display 속성

Box Model & box-sizing

id & class

티스토리툴바