제목 : CSS 정렬의 핵심, display 속성에 대해서 알아보자
부제 : flex, grid, block 등등에 대해서 알아보자.
이 글을 작성하는 이유
리액트를 배운 적은 정말 많았다.
2년전 책으로 리액트를 배울 때도,
리액트를 공식문서로 찾아가 배울 때도, 심지어 프로그래머스 부트캠프에서도 리액트를 배웠다.
그러나, 페이지 Layout 및 Common Component Design 및 Item Listing 과정에서,
"왜 이 컴포넌트의 css 에 display : flex 를 넣는가?" 를 알려주지 않았다.
동영상이나 책, 혹은 공식문서에서 알려주는 대로 css 파일을 따라 치는 것은 당연히 문제가 되질 않았다.
background, width, height, color, border, .... 등등
CSS Property 중 직관적인 항목은 바로바로 이해가 되었지만,
display : block Default 값에서 왜?
display : flex 로 바꾼 후, justify-content, align-items 속성을
이리저리 바꾸어 스타일링을 해야 하는지 정확히 알지 못했다.
심지어는 display : grid 선언도 존재하는데,
이것 또한 flex 처럼 알아두어야 한다는 영상 강의의 말만 떠오를 뿐이었다.
css 의 기본 선택자조차도 제대로 이해하고 있지 않은 상황에서,
flex, grid 와 같은 특수 속성을 이용하고,
원하는 스타일에 걸맞는 Property : Value 를 적을 수 있을리는 만무했다.
따라서, 나는 이번에 제대로 display 에 대해서 알아놓으려고 한다.
혹시라도 CSS 에 대해서 정말 하나도 아는 것이 없고, 문법도 모른다면,
미리 알아두면 좋았을 CSS 기초 및 응용 예제 - (직접 작성)
위의 글을 읽으면 CSS 가 뭐하는 건지 알 수 있으리라고 생각한다.
위에서 내가 CSS 기초를 왜 다시 배우는건지에 대해서 많이 작성해 놓긴 했다.
이는 개인적 견해라서, 간단히 읽고 CSS 의 부분 기초를 빠르게 훑으면 좋다고 생각한다.
혹은 잘 정리된 기초 공식 문서가 필요하다면
위의 사이트에 들어가면, 구글 팀원이 작성한 CSS 의 지식을 볼 수 있다.
여타 다른 사이트들의 용어가 사전 지식이 조금 필요한 수준이라면,
이는 사전 지식이 많이 없어도 되고, 기초부터 알아갈 수 있는 좋은 사이트이다.
display 를 다루기 전 중요한 정보, Box Model.
display 속성은 작성하려는 컨텐츠의 정렬이나, 표현 상태 등을 표현하는 매우 중요한 속성이다.
그래서, 이 속성을 다루며 시작하는 것이 옳다고 생각했으나, 여러 공식문서를 읽다 보니,
"박스 모델" 이라는 기초 및 근간을 이해하지 못하면,
애초에 왜 display : block, inline-block, ... 등등
왜 이러한 속성이 존재하는지 직관적으로 이해하기 어렵다고 판단했다.
따라서, 이 박스 모델이라는 것 부터 시작해야 한다고 판단했다.
그래서 박스 모델이 뭘까?
혹시라도 CSS 를 아예 처음부터 배우는 사람을 위해서 이 글에서 사용될 Term(용어) 를
정리해야 한다고 생각했다.
우리가 사용하는 극히 대부분의 태그들은, "박스" 로 이루어져 있다.
div, p, section, article, ol, li, table, ....
그리고 텍스트 관련된 i, span, b, del 등등...
물론, abbr 이나, dfn 과 같이 사용자에게 상호작용에 대한 설명을 덧붙여주는 특수 태그들이 있긴 하지만,
특수 상황이므로, 우리가 대부분 사용하는 위의 일반적인 태그들에 집중하자.
div, p 는 서로 사용처가 다르긴 하지만, 박스처럼 컨텐츠를 감싼다는 것은 알 것이다.
이 박스 모델에서 가장 중요하게 알고 넘어가야 할 용어(Term) 은 이것이다.
(Content Box - 컨텐츠 박스)
우리가 선언한 div 태그 내부에 특정 글이나 이미지와 같은 컨텐츠가 있다고 가정하자.
이들을 "낭비 없이" 정확히 직사각형으로 영역을 그었을 때 나오는 박스
(Padding Box - 패딩 박스)
우리가 선언한 div 태그의 테두리와, 컨텐츠 박스 사이의 모든 영역을 의미한다.
쉽게 풀어서 말하자면, div 라는 브랜드 잠바를 입었는데,
컨텐츠는 Padding Box 라는 패딩이 중간에 끼어 있는 것이다.
(Border Box - 경계 박스)
div 를 강조하기 위해 테두리를 강조 할 수 있다.
예를 들어, border : 2px solid black; 을 선언한다고 가정 해 보자.
그렇다면, div 태그는 2 픽셀의 두께를 가진, 검정색 테두리가 형성 될 것이다.
우리는 이 테두리를 10 픽셀, 혹은 100 픽셀로도 만들 수 있다.
이 때, 이 테두리 영역을 Border Box 라고 부른다.
(Margin Box - 여백 박스)
위에서 Padding Box 를 다룰 때, 태그의 영역과, 실제 컨텐츠 사이의 모든 영역을 말했다.
패딩 박스는, 다른 시각으로 말할 때 컨텐츠에게 일종의 여유 공간을 만들어 준다고도 볼 수 있다.
너무 가까우면, 컨텐츠가 시각적으로 좋지 않을 수도 있기 때문이다.
Margin Box 도 동일하게 볼 수 있다.
div 라는 태그가 있는데, 나는 이 태그가 외부 요인에 의해 시각적으로 여유가 있었으면 좋겠다 싶으면,
"마진"(Margin) 을 설정하여 부모, 혹은 형제 수준의 컴포넌트로부터 일정 간격을 떨어뜨리게 만들 수 있다.
특정 상품을 팔 때, 투자된 금액에 비례하여 "몇 퍼센트의 마진이 남는다" 라는 말이 있는데,
이러한 문구로 마진이 무엇인지 직관적으로 이해 할 수도 있다.
즉 박스 모델을 요약하자면,
CSS 에서 표시하는 모든 것은 "상자" 이므로, CSS 박스 모델 작동 방식을 아는 것이 핵심이라는 것이다.
이제 display 속성에 대해서 알아 보자.
모든 태그가 "박스" 이기 때문에,
모든 태그가 Default 로 display : block 을 가진 것은 아니다.
구역 형태, 즉, 영역을 구분짓는 div, article, section, ... 등등
과 같은 태그들은 Default 로 display : block 속성을 가지나,
span, a, strong, i 와 같은 텍스팅 태그들은 그렇지 않다.
이들은 기본적으로 display : inline 을 가진다.
생각보다 많은 display 의 속성들
보통 일반적으로 사용되는 display 의 속성은,
block, inline, flex, grid .. 가 있다.
그러나, 그 외의 속성들도 다양하게 존재한다.
MDN 문서에서 보여주는 수많은 display 의 속성들
/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
/* Box suppression */
display: none;
display: contents;
/* multi-keyword syntax */
display: block flex;
display: block grid;
display: inline flex;
display: inline grid;
/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;
/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;이러한 CSS 예시를 보여준 mdn 의 주소는 : MDN CSS - (display)
이 속성 값의 열거들을 보며 느낀 것은,
이 속성들을 알게 된다면, CSS 레이아웃의 흐름을 대략적으로 파악할 수 있겠구나 하는 감상이었다.
위에서, 친숙한 키워드도 보이지만, 상당수는 처음 보는 키워드들이었다.
이 모든 속성들의 설명을 간략히 보여주는 사이트를 찾으려 했으나,
그 목적에 가장 가까웠던 "web.dev" 홈페이지도
block, flex, grid 에 치중되어 있었다.
나는 평소에 AI 에게 "정답" 을 달라고 말하지는 않는다.
나 스스로의 성장을 위해 "힌트" 를 줘야 한다고 제한을 두었다.
Gemini 는 나에게 이 속성들을 Structuring 하여 구별 할 수 있게 힌트를 주었다.
박스 모델이 중요했던 이유
박스 모델은 우리가 선언한 영역에서
marginoutline & shadow(이거는 직관화를 위해 예시에서 뺐었음)borderpaddingcontent
로 나눌 수 있다.
각 태그는 브라우저가 가지고 있는 Default 속성에 의해 아주 조금씩 다를 수 있는데,
대부분 동일 한 것은, "박스 모델" 이기 때문이다.
여기서 위에 존재하는 block, flex, grid 와,
inline-... 들의 차이점을 알아보자.
이 차이점은, 박스 모델이 깊이 관여한다.
예시가 될 코드는 이러합니다.
내 블로그에서 직접 div, article, section 과 같은 영역 표시자나,
p 태그를 함부로 마크다운으로 작성 할 수가 없다.
이유는 Custom Theme 을 위해 이들을 따로 조정 해 놓았기 때문이다.
따라서, 내가 블로그에 작성하게 될 HTML + CSS + JavaScript 는,
<iframe> 이라는 태그로 진행하게 된다.
만약에 이 글을 읽으시는 분께서 브라우저의 호환성이나,
브라우저의 개인 설정으로 인해 실제 CSS 예제가 보이지 않을 수도 있습니다.
-실제 문서에서 작성되는 iframe 예시-
<iframe
width="80%"
;
srcdoc="
<style>
<!-- iframe 의 기본 배경색이 투명이라서 초기화. -->
body {
background : white;
}
<!-- css 예제를 실제 적용하게 되는 장소. -->
h1 {
color : skyblue;
}
</style>
<!-- 예시를 들기 위한 HTML 태그를 작성하는 장소 -->
<body>
<h1>Heloow World!!</h1>
</body>
"
>
<p>이 문구가 보인다면, 예제가 뜨지 않은 겁니다.</p>
</iframe>이러한 형식으로 블로그에 적용됩니다.
inline 이 붙었을 때와, 아닐 때의 차이는?
확실히 짚고 넘어가자면, display : block 값과, 박스 모델은 동의어가 아니다.
박스 모델은 언제 어디서나 적용되는 모든 스타일링의 기준이다.
block, flex, grid 와 같은 대표적인 display 값들을 살펴 보자.
위의 속성을 제각각 가지고 있는 3 개의 div 가 나란히 형제 레벨에서 붙어 있다고 가정 해 보자.
그리고, 각 div 들은 그저 "hello" 라는 문자열만 담고 있다.
위의 상황의 결과는,
각 줄 (row) 마다, "hello" 라는 글자가 나올 것이다.
.b-style {
display: block;
}
.f-style {
display: flex;
}
.g-style {
display: grid;
}<body>
<div class="b-style">hello! in Block.</div>
<div class="f-style">hello! in Flex.</div>
<div class="g-style">Hello! in Grid.</div>
</body>위의 예제에서 말하고자 하는 것은, block, flex, grid 속성을 가진 div 태그 모두,
상위 단계, 혹은 같은 레벨에서 바라보았을 때, 하나의 줄을 차지해야만 하는 block 의 특성을 가진다는 것이다.
그렇다면, 위의 예제에서, CSS 만 inline 으로 변경 해 보겠다.
.b-style {
display: inline-block;
}
.f-style {
display: inline-flex;
}
.g-style {
display: inline-grid;
}위의 예제를 보면, 3 줄에서, 1 줄로 변경 된 것을 볼 수 있다.
무슨 차이일까?
이 세 가지 모두, 영역을 지닌 박스 모델이 맞다.
그러나, inline 이 붙으면, 해당 DOM 은 "텍스트처럼 취급" 하게 된다.
block, flex, grid 모두 원래는, 하나의 영역으로서, 한 줄을 담당하게 되는데,
만약 inline-xxx 형태가 된다면, 내부의 영역을 "그대로" 보전하되,
상층부나 같은 레벨에서 취급되는 것은 "텍스트" 처럼 취급된다는 것이다.
요약하면
inline 이 붙으면, 해당 영역은 "글자처럼" 취급된다.
그러나, 박스 모델의 근간인 margin, border, padding 설정이 가능하다.
멀티 키워드 문법 - Multi-Keyword
MDN 에서 보여준 예시는 이러했다.
/* multi-keyword syntax */
display: block flex;
display: block grid;
display: inline flex;
display: inline grid;위의 값은, 굉장히 간단한데,
display: flex;
display: grid;
display: inline-flex;
display: inline-grid;이와 동일하다.
컨텐츠 없애기 및 감추기
display : none; 이라는 속성이 존재한다.
이는 말 그대로, "보여주지 않겠다" 라는 속성이다.
이 속성을 사용하게 되면, DOM 체계에서 해당된 태그가 "없어진 듯한" 느낌을 받는다.
이 속성이 차지해야 할 영역 대신, 그 다음 태그가 자리를 차지하기 때문이다.
그리고 반대로 다시 보여주고 싶다면, display : xxx(원래 값) 으로 돌려놓으면 된다.
다시 되돌려놓는다면 뿅! 하고 감춰졌던 태그가 나타나며, 이후의 태그들이 밀려난다.
.p-none {
display: none;
}<body>
<button onclick="toggleParagraph()">문단 Toggle Btn</button>
<br />
<p>첫 번째 문단</p>
<p id="hidden-p">두 번째 문단 (Toggle)</p>
<p>세 번째 문단</p>
<script>
let toggleDom = document.getElementById("hidden-p");
toggleDom.className.add("p-none");
function toggleParagraph() {
toggleDom = document.getElementById("hidden-p");
toggleDom.classList.toggle("p-none");
}
</script>
</body>위의 예제 토글 버튼을 클릭 해 보면,
없어진 2 번째 p 태그 대신, 3 번째 p 태그가 그 자리를 "차지"하는 것을 볼 수 있다.
컨텐츠를 감추되, 영역(공간)을 유지하고 싶다면
이 상황에서는 display 를 건들지 않는다.
이 때는 visibility : xxx 라는 Attribute : Value 형식을 사용한다.
visibility : visible--> 보이는 상태(원래 상태)visibility : hidden--> 보이지 않지만, 공간을 차지하는 상태(감춰짐)
.is-visible {
visibility: visible;
}
.not-visible {
visibility: hidden;
}<body>
<button onclick="toggleParagraph()">문단 Toggle Btn</button>
<br />
<p>첫 번째 문단</p>
<p id="hidden-p">두 번째 문단 (Toggle)</p>
<p>세 번째 문단</p>
<script>
let toggleDom = document.getElementById("hidden-p");
toggleDom.classList.add("is-visible");
function toggleParagraph() {
toggleDom = document.getElementById("hidden-p");
toggleDom.classList.toggle("is-visible");
toggleDom.classList.toggle("not-visible");
}
</script>
</body>위의 예제 버튼을 통해 Toggle 해보면,
이번에는 3 번째 문단이, 2 번째 문단의 영역을 침범하지 않는것을 볼 수 있다.
즉, 요약해서
display : none --> 해당된 DOM 이 "없어진 것 처럼"
visibility : hidden --> 해당된 DOM 은 "보이지만 않고" 영역은 차지한다.
전역 값 (Global Values)
나는 이 값에서 inherit (상속) 말고는, 다 처음 보는 값들이었다.
내가 미리 이 값들을 본 결과, inherit, unset 을 제외하면,
사용처가 적지 않을까 생각이 든다.
inherit :
DOM 체계에서 부모가 가지고 있는 속성 : 값 을 그대로 물려받는다.
unset :
상속 가능한 속성 : 값 이라면 inherit 으로 동작하지만,
그렇지 않다면 initial (초기화) 한다.
initial :
굉장히 조심히 써야 하는 값이라고 생각하는데,
div 는 display : block 이 기본이고,
a 는 color : blue 가 기본이다.
만약에 div 태그에
display : flex or grid 했다가, display : initial 을 적용하면, 어떻게 될까?
display : inline 이 된다.
조금 있다가 revert 랑 비교가 될 텐데,
저 영어 초기화라는 것이, 내가 작성한 DOM 태그의 기본 속성으로 초기화? 가 아니라,
작성된 "속성을 기본값" 으로 만들어 버린다는 것이, 위험하다고 생각이 된다.
요즘 웹 스타일링에는 인터랙션을 위해 벼러별 경우에 스타일링을 만들어 놓을텐데,
만약에 여기서 initial 값을 이용한다면 재밌는 디버깅 시간을 가지게 될 것이다!
또한, color : initial 도 큰 문제이다.
이 또한, 위에서 설명 한 것 처럼, "적용된 DOM 이 가지는 기본 값으로 초기화" 가 절대 아니고,
color 라는 "속성이 가지는 기본값", black 으로 된다.
이것이 바로 CSS 의 Global Value, initial 에 대한 간략한 설명이다.
revert :
이 속성은 "타겟팅 된 DOM 이 가지는 기본 속성값" 으로 초기화 해 준다.
a 태그에서 color : revert 를 사용한다면,
a 태그가 가지는 기본 색상, color : blue 를 적용 해 준다.
그러나, 이 태그 또한 자주 사용되기는 어렵다고 생각되는 것이,
개발자가 지정한 스타일 시트를 무시하고, 브라우저가 설정한 기본 값으로 되돌린다는 점이다.
기타 값
table, list-item 이라는 값이 남아있다.
우리가 사용하는 table 태그에, 이 display : table 이 기본으로 들어가며,
li 태그에 list-item 이 들어간다.
정확한 태그를 사용하지 않고, 커스텀 Tag 를 "테이블처럼", "리스트처럼" 만들고 싶다면,
이러한 속성을 적용하여 커스텀 할 수 있다고 생각한다.
flex 와 grid
우선, div 나 article 과 같은 일반 영역 태그들이 가지는 속성,
display : block 쌍이, 같은 레벨 ~ 상위 레벨이 CSS 로서 인터랙션 할 때의 반응과,
display : flex;, display : grid; 간의 반응은 동일하다.
그러나, flex, grid 의 차이점은, 스타일링 도메인에 있어서 더 다양한 시도를 할 수 있다는 것이다.
이 말은, 기존 스타일링에 한계를 두지 않고, 개발자 원하는 대로 배치할 수 있게 만들어 주었다는 말과 동일하다.
간단하게 알아보는 "flex 란?"
flex 를 사용한다는 것은, 1차원 나열 형식을 사용하겠다는 말과 동일하다.
즉, 1차원 레이아웃을 위해 존재한다.
물론, block 값도 1차원 나열 형식이 가능하긴 하지만,
내부 엘리먼트 정렬 형식과 세로 기준, 가로 기준의 자유로움이 부족하다.
이러한 면에 있어 flex 는 block 보다 훨씬 자유롭다.
특히 flex 는 반응형 웹 디자인에 굉장히 유리한데,
유저가 브라우저에 접속한다는 것은, 휴대폰, 태블릿, 모니터 등등 여러 크기가 존재한다.
콘텐츠의 크기가 화면보다 크거나, 작을 때 브라우저에게 유연한 명령을 내릴 수 있다.
단, 자유로운 대신 연계되어 있는 여러 속성 : 값 을 알아야 한다.
간단하게 flex 를 선언하여 하위 엘리먼트들이 어떻게 보이는지 확인 해 보자.
.container-flex {
display: flex;
}
div {
border: 2px solid black;
}<body class="container-flex">
<div>Very Long Very Long Very Long Very Long Very Long</div>
<div>
Very Long Very Long Very Long Very Long Very Long Very Long Very Long Very
Long Very Long Very Long
</div>
</body>위의 예제를 보면, block 과 달리, flex 는 기본으로 옆쪽으로 늘어진다. (horizontal - 가로축)
flex 는 고유의 속성을 통해 정렬 방향을 정할 수 있다. 가로, 세로, 등등..
혹은 flex-wrap 속성을 통해, 강제 1차원 나열이 아니라,
이 DOM 에게 주어진 최대 width 에 따라, 동적으로 하위 엘리먼트들이 어떻게 나열될 지 선택할 수 있다.
예를 들어, 충분한 넓이가 주어졌을 때는 1차원 나열이 맞지만,
넓이가 부족하다면, 하위 엘리먼트들을 글자처럼 "줄넘김" 해서 보여주는 것이다.
단순 글자가 아니라, 블록 수준에서 주어진 넓이에 따른 유연한 레이아웃을 보여 줄 수 있다.
.container-flex {
display: flex;
}
.container-flex[data-wrap] {
flex-wrap: wrap;
}
div {
border: 2px solid black;
}<body class="container-flex" id="container">
<button onclick="toggleWrap()">Wrap Toggle</button>
<div>Very Long Very Long Very Long Very Long Very Long</div>
<div>
Very Long Very Long Very Long Very Long Very Long Very Long Very Long Very Long Very Long Very Long
</div>
<div>
Very Long Very Long Very Long Very Long Very Long Very Long Very Long Very Long Very Long Very Long
</div>
<div>
Very Long Very Long Very Long Very Long Very Long Very Long Very Long Very Long Very Long Very Long
</div>
<script>
function toggleWrap() {
const container = document.getElementById("container");
if(!container.getAttribute("data-wrap")) {
container.setAttribute("data-wrap", "true");
} else {
container.removeAttribute("data-wrap");
}
}
</script>
</body>위의 예제에서 "Wrap Toggle" 을 눌러보면,
기본 flex 속성으로 인한 horizontal(가로) 정렬을 유지하기 위해
뺵빽하게 늘어섰던 엘리먼트들이,
flex-wrap : wrap 으로 인해 엘리먼트들이 "줄넘김" 되고 있는 것을 볼 수 있다.
여기서 눈여겨 봐야 하는 것은,
이건 horizaontal(수평) 에서, vertical(수직) 으로 전환 된 것이 절대 아니다.
단지, 래핑으로 인해 "줄넘김" 화 된 것이다.
또한, 버튼의 크기를 보자.
flex 선언시, 하위의 엘리먼트들을 기본적으로 "동일한 너비 정렬" 이 된다.
horizontal 시에는 세로크기 동일화,
vertical 시에는, 가로크기 동일화가 수행된다.
간단하게 알아보는 "grid 란?"
Flex 가 "1차원 엘리먼트 나열"을 다뤘다면,
Grid 는 2 차원 (row, column) 을 다룬다.
grid 는 몇 개의 열이 존재하는지 지정 할 수 있는데,
예를 들어, x = 6 개의 열이 고정된 grid 라고 한다면,
grid 가 선언된 블록 내에서 자식 엘리먼트가 6 개가 넘어가면,
그 다음 엘리먼트부터는 "다음 줄" 부터 시작된다.
web.dev 사이트에 존재하는 grid 예시를 조금 참조하여 만들어 본다면,
.container {
display : grid;
grid-template-columns : repeat(6, 1fr);
gap : 1rem;
}
div {
border : 2px solid black;
}<body class="container">
<div>
Box 1
</div>
<div>
Box 2
</div>
<div>
Box 3
</div>
<div>
Box 4
</div>
<div>
Box 5
</div>
<div>
Box 6
</div>
<div>
Box 7
</div>
<div>
Box 8
</div>
<div>
Box 9
</div>
<div>
Box 10
</div>
<div>
Box 11
</div>
</body>위와 같이 영어, 한글이 넣어지는 순서대로 Grid 가 채워지는 것을 볼 수 있다.
마무리
아예 CSS 에 대한 공부 마무리라기보단,
Flexbox, Grid 에 본격적으로 들어가기 전,
이 display 라는 속성이 CSS 를 통해 DOM 스타일링에
얼마나 큰 영향을 주는지 배우고 싶었다.
display 라는 속성은, 결국 Layout 과 거의 비슷한 말이다.
"내부 엘리먼트를 어떠한 방식으로 표현 할 것인가?" 를 지정한다.
내부 엘리먼트가 1차원 나열 형태로 표현 될 것인가?
아니면 다차원 형태로 표현 될 것인가에 따라, display 는 달라진다.
이 글을 작성하며 느낀 점.
스타일링을 못하는 내가,
이 글을 작성하기 전에 작성한 CSS 기초부터,
display 에 대한 공식문서 자료를 살펴 본 후의 분석 글도 적어보았다.
내가 미적 감각이 떨어져서 스타일링을 잘 못하고, CSS 영역에서 부족 한 줄 알았는데,
알고 보니 충분히 공부하지 않았기에, 알지 못하여 관심을 느끼지 못한 것이었다.
이러한 생각이 들 정도로, CSS 는 간단한 영역은 아니다.
논리에 치중된 프로그래밍 언어도 제각각의 Convention 을 가지고 있다.
그러나 CSS 는 논리 비중이 적은 편이며,
대부분의 경우 Convention 에 초점이 맞춰져 있다.
어디 공식문서를 추천하냐면
이 분야에 대해서는, web.dev 사이트를 추천한다.
아직 공부해야 할 부분이 매우 많다.
특히, CSS 에서 사용되는 일종의 함수들이 존재하는데,
var(), repeat(...), ... 등등이 존재한다.
이러한 함수가 어떻게 동작하는지,
그리고 Flex, Grid 에 대해서도 더 공부해야 한다.
참조 사이트
MDN 공식 문서 - (display-CSS)
https://developer.mozilla.org/en-US/docs/Web/CSS/display
web.dev (사실상 구글) 공식 문서
https://web.dev/learn/css?hl=ko
Game - (FlexBox Froggy) --> flex 익히기 좋음
Game - (Grid Garden) --> grid 익히기 좋음
'Web-Server > 웹 지식' 카테고리의 다른 글
| CSS Grid 레이아웃은 무엇이고, 어떻게 사용할까? (예제와 함께 알아보기) (0) | 2025.11.03 |
|---|---|
| 예제와 함께 알아보는 CSS flex 와 Flexbox (0) | 2025.10.26 |
| 미리 알아두면 좋았을 CSS 기초 및 응용 예제 (0) | 2025.10.08 |
| HTML 문서 정식 태그 "전부" 공부하기 - 마무리 편 (코드 작성 및 구현까지) (0) | 2025.06.01 |
| HTML 문서 정식 태그 "전부" 공부하기 - 4편 (코드 작성 및 구현까지) (0) | 2025.05.30 |
