[Front-End] CSS 배우기 : 시각적 규칙

- CSS 구조 : CSS선택기의 내부에는 CSS선언을 써야 함.

☆ 속성 : 요소의 꾸미고자 하는 속성 (예: 크기 size, 색상 color 등) 

☆ 값 : 속성의 값 (예: 18px, blue 등)

선언에서 속성과 값은 콜론( : )으로 구분되고, 선언의 끝에는 세미콜론( ; )이 사용된다.

 

- 폰트(Font Family) : font-family 속성을 사용함.

ex) font-family: Arial; / font-family: "Courier New"; -> 서체에 띄어쓰기가 있다면 따옴표( " )를 사용한다.

로딩 속도를 위해서는 웹 페이지에 2-3개의 서체만 사용하는 것이 좋다.

 

- 폰트 크기(Font Size) : font-size 속성을 사용함.

ex) font-size: 18px;

 

- 폰트 강조(Font Weight) : font-weight 속성을 사용함.

ex) font-weight: normal; / font-weight: bold;

 

- 텍스트 정렬(Text Algin) : text-align 속성을 사용함.

ex) text-align: left; / text-align: center; / text-align: right;

 

- 색상(Color) : 전경색에는 color 속성을, 배경색에는 background-color 속성을 사용함.

ex) color: black; / back-ground-color: white;

 

- 불투명(Opacity) : opacity 속성을 사용함. 0부터 1로 측정되며, 0이면 완전히 보이지 않고 1이면 100% 보임.

ex) opacity: 0.5; 

 

- 배경 이미지(Background Image) : background-image 속성을 사용함.

ex) backgound-image: url("이미지 주소");

 

- 중요함(Important) : !important를 사용함. 원래는 우선순위에서 밀리지만, 중요 문구를 사용하면 가장 우선순위가 됨.

ex) color: white !important;

 

⤷ CSS에 대한 이해를 도울 수 있는 사이트

developer.mozilla.org/en-US/docs/Web/CSS

CSS: Cascading Style Sheets | MDN