2025-09-07 10:14

Tags: 자바스크립트 리액트 넥스트

CSS

웹 문서를 시각적으로 꾸미기 위해 만들어진 스타일 시트 언어
HTML이 웹의 구조를 담당한다면, CSS는 색상, 글꼴, 레이아웃 등 디자인을 담당
보통 HTML + CSS + 자바스크립트 가 웹의 뼈대, 피부, 근육으로 비유

/* h1 태그에게 { 글자 색은 주황색이고, 글자 크기는 24픽셀로 } 적용해줘 */
h1 {
  color: orange;
  font-size: 24px;
}

선택자 (Selector): 스타일을 적용할 대상을 지정합니다. 위 예시에서는 h1 태그가 선택자입니다.
선언 블록 (Declaration Block): 중괄호 {}로 둘러싸인 부분으로, 하나 이상의 스타일 선언을 포함합니다.
속성 (Property): 스타일의 종류를 의미합니다. color, font-size 등이 속성입니다.
값 (Value): 속성에 적용할 구체적인 내용을 의미합니다. orange, 24px 등이 값입니다.
선언 (Declaration): 속성: 값;의 한 쌍을 의미합니다. 각 선언은 세미콜론;으로 구분됩니다.

박스 모델

콘텐츠 (Content): 텍스트나 이미지가 실제로 표시되는 영역입니다.
패딩 (Padding): 콘텐츠와 테두리 사이의 내부 여백입니다.
테두리 (Border): 패딩을 감싸는 선입니다. 두께, 스타일, 색상을 지정할 수 있습니다.
마진 (Margin): 테두리 바깥쪽의 외부 여백입니다. 다른 요소와의 간격을 조절합니다.

div {
  width: 200px; /* 콘텐츠 너비 */
  height: 100px; /* 콘텐츠 높이 */
  padding: 20px; /* 모든 방향의 내부 여백 */
  border: 1px solid black; /* 1픽셀 두께의 검은색 실선 테두리 */
  margin: 10px; /* 모든 방향의 외부 여백 */
}

언급한 노트 (Outgoing Links)

백링크 (Backlinks)