Grid Container에 적용하는 속성 displaygrid: 컨테이너가 block 요소처럼 동작합니다.inline-grid: 컨테이너가 inline-block 요소처럼 동작합니다. grid-template-columns & grid-template-rows각각 열(세로줄)과 행(가로줄)의 크기와 개수를 정의px, %, em 등 일반적인 단위 사용 가능.fr (fractional unit) : 사용 가능한 공간을 비율로 나누어 가진다.grid-template-columns: 1fr 1fr 2fr; → 3개의 열을 1:1:2 비율로 만듭니다.repeat(): 반복되는 값을 간결하게 표현합니다.grid-template-columns: repeat(3, 1fr); → 1fr 크기의 열 3개를 만듭니다.mi..

Flex Flex Container에 적용하는 속성displayflex: 부모 컨테이너가 block 요소처럼 동작 (한 줄을 모두 차지).inline-flex: 부모 컨테이너가 inline-block 요소처럼 동작 (콘텐츠만큼의 너비만 차지하고, 다른 요소와 한 줄에 배치될 수 있음) flex-direction (방향)아이템들을 쌓을 주축(main axis)의 방향을 결정row (기본값): ➡️ 아이템을 왼쪽에서 오른쪽으로 배치row-reverse: ⬅️ 아이템을 오른쪽에서 왼쪽으로 배치column: ⬇️ 아이템을 위에서 아래로 배치column-reverse: ⬆️ 아이템을 아래에서 위로 배치 flex-wrap (줄 바꿈)컨테이너에 아이템들이 다 들어가지 않을 때, 줄 바꿈을 할지 결정.nowrap (기..

CSS 공통 속성 inherit부모 요소의 계산된 값을 강제로 물려받음 initialinitial은 '브라우저의 기본값(User-Agent style)' X. CSS 명세서에 정의된 그 속성의 순수한 '초깃값'을 의미.initial 키워드 값을 사용 할 때 margin, border, background 등 단축 속성(shorthand property)에서는 전체 값을 initial으로 지정할 수는 있으나, 단축 속성의 개별 값으로 지정할 수는 없음.예를 들어 태그의 display 속성 - 브라우저 기본값(User-Agent style): display: block; display 속성의 initial 값: 명세에 따르면 display의 초깃값은 inline. 따라서 h1 { display: ini..

DOM 요소의 높이 측정 clientHeight측정 대상: 요소의 내부(inner) 높이를 측정합니다. 즉, 안쪽 여백(padding)과 콘텐츠(content) 영역의 높이를 더한 값포함하는 것: padding, 콘텐츠 높이제외하는 것: border, scrollbar, margin계산 공식: padding-top + padding-bottom + 콘텐츠의 높이이 div 안에 다른 내용을 채워 넣으려고 하는데, 실제로 사용할 수 있는 내부 공간의 높이가 얼마나 되지?"를 알고 싶을 때 사용. offsetHeight측정 대상: 요소가 화면에 그려질 때 시각적으로 차지하는 모든 공간의 높이를 측정.포함하는 것: padding, border, scrollbar(존재한다면), 콘텐츠 높이제외하는 것: marg..

Display 속성이란 무엇인가?CSS display 속성은 HTML 요소가 웹 페이지에 어떻게 보여지고, 다른 요소들과 어떻게 상호작용할지를 결정하는 가장 기본적인 방법이 속성은 요소가 생성하는 박스(box)의 종류와 그 자식 요소들의 레이아웃 방식을 정의한다. Display 외부 요소 이 부분을 W3org Spec 상 display legacy로 표현되어있는 일부 속성도 개인의 판단에 따라 외부요소 속성처럼 사용된다면 정리되어 있음을 사전에 미리 알립니다. block 항상 새로운 줄에서 시작하며, 사용 가능한 가로 너비 전체(100%)를 차지한다.width, height 속성으로 너비와 높이를 직접 지정할 수 있다.margin과 padding을 상하좌우 모든 방향으로 지정할 수 있으며, 다른 요..

시각적 서식 모델 (Visual Formatting Model) 생성된 박스들의 크기와 위치를 계산하여 화면에 배치하는 모든 규칙과 과정Block Formatting Context - BFC : block 박스들을 위에서 아래로 순서대로 배치합니다. margin을 이용해 박스 사이의 수직 간격을 조정함Inline Formatting Context - IFC : inline 박스들을 수평으로, 즉 글자가 써지는 방향으로 배치합니다. 한 줄에 다 들어가지 않으면 다음 줄로 넘기는(line-breaking) 역할도 함. line-height나 vertical-align 같은 속성으로 줄 안에서의 세밀한 위치를 조정.Flex, Grid, Position 속성 등등 박스 생성 (Box Generation)HTML..

다음날 아침.... 뚜뚜루 혹시나 1편을 안 보셨다면 https://bell-hana.tistory.com/entry/travel-jeonju-day-trip1 우당탕탕 1박 2일 전주여행 1탄 ( 한옥 숙소가 다했다.)거의 두달 전에 예약을 잡아둔 전주여행이기에 즐거운 마음으로 5월 24일에서 25일 전주여행을 다녀왔다!우선 영통구에 살고 있는 나는.... 전주를 가는 것 부터 쉽지 않았다.- 영통에서 수원역으bell-hana.tistory.com 1편 부터 보고오시면 좋습니다~!전주지만 전주보단 숙소를 더즐긴 어제를 뒤로 하고 우린 오늘만큼은 전주느낌을 내기 위해 아침일찍 체크아웃을 진행하려했다.그치만 아침은 포기할 수 없기에 숙소에서 기본으로 커피캡슐 2개가 제공 되어서 어제 남았던 피자와 함께 맛..

거의 두달 전에 예약을 잡아둔 전주여행이기에 즐거운 마음으로 5월 24일에서 25일 전주여행을 다녀왔다!우선 영통구에 살고 있는 나는.... 전주를 가는 것 부터 쉽지 않았다.- 영통에서 수원역으로 이동- 수원역에서 용산역으로 기차 타고 이동- 용산역에서 전주로 기차 타고 이동이라는 말도 안되는 프로세스를 거쳐서 가야했기에 아침일찍 가지는 않고... 좀 여유롭게 갔다. 그 흔적들이다... 적어도 집에서 8시 반에 나와서 전주를 12시 넘어서 도착하는 과정!!그래도 이전 대전 여행처럼 국내 여행에 맛들린 여자친구님과 나는 즐겁게 전주로 갔다 나도 대구사람이지만 어릴때 보다 점점 밑으로 내려갈 수록 예전 향기가 물씬 나는것 같다. 음.. 다르게 표현하자면 서울이 확실히 고층빌딩이 많고 그런느낌이지만 지방들..