CSS란?(6)
- CSS(Cascading Style Sheets)는 HTML 및 XML과 같은 마크업 언어로 작성된 문서의 스타일을 정의하는 스타일시트 언어입니다.
- CSS는 웹 페이지의 배경색, 폰트, 레이아웃, 애니메이션 등 다양한 디자인 및 레이아웃 속성을 제어하여 웹 페이지의 모양과 느낌을 결정하는 중요한 역할을 합니다.
- CSS의 주요 이점 중 하나는 웹 페이지의 구조(HTML 또는 XML)와 표현(CSS)을 분리하는 것입니다. 이로 인해 웹 개발자는 내용을 변경하지 않고 디자인을 수정하거나, 반대로 디자인을 변경하지 않고 내용을 업데이트할 수 있습니다. 이는 웹 페이지의 유지 관리를 쉽게 만들고 웹 페이지의 접근성을 향상시킵니다.
- CSS는 웹 페이지를 만들 때 웹 표준 기술 중 하나로, W3C (World Wide Web Consortium)에서 정의하고 유지 관리합니다. 이 표준은 웹 브라우저 제조사들이 일관된 디자인 및 레이아웃을 제공할 수 있도록 하며, 웹 페이지가 다양한 장치 및 화면 크기에서도 일관된 뷰를 제공할 수 있게 합니다.
- CSS는 HTML 요소를 선택하고 해당 요소에 적용할 스타일 규칙을 정의하는 방식으로 작동합니다. 이러한 규칙은 HTML 문서에 직접 삽입하거나 외부 CSS 파일을 참조하는 방식으로 적용할 수 있습니다.
- CSS는 세부적인 스타일 제어가 가능하며, 웹 페이지의 각 요소에 대한 개별적인 스타일 설정이 가능해 높은 디자인 유연성을 제공합니다. 이는 웹 페이지의 전반적인 브랜드 이미지와 일관성을 유지하는 데 도움이 됩니다.
CSS 버전의 역사 (4.9)
- CSS Level 1(1996)
- CSS의 첫 번째 공식 버전으로, W3C(World Wide Web Consortium)에 의해 발표되었습니다.
- 이 버전은 웹 페이지의 텍스트 속성과 배경색 등 기본적인 스타일링 요소를 제어하는 기능을 제공했습니다.
- CSS Level 2(1998)
- CSS의 두 번째 버전으로, 위치 지정, z-index, 미디어 타입 등 웹 페이지 디자인에 대한 더욱 고급 기능을 도입했습니다.
- 선택자의 기능이 확장되어 더욱 다양한 HTML 요소를 대상으로 스타일을 적용할 수 있게 되었습니다.
- CSS Level 2.1(2004)
- CSS Level 2를 개정하고 업데이트된 버전입니다.
- 일부 버그 수정과 함께, 이전 버전에서 추가된 기능의 호환성 문제를 해결하기 위한 변경 사항이 포함되었습니다.
- CSS Level 3(2011)
- CSS Level 3는 여러 모듈로 분리되어 개발되었으며, 각 모듈은 특정 기능에 대한 정의를 제공합니다.
- 새로운 기능과 선택자가 추가되었고, 애니메이션, 플렉스박스, 그리드 레이아웃, 그림자, 반응형 웹 디자인을 위한 미디어 쿼리 등의 고급 디자인 기능이 도입되었습니다.
- 웹페이지의 스타일링에 대한 제어력을 크게 향상시켰으며, 현재 웹 개발에 널리 사용되는 버전입니다.
CSS 코드를 작성하는 방법 3가지 (3.10)
- 내부 스타일 시트
- 내부 스타일 시트(Internal Style Sheet)는 HTML 문서 내의
<style>태그를 사용하여 CSS 코드를 작성하는 방법입니다. - 이 방법은 한 페이지 내에서만 스타일을 적용할 수 있습니다.
- 예시
<!DOCTYPE html> <html> <head> <title>내부 스타일 시트 예제</title> <style> body { background-color: #f0f0f0; font-family: Arial, sans-serif; font-size: 16px; } h1 { color: #333; font-size: 24px; text-align: center; margin-top: 50px; } </style> </head> <body> <h1>내부 스타일 시트 예제</h1> <p>내부 스타일 시트를 사용하여 스타일을 적용한 예제입니다.</p> </body> </html>
- 내부 스타일 시트(Internal Style Sheet)는 HTML 문서 내의
- 외부 스타일 시트
- 외부 스타일 시트(External Style Sheet)는 CSS 코드를 별도의
.css파일로 분리하고, HTML 문서에서 이를 불러오는 방법입니다. - 외부 스타일 시트를 사용하면 같은 스타일 규칙을 여러 HTML 페이지에 쉽게 적용할 수 있으며, 유지 관리 및 코드 재사용성이 용이합니다.
- 외부 CSS 파일을 HTML에서 불러올 때는
<link>태그를 사용합니다. - 예시
<!DOCTYPE html> <html> <head> <title>외부 스타일 시트 예제</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>외부 스타일 시트 예제</h1> <p>외부 스타일 시트를 사용하여 스타일을 적용한 예제입니다.</p> </body> </html>
- 외부 스타일 시트(External Style Sheet)는 CSS 코드를 별도의
- 인라인 스타일
- 인라인 스타일(Inline Style)은 HTML 요소의 style 속성을 이용하여 직접 CSS 스타일을 적용하는 방법입니다.
- 이 방법은 간단한 스타일 변경이 필요할 때 유용하나, 스타일 규칙이 많아지거나 여러 요소에 같은 스타일을 적용해야 할 때는 코드가 지저분해지고 유지 관리가 어려워질 수 있습니다.
- 예시
<!DOCTYPE html> <html> <head> <title>인라인 스타일 예제</title> </head> <body> <h1 style="color: #333; font-size: 24px; text-align: center; margin-top: 50px;">인라인 스타일 예제</h1> <p style="font-family: Arial, sans-serif; font-size: 16px;">인라인 스타일을 사용하여 스타일을 적용한 예제입니다.</p> </body> </html>
CSS에서 사용하는 percentage(%)는 어떤 의미인가요? (5)
- 백분율 값을 나타내는 CSS 자료형입니다.
- 보통 부모 객체의 width와의 상대적 크기를 지정합니다.
- width, height, margin, padding, font-size처럼 다양한 속성에서 쓸 수 있습니다.
- 예시
<div style="background-color:navy;"> <div style="width:50%; background-color: black;"> <div style="width:50%; margin-left:20%; background-color:chartreuse;"> Width: 25%, Left margin: 10% </div> <div style="width:30%; margin-right:60%; background-color:pink;"> Width: 15%, Left margin: 30% </div> </div> </div>
- margin-left(right) 값에 백분율을 쓰더라도 부모 객체의 width를 기준으로 한다는 것을 알 수 있습니다.
CSS에서 사용하는 auto는 어떤 의미인가요? (5)
- 해당 요소의 크기나 위치를 자동으로 설정하도록 지정합니다. 이는 일반적으로 브라우저가 자동으로 계산하도록 하거나, 다른 속성 값에 따라 크기나 위치를 결정할 때 사용됩니다.
margin: auto;해당 요소의 마진을 자동으로 설정하며, 브라우저는 해당 요소의 위치를 계산하여 수평 방향으로만 중앙에 위치시키도록 합니다.width: auto; height: auto;내용물(자식 요소)의 크기에 맞춰 해당 요소의 너비나 높이를 자동으로 조절합니다.- 예외: block 요소의
width: auto는width: 100%에서 좌우 마진을 뺀 값이 됩니다. - 주의: 부모 객체가 height: auto일 경우 top, bottom 속성을 이용할 수 없고, transform을 이용하여 세로 방향으로 움직여야합니다.
CSS 선언(CSS declaration)이란? (2)
- CSS 문서에서 사용되는 구문입니다.
- 각 선언은 선택자(selector)와 선언부(declaration block)로 구성됩니다.
selector {property: value;}
id란? (4)
- HTML 요소에 대한 고유한 식별자입니다.
- 문서 내에서 단 하나의 요소에만 지정할 수 있습니다.
- 한 요소에 두 개 이상의 id를 지정할 수 없습니다.
- id 앞에
#기호를 붙여 선택자로 사용됩니다.
class란? (4)
- HTML 여러 요소에 대한 스타일을 그룹으로 지정할 수 있게 해주는 식별자입니다.
- id와 달리 여러 요소에 적용될 수 있습니다.
- id와 달리 각 요소에 대해 다른 클래스를 지정할 수 있습니다.
- class name 앞에
.기호를 붙여 선택자로 사용됩니다.
CSS에서 색상 단위는 어떤 것이 있나요? (7)
- 키워드 (Keyword): red, blue, green, black, white 등과 같은 색상 이름을 사용할 수 있습니다.
- 16진수 (Hexadecimal): #을 사용하여 색상을 표현합니다. 예를 들어, #000000은 검정색이며, #FFFFFF은 흰색입니다.
- RGB: red, green, blue의 값으로 색상을 지정합니다. 예를 들어, rgb(255, 0, 0)은 빨간색입니다.
- RGBA: RGB와 같지만, alpha 값을 추가하여 투명도를 지정할 수 있습니다. 예를 들어, rgba(255, 0, 0, 0.5)는 반투명한 빨간색입니다.
- HSL: hue(색상), saturation(채도), lightness(명도)의 값으로 색상을 지정합니다. 예를 들어, hsl(0, 100%, 50%)은 빨간색입니다.
- HSLA: HSL과 같지만, alpha 값을 추가하여 투명도를 지정할 수 있습니다. 예를 들어, hsla(0, 100%, 50%, 0.5)는 반투명한 빨간색입니다.
- var(--color)같이 var()을 통해 사용자가 정의한 변수 이름을 사용할 수 있습니다.
CSS에서 크기 단위는 어떤 것이 있나요? (8)
- 픽셀(px) : 절대 크기 단위로, 고정된 크기 값을 지정할 때 사용됩니다.
- 백분율(%) : 상대 크기 단위로, 부모 요소의 크기에 대한 백분율 값을 사용하여 크기를 지정할 때 사용됩니다.
- em : 상대 크기 단위로, 현재 요소에 지정된 font-size 값에 대한 배수 값을 사용하여 크기를 지정할 때 사용됩니다.
- rem : 상대 크기 단위로, 루트 요소(html)에 지정된 font-size 값에 대한 배수 값을 사용하여 크기를 지정할 때 사용됩니다.
- vw, vh : 뷰포트의 너비와 높이를 기준으로 크기를 지정할 때 사용됩니다.
- vmin, vmax : 뷰포트의 너비와 높이 중 작은 값 또는 큰 값에 대한 비율 값을 사용하여 크기를 지정할 때 사용됩니다.
line-height는 어떤 속성인가요? (3)
- 텍스트 요소의 줄 간격을 조정하는 데 사용됩니다.
- 기본값은 normal로, 이 경우 브라우저는 글꼴 크기에 따라 줄 간격을 자동으로 조정합니다.
- 다른 값으로는 길이 값(px, em 등), 상대 값(%, unitless number), unitless number는 글꼴 크기에 대한 배수를 나타냅니다.
요소의 배경 이미지는 어떻게 다루나요? (4.9)
background-image- 요소의 배경 이미지를 설정합니다.
- 이미지는 URL 또는 linear-gradient()와 같은 CSS gradient 함수로 지정할 수 있습니다.
- 여러 개의 이미지를 사용할 경우 쉼표(,)로 구분하여 지정할 수 있습니다.
background-repeat- 배경 이미지가 반복되는 방식을 지정합니다.
- repeat(기본값), repeat-x, repeat-y, no-repeat 등의 값으로 설정할 수 있습니다.
background-position- 배경 이미지가 위치하는 위치를 지정합니다.
- top, bottom, left, right, center 등의 값으로 설정하거나, x y 형식으로 좌표값을 직접 지정할 수 있습니다.
background-size- 배경 이미지의 크기를 지정합니다.
- auto(기본값), contain, cover, width height 형식으로 크기를 직접 지정할 수도 있습니다.
linear-gradient()란? (7.3.2)
- CSS의 linear-gradient() 함수는 웹 페이지의 요소에 선형 그라데이션 배경을 생성하는 데 사용됩니다.
- 선형 그라데이션은 두 개 이상의 색상이 일정한 간격으로 변화하는 배경 효과를 만듭니다.
linear-gradient()함수의 문법은 다음과 같습니다.linear-gradient([<angle> | to <side-or-corner>], <color-stop-list>)
<angle>은 그라데이션 라인의 각도를 지정합니다. 값은 각도 또는 rad, grad, turn 단위로 지정할 수 있습니다.to <side-or-corner>는 그라데이션 라인의 방향을 지정합니다. 값은 top, right, bottom, left, top left 등으로 지정할 수 있습니다.<color-stop-list>는 쉼표로 구분된 색상 중단점의 목록입니다. 각 색상 중단점은 색상 값과 선택적으로 위치를 지정할 수 있습니다. 위치는 퍼센트 또는 길이 단위로 지정할 수 있습니다.- 예시
background: linear-gradient(to bottom, red, yellow, green);- 이 코드는 45도 각도로 빨간색에서 노란색, 그리고 초록색으로 변화하는 선형 그라데이션 배경을 생성합니다.
background: linear-gradient(to right, red 20%, yellow 50%, green 80%);- 이 코드는 오른쪽으로 진행하면서 빨간색(20% 지점), 노란색(50% 지점), 그리고 초록색(80% 지점)으로 변화하는 선형 그라데이션 배경을 생성합니다.
box-shadow란? (3.8.2)
- CSS의
box-shadow속성은 HTML 요소에 하나 이상의 그림자를 추가하는 데 사용됩니다. box-shadow속성의 값은 다음과 같습니다.box-shadow: offset-x offset-y blur-radius spread-radius color inset;offset-x offset-y그림자가 그려지는 위치를 지정합니다.blur-radius그림자의 흐림 정도를 지정합니다. 값이 클수록 그림자는 더욱 흐릿하게 보입니다.spread-radius그림자가 퍼지는 정도를 지정합니다. 양수를 지정하면 그림자가 요소 바깥으로 확장되고, 음수를 지정하면 그림자가 요소 내부로 축소됩니다.color그림자의 색상을 지정합니다.inset그림자를 요소의 내부에 그리도록 합니다. 이 키워드를 지정하지 않으면 그림자는 요소의 바깥에 그려집니다.
- 예시
box-shadow: 10px 5px 5px black;- 이 코드는 요소에 가로로 10px, 세로로 5px 이동한 위치에 흐림 정도가 5px이고 색상이 검은색인 그림자를 추가합니다.
box-shadow: inset 0 0 10px #000000;- 이 코드는 요소 내부에 흐림 정도가 10px이고 색상이 검은색인 그림자를 추가합니다.
opacity란? (2)
- CSS 속성 중 하나로, 해당 요소의 투명도를 지정하는 데 사용됩니다.
- opacity 속성은 0부터 1 사이의 값을 가지며, 값이 작을수록 요소가 불투명해지고, 값이 클수록 요소가 투명해집니다.
박스 모델(Box model)이란? (2.4)
- CSS 박스 모델(Box Model)은 HTML 문서의 각 요소를 감싸는 박스로, 이를 이해하는 것은 웹 페이지 레이아웃을 제어하는 데 중요한 기초입니다.
- 박스 모델은 Content, Padding, Border, Margin으로 구성되어 있습니다.
- Content: 요소의 실제 내용이 위치하는 영역입니다. 내용의 너비와 높이는 width, height 속성으로 조절할 수 있습니다.
- Padding: Content 영역과 Border 영역 사이의 여백 영역입니다. 이 영역은 padding 속성으로 조절할 수 있습니다.
- Border: Padding과 Margin 사이의 영역으로, 요소의 테두리를 나타냅니다. border 속성을 사용하여 조절할 수 있습니다.
- Margin: Border와 다른 요소 사이의 공간으로, margin 속성을 사용하여 조절할 수 있습니다.
padding과 margin 표기법을 설명해주세요 (5.1)
margin: [size]상하좌우margin: [size] [size]상하/좌우margin: [size] [size] [size]상/좌우/하margin: [size] [size] [size] [size]상/우/하/좌width: [size]; margin: [size] auto자동으로 채우기- 너비가 정해져 있어야 좌우 margin을 auto로 설정할 수 있습니다.
border와 border-radius 표기법을 설명해주세요 (7)
/* 모든 속성 값 지정 */
border: border-width border-style border-color;
/* 속성 값 미지정 */
border: none;/* 모든 모서리를 동일한 값으로 지정 */
border-radius: 10px;
/* 상단 모서리와 하단 모서리를 다르게 지정 */
border-radius: 10px 20px;
/* 상단 왼쪽 모서리, 상단 오른쪽 모서리, 하단 오른쪽 모서리, 하단 왼쪽 모서리를 각각 다르게 지정 */
border-radius: 10px 20px 30px 40px;
/* 모든 모서리에 각각 다른 값을 지정 */
border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
/* 요소를 원형으로 만드는 방법 */
border-radius: 50%;box-sizing 속성이란? (3.2)
- CSS 속성 중 하나로, 요소의 크기를 계산하는 방법을 지정합니다.
box-sizing속성은 다음과 같은 값들을 사용할 수 있습니다.content-box기본값으로, 요소의 크기는 콘텐츠 영역의 크기만을 포함합니다. 패딩과 테두리(border)는 요소의 크기에 포함되지 않습니다.border-box: 요소의 크기는 콘텐츠 영역, 패딩, 테두리의 크기를 모두 포함합니다. 이 때, 콘텐츠 영역의 크기가 여백과 테두리의 크기를 감소시키는 효과가 있습니다.
- 전체 요소에 대해
* {box-sizing: border-box;}를 설정하는 것은 일반적으로 CSS 작성 시 유용하며, 웹 사이트 전체적인 디자인에 일관성을 부여할 수 있습니다.
overflow란? (2.4)
- 요소의 내용이 지정된 크기를 초과할 때 처리 방법을 지정하는 속성입니다.
- 다음과 같은 값 중 하나를 가질 수 있습니다.
visible기본값으로, 컨텐츠가 넘쳐도 그대로 보여집니다.hidden넘치는 컨텐츠를 잘라내어 보이지 않게 합니다.scroll항상 스크롤바를 표시합니다.auto필요한 경우에만 스크롤바를 표시합니다.
가로 스크롤을 만드는 방법을 설명해주세요. (3)
overflow-x속성을 auto로 하여 가로 스크롤바를 표시합니다. 이때,overflow-y속성은hidden값을 지정하여 세로 스크롤바를 표시하지 않도록 설정해야 합니다.white-space속성을nowrap값으로 설정하여 요소 내의 텍스트가 줄바꿈 없이 한 줄에 표시되도록 합니다. 이때, 요소의 너비를 초과하는 경우 자동으로 가로 스크롤이 생성됩니다.- 예시
.container { overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
마진 상쇄란? (4.4)
- CSS 박스 모델에서 마진 상쇄(margin collapse)는 인접한 두 개의 수직 마진 중에서 큰 쪽 값으로 결정되는 현상을 말합니다.
- 이 현상은 다음과 같은 상황에서 발생합니다.
- 인접한 블록 요소의 상/하단 마진 값이 모두 존재할 경우
- 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소 사이의 마진 값이 존재할 경우
- 마진 상쇄는 두 마진 중 큰 값으로 결정되며, 음수 마진도 계산에 포함됩니다. 음수 마진이 포함되는 경우 상쇄된 마진은 두 마진의 합으로 계산됩니다.
- 마진 병합은 다음과 같이 해결합니다.
- 인접한 블록 요소의 상/하단 마진 값을 각각 0으로 설정합니다.
- 부모 요소와 첫 번째 자식 요소, 마지막 자식 요소 사이에 빈 요소를 추가합니다.
display 속성값은 어떤 것이 있나요? (11)
- none
- block
- inline
- inline-block
- table
- table-row
- table-cell
- flex
- grid
- inline-flex
- inline-grid
display: none이란? (2)
- 해당 요소는 HTML 문서의 구조에서는 존재하지만, 실제 화면에는 표시되지 않습니다.
- 요소가 차지하는 공간도 없어지므로, 주로 불필요한 요소를 감추거나, JavaScript를 사용하여 동적으로 요소를 추가/제거할 때 유용합니다.
display: block이란? (3)
- 해당 요소를 새로운 줄에서 표시하고, 요소의 너비를 부모 요소의 전체 너비로 설정하는 속성입니다.
- 위에서 아래로 배치됩니다.
- 너비와 높이를 지정할 수 있습니다.
display: block인 HTML 태그는 어떤 것이 있나요? (8)
- 블록 레벨 컨테이너 요소:
<div> - 문단 요소:
<p> - 제목 요소:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> - 목록 요소:
<ul>,<ol> - 목록 항목 요소:
<li> - 테이블 요소:
<table>,<thead>,<tbody>,<tfoot>,<tr>,<th>,<td>, - 폼 요소:
<form>,<fieldset>,<legend>,<input>,<select>,<option>,<textarea>,<button>,<optgroup>,<datalist>,<output>,<header> - HTML5에서 추가된 요소:
<footer>,<nav>,<aside>,<article>
display: inline이란? (2)
- 해당 요소를 새로운 줄이 아닌, 텍스트 흐름 내에서 표시하는 속성입니다.
- 제약 사항
- 너비와 높이: 내용물에 맞게 자동으로 너비와 높이가 결정됩니다. 따라서, 너비와 높이를 직접 설정할 수 없습니다.
- 패딩과 마진: 수평 방향의 패딩과 마진은 설정할 수 있지만, 수직 방향의 패딩과 마진은 설정할 수 없습니다.
- 줄바꿈: 자동으로 줄바꿈이 되지 않습니다. 따라서, 요소가 너무 길어지면 부모 요소를 벗어나게 됩니다.
display: inline인 HTML 태그는 어떤 것이 있나요? (9)
span인라인 레벨 컨테이너 태그a하이퍼링크를 생성하는 태그b굵은 글씨체로 표시하는 태그img이미지를 표시하는 태그(예외적으로 직접 너비와 높이를 설정할 수 있다.)input사용자 입력을 받는 폼 요소 태그 (type 속성에 따라 다양한 종류가 있음)label폼 요소의 설명을 제공하는 태그select드롭다운 형태의 선택 폼 요소 태그textarea여러 줄의 텍스트 입력 폼 요소 태그em,i,strong,cite,q,dfn,code,var,samp,kbd,sub,sup,small등
display: inline-block이란? (5)
- 요소를 문장 내에서 표시하고, 요소의 너비와 높이를 직접 설정 가능하게 해주는 속성입니다.
- 인라인처럼 줄바꿈이 일어나지 않습니다.
- 인라인처럼 컨텐츠의 너비만큼 너비를 차지합니다.
- 블록처럼 세로 여백을 쓸 수 있습니다.
- 블록처럼 너비나 높이를 지정할 수 있습니다.
display: table, talbe-row, table-cell이란? (3)
table테이블 요소를 표시하며, 요소의 너비를 테이블의 전체 너비에 맞게 설정되게 해주는 속성입니다.table-row테이블 행 요소를 표시하며, 요소의 너비를 테이블의 전체 너비에 맞게 설정되게 해주는 속성입니다.table-cell테이블 셀 요소를 표시하며, 요소의 너비와 높이를 직접 설정 가능하게 해주는 속성입니다.
Flexbox란? (2)
- Flexbox는 CSS3에서 새롭게 도입된 레이아웃 방식 중 하나로, 요소들을 유연하게 배치할 수 있는 기능을 제공합니다.
- Flexbox는 부모 요소(flex container)와 자식 요소(flex item)로 구성되며, display: flex 속성을 부모 요소에 적용하여 활성화합니다.
Flexbox 정렬 방법에 대해 설명해주세요. (6.3)
- Main Axis: 배치 방향
- Cross Axis: 배치 방향에 수직인 방향
- justify-content: main axis 방향으로 콘텐츠 간의 여백 설정
- align-content: cross axis 방향으로 콘텐츠 간의 여백 설정
- align-items: cross axis 방향으로 모든 요소의 위치 결정
- align-self: cross axis 방향으로 한 요소의 위치 결정
- flex-wrap: overflow된 요소의 줄 바꿈 설정
- wrap
- no-wrap
- wrap-reverse
Flexbox 간격에 대해 설명해주세요. (2)
gap: {row-gap} {column-gap}gap속성값은 flex-direction의 영향을 받지 않습니다.
Flexbox 요소를 활용해 공간을 꽉 채우는 방법에 대해 설명해주세요. (5.10)
- flex-grow
- default: 0
- flex-grow 속성은 flex 아이템이 flex 컨테이너 내의 남은 공간을 얼마나 차지할 것인지 결정합니다.
- 만약 모든 flex 아이템의 flex-grow 속성 값이 1이라면, 모든 아이템은 남은 공간을 균등하게 분배받게 됩니다.
- flex-shrink
- default: 1
- flex-shrink 속성은 flex 컨테이너의 크기가 줄어들었을 때, flex 아이템이 얼마나 줄어들 것인지를 결정합니다.
- flex 아이템의 flex-shrink 속성 값을 0으로 설정하면 요소를 원하는 위치에 고정할 수 있습니다.
- flex-basis
- default: auto
- flex-basis 속성은 flex 아이템의 초기 크기를 결정합니다.
- width와 사용하는 단위가 같습니다.
- 만약 flex-basis를 기본값인 auto로 설정하면 컨텐츠 사이즈에 맞춰서 나타나고, 0으로 설정하면 아이템의 초기 크기는 0이며, flex-grow 속성에 따라 공간을 분배받게 됩니다.
flex: {flex-grow} {flex-shrink} {flex-basis}형태로 쓸 수 있습니다.display: inline-flex를 활용해 인라인 안에서 플렉스박스를 만들 수 있습니다.
grid란? (3)
- Grid는 CSS3의 레이아웃 기능 중 하나로, 요소를 2차원(행과 열)의 격자 형태로 배열하는 데 사용됩니다.
- Flexbox가 1차원의 레이아웃을 위한 것이라면, Grid는 2차원의 복잡한 레이아웃을 다룰 수 있습니다.
- Grid를 사용하면 미디어 쿼리를 사용하지 않고도 반응형 디자인을 쉽게 구현할 수 있습니다.
grid의 구조를 나누는 방법을 설명해주세요. (1.3)
grid-template-columns과grid-template-rows속성을 사용하여 행과 열의 크기를 정의하고,grid-template-areas속성을 사용하여 각 영역을 이름으로 정의합니다.grid-template-columns: {width1} {width2} ...grid-template-rows: {height1} {height2} ...grid-template: {height1} {height2} ... / {width1} {width2} ...
grid 크기와 함수들에 대해 설명해주세요. (5.5)
grid-auto-rows,grid-auto-columns속성으로 행과 열의 크기를 자동으로 설정할 수 있습니다.grid-row,grid-column속성 값으로 그리드 라인의 번호를 입력해 요소를 원하는 셀 집합에 배치할 수 있습니다.span n속성 값도 쓸 수 있습니다.
- grid item에
grid-area라는 이름을 붙이고 grid container에grid-template-areas속성을 이용해 이름으로 배치할 수 있습니다.- 해당 위치를 비우고 싶으면 마침표
.를 쓰면 됩니다.
- 해당 위치를 비우고 싶으면 마침표
- size에 fr(fraction) 값을 넣으면 요소 간 상대적인 크기로 지정할 수 있다
- size에 minmax(min, max) 함수를 활용할 수 있다
- minmax에서 최댓값에만 fr 값을 쓸 수 있다
- size에 repeat(n, size) 함수를 활용할 수 있다
gap: {row-gap} {column-gap}
선택자 목록이란? (1)
- 선택자 목록(Selector list)은 여러 개의 선택자를 콤마(,)로 구분하여 하나의 규칙을 적용하는 방법입니다.
선택자를 붙여쓰면 어떻게 되나요? (1)
- 선택자를 붙여 쓰면, 여러 조건을 모두 만족하는 요소를 선택합니다.
자식, 자손 요소를 선택하는 방법에 대해 설명해주세요. (2)
- 자식 요소:
parent-selector > child-selector - 자손 요소:
parent-selector descendant-selector
가상 클래스란? (1)
- 가상 클래스(Pseudo class)는 CSS 선택자의 특별한 상태를 지정하기 위해 사용되는 키워드입니다.
- 가상 클래스는 콜론(:)으로 시작하며, 선택자의 이름 뒤에 위치합니다.
- 가상 클래스를 이용하면, 문서의 특정 부분(예: 첫 번째 줄, 첫 번째 자식 등)이나 사용자와의 상호작용(예: 방문한 링크, 마우스 오버 상태 등)에 따른 요소의 상태를 스타일링할 수 있습니다.
가상 클래스에 어떤 것들이 있나요? (18)
:link링크에 연결된 페이지를 방문하지 않은 상태:visited링크에 연결된 페이지를 방문한 상태:hover마우스 커서가 링크 위에 올라가 있는 상태:active마우스로 링크를 클릭하고 있는 상태:focusinput 요소에 초점이 맞춰진 상태:checkedinput 요소가 체크된 상태:enabledinput 요소가 사용할 수 있는 상태:disabledinput 요소가 사용할 수 없는 상태:requiredrequired 속성을 가진 상태:optionalrequired 속성을 가지지 않는 상태:first-child자식 요소 중 첫 번째 요소:last-child자식 요소 중 마지막 요소:nth-child(n)자식 요소 중 앞에서부터 n번째에 위치하는 요소:nth-last-child(n)자식 요소 중 뒤에서부터 n번째에 위치하는 요소:empty아무런 자식 요소도 가지지 않는 상태:root문서의 root 요소:not(선택자)해당 선택자를 제외한 요소:lang(언어)유저의 언어 설정 상태
CSS의 Cascading이란? (2)
- 여러 개의 스타일 규칙이 있을 때, 캐스케이드 우선순위에 따라 최종 스타일을 결정하는 과정을 의미합니다.
- 여기서
cascading은폭포처럼 순서대로 내려가는이라는 의미로 사용됩니다.
캐스케이드 우선순위(Cascade precedence)에 대해 설명해주세요. (4.16.3)
- Origin and importance
1-1CSS transitions1-2user-agent (browser) !important1-3user !important1-4author(developer) !important1-5CSS @keyframe animations1-6inline style definition(developer)1-7author(developer)1-8user1-9user-agent (browser)!important와inline style definition은 스타일 디버깅을 어렵게 만듭니다.
- 명시도(Specificity)
2-1아이디(IDs)2-2클래스(Classes), 속성(attributes), 가상클래스(pseudo-classes)2-3요소(Elements), 가상요소(pseudo-elements)
- 상속된 스타일(Inherited style)
- 부모 태그에 적용된 CSS 규칙은 자손에게도 상속됩니다.
- 모든 속성이 상속되는 건 아니고, 상속되는 속성(
color,font-family,font-size,font-weight,line-height,text-align, ... 등)들이 정해져 있습니다. - Full property table, inheritance - Which CSS properties are inherited? - Stack Overflow 참조
- 가까운 조상에게 물려받은 속성일수록 우선순위가 높습니다.
- 모든 속성이 상속되는 건 아니고, 상속되는 속성(
- 코드 상의 순서
- 동일한 가중치를 갖는 규칙이 두 개 이상인 경우, 코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높습니다.
Position property란? (2)
- 요소의 포지션 방법을 명시하는 속성입니다.
- top, right, bottom, left, inset 속성으로 구체적인 위치를 지정할 수 있습니다.
Position property의 종류에 대해 설명해주세요. (5.7)
- static(default): 일반적인 문서 흐름에 따라 배치
- top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다
- relative: 일반적인 문서 흐름에 따라 배치
- top, right, bottom, left의 값에 따라 오프셋을 적용한다
- 오프셋은 다른 요소에 영향을 주지 않는다
- 요소가 차지하는 공간은 static일 떄와 같다
- sticky: 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 블록 레벨 조상을 기준으로 배치
- static처럼 위치해 있다가 scroll이 해당 부분을 넘어가면 fixed처럼 위치한다
- fixed: 뷰포트의 초기 컨테이닝 블록를 기준으로 배치
- 일반적인 문서 흐름에서 제거되어 페이지 레이아웃에 공간을 배정하지 않는다
- absolute: 조상 요소 중 positioning(static이 아닌 값) 된 가장 가까운 요소를 기준으로 배치
- 일반적인 문서 흐름에서 제거되어 페이지 레이아웃에 공간을 배정하지 않는다
z-index란? (1.2)
z-index는 CSS 속성 중 하나로, positioning(위치 지정)된 요소, 그 자손과 flex items의 z축(수직 방향) 순서를 지정합니다.z-index값은 정수 값을 사용하며, 숫자가 클수록 요소가 앞으로 나타납니다. 이 속성은 일반적으로 요소의 쌓임 순서를 조절하여 겹쳐진 요소들 중 어떤 요소를 사용자에게 노출할지 결정할 때 유용하게 사용됩니다.z-index를 설정하려면 해당 요소의 position 속성이 static이 아닌 값으로 설정되어야 합니다.
쌓임 맥락 이란? (1)
- 쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지합니다.
쌓임 맥락을 생성하는 요소에는 어떤 것들이 있나요? (16)
- 문서의 루트 요소 (
<html>) position이absolute또는relative이고,z-index가auto가 아닌 요소position이fixed또는sticky인 요소 (sticky는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)- 플렉스(
flexbox(en-US)) 컨테이너의 자식 중z-index가auto가 아닌 요소. - 그리드(
grid) 컨테이너의 자식 중z-index가auto가 아닌 요소. opacity가 1보다 작은 요소mix-blend-mode가normal이 아닌 요소- 다음 속성 중 하나라도
none이 아닌 값을 가진 요소transformfilterperspective(en-US)clip-pathmask/mask-image(en-US) /mask-border(en-US)
isolation이isolate인 요소-webkit-overflow-scrolling이touch인 요소will-change의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소contain이layout,paint, 또는 둘 중 하나를 포함하는 값(strict,content등)인 요소
쌓임 맥락은 어떤 특징이 있나요? (4)
- 하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다.
- 쌓임 맥락이 다른 쌓임 맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다.
- 쌓임 맥락은 형제 쌓임 맥락과 완전히 분리됩니다. 쌓임을 처리할 땐 자손 요소만 고려합니다.
- 각각의 쌓임 맥락은 독립적입니다. 어느 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째 부모 쌓임 맥락 안에 배치합니다.
CSS position property value의 종류는? (5)
static- position의 기본 값은
static이고, 이 경우 원래 있어야 할 위치인 HTML에 작성된 순서 그대로 브라우저 화면에 표시됩니다.
- position의 기본 값은
relativerelative는 요소의 원래 위치를 기준으로 상대적으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지하고 있습니다.top,bottom,left,right속성을 이용해서 요소의 원래 위치 기준 이동하도록 설정할 수 있습니다.
absoluteabsolute는 가장 가까운 포지셔닝(static이 아닌 position 속성 값)이 된 조상 요소를 기준으로 배치됩니다. 이때 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다. 보통 상위 요소의 position 속성을relative로 지정하여 배치할 기준을 잡고 사용합니다.
fixedfixed는 브라우저 전체 화면을 기준으로 고정된 배치입니다.top,bottom,left,right속성은 브라우저의 상, 하, 좌, 우에서 해당 요소가 얼마나 떨어져 있는지를 결정합니다. 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다. 내비게이션을 만들 때 많이 사용하는데, 요소의 원래 자리를 차지하지 않기 때문에 요소간 겹치지 않도록 마진을 넣어주기도 합니다.
stickysticky는static처럼 원래 위치에 배치해 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터fixed처럼 고정되어 배치됩니다. 기본적으로는static처럼 배치하기 때문에 요소의 원래 자리를 차지합니다.top,bottom,left,right설정이 필요하고, 가장 가까운 scroll되는 조상을 기준으로 배치 합니다.
BEM이란? (5)
- BEM(Blcok Element Modifier)란 CSS 클래스 이름을 짓는 규칙입니다.
Block<div>같은 영역을 의미합니다.Element<button>,<input>같은 요소를 의미합니다.Modifier요소의 변형을 표시하는 것을 의미합니다.- 이것들을
.block__element--modifier형태로 씁니다.
BEM의 예시를 들어주세요. (2)
<form class="signin-form">
<label class="signin-form__label">
Email
<input type="text" class="signin-form__input">
</label>
<label class="signin-form__label">
Password
<input type="password" class="signin_form__input signin_form__input--pasword">
</label>
<button class="signin-form__button signin-form__button--submit">
Sign In
</button>
</form>.signin-form { /* 로그인 폼 */ }
.signin-form__input { /* 로그인 폼의 인풋 */ }
.signin-form__input.signin-form__input--password { /* 로그인 폼의 비밀번호 인풋 */ }
.signin-form__button { /* 로그인 폼의 버튼 */ }
.signin-form__button.signin-form__button--submit { /* 로그인 폼의 제출 버튼 */ }Sass란? (3)
- CSS는 웹 표준이기 때문에 문법이 빠르게 바뀌지 않습니다. 그래서 개발자들이 사용하기 편한 여러가지 문법을 추가한 새로운 언어를 만들기 시작했는데, 그 중에 가장 많이 쓰이는 것이 바로 Sass입니다. 변수, 네스팅(Nesting) 문법, 믹스인(Mixin) 등등 다양한 기능을 제공합니다. 이 중에서 많은 사람들이 좋다고 생각한 문법(변수, 네스팅 등)은 웹 표준으로 흡수되기도 했습니다.
- Sass는 프리프로세서(Preprocessor) 스크립트 언어라고 하는데, 프리프로세서라는 프로그램을 통해서 Sass 코드를 CSS 코드로 변환하기 때문에 그렇습니다.
- Sass에는 기존 Sass와 SCSS 두 가지 문법이 있는데, 최근에는 CSS의 모든 문법 위에서 확장된 문법을 사용하는 SCSS를 많이 사용합니다.
네스팅(nesting)의 예시를 들어주세요 (1)
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}믹스인(mixin)의 예시를 들어주세요 (1)
Scss
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
CSS
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(DarkGray, .25);
color: #fff;
}
.alert {
background: DarkRed;
box-shadow: 0 0 1px rgba(DarkRed, .25);
color: #fff;
}
.success {
background: DarkGreen;
box-shadow: 0 0 1px rgba(DarkGreen, .25);
color: #fff;
}CSS Modules란? (1)
- CSS Modules는 CSS 스타일을 모듈화하여 웹 개발 프로젝트에서 사용하는 기술입니다. 기존의 전역 스코프를 가진 CSS 규칙을 사용하는 방식과는 달리, CSS Modules는 각각의 모듈에 대해 스코프가 지정되어 스타일이 격리되고 충돌을 방지할 수 있습니다.
CSS Modules의 특징을 설명해주세요. (4)
- 모듈 스코핑(module scoping): 각각의 CSS 모듈은 고유한 스코프를 가지며, 스타일 규칙은 해당 모듈 내에서만 적용됩니다. 이렇게 하면 스타일 규칙이 전역으로 적용되어 생길 수 있는 충돌을 방지할 수 있습니다.
- 로컬 클래스 네임(local class names): CSS in Modules에서는 클래스 이름을 지정할 때 로컬 클래스 네임을 사용합니다. 이로써 클래스 이름이 충돌하지 않고 고유하게 유지됩니다. 일반적으로는 [파일이름]_[클래스이름]__randomString 형식으로 클래스 이름이 생성됩니다.
- 재사용 가능한 스타일(reusable styles): CSS in Modules에서는 스타일 규칙을 모듈로 정의하여 다른 모듈에서 재사용할 수 있습니다. 이를 통해 코드 중복을 줄이고 유지보수성을 향상시킬 수 있습니다.
- 스코프 범위 지정(scope control): CSS in Modules에서는 모듈 내에서만 스타일이 적용되는 것이 기본 동작입니다. 그러나 필요한 경우 전역 스타일을 사용할 수도 있습니다.
Tailwind CSS란? (1)
- Tailwind CSS는 Atomic CSS와 Utility-first 접근 방식을 적용한 현대적인 CSS 프레임워크입니다. Tailwind CSS는 개발자에게 유연하고 효율적인 스타일링을 제공하기 위해 다양한 사전 정의된 클래스를 제공합니다.
Atomic CSS와 Utility-first란? (2)
- Atomic CSS는 스타일을 작은, 독립적인 단위로 분해하여 클래스 단위로 정의하는 접근 방식입니다. 이러한 작은 단위를
원자(Atom)라고 부르며, 이러한 원자들을 조합하여 필요한 스타일을 생성합니다. 예를 들어,padding-top: 10px라는 스타일을 정의하는 대신pt-10이라는 클래스를 사용하는 식으로 스타일을 적용합니다. Atomic CSS는 스타일 규칙을 재사용 가능한 단위로 만들어 코드의 효율성과 유지보수성을 높이는 데 중점을 둡니다. - Utility-first는 Atomic CSS의 변형으로, 스타일을 구성하는 작은 원자들을 재사용 가능한 유틸리티 클래스로 구성하는 방식입니다. 이 방식에서는 스타일 규칙을 간결한 클래스 이름으로 표현하고 이러한 클래스를 HTML 요소에 직접 적용하여 스타일을 적용합니다. 예를 들어, "text-center"이라는 클래스를 사용하여 텍스트를 가운데 정렬하는 스타일을 적용할 수 있습니다. Utility-first는 반복되는 스타일을 간결하게 표현하고 재사용 가능한 클래스로 관리함으로써 개발자에게 빠르고 효율적인 스타일링을 제공합니다.
CSS 기술들의 장단점을 설명해주세요. (6)
- 전통적인 CSS
- CSS 클래스 이름을 짓는 것이 번거롭습니다.
- CSS 클래스 이름이 충돌할 가능성이 있습니다.
- 코드의 규모가 커지면 관리가 어렵습니다.
- 작성한 코드를 브라우저가 그대로 실행하기 때문에 추가적인 연산이 발생하지 않는다는 장점이 있습니다.
- BEM 방법론
- CSS 클래스의 이름을 짓는 고민을 덜 수 있습니다.
- 여전히 규모가 큰 코드를 관리하기는 어렵습니다.
- Sass와 같은 CSS Preprocessor
- 여전히 CSS 클래스 이름이 충돌할 가능성이 있습니다.
- 파일을 분리하고 불러 올 수 있기 때문에 규모가 큰 코드를 관리하기 좋습니다.
- 반복되는 CSS 코드를 줄여주는 다양한 문법이 있어서 작업 효율이 좋습니다.
- CSS Modules
- 컴포넌트 단위로 나누어서 스타일링할 수 있어서 CSS 클래스 이름이 충돌하지 않습니다.
- 필요하다면 Sass로 CSS Modules를 사용할 수 있습니다. (create-react-app 에서는 자체적으로 Sass와 CSS modules를 함께 사용하도록 해 줍니다.)
- CSS-in-JS
- 컴포넌트 단위로 나누어서 스타일링할 수 있어서 CSS 클래스 이름이 충돌하지 않습니다.
- 클래스네임을 짓지 않아도 됩니다.
- 자바스크립트와 JSX로 된 컴포넌트 코드와 스타일링 코드가 한 파일에 있어서 관리하기 좋습니다.
- 하지만 자바스크립트를 실행해서 CSS를 만들기 때문에 CSS나 Sass에 비해서 추가적인 연산이 필요합니다. 그리고 렌더링 속도도 훨씬 느려진다는 단점이 있습니다.
- Tailwind CSS와 같은 Utility-first(Atomic CSS)
- CSS 클래스를 나누는 기준을 컴포넌트나 디자인이 아닌 작은 단위의 CSS 속성으로 두기 때문에, CSS 클래스 이름 충돌에 대한 걱정이 없습니다.
- 보편적으로 사용하는 CSS 클래스를 여러 컴포넌트에서 공유하기 때문에, 규모가 큰 프로젝트더라도 CSS 코드의 양이 굉장히 적다는 장점이 있습니다.
- CSS-in-JS와 마찬가지로 JSX로 된 컴포넌트 코드와 스타일링 코드가 한 파일에 있어서 관리하기 좋습니다.
- 복잡한 디자인을 적용할 때에는 CSS 클래스가 한없이 길어져서 가독성이 떨어지고 관리하기 어렵다는 단점이 있습니다.
- 그래서 Tailwind CSS 같은 경우 별도의 문법(@apply)으로 추상화를 지원하기도 합니다.
<a href="..." className="rounded-lg px-3 py-2 text-slate-700 font-medium hover:bg-slate-100 hover:text-slate-900">...</a>