Topic

CSS rules
Property
Box model
Display
Selector

What I Learned

1. CSS rule

CSS 선언(CSS declaration)

• CSS 문서에서 사용되는 구문으로 각 선언은 선택자(selector)와 선언부(declaration block)로 구성됩니다.
• Selector {property: value;}

id

• HTML 요소에 대한 고유한 식별자입니다.
• 문서 내에서 단 하나의 요소에만 지정할 수 있습니다.
• 한 요소에 두 개 이상의 id를 지정할 수 없습니다.
• id name 앞에 # 기호를 붙여 선택자로 사용됩니다.

class

• HTML 여러 요소에 대한 스타일을 그룹으로 지정할 수 있게 해주는 식별자입니다.
• id와 달리 여러 요소에 적용될 수 있습니다.
• id와 달리 각 요소에 대해 다른 클래스를 지정할 수 있습니다.
• class name 앞에 . 기호를 붙여 선택자로 사용됩니다.

색상 단위(color unit)

• 키워드 (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()을 통해 사용자가 정의한 변수 이름을 사용할 수 있습니다.

크기 단위(size unit)

• 픽셀(px) : 절대 크기 단위로, 고정된 크기 값을 지정할 때 사용됩니다.
• 백분율(%) : 상대 크기 단위로, 부모 요소의 크기에 대한 백분율 값을 사용하여 크기를 지정할 때 사용됩니다.
• em : 상대 크기 단위로, 현재 요소에 지정된 font-size 값에 대한 배수 값을 사용하여 크기를 지정할 때 사용됩니다.
• rem : 상대 크기 단위로, 루트 요소(html)에 지정된 font-size 값에 대한 배수 값을 사용하여 크기를 지정할 때 사용됩니다.
• vw, vh : 뷰포트의 너비와 높이를 기준으로 크기를 지정할 때 사용됩니다.
• vmin, vmax : 뷰포트의 너비와 높이 중 작은 값 또는 큰 값에 대한 비율 값을 사용하여 크기를 지정할 때 사용됩니다.

2. CSS 속성

line-height

• 텍스트 요소의 줄 간격을 조정하는 데 사용됩니다.
• 기본값은 normal로, 이 경우 브라우저는 글꼴 크기에 따라 줄 간격을 자동으로 조정합니다.
• line-height의 다른 값으로는 길이 값(px, em 등), 상대 값(%, unitless number), 그리고 숫자 값이 있습니다. 숫자 값은 글꼴 크기에 대한 배수를 나타냅니다.

background-image

• background-image: url('path/img');
  • 요소의 배경 이미지를 설정합니다.
  • 이미지는 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()

• 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

• 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

• CSS 속성 중 하나로, 해당 요소의 투명도를 지정하는 데 사용됩니다.
• opacity 속성은 0부터 1 사이의 값을 가지며, 값이 작을수록 요소가 불투명해지고, 값이 클수록 요소가 투명해집니다.

3. 박스 모델

CSS 박스 모델

• CSS 박스 모델(Box Model)은 HTML 문서의 각 요소를 감싸는 박스로, 이를 이해하는 것은 웹 페이지 레이아웃을 제어하는 데 중요한 기초입니다.

• 박스 모델은 Content, Padding, Border, Margin으로 구성되어 있습니다.

  • Content: 요소의 실제 내용이 위치하는 영역입니다. 내용의 너비와 높이는 width, height 속성으로 조절할 수 있습니다.
  • Padding: Content 영역과 Border 영역 사이의 여백 영역입니다. 이 영역은 padding 속성으로 조절할 수 있습니다.
  • Border: Padding과 Margin 사이의 영역으로, 요소의 테두리를 나타냅니다. border 속성을 사용하여 조절할 수 있습니다.
  • Margin: Border와 다른 요소 사이의 공간으로, margin 속성을 사용하여 조절할 수 있습니다.

• padding, margin 표기법

  • margin: [size] 상하좌우
  • margin: [size] [size] 상하/좌우
  • margin: [size] [size] [size] 상/좌우/하
  • margin: [size] [size] [size] [size] 상/우/하/좌
  • width: [size]; margin: [size] auto 자동으로 채우기
    • 너비가 정해져 있어야 좌우 margin을 auto로 설정할 수 있습니다.

• border와 border-radius 표기법

  /* 모든 속성 값 지정 */
  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

• CSS 속성 중 하나로, 요소의 크기를 계산하는 방법을 지정합니다.
• box-sizing 속성은 다음과 같은 값들을 사용할 수 있습니다.
  • content-box 기본값으로, 요소의 크기는 콘텐츠 영역의 크기만을 포함합니다. 패딩과 테두리(border)는 요소의 크기에 포함되지 않습니다.
  • border-box : 요소의 크기는 콘텐츠 영역, 패딩, 테두리의 크기를 모두 포함합니다. 이 때, 콘텐츠 영역의 크기가 여백과 테두리의 크기를 감소시키는 효과가 있습니다.
• 전체 요소에 대해 * {box-sizing: border-box;}를 설정하는 것은 일반적으로 CSS 작성 시 유용하며, 웹 사이트 전체적인 디자인에 일관성을 부여할 수 있습니다.

overflow

• 요소의 내용이 지정된 크기를 초과할 때 처리 방법을 지정하는 속성입니다.
• 다음과 같은 값 중 하나를 가질 수 있습니다.
  • visible 기본값으로, 컨텐츠가 넘쳐도 그대로 보여집니다.
  • hidden 넘치는 컨텐츠를 잘라내어 보이지 않게 합니다.
  • scroll 항상 스크롤바를 표시합니다.
  • auto 필요한 경우에만 스크롤바를 표시합니다.

가로 스크롤

• overflow-x 속성을 auto로 하여 가로 스크롤바를 표시합니다. 이때, overflow-y 속성은 hidden 값을 지정하여 세로 스크롤바를 표시하지 않도록 설정해야 합니다.

• white-space 속성을 nowrap 값으로 설정하여 요소 내의 텍스트가 줄바꿈 없이 한 줄에 표시되도록 합니다. 이때, 요소의 너비를 초과하는 경우 자동으로 가로 스크롤이 생성됩니다.

• 예시

  .container {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  }
  

마진 상쇄

• CSS 박스 모델에서 마진 상쇄(margin collapse)는 인접한 두 개의 수직 마진 중에서 큰 쪽 값으로 결정되는 현상을 말합니다.
• 이 현상은 다음과 같은 상황에서 발생합니다.
  • 인접한 블록 요소의 상/하단 마진 값이 모두 존재할 경우
  • 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소 사이의 마진 값이 존재할 경우
• 마진 상쇄는 두 마진 중 큰 값으로 결정되며, 음수 마진도 계산에 포함됩니다. 음수 마진이 포함되는 경우 상쇄된 마진은 두 마진의 합으로 계산됩니다.
• 마진 병합은 다음과 같이 해결합니다.
  • 인접한 블록 요소의 상/하단 마진 값을 각각 0으로 설정합니다.
  • 부모 요소와 첫 번째 자식 요소, 마지막 자식 요소 사이에 빈 요소를 추가합니다.

4. Display

none

• 해당 요소는 HTML 문서의 구조에서는 존재하지만, 실제 화면에는 표시되지 않습니다.
• 요소가 차지하는 공간도 없어지므로, 주로 불필요한 요소를 감추거나, JavaScript를 사용하여 동적으로 요소를 추가/제거할 때 유용합니다.

block

• 해당 요소를 새로운 줄에서 표시하고, 요소의 너비를 부모 요소의 전체 너비로 설정하는 속성입니다.
• 위에서 아래로 배치됩니다.
• 너비와 높이를 지정할 수 있습니다.
• 예시
  • 블록 레벨 컨테이너 요소: <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>

inline

• 해당 요소를 새로운 줄이 아닌, 텍스트 흐름 내에서 표시하는 속성입니다.
• 제약 사항
  • 너비와 높이: 요소는 내용물에 맞게 자동으로 너비와 높이가 결정됩니다. 따라서, 너비와 높이를 직접 설정할 수 없습니다.
  • 패딩과 마진: 요소는 수평 방향의 패딩과 마진은 설정할 수 있지만, 수직 방향의 패딩과 마진은 설정할 수 없습니다.
  • 줄바꿈: 요소는 자동으로 줄바꿈이 되지 않습니다. 따라서, 요소가 너무 길어지면 부모 요소를 벗어나게 됩니다.
• 예시
  • span 인라인 레벨 컨테이너 태그
  • a 하이퍼링크를 생성하는 태그
  • b 굵은 글씨체로 표시하는 태그
  • img 이미지를 표시하는 태그(예외적으로 직접 너비와 높이를 설정할 수 있다.)
  • input 사용자 입력을 받는 폼 요소 태그 (type 속성에 따라 다양한 종류가 있음)
  • label 폼 요소의 설명을 제공하는 태그
  • select 드롭다운 형태의 선택 폼 요소 태그
  • textarea 여러 줄의 텍스트 입력 폼 요소 태그
  • em, i, strong, cite, q, dfn, code, var, samp, kbd, sub, sup, small 등

inline-block

• 요소를 문장 내에서 표시하고, 요소의 너비와 높이를 직접 설정 가능하게 해주는 속성입니다.
• 인라인처럼 줄바꿈이 일어나지 않습니다.
• 인라인처럼 컨텐츠의 너비만큼 너비를 차지합니다.
• 블록처럼 세로 여백을 쓸 수 있습니다.
• 블록처럼 너비나 높이를 지정할 수 있습니다.

table

• 테이블 요소를 표시하며, 요소의 너비를 테이블의 전체 너비에 맞게 설정되는 속성입니다.

table-row

• 테이블 행 요소를 표시하며, 요소의 너비를 테이블의 전체 너비에 맞게 설정

table-cell

• 테이블 셀 요소를 표시하며, 요소의 너비와 높이를 직접 설정 가능

flexbox

• Flexbox는 CSS3에서 새롭게 도입된 레이아웃 방식 중 하나로, 요소들을 유연하게 배치할 수 있는 기능을 제공합니다.
• Flexbox는 부모 요소(flex container)와 자식 요소(flex item)로 구성되며, display: flex 속성을 부모 요소에 적용하여 활성화합니다.
• flex-direction, justify-content, align-items, align-content 등의 속성을 사용하여 자식 요소들의 배치를 지정합니다.
  • flex-direction 요소의 배치 방향을 지정합니다.
  • justify-content 요소를 수평 방향으로 정렬합니다.
  • align-items 요소를 수직 방향으로 정렬합니다.
  • align-content 여러 줄로 된 요소들의 수직 정렬 방법을 지정합니다.
  • gap: {row-gap} {column-gap}
  • gap 속성값은 flex-direction의 영향을 받지 않습니다.

grid

• 자식 요소를 행(row)과 열(column)로 구성된 그리드 안에 배치할 수 있습니다.
• grid-template-columns과 grid-template-rows 속성을 사용하여 행과 열의 크기를 정의하고, grid-template-areas 속성을 사용하여 각 영역을 이름으로 정의합니다.

inline-flex

• 요소를 inline 형식으로 배치하면서도 그 안에서 flexbox 레이아웃을 사용할 수 있게 합니다.

inline-grid

• 요소를 inline 형식으로 배치하면서도 그 안에서 grid 레이아웃을 사용할 수 있게 합니다.

5. 선택자

선택자 목록(Selector List)

• CSS에서 하나 이상의 선택자를 콤마로 구분하여 연결한 것

선택자 붙여 쓰기

• tag_name#id_name.class_name 처럼 모든 선택자를 가진 요소를 스타일링 할 때 사용

자식, 자손 선택하기

• 자식 요소: parent-selector > child-selector
• 자손 요소: parent-selector descendant-selector

가상 클래스(Pseudo Class)

• 예시
  • :link 링크에 연결된 페이지를 방문하지 않은 상태
  • :visited 링크에 연결된 페이지를 방문한 상태
  • :hover 마우스 커서가 링크 위에 올라가 있는 상태
  • :active 마우스로 링크를 클릭하고 있는 상태
  • :focus input 요소에 초점이 맞춰진 상태
  • :checked input 요소가 체크된 상태
  • :enabled input 요소가 사용할 수 있는 상태
  • :disabled input 요소가 사용할 수 없는 상태
  • :required required 속성을 가진 상태
  • :optional required 속성을 가지지 않는 상태
  • :first-child 자식 요소 중 첫 번째 요소
  • :last-child 자식 요소 중 마지막 요소
  • :nth-child(n) 자식 요소 중 앞에서부터 n번째에 위치하는 요소
  • :nth-last-child(n) 자식 요소 중 뒤에서부터 n번째에 위치하는 요소
  • :empty 아무런 자식 요소도 가지지 않는 상태
  • :root 문서의 root 요소
  • :not(선택자) 해당 선택자를 제외한 요소
  • :lang(언어) 유저의 언어 설정 상태

Feedback

• 정리를 더 꼼꼼히 해서 포스트를 작은 사전처럼 쓸 수 있게 글을 쓰면 더 좋겠다
• 내일은 'HTML 핵심 개념' 코드잇 콘텐츠를 수강할 예정이다

Reference

• float - CSS: Cascading Style Sheets | MDN
• Introducing the CSS Cascade - CSS: Cascading Style Sheets | MDN
• CSS 핵심 개념 - 강의 | 코드잇