벨 하나로 띵동

CSS - Grid

벨하나 — Sun, 8 Jun 2025 23:31:40 +0900

Grid Container에 적용하는 속성

`display`

grid: 컨테이너가 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개를 만듭니다.
minmax(): 최소값과 최대값을 지정하여 유연한 크기를 만듭니다.
- minmax(100px, 1fr) → 최소 100px 너비를 보장하되, 공간이 남으면 1fr 비율로 늘어납니다.
주의점/특징: fr 단위는 gap을 제외한 나머지 공간을 기준으로 비율을 계산하므로 매우 직관적.

grid-template-*를 명시하지 않을 시 암시적 규칙에 의해 생성

`grid-auto-columns` & `grid-auto-rows`

암시적으로 생성되는 열(column)과 행(row) 트랙의 크기를 제어
두 속성 모두 기본값은 auto
auto의 의미: "선반에 놓일 물건(콘텐츠)의 크기에 딱 맞게 선반 크기를 조절해라"
특징: 200px나 1fr 등 명시적인 값을 지정 가능. grid-auto-rows: 150px; 라고 지정하면, 암시적으로 생성되는 모든 행의 높이는 150px

`grid-auto-flow`

아이템을 어떤 방향으로 자동 배치할지, 즉 '선반을 가로로 먼저 채울지, 세로로 먼저 채울지' 결정
row (기본값) ➡️: 아이템을 가로로 차례대로 배치합니다. 한 줄이 꽉 차면 다음 줄로 넘어간다
column ⬇️: 아이템을 세로로 차례대로 배치합니다. 한 열이 꽉 차면 다음 열로 넘어간다.
dense: 알고리즘을 최적화하여 그리드에 빈 공간이 생기면, 나중에 나오는 아이템이라도 크기가 맞으면 그 빈 공간을 채워 넣는다. (약간의 순서 변경이 발생할 수 있음)

`grid-template-areas`

각 영역에 이름을 부여하고, 그 이름을 이용해 아이템을 배치

문자열로 각 행의 구성을 정의

. 문자는 빈 셀을 의미
ex

grid-template-areas:
  "header header header"
  "nav    main   aside"
  "footer footer footer";

주의점/특징: 모든 행은 동일한 수의 열을 가져야 한다. 레이아웃 구조를 한눈에 파악할 수 있어 매우 편리.

`gap` (or `grid-gap`)

셀과 셀 사이의 간격(Gutter)을 정의.
row-gap column-gap 순서로 값을 지정. 하나만 쓰면 행과 열 간격이 동일하게 적용됩니다.
- gap: 20px 10px; → 행 간격은 20px, 열 간격은 10px.
주의점/특징: 과거에는 grid-row-gap, grid-column-gap으로 썼지만, 지금은 gap으로 통일.

`justify-content` & `align-content`

컨테이너에 여유 공간이 있을 때, 그리드 전체를 어떻게 정렬할지 결정. Flexbox와 역할이 동일
justify-content: 행 축(가로) 정렬
align-content: 열 축(세로) 정렬
주의점/특징: 그리드의 크기가 컨테이너보다 작을 때만 효과가 있음

`justify-items` & `align-items`

각 셀 안에서 아이템들을 기본적으로 어떻게 정렬할지 결정.
justify-items: 셀 안에서의 수평 정렬
align-items: 셀 안에서의 수직 정렬
stretch (기본값): 아이템이 셀을 꽉 채우도록 늘어난다.
start: 셀의 시작점에 맞춰 정렬.
end: 셀의 끝점에 맞춰 정렬.
center: 셀의 중앙에 정렬.

Flex Item에게 적용하는 속성

`grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`

아이템이 몇 번째 그리드 선(Grid Line)에서 시작해서 몇 번째 선에서 끝날지 지정하여 위치와 크기를 결정
숫자. 그리드 선은 1부터 시작합니다.
- grid-column-start: 1; grid-column-end: 3; → 1번 세로선에서 시작해 3번 세로선에서 끝납니다. (2개의 열을 차지)
주의점/특징: -1은 마지막 선을 의미하여 매우 유용하게 사용 가능

`grid-column` & `grid-row`

start와 end 속성을 /로 구분하여 한 번에 쓰는 단축 속성
- 예시: grid-column: 1 / 3;
span 키워드 - 몇 개의 칸을 차지할지 지정 가능
- grid-column: 1 / span 2; → 1번 선에서 시작해 2개의 칸을 차지합니다.

`grid-area`

아이템 배치를 위한 궁극의 단축 속성, 두 가지 방식으로 사용.
1. grid-row-start / grid-column-start / grid-row-end / grid-column-end 순서로 값을 지정.
2. 부모의 grid-template-areas에서 정의한 영역 이름을 지정. (가장 직관적)
예시: grid-area: main;

`justify-self` & `align-self`

부모의 justify-items, align-items 설정을 무시하고 특정 아이템 하나만 셀 안에서 개별적으로 정렬. Flexbox의 align-self와 역할이 유사.
- justify-self: 셀 안에서의 개별 수평 정렬
- align-self: 셀 안에서의 개별 수직 정렬
값: stretch, start, end, center 등.

CSS - Flex

벨하나 — Sun, 8 Jun 2025 23:30:09 +0900

Flex

Flex Container에 적용하는 속성

`display`

flex: 부모 컨테이너가 block 요소처럼 동작 (한 줄을 모두 차지).
inline-flex: 부모 컨테이너가 inline-block 요소처럼 동작 (콘텐츠만큼의 너비만 차지하고, 다른 요소와 한 줄에 배치될 수 있음)

`flex-direction` (방향)

아이템들을 쌓을 주축(main axis)의 방향을 결정
row (기본값): ➡️ 아이템을 왼쪽에서 오른쪽으로 배치
row-reverse: ⬅️ 아이템을 오른쪽에서 왼쪽으로 배치
column: ⬇️ 아이템을 위에서 아래로 배치
column-reverse: ⬆️ 아이템을 아래에서 위로 배치

`flex-wrap` (줄 바꿈)

컨테이너에 아이템들이 다 들어가지 않을 때, 줄 바꿈을 할지 결정.
nowrap (기본값): 줄 바꿈 없이 모든 아이템을 한 줄에 욱여넣는다. (아이템 크기가 줄어들 수 있음)
wrap: 아이템들이 다음 줄로 넘어간다.
wrap-reverse: 아이템들이 다음 줄(윗줄)로 넘어간다.

`flex-flow` (방향 + 줄 바꿈 단축 속성)

flex-direction과 flex-wrap을 한 번에 쓸 수 있는 단축 속성.
예시: flex-flow: row wrap;

`justify-content` (주축 정렬)

주축(main axis) 방향으로 아이템들을 어떻게 정렬하고 분배할지 결정
flex-start (기본값): 시작점에 맞춰 정렬
flex-end: 끝점에 맞춰 정렬
center: 중앙에 맞춰 정렬
space-between: 첫 아이템은 시작점에, 마지막 아이템은 끝점에 붙이고 나머지 아이템들 사이의 간격을 균등하게 분배한다.
space-around: 모든 아이템의 주변(around)에 균등한 간격을 만든다. (양 끝 아이템의 바깥쪽 간격은 아이템 사이 간격의 절반)
space-evenly: 모든 아이템 사이와 양 끝의 간격을 모두 균등하게 만든다.

`align-items` (교차축 정렬)

교차축(cross axis) 방향으로 아이템들을 어떻게 정렬할지 결정. (flex-direction이 row일 경우 세로 방향 정렬)
stretch (기본값): 아이템들이 교차축 방향으로 컨테이너 높이를 꽉 채우도록 늘어난다. (아이템에 height 값이 없어야 함)
flex-start: 교차축의 시작점에 맞춰 정렬
flex-end: 교차축의 끝점에 맞춰 정렬
center: 교차축의 중앙에 맞춰 정렬
baseline: 아이템 내부 텍스트의 기준선(baseline)에 맞춰 정렬

`align-content` (여러 줄 정렬)

flex-wrap: wrap;으로 여러 줄이 생겼을 때, 그 줄들 자체의 간격을 교차축 방향으로 어떻게 분배할지 결정
주의점: 아이템이 한 줄일 때는 아무 효과가 없음.
flex-start, flex-end, center, space-between, space-around, space-evenly, stretch (기본값) 등 justify-content와 유사한 값을 가짐

align-items vs align-content

한 줄일 때: align-items만 신경 쓰면 된다.

여러 줄일 때:

align-content는 "줄과 줄 사이의 간격"을 담당하는 더 큰 개념.
align-items는 그렇게 배치된 "각 줄 안에서 아이템들의 정렬"을 담당하는 더 작은 개념

Flex Item에게 적용하는 속성

`order`

HTML 구조와 상관없이, 화면에 보이는 아이템의 순서를 바꾼다.
숫자 (기본값 0). 숫자가 작을수록 앞에 배치, 음수도 가능.

`flex-grow`

컨테이너에 남는 공간이 있을 때, 해당 아이템이 얼마나 더 팽창할지 그 비율을 결정
숫자 (기본값 0). 0은 팽창하지 않음을 의미.
모든 아이템이 flex-grow: 1이면, 남는 공간을 모두가 1:1:1... 비율로 똑같이 나눠 가진다.
한 아이템만 2라면, 다른 아이템보다 2배 더 많은 공간을 차지

`flex-shrink`

컨테이너에 공간이 부족할 때, 해당 아이템이 얼마나 더 수축할지 그 비율을 결정
숫자 (기본값 1).
0은 수축하지 않음을 의미
숫자가 클수록 다른 아이템보다 더 많이 수축됩니다.

`flex-basis`

flex-grow와 flex-shrink가 적용되기 전의 아이템의 기본 크기를 설정
width에 사용하는 단위(px, %, em 등)를 사용.
auto(기본값)는 해당 아이템의 width나 height 값을 사용

`flex`

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 단축 속성
flex: 0 1 auto; (기본값)
flex: 1; (1 1 0%와 같음): 남는 공간을 채우고, 부족하면 줄어듦. (가장 흔하게 사용)
flex: none; (0 0 auto와 같음): 크기가 변하지 않음.
flex: auto; (1 1 auto와 같음): flex-basis가 auto인 버전.

`align-self`

부모의 align-items 설정을 무시하고, 특정 아이템 하나만 교차축 방향으로 개별 정렬
auto(기본값, 부모의 align-items를 따름)
stretch, flex-start, flex-end, center, baseline 등 align-items와 동일한 값을 사용

CSS - 공통 속성

벨하나 — Sun, 8 Jun 2025 19:20:39 +0900

CSS 공통 속성

inherit

부모 요소의 계산된 값을 강제로 물려받음

initial

initial은 '브라우저의 기본값(User-Agent style)' X. CSS 명세서에 정의된 그 속성의 순수한 '초깃값'을 의미.
- initial 키워드 값을 사용 할 때 margin, border, background 등 단축 속성(shorthand property)에서는 전체 값을 initial으로 지정할 수는 있으나, 단축 속성의 개별 값으로 지정할 수는 없음.
- 예를 들어 <h1> 태그의 display 속성 - 브라우저 기본값(User-Agent style): display: block; display 속성의 initial 값: 명세에 따르면 display의 초깃값은 inline. 따라서 h1 { display: initial; } 이라고 코드를 작성하면, 이 <h1> 태그는 더 이상 브라우저가 정한 block이 아닌, 명세서에 정의된 초깃값인 inline으로 동작

revert

revert는 Author(제작자) 스타일을 무시하고, 그 이전 출처(Origin)의 스타일로 되돌리는 것 (대부분의 경우 사용자 스타일은 없기 때문에, revert는 "내가 준 스타일 다 지우고, 그냥 브라우저 기본 값으로 돌린다" 라는 의미로 쓰임.)
Author origin이 있다면 그 다음 우선순위의 Style(User Origin)을 적용한다. User Origin이 없다면 User-Agent Origin 적용
- Author Origin
  - css 파일에 작성한 모든 스타일을 없었던 일로 하고 User Origin스타일로 돌아간다.
- User Origin
  - User Agent Origin 스타일(브라우저의 기본 스타일)로 돌아간다
- User Agent Origin
  - unset`과 동일하게 적용된다. - 부모로부터 상속할 값이 존재하면 상속, 그렇지 않다면 초깃값

1단계: revert 선언 확인

개발자(Author)가 color 속성에 대한 권한을 포기했다는 것을 인지한다.

2단계: 사용자(User) 스타일 탐색

"혹시 사용자가 color를 지정해 둔 것이 있나?" 확인한다.
있다 -> 사용자가 지정한 color를 적용하고 모든 과정을 종료한다.
없다 -> 다음 3단계로 넘어간다.

3단계: 브라우저(User-Agent) 스타일 탐색

"사용자 지정값이 없으니, 브라우저에 내장된 기본 color를 찾아보자."
있다 -> 브라우저의 기본 color를 적용하고 모든 과정을 종료한다.
없다 -> (매우 드문 경우) 상속받을 값이 있다면 상속받고, 없다면 initial 값으로 설정한다.

revert-layer

현재 @layer 스타일을 무시하고 이전 레이어의 값으로 되돌림

unset

부모로부터 상속할 값이 존재하면 상속, 그렇지 않다면 초깃값
- 상속되는 속성(Inherited Property)에 쓰면: inherit과 똑같이 동작(예: color: unset;)
- 상속되지 않는 속성(Non-inherited Property)에 쓰면: initial과 똑같이 동작. (예: margin: unset;)

::before and ::after

::before와 ::after는 CSS를 통해 HTML 문서에 존재하지 않는 새로운 요소를 '가상으로' 만들어 추가하는 아주 특별한 기능

이름 그대로, 선택된 요소의 콘텐츠(content) 앞(::before) 또는 뒤(::after)에 새로운 인라인(inline) 요소를 하나씩 더 생성

`content` 속성

::before와 ::after가 동작하기 위한 필수 조건은 바로 content 속성. 이 속성값이 없으면 가상 요소는 아예 생성 X.

content: "";: 가장 흔하게 사용되는 방식. 내용을 비워두고, 대신 width, height, background-color, border 등을 지정하여 순수하게 장식용 도형이나 아이콘을 만들 때 사용.

특징

기본적으로 inline 요소: 이 가상 요소들은 생성될 때 기본적으로 display: inline
DOM에 존재하지 않음: 자바스크립트로 document.querySelector() 등을 사용해 직접 선택 x. 이들은 CSS가 렌더링 과정에서만 만드는 가상의 존재
display 변경 가능: display: block, display: inline-block, position: absolute 등으로 display 속성을 바꿔서 일반 요소처럼 자유롭게 제어 가능

CSS - DOM 요소의 높이

벨하나 — Sun, 8 Jun 2025 17:51:24 +0900

DOM 요소의 높이 측정

`clientHeight`

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

`offsetHeight`

측정 대상: 요소가 화면에 그려질 때 시각적으로 차지하는 모든 공간의 높이를 측정.
포함하는 것: padding, border, scrollbar(존재한다면), 콘텐츠 높이
제외하는 것: margin (마진은 요소 자체가 아닌, 요소와 요소 사이의 간격이므로)
계산 공식: clientHeight + border-top-width + border-bottom-width + (수평 스크롤바의 높이)
"이 요소가 화면에서 실제로 차지하는 공간의 높이는 얼마지?"를 알아내서 다른 요소와의 배치 관계를 계산하는 등, 레이아웃과 관련된 계산에 주로 사용

수평 스크롤바의 높이만 추가하는 이유

브라우저의 계산 논리

수직 스크롤바가 나타날 때:
1. 스크롤바는 가로 너비를 차지.
2. 따라서 요소의 clientWidth (내부 가용 너비)가 줄어듦.
3. 요소의 offsetHeight (총 수직 높이)에는 아무런 영향 X.
4. 이 스크롤바의 너비는 offsetWidth (총 수평 너비) 계산에 포함.
수평 스크롤바가 나타날 때:
1. 스크롤바는 세로 높이를 차지.
2. 따라서 요소의 clientHeight (내부 가용 높이)가 줄어듦.
3. 이 스크롤바의 높이는 offsetHeight (총 수직 높이) 계산에 포함
4. 요소의 offsetWidth (총 수평 너비)에는 아무런 영향 x

`scrollHeight`

측정 대상: 요소의 콘텐츠가 너무 많아 스크롤이 필요한 경우, 눈에 보이지 않는 숨겨진 영역까지 포함한 콘텐츠의 총 높이를 측정
포함하는 것: padding, 보이는 콘텐츠 높이 + 숨겨진 콘텐츠 높이( ::before, ::after 포함)
제외하는 것: border, scrollbar, margin.
언제 사용할까?
- "이 요소의 스크롤이 맨 아래까지 도달했는지 확인하고 싶어." (무한 스크롤 구현 시)
- "스크롤 진행률을 퍼센트(%)로 표시하고 싶어."
- "내용이 넘쳐서 스크롤이 필요한 상태인지 아닌지 판단하고 싶어." (scrollHeight > clientHeight 이면 스크롤이 필요함)

CSS - Display 속성

벨하나 — Sun, 8 Jun 2025 14:26:11 +0900

Display 속성이란 무엇인가?

CSS display 속성은 HTML 요소가 웹 페이지에 어떻게 보여지고, 다른 요소들과 어떻게 상호작용할지를 결정하는 가장 기본적인 방법
이 속성은 요소가 생성하는 박스(box)의 종류와 그 자식 요소들의 레이아웃 방식을 정의한다.

Display 외부 요소 `<display-outside>`

이 부분을 W3org Spec 상 display legacy로 표현되어있는 일부 속성도 개인의 판단에 따라 외부요소 속성처럼 사용된다면 정리되어 있음을 사전에 미리 알립니다.

block

항상 새로운 줄에서 시작하며, 사용 가능한 가로 너비 전체(100%)를 차지한다.
width, height 속성으로 너비와 높이를 직접 지정할 수 있다.
margin과 padding을 상하좌우 모든 방향으로 지정할 수 있으며, 다른 요소를 밀어내는 등 레이아웃에 정상적으로 영향을 준다.

주의점:

세로로 연달아 있는 block 요소들의 수직 마진은 서로 겹쳐져(Margin Collapsing) 더 큰 값의 마진으로 합쳐질 수 있다.
기본 배치 방향: 수직

inline

block과 달리 줄을 바꾸지 않고, 문장이나 단어처럼 다른 텍스트와 함께 한 줄에 배치된다
콘텐츠의 너비와 높이만큼만 공간을 차지한다.
width와 height 속성을 직접 지정할 수 없다. 요소의 크기는 콘텐츠와 font-size, line-height 등에 의해 결정된다.

주의점 (매우 중요) :

margin-left, margin-right는 정상적으로 적용되어 다른 요소를 밀어낸다.
margin-top, margin-bottom은 값을 지정해도 다른 요소를 위아래로 밀어내지 못한다. 레이아웃에 영향을 주지 않는다.
padding-top, padding-bottom은 적용되어 요소의 배경색 영역은 커지지만, 마찬가지로 다른 요소를 위아래로 밀어내지는 않는다
기본 배치 방향: 수평

inline-block = inline flow-root (`<display-legacy>`)

외부적으로는 inline처럼 줄바꿈 없이 다른 요소와 한 줄에 배치됩니다.
내부적으로는 block처럼 width, height, margin, padding을 모두 정상적으로 사용할 수 있습니다. 수직 마진도 다른 요소를 밀어냅니다.
너비의 기본값은 block처럼 100%가 아닌, 콘텐츠의 크기만큼만 차지합니다. (이를 shrink-to-fit 동작이라고 합니다.)

주의점 :

inline의 특성을 가지므로, HTML 코드에서 inline-block 요소들 사이에 있는 줄바꿈이나 띄어쓰기가 브라우저에서 공백으로 렌더링되어 의도 치 않은 간격이 생길 수 있습니다. (해결법: 부모 요소에 font-size: 0을 주거나 flex 사용 등)

block 요소와 달리 수직 마진 중첩(Margin Collapsing) 현상이 발생하지 않습니다.
기본 배치 방향: 수평

run-in

과거 CSS 명세에 존재했던 값으로, 특정 조건에서 block 요소의 첫 줄로 합쳐지는 독특한 동작을 위해 제안되었습니다.
하지만 구현의 복잡성 등의 이유로 현재는 모든 주요 브라우저에서 지원하지 않으며, CSS 표준에서도 제거되었습니다.

Display 내부 요소 (`<display-inside>`)

이 부분을 W3org Spec 상 display legacy로 표현되어있는 일부 속성도 개인의 판단에 따라 내부 요소 속성처럼 사용된다면 정리되어 있음을 사전에 미리 알립니다.

<display-outside> 값이 명시되었을 때 <display-inside> 값이 없다면, 기본 값은 flow

flow

요소의 자식 요소들이 일반적인 흐름(Normal Flow)에 따라 배치되도록 지정
- Block Formatting Context - BFC: 자식들이 block 요소처럼 수직으로 쌓입니다.
- Inline Formatting Context - IFC: 자식들이 inline 요소처럼 수평으로 한 줄에 배치됩니다.
즉, display: flow;는 "내 자식들은 우리가 알던 그 block과 inline 규칙대로 알아서 자리 잡아라"

flow-root

요소 자체는 block처럼 동작하면서, 내부적으로는 자식들을 위한 새로운 블록 서식 문맥(BFC)을 생성하는 독특한 값입니다.
새로운 BFC를 생성하여 내부 요소들이 외부 레이아웃에 영향을 주지 못하도록 '가두는' 역할을 합니다.

주의점 (매우 중요):

float 해제: 자식 요소에 float 속성이 적용되었을 때, 부모 요소가 높이를 잃고 무너지는 현상을 막아줍니다. flow-root는 float된 자식들을 품는 가장 최신이고 명확한 방법입니다. (과거 clearfix 핵이나 overflow: hidden 트릭을 대체합니다.)
마진 중첩(Margin Collapsing) 방지: 이 요소의 margin-top은 바깥 요소의 margin-bottom과 중첩되지 않으며, 내부 자식의 margin-top이 부모를 뚫고 나가는 현상도 막아줍니다.
기본 배치 방향: 외부적으로는 block이므로 수직입니다.

table, inline- table(`<display-legacy>`)

요소를 HTML의 <table> 태그처럼 동작하게 만듭니다. 외부적으로는 block 요소처럼 보이지만, 내부 자식들을 위한 테이블 서식 문맥(Table Formatting Context)을 생성합니다.
inline-table은 inline-block처럼 동작하는 table입니다.
주의점: border-collapse, border-spacing 같은 테이블 전용 속성들을 사용할 수 있게 됩니다.

`table-header-group`, `table-row-group`, `table-row`, `table-cell`

요소를 각각 HTML의 <thead>, <tbody>, <tr>, <td>/<th> 태그처럼 동작하게 만듭니다.
이 값들은 display: table 또는 display: inline-table로 지정된 부모 안에서 의미를 가집니다.
주의점
- display: table-cell은 내용물의 길이에 상관없이 같은 행(row)의 다른 셀들과 높이를 맞추고, vertical-align 속성을 사용할 수 있는 강력한 특징이 있습니다. (과거 수직 중앙 정렬 트릭으로 많이 사용되었습니다.)
- 이 속성들을 사용하면 <div> 같은 일반적인 요소들로도 시맨틱(semantic)과는 별개로 테이블 형태의 레이아웃을 구성할 수 있습니다.

flex, inline-flex(`<display-legacy>`)

요소를 플렉스 컨테이너(Flex Container)로 만들어, 자식 요소(Flex Items)들의 레이아웃을 제어합니다. 1차원(하나의 행 또는 열) 레이아웃 설계에 최적화되어 있습니다.
inline-flex는 컨테이너 자체가 inline 요소처럼 동작하여 다른 텍스트나 요소와 함께 한 줄에 배치될 수 있습니다.

주의점:

컨테이너에 justify-content (주축 정렬), align-items (교차축 정렬) 등을 사용해 자식 요소들을 아주 쉽게 정렬할 수 있습니다.
자식 요소들은 flex-grow, flex-shrink, flex-basis 속성으로 공간을 어떻게 차지하고 줄어들지 유연하게 제어할 수 있습니다.
float, vertical-align 같은 기존 속성들이 플렉스 아이템에는 적용되지 않습니다.

기본 배치 방향: 컨테이너는 외부적으로 block 또는 inline이며, 내부 아이템들은 기본적으로 flex-direction: row (수평) 방향으로 배치됩니다.

grid, inline-grid(`<display-legacy>`)

요소를 그리드 컨테이너(Grid Container)로 만들며, 2차원(행과 열 동시 제어) 레이아웃 설계에 최적화되어 있습니다.

inline-grid는 컨테이너 자체가 inline 요소처럼 동작합니다.

주의점:

grid-template-columns와 grid-template-rows 속성으로 정교한 격자 구조를 직접 정의할 수 있습니다.
아이템을 특정 셀에 배치하거나, 여러 셀에 걸쳐서 배치(grid-column, grid-row)하는 등 강력한 위치 제어 능력을 가집니다. 아이템들을 겹치게 하는 것도 가능합니다.
Flexbox가 '콘텐츠의 흐름'에 중점을 둔다면, Grid는 '엄격한 격자 구조'에 중점을 둡니다.

기본 배치 방향: 컨테이너는 외부적으로 block 또는 inline이며, 내부 아이템들은 개발자가 정의한 2차원 격자 구조에 따라 배치됩니다.

ruby

요소를 inline처럼 동작하게 만들며, 주로 동아시아권 언어에서 사용되는 루비(Ruby) 주석 레이아웃을 위해 사용됩니다. (예: 한자 위에 작은 글씨로 발음(후리가나)을 표기하는 것)
HTML의 <ruby> 태그와 함께 사용되며, 일반적인 웹사이트 레이아웃에서는 거의 사용되지 않습니다.

`<display-box>`

none

display: none은 요소를 렌더링 트리에서 완전히 제거. 브라우저는 해당 요소를 마치 처음부터 존재하지 않았던 것처럼 취급.

박스 생성: 박스를 생성 X.
레이아웃: 화면에서 공간을 전혀 차지 X
자식 요소: 요소 자신과 그 모든 자식 요소들이 함께 사라짐.
접근성: 스크린 리더와 같은 보조 기술도 이 요소를 읽을 수 없음 완전히 없는 요소 취급.

display: contents는 요소 자신(껍데기)만 제거하고, 그 자식 요소들은 남겨둔다. 부모 요소가 사라지고 자식 요소들이 그 자리를 대체하는, 마치 '유령화' 또는 '투명화'와 같다.

박스 생성: 요소 자신의 박스는 생성하지 않지만, 자식 요소들의 박스는 정상적으로 생성.
레이아웃: 요소 자신은 공간을 차지하지 않지만, 자식 요소들은 레이아웃에 정상적으로 참여. 자식들은 부모가 사라졌기 때문에, 마치 한 단계 위인 할아버지 요소의 직접적인 자식인 것처럼 동작.
적용 스타일: display: contents가 적용된 요소 자체에 지정된 padding, border, margin, background 등의 스타일은 적용되지 않는다. 박스 자체가 없어졌기 때문.
접근성: 과거에는 display: contents가 적용된 요소가 접근성 트리에서 사라지는 문제가 있었지만, 최신 브라우저에서는 이 문제가 대부분 해결되었다. 하지만 여전히 일부 오래된 버전에서는 문제가 될 수 있어 주의가 필요.

Etc

list-item `<display-listitem>`

요소를 <li> 태그처럼 동작하게 만듭니다. 가장 큰 특징은 요소 앞에 ::marker라는 의사 요소(pseudo-element)를 생성하여 글머리 기호(•)나 숫자(1.)를 표시한다는 점입니다.

주요 특징: 외부적으로는 block 요소처럼 동작합니다. 따라서 너비, 높이, 마진, 패딩을 모두 정상적으로 지정할 수 있습니다.
주의점: list-style-type, list-style-position, list-style-image 속성을 사용하여 마커의 모양과 위치를 제어할 수 있습니다.
inline list-item은 외부적으로 inline처럼 동작하는 list-item입니다.
기본 배치 방향: 수직

math

MathML(수학 마크업 언어) 요소를 렌더링하기 위한 특별한 display 값입니다. 외부적으로는 inline처럼 동작하지만, 내부적으로는 수학 공식의 복잡한 구조(윗첨자, 아랫첨자, 분수 등)를 올바르게 표현하기 위한 MathML 레이아웃 규칙을 따릅니다.

주요 특징: 일반 HTML 요소가 아닌, <math>, <mfrac>, <msqrt> 같은 MathML 전용 태그와 함께 사용됩니다.
주의점: 일반적인 웹사이트 레이아웃을 만드는 데는 전혀 사용되지 않습니다. 오직 수학 공식을 웹에 표현할 때만 의미가 있습니다.
기본 배치 방향: 인라인(수평)

ruby-text `<display-internal>`

주로 동아시아권 언어에서 사용되는 루비(Ruby) 주석의 텍스트 부분을 위해 사용됩니다. 루비 주석은 특정 단어 위에 작은 글씨로 발음 등을 표기하는 것을 말합니다.

주요 특징: 이 값은 HTML의 <rt> 태그에 기본적으로 적용됩니다.
주의점: display: ruby로 지정된 요소 안에서만 특별한 의미를 가집니다. 일반적인 레이아웃에서는 거의 사용되지 않습니다.
기본 배치 방향: 수평

masonry, inline-masonry

Pinterest와 같이 높이가 다른 아이템들을 벽돌처럼 빈 공간 없이 쌓아 올리는 메이슨리(Masonry) 레이아웃을 구현하기 위해 제안된 display 값입니다.

주요 특징: 아이템들을 열(column) 방향으로 먼저 배치한 후, 각 열의 남은 공간에 맞춰 아이템을 채워 넣어 불필요한 공백을 최소화합니다.
주의점: 실험적인 기능입니다. 2025년 6월 현재, 아직 대부분의 브라우저에서 정식으로 지원하지 않습니다. 실제 프로젝트에 사용하기에는 시기상조이며, 보통 Javascript 라이브러리를 사용해 구현합니다.
inline-masonry는 컨테이너 자체가 inline처럼 동작하는 메이슨리 레이아웃입니다.
기본 배치 방향: 수직(열 우선)

-webkit-box, -inline-webkit-box

Flexbox가 표준화되기 이전에 사용되었던 아주 오래된 버전의 Flexbox 문법입니다. -webkit- 접두사에서 알 수 있듯이 초창기 웹킷(Webkit) 기반 브라우저(크롬, 사파리)에서만 동작했습니다.

주요 특징: 현재의 Flexbox와 속성 이름이나 동작 방식이 많이 다릅니다. (예: box-orient, box-pack, box-flex)
주의점: ❗️ 절대 사용해서는 안 됩니다. 이 코드는 오직 아주 오래된 구형 브라우저와의 호환성을 위해 존재하는 '화석' 같은 코드입니다. 현대적인 웹 개발에서는 display: flex;를 사용해야 합니다.
-inline-webkit-box는 inline처럼 동작하는 구형 Flexbox입니다.
기본 배치 방향: 수평 또는 수직 (관련 속성에 따라 다름)

CSS - 기본

벨하나 — Sun, 8 Jun 2025 13:32:20 +0900

시각적 서식 모델 (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 요소를 렌더링을 위한 사각형 박스로 변환하는 첫 단계

브라우저가 HTML 문서를 읽으면, 가장 먼저 하는 일은 각 요소(element)를 '박스(box)'로 변환하는 것
어떤 종류의 박스를 만들지는 전적으로 CSS의 display 속성에 의해 결정.

브라우저는 이 두 단계를 순식간에 거쳐 우리가 보는 웹페이지를 그려냅니다.

HTML 요소를 보고 어떤 박스(Box)를 만들지 결정하고 (박스 생성)
그 박스들을 CSS 규칙에 따라 어떻게 배치할지 계산합니다 (시각적 서식 모델).

CSS 값의 출처(Origin)와 우선순위

이 키워드들을 이해하려면, 먼저 브라우저가 하나의 스타일에 대해 여러 개의 CSS 선언이 충돌할 때 어떤 것을 선택하는지, 그 '재판 과정'을 알아야 함. 이걸 캐스케이드(Cascade)라고 부른다.

브라우저는 아래 3가지 출처(Origin)의 스타일 시트를 순서대로 고려한다

Author Origin Style (제작자 스타일): 바로 우리, 개발자들이 작성한 CSS 파일 (.css) 가장 우선순위가 높다.
1. 개발자 도구에서 사용자가 변경한 Style도 Author Origin Style 이다.
User Origin Style(사용자 스타일): 사용자가 자신의 필요에 의해 브라우저에 설정한 커스텀 CSS. (예: 저시력자를 위한 폰트 크기 강제 설정)
1. 개인적 스타일 선호도나 접근성향상을 위해 브라우저 확장프로그램 등으로 변경한 Style을 말한다.
User-Agent Origin Style(브라우저 스타일): 어떤 CSS도 적용되지 않았을 때를 대비해 브라우저가 기본적으로 가지고 있는 스타일. (예: <h1>은 크고 굵게, <a>는 파란색에 밑줄)

!important

위에서의 순서와 정반대로

!important 의 적용

User-Agent (브라우저) 스타일의 !important (매우 드묾, 브라우저 기능 관련)
User (사용자) 스타일의 !important
Author (개발자) 스타일의 !important

왜 이런 현상이 발생하냐?

'사용자 경험과 웹 접근성(Accessibility)'을 최우선으로 보장하기 위해서. 이것은 CSS를 설계한 사람들이 가장 중요하게 생각한 철학

새로운 BFC 생성조건

<html> 태그 (문서 전체를 감싸는 최초의 BFC)

float 속성이 none이 아닌 요소

position이 absolute 또는 fixed인 요소

display가 inline-block, table-cell 등인 요소

overflow 속성이 visible이 아닌 요소 (예: hidden, auto) - (오래된 트릭)

display: flow-root;

우당탕탕 1박 2일 전주여행 2탄 ( 초스피드 한복 체험 )

벨하나 — Sat, 7 Jun 2025 19:24:31 +0900

다음날 아침.... 뚜뚜루

혹시나 1편을 안 보셨다면

https://bell-hana.tistory.com/entry/travel-jeonju-day-trip1

우당탕탕 1박 2일 전주여행 1탄 ( 한옥 숙소가 다했다.)

거의 두달 전에 예약을 잡아둔 전주여행이기에 즐거운 마음으로 5월 24일에서 25일 전주여행을 다녀왔다!우선 영통구에 살고 있는 나는.... 전주를 가는 것 부터 쉽지 않았다.- 영통에서 수원역으

bell-hana.tistory.com

1편 부터 보고오시면 좋습니다~!

전주지만 전주보단 숙소를 더즐긴 어제를 뒤로 하고 우린 오늘만큼은 전주느낌을 내기 위해 아침일찍 체크아웃을 진행하려했다.

그치만 아침은 포기할 수 없기에

다음날 먹어도 감탄했던 피자와 기본 제공되었던 캡슐커피를 먹었다.

숙소에서 기본으로 커피캡슐 2개가 제공 되어서 어제 남았던 피자와 함께 맛있게먹었다. 어쩜 하루가 지나도 치즈가 촉촉한지...

츄릅

이후 빠르게 짐정리를 하고 나오는데 어제 찍지 못했던 앞마당이 햇빛이 들어와 너무 이쁘게 보였기에 여친님과 나 둘다 컨셉샷을 우다다다 찍는 시간을 가졌다(택시가 너무 금방와서 좀더 찍으려다 후다닥 나감..)

이 사진은 뭔가 저세상 각도긴 한데 사진만이 가지는 분위기가... 개인적으론 좋았다...

이 때의 분위기는 정말 초여름에서만 느낄수 있는 풋풋함이 아닐까 싶다... 어떤 보정보다 자연광이 제일 이쁘게 보이는게 신기하기도 하고...

아무튼 후다닥 택시를 타고 전날 예약해둔 한복집을 갔다!!

https://naver.me/FlZnGngS

네이버 지도

전주한옥마을 한복대여 색동저고리

map.naver.com

요기 였는데 가격도 나름 합리적이었고 이곳 저곳 리뷰를 비교했을때 제일 우리의 기준에 적합했다고 할까나!!!

푹 자고 아침이었어서 사람도 없었고 우리의 텐션도 꽤 높았다.

한복 변신전!!!

한복 변신 후 !!

여기서는 상당히 금방인것 같지만 한복을 고르고 입고.. 나오는데 거의 20분이 넘게 걸린 것 같다. 그치만 우리에겐 기차 데드라인이 있었기 때문에 나름 일찍 고른것 같기도...

해당 건물 옥상에 포토존도 있어서 찍고 가라고 하셔서 일단 사진을 속전속결로 많이 찍으려고 했다. 나는 사진찍는게 좋지만... 내 사진보단 이쁜 여친님 찍어드리는게 좋기때문에 비교적 여친님 사진이 많아도 이해부탁바랍니다!!

옥상 포토존에서 이쁘게 몇컷 찍어드리구 한옥 마을로 입성했는데 구체적으로 어딘진 모르겠지만 교회같이 생긴 이쁜 곳에서 행사가 진행되고 있어 일반인이 못 들어가게 되어있어서 아쉽게 생각했다.

그리고 경기전에 입성!!

경기전과 한옥마을에서 정말 지금 생각해도 신기한 일들이 많았던 것 같다.

경기전을 한바퀴돌며 이뻐보이는 컷들을 열심히 찍고 있는데... 아무래도 삼각대가 없이 갔다보니 둘이 같이나오는 컷들은 벤치나 특정 사물들에 카메라를 받치고 타이머로 찍고 있었다.

한30~40분 돌아다녔나... 열심히 찍던중

문제의? 아니다 의문의 어느 건물에서 이렇게 둘이 같이찍으려고 애매한 각도를 조정중이었다!...

근데 뒤에서 갑자기 어떤 의문의 아저씨(앞으로 귀인으로 칭하겠다) ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

귀인분이 나타나셔서 자기가 카메라가 취미인데 우리 커플을 보더니 사진을 찍어주고 싶다고 하셨다!!!

처음엔 살짝 낯선사람에 경계했지만 막 이 구도는 4:3으로 해야한다던가 자기는 렌즈가 더 좋은데 (내껀 단렌즈다) 라고 하시면서 진짜 찐 사진러 처럼 느껴져서 마음을 놓았다.

아무튼 그렇게 우리에게 이쁜 사진 추억을 남겨 주셨다.

귀인분께서 남겨주신 우리의 추억이다!!

그렇게 럭키!~라는 생각으로 다음은 무슨사진을 찍을까하다가 여친님이 예전에 친구분들과 찍었던 구도가 생각나서 거기를 가보자 하고!! 가서 사진찍으려하는데 이게 무슨일이야...

아까 뵈었던 귀인분이 또나타나셔서 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 진짜 소설아닙니다... 진짜임

그래서 또 찍어 주신다고 우리 사진을 찍어주셨다.

그렇게 말도 안되는 확률로 귀인분에게 사진을 건지고... 사실 이후에 더 사진을 찍을까도 했는데 귀인분을 또만나면 뭔가 또 찍어주려고 하실 것 같은 느낌이었다...

I 와 I 쌍 I 커플인 우리는 살짝~~ 아주 살짝 너무감사하지만 감사해서 부담 + 죄송한 느낌을 가지고 경기전을 나와서 한옥마을의 다른 부분을 구경하기로 했다.

타이밍이 딱 좋게도 그때가 11시쯤 되어서 사람도 좀 복작복작 늘어날 때여서 우린 에너지 보충을 하러

https://naver.me/xUw1Tuox

네이버 지도

외할머니솜씨

map.naver.com

요기에 흑임자 팥빙수를 먹으러 갔다. 11시 오픈이어서 의도치 않게 오픈런을 하게 된 샘이었는데 진짜 딱 11:00 분되어서 문을 열어서 대기하던 사람들과 우르르 들어갔다.

생각보다 대기하던 사람들도 꽤있었고 맛을 보니 이해할 수 있었다..

흑임자 팥빙수와 수정과 세트

수정과는... 엄청나게 우리 스타일은 아니었지만 팥빙수는 흑임자 맛이 강하게 나면서도 엄청달지 않고 시원해서 정말 맛있었다.

그리고 수정과도 달달한 팥빙수와 케미가 맞아서 잘 어울렸다.

가보시길 추천!!

나오면서 인생네컷도 기념으로 한컷 찍었다.

뭔가 나만 그런 것 같지는 아닌데 처음 이런 류의 사진관이 인생네컷이라 그런지... 요즘 하루필름이나 뭐 기타브랜드들을 퉁쳐서 그냥 인생네컷이라고 부르게되지 않나요??? 내가 늙어서 그런가... 흑흑

아무튼 이렇게 찍고 가는데 ... 말도 안되는 기묘한 일 두번째 발생!!!

햇빛이 뜨거워서 썬글라스를 쓰고 가는 도중에 앞에서 뭔가 익숙한 얼굴이 보였다... 내가 한 2개월 전에 수원으로 이사할때 계약했던 부동산 공인중개사의 얼굴이 보이는거다. 웃긴 상황이기도 했지만 나는 어차피 썬글라스도 끼고 있고 한복도 입고있어 날 못 알아볼줄 알고 ( 아니 상식적으로 얼굴 본것도 딱 3번? 정도밖에 되지 않고 그분은 얼마나 많은 사람을 만날텐데...) 라는 생각이 있었다.

그렇게 웃기네 하고 지나가다 뭔가 쌔해서 뒤를 돌아봤더니 그분도 나를 보고 있었다. 그리고 자연스럽게 인사를 했다.ㅋㅋㅋㅋㅋㅋ 다가오셔서 여기서 보다니 신기하다~ 뭐이런 말씀을 하며 맛집알고 싶으면 연락하라라는 상투적인 인사도 하셨다.

기껏해야 1분 정도 소요된 일이 었지만 정말 신기한 경험이었다. 수원에서 내 집을 중개해준 공인 중개사를 주말에 전주에서 길가다마 만나서 서로 알아볼 확률이 몇프로 정도 될까??

정말 세상일은 아무도 모르며.. 항상 어디서든 행동 조심하며 살아야한다..

그렇게 신기한 일 두번을 겪으며 여친님과 세상에 별일이 다있다~ 이런 말들로 전주여행의 마무리로 달려가고 있었다. 점점 사람이 많아지고 기가 빨린 우리는 길거리 음식을 사먹고는 한복을 반납하러 갔다.

우리의 기차표 시간은 아래와 같았는데... 미리 머리속으로 대충 택시시간을 시뮬레이션 그려두고 반납하러가려했다.

근데 문제가 닭꼬치를 사먹는데 무슨 나오는데 15분은 넘게걸리는 거다... 생각보다 시간이 너무 오래걸렸다

사실 거기까지도 괜찮았다.

근데 한복을 반납하는데 거기서 우리 예매할때 옵션으로 사진2매를 인화해주는 혜택이 있었던 것이다...

또 이런걸 놓치면 너무 아깝지 않은가.... 그래서 발을 동동 구르며 겨우 사진을 인화하고 택시를 탔을때가 한 13시 10분쯤 되었을 것 같다.

아저씨게 말씀드리고 택시를 타구 가는데 또 이럴때마다 신호는 도움을 주지 않고 보이는 신호마다 모두 걸려버렸다. 여친님은 불안해서 어떡해 하고 있고 나라도... 최대한 불안감을 감추려고 애썼던 것 같다.

다행이도(?) 24분에 전주역에 도착해서 후다닥 뛰어서 기차를 놓치지 않을 수 있었다.

잠깐의 여유로 도착직전 여친님의 편안한 마음의 뒷모습도 한컷찍어주고... 우린 기차를 타고 서울로 돌아왔다.

정말 다사다난 했던 전주여행이었다. 대전부터 시작해서 국내여행의 재미에 맛들어 버린 우리 커플이었지만 꼭 국내라서기 보단 둘이서 보내는 하루하루들이 이렇게 되돌아보면 (물론 전주는 정말 다시하라고 해도 하기 힘들만큼 신기한 경험들이 많았다.)

좀좀 따리 사건들로 추억을 가득 채울 수 있게 해주는 여행의 순기능이지 않을까

또 블로그에 해당 추억들을 적고 기록하면서 그때의 순간을 한번더 느끼게 해주는 것도 좋은 것 같다.

우당탕탕 1박 2일 전주여행 1탄 ( 한옥 숙소가 다했다.)

벨하나 — Fri, 6 Jun 2025 10:55:27 +0900

거의 두달 전에 예약을 잡아둔 전주여행이기에 즐거운 마음으로 5월 24일에서 25일 전주여행을 다녀왔다!

우선 영통구에 살고 있는 나는.... 전주를 가는 것 부터 쉽지 않았다.

- 영통에서 수원역으로 이동

- 수원역에서 용산역으로 기차 타고 이동

- 용산역에서 전주로 기차 타고 이동

이라는 말도 안되는 프로세스를 거쳐

서 가야했기에 아침일찍 가지는 않고... 좀 여유롭게 갔다.

그 흔적들이다... 적어도 집에서 8시 반에 나와서 전주를 12시 넘어서 도착하는 과정!!

그래도 이전 대전 여행처럼 국내 여행에 맛들린 여자친구님과 나는 즐겁게 전주로 갔다

짜잔 전주역 도착!!

나도 대구사람이지만 어릴때 보다 점점 밑으로 내려갈 수록 예전 향기가 물씬 나는것 같다. 음.. 다르게 표현하자면 서울이 확실히 고층빌딩이 많고 그런느낌이지만 지방들은 아직 내가 어릴때 모습들이 많이 남아있는?! 그런 느낌이었다.

이렇게 표현하니 상당히 늙은것 같군...

그래서 그런지 밥을 먹으로 가려고 하는데 버스 배차도 엄청 길었다.... + 네이버 지도 네이놈들... 제대로 알려주지 않았다 ㅠㅠ

버스 기다리며 발견한 정겨운 건물

보면서 북한 같다는 생각을 했다랄까...? 분위기만 ~

아주 오랫동안 장사를 해온 LP 카페느낌이 물씬 낫다.

이러쿵 저러쿵 전주를 구경하며 전주의 유명한 물갈비를 먹으러 갔다.

친구의 강력한 추천이 있었기에 혹시 웨이팅이 많은거 아닌가 걱정했지만 해당 집이 별관도 있고 2층도 있어서 그런지 웨이팅이 심하지 않았다.

https://naver.me/xOxHUiMP

네이버 지도

자매갈비전골

map.naver.com

정갈한 밑반찬과 보글보글 물갈비는 확실히 뭔가 전주에서만 먹을수 있다! 이런것 보다는 그냥 맛이 없을 수 없는 맛이었다... 그치만 맛있게 먹었으니 인정이죠??? 행복했죠??

그리고 사실 별미는 치즈 추가를 한 볶음밥이었다. 진짜 이건 꼭 먹어보길 추천한다!!!!!!! 반드시 치즈추가를 해야한다

다먹고 배가 부른 상태로 고민을 했다. 숙소의 입실이 3시여서 시간이 애매했지만 비도 올 거 같았고 이른 입실이 가능하대서 우선 숙소부터 구경하기로 했다.

우리가 두달 전에 예매한 숙소는 바로바로

https://www.instagram.com/whaeung/

독채 한옥 숙소 화응 이었다!!!

우선 사진부터 보고 시작하겠다.

거실 풍경!!

차도 마실수 있고 준비된 편한 의자

아기자기한 세면대와 소품들

아늑한 침대방

숙소를 만족해하시는 여친님...

사실 2층에도 잘 수 있게 매트리스가 놓아져 있었고 외부 자쿠지도 있었는데... 사진을 찍지 못해서 못 보여드리는게 아쉬울 따름이다. 저어기 귀여워서 넣어둔 여친님 사진 뒤편으로 나가면 자쿠지와 아래처럼 포토 스팟도 있었다.

신났다 신났어...

앞엔 마당처럼 되어있었는데 초여름이라 그런지 꽃이 너무 이뻤다...

이후... 오랜만에 또 나들이 나온 우리커플은 피곤함을 참지 못하고 낮잠을 자버렸다 ...ㅋㅋㅋㅋㅋㅋㅋ 그래서 한옥 마을은 다음날 가는 걸로 미리 일정을 짜고 자쿠지를 하고 숙소에서 노는 걸로 하루를 보내기로 마음먹었다. ( 사실 숙소가 제일 비싸서 숙소에서 시간 보내는게 맞는것 같기두.. 그럴꺼면 전주 왜갔냐는 말은 마음속으로만 하세요)

자쿠지 하는 모습은 찍지 못했으니... 패스!!!!!

자취하는 입장에서 몸을 오래 담그고 지질 수 있는게 얼마나 좋은 일인지 가끔 느끼는데 그런 날이었던 것 같다. 초저녁쯤 되는 날씨에 바람이 살랑불고 몸은 따듯하고 너무 좋았다.

아무튼 열심히 땀까지 빼고 씻었으면 뭘해야하는가 다시 배를 채워야한다.

쿠팡이츠를 보는데 ... 본사직영점이라는 말과 이름을 믿고 시켰는데 완전 미쳤다

https://naver.me/GpCImyhN

네이버 지도

피자의 생명은 치즈다 본사직영점

map.naver.com

혹시나 전주에서 뭐 시켜드실 일 있으시면 꼭시켜드셔야한다.. 먹고 나서 제발 이 프렌차이즈가 수도권에도 있었으면 좋겠다고 생각했다.. 아쉽게도 없지만.

진짜 말도안된다 너무 맛있었다.

사정상 남아서 다음날 피자를 데워먹었는데도 치즈가 말도 안되었다. 진짜 역대급 치즈였던것 같다.

쩌어기 보이는 맥주를 사기위해 피자를 주문해두고 편의점에 다녀 왔는데

불어 오는 바람과 함께 아파트 사이로 보이는 하늘이 너무 좋아서 한컷 찍어봤다!!

그렇게 폭풍식사를 하며 여친님이 좋아하시는 용감한 형사들 과 카더정원을 열심히 시청하며 떠들었다.

신기해서 사본 스파클링 복분자???

편의점에 스파클링 복분자라고 해서 있길래 신기해서 한병 사봤는데 확실히... 음료수 였다!! 근데 저런게 이제 계속마시면 훅 가는 술이라 조심해야할 듯 하다.

전주 여행 첫 날이 끝났는데... 적어보니 전주를 대표한게... 한옥숙소? 물갈비? 피자집? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 내가 봐도 웃긴 것 같다.

그치만 우리의 여행은

힐링

이 메인 테마기 때문에 우리만의 힐링으로 잘 보낸 첫날이었다....

아직 2편남았다...

To be Continue...

123213

벨하나 — Thu, 5 Jun 2025 21:19:07 +0900

Position : 문서상에 요소를 배치하는 방법

static :
- 이 속성은 box의 보통 flow에 따라 위치가 계산된다
- top, left, bottom, right 값은 무시된다.
relative
- 이 속성은 box의 보통 flow에따라 위치가 계산된다.
- 그리고 정상 위치의 상대적인 곳에 위치한다.
- box B가 위치되었을때 다음 오는 box의 위치는 B를 신경쓰지 않고 게산된다 (다음의 오는 box는 B의 위치에 영향을 받지 않는다 -> 정상적으로 B의 위치에 해당된다.)
- 특정 elements에서는 relative가 효과가 없다.

=====================================================================================

fixed
- 이 속성은 box의 보통 flow에서 제거 되고 공간을 따로 생성하지않는다.( 문서상 원래 위치를 잃고 다음요소가 해당 자리를 가진다)
- 초기의 containing block(**window 객체의 viewport를 기준점**으로삼는다.)에 위치된다.
- 최종적으로 top, right, bottom, left 속성으로 결정된다.
- -> Display flex 인 경우 flex의 첫번째 요소로 취급하여 static 에서의 위치를 잡는다 (top,bottom,left,right 가 auto 일 때 )
absolute
- top, right, bottom. left 속성에 의해 box의 위치가 specified 된다.
- 이 속성은 box의 보통 flow에서 제거 되고 공간을 따로 생성하지않는다.( 문서상 원래 위치를 잃고 다음요소가 해당 자리를 가진다)
- 상대적으로 가장 가까운 조상을 찾거나(static 속성을 가지지 않은 ) 초기의 contating block( (**window 객체의 viewport를 기준점**으로삼는다)을 찾아서 위치된다.
- 최종적으로 top, right, bottom, left 속성으로 결정된다.

-------------> 둘다 normal flow에서 제거 된다 . But top, bottom, left ,right 값이 명시되지 않으면 auto 값으로 들어가게 되고 그럴때 정상적으로 해당 요소가 위치해야할 원래 위치에 있게 된다.

=====================================================================================

sticky
- 이 속성은 box의 보통 flow에따라 위치가 계산된다.
- 다른 요소의 위치에 영향을 끼치지 않는다.
- 가까운 scrollling ancestor나 containing block(table-related elements를 포함하여)으로 위치된다.
- top, right, bottom, left 속성으로 결정된다.

inherit : 부모 요소로부터 해당 속성의 계산값을 받음.

initial : 초깃값(기본값)을 요소에 적용, 초기값은 브라우저가 지정 (User Agent Style Sheet - 각 브라우저 마다 정해놓은 CSS 기본규칙)
- `initial` 키워드 값을 사용 할 때 `margin`, `border`, `background` 등 단축 속성(shorthand property)에서는 전체 값을 `initial`으로 지정할 수는 있으나, 단축 속성의 개별 값으로 지정할 수는 없습니다.

revert :현재 엘리먼트에 선언 된 css 속성을 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 **되돌리는 것**이다.
- 사이트의 기본적인 css 속성이 지정되어있는 경우(the author origin: HTML 이나 외부 stylesheet로 처음에 embedded 된 스타일): 유저가 지정한 커스텀 스타일로 돌아간다.
- 사이트의 css속성이 하나만 존재하는 경우 : user agent's default 스타일(브라우저의 기본 스타일)로 돌아간다
- If used in a user's custom stylesheet, or if the style was applied by the user (the user origin : 브라우저에서 유저에 의해 추가된 스타일) : user agent's default 스타일(브라우저의 기본 스타일)로 돌아간다
- user agent's origin이 지정되어있는 경우 : `unset`과 동일하게 적용된다. - 부모로부터 상속할 값이 존재하면 상속, 그렇지 않다면 초깃값
revert-layer : 이전의 cascade layers로 rollback 시키는 키워드

unset : 부모로부터 상속할 값이 존재하면 상속, 그렇지 않다면 초깃값
- 해당 속성이 상속가능한 속성일 때는 inherit (**상속 가능한 속성**이란 요소에 해당 속성의 값을 명시하지 않았을 때 부모 요소로부터 자연스럽게 값을 물려받는 속성들을 말합니다.)
- 상속되지 않는 속성일때는 initial
- 참고 :https://codingeverybody.kr/css-unset-%ED%82%A4%EC%9B%8C%EB%93%9C/

CLion 설정기 (with PS 공부 준비)

벨하나 — Tue, 3 Jun 2025 23:46:56 +0900

다양한 이유로 ... 다시 코테를 준비하려 한다. ... So sad

오랫동안 준비 해왔다기보단 뭐 누구나 한번씩 겪는 언어변화 때문에 내 코테 준비 프로젝트는 파이썬, Java, C/C++ 코드들이 혼합되어있는 상태인데 다시 준비는 C/C++로 하기 때문에 그 과정을 적어보려한다.

1차로 Vscode로 C/C++ 실행 셋팅을 준비했었는데 GCC 버전을 맞추기도 힘들고 유우우우명하게 셋팅하기가 힘들기때문에 포기

원래 유료였던 CLion이 비상업용으로는 무료로 풀린지 꽤 되어 이걸로 결정!!

https://www.jetbrains.com/ko-kr/clion/download/#section=windows

CLion 다운로드: 스마트한 C/C++용 크로스 플랫폼 IDE

www.jetbrains.com

우선 요기 가셔서 따로 다운받은 다음!!

뭐 프로젝트를 새로 만들 수도 있겠지만 나처럼 프로젝트가 있던 사람은 그냥 Clone 해오시면 됩니다.

그렇게 C++ 파일을 하나 열어보면~~~

짜잔

딱봐도 이건 뭐... 실행할 수 있는게 없네...?

어떻게 하지란 생각이 들것이다 !

일단은 CLion에서 자동으로 ToolChain을 잡아줄 것이다.

1. 설정 --> 빌드,실행, 배포 --> 툴체인에서 MingW를 자동으로 잡아뒀는지 확인하고 저장을 누룬다!

그리고 기존에 다르게 실행했거나 만들어져있던 프로젝트인 경우

CMakeList.txt가 없을 확률이 높다.

2. 프로젝트 최상단 --> 오른쪽 클릭, 새로만들기 --> CMakeList.txt

```


cmake_minimum_required(VERSION 3.10) 
# 사용하는 CMake 버전에 맞게 수정
#보통 가장 standard 한 3.10하면 무난할 것이다!

project(YourProjectName CXX) 
# 'YourProjectName'을 실제 프로젝트 이름으로 변경
# CXX는 C++을 사용한다고 명시한것이고 명시하지 않으면 C,C++로 자동설정될 것이니
# 그냥 CXX하면 코테수준에선 다된다고 보면된다!

set(CMAKE_CXX_STANDARD 17) # 사용하는 C++ 표준에 맞게 수정 (예: 11, 14, 20)

# 실행 파일을 추가합니다.
# 만약 main.cpp 파일만 있다면:
add_executable(YourProjectName main.cpp) 

# 여러 소스 파일이 있다면:
# add_executable(YourExecutableName main.cpp another_file.cpp some_class.cpp)

나는 대충 아래처럼 지었다! C++14로 고정해서 해야했기에...

cmake_minimum_required(VERSION 3.10)
project(ps_study C CXX)

set(CMAKE_CXX_STANDARD 14)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

add_executable(Main_1269 DataStructure/C++/Main_1269.cpp)

아무튼 이제 2번까지 진행했고 이러면 대충 저 Main_1269란 파일은 실행이 될껀데... 이러면 나머지 파일은요???

라는 생각이 들것이다. !!

자 여기서 3번

3. 설정 --> 플러그인 --> C/C++ Single File Execution 플러그인 설치 후 설정에서 상단의 CMakeLists.txt 또는 기타 CMake 구성파일 편집시 CMake 프로젝트 다시 로드 체크!!

4. 설정 --> 도구 --> Single File Execution Plugin에서 해당 %FILENAME%을 원하는 공통의 문구로 바꾼다!. 나는 Execute로 바꿨다.

5. 마지막까지 왔다!! 사실 필수는 아니다

실행하길 원하는 파일을 우클릭하면 Add executable for single c/cpp file 보인다

저걸 누루고나서

요기서 4번에서 적었던 이름을 선택하고 실행한다면 돌아갈 것이다.

그럼 5번에서 필수는 아니지만 할것은 무엇이냐 저 컨트롤 Alt Shift E 단축키가 불편하여 단축키를 바꾸는 과정이다.

5. 설정 -> 키맵(Key Map) ->add executa 대충 이것만 검색해도 위에게 나온다. 원하는 걸로 바꾼다!!

난 그냥 마땅히 입력되어있지 않은 것 중 제일 손이 편한 걸로 Shift G를 선정했지만 편한걸로 하면될 것 같다.

자이제 원하는 파일에서 저 키를 누룬 후 run을 하면 된다!

참고로 run의 단축키는 Shift + F10이니 해당 키의 단축키도 참고해서 정하길 바란다!!

이제 여러분의 Shift G를 누루면

CmakeList.txt가 변하는 것을 관찰할 수 있다.

원래 이랬다면

아래 처럼 Execute라는 실행 파일이 타겟하는 cpp 요소를 계속해서 변경해주는 것이다. 단축키로 이것을 빠르게 해주고 우린 단지 Execute라는 실행을 고정해두는 방식으로 좀 더 편하게 코테를 준비할때 실행할 수 있다.

결과적으로 왜이렇게 까지 귀찮게 해야하나 할 수 있겠지만 우리의 목적은 각각의 개별 파일로 실행하는 코딩테스트를 준비함에 있고 해당 Ide는 좀 더 프로젝트화를 위함에 있어 만들어 졌기에 불편함을 감수해야하지 않을까.. 싶다.

벨 하나로 띵동

CSS - Grid

Grid Container에 적용하는 속성

display

grid-template-columns & grid-template-rows

grid-template-*를 명시하지 않을 시 암시적 규칙에 의해 생성

grid-auto-columns & grid-auto-rows

grid-auto-flow

grid-template-areas

gap (or grid-gap)

justify-content & align-content

justify-items & align-items

Flex Item에게 적용하는 속성

grid-column-start, grid-column-end, grid-row-start, grid-row-end

grid-column & grid-row

grid-area

justify-self & align-self

CSS - Flex

Flex

Flex Container에 적용하는 속성

display

flex-direction (방향)

flex-wrap (줄 바꿈)

flex-flow (방향 + 줄 바꿈 단축 속성)

justify-content (주축 정렬)

align-items (교차축 정렬)

align-content (여러 줄 정렬)

align-items vs align-content

Flex Item에게 적용하는 속성

order

flex-grow

flex-shrink

flex-basis

flex

align-self

CSS - 공통 속성

CSS 공통 속성

inherit

initial

revert

revert-layer

unset

::before and ::after

content 속성

특징

CSS - DOM 요소의 높이

DOM 요소의 높이 측정

clientHeight

offsetHeight

수평 스크롤바의 높이만 추가하는 이유

브라우저의 계산 논리

scrollHeight

CSS - Display 속성

Display 속성이란 무엇인가?

Display 외부 요소 <display-outside>

block

inline

inline-block = inline flow-root (<display-legacy>)

run-in

Display 내부 요소 (<display-inside>)

flow

flow-root

table, inline- table(<display-legacy>)

table-header-group, table-row-group, table-row, table-cell

flex, inline-flex(<display-legacy>)

grid, inline-grid(<display-legacy>)

ruby

<display-box>

none

contents

Etc

list-item <display-listitem>

math

ruby-text <display-internal>

masonry, inline-masonry

-webkit-box, -inline-webkit-box

CSS - 기본

시각적 서식 모델 (Visual Formatting Model)

박스 생성 (Box Generation)

브라우저는 이 두 단계를 순식간에 거쳐 우리가 보는 웹페이지를 그려냅니다.

`display`

`grid-template-columns` & `grid-template-rows`

`grid-auto-columns` & `grid-auto-rows`

`grid-auto-flow`

`grid-template-areas`

`gap` (or `grid-gap`)

`justify-content` & `align-content`

`justify-items` & `align-items`

`grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`

`grid-column` & `grid-row`

`grid-area`

`justify-self` & `align-self`

`display`

`flex-direction` (방향)

`flex-wrap` (줄 바꿈)

`flex-flow` (방향 + 줄 바꿈 단축 속성)

`justify-content` (주축 정렬)

`align-items` (교차축 정렬)

`align-content` (여러 줄 정렬)

`order`

`flex-grow`

`flex-shrink`

`flex-basis`

`flex`

`align-self`

`content` 속성

`clientHeight`

`offsetHeight`

`scrollHeight`

Display 외부 요소 `<display-outside>`

inline-block = inline flow-root (`<display-legacy>`)

Display 내부 요소 (`<display-inside>`)

table, inline- table(`<display-legacy>`)

`table-header-group`, `table-row-group`, `table-row`, `table-cell`

flex, inline-flex(`<display-legacy>`)

grid, inline-grid(`<display-legacy>`)

`<display-box>`

list-item `<display-listitem>`

ruby-text `<display-internal>`