Front-End

[Front-End 기본] CSS의 기본 문법(1) - feat. 나만의 MBTI 테스트 만들기

parkes811 2022. 12. 21. 14:30
  • CSS는 이렇게 작성해야해요
h1{
  color: red;
  font-size: 30px;
}
선택자 {속성: 값;}

- 선택자의 개념은 HTML 파일의 어떤 요소를 선택할 것인지 정하는 것이다.

- "속성: 값 ;"의 형태가 여러 개 있을 수 있다.

- .html파일에서 class 속성을 가지고 있는 요소를 변경할 경우 .class 이름을 적어준다.

 

 

CSS 선택자

 

  • 태그 선택자

 

  • 클래스 선택자

- 클래스를 선택할 경우 . (dot)을 사용해야 된다!

 

  • 하위 선택자

- 하위선택자는 div라는 요소 안에 들어있는 것들 중에 .orange class를 가지고 있는 요소들을 의미한다.

- 띄어쓰기는 하위 선택자라는 것을 의미한다.

- 위 코드 해석은 .orange라는 클래스의 요소들을 찾는데, div의 하위인 요소들을 찾는 것이다.

 

  • 가상 클래스 :hover

 

  • 가상 클래스 :active

- 가상 클래스 :hover와 :active가 헷갈릴 수 있으니 active는 활동 (클릭)하는 동안이라고 기억한다!

 

 

 

모양을 만드는 CSS 속성들

 

  • 박스 모델

- HTML의 상자 요소들의 형태를 만드는 CSS 속성

- 상자의 내부, 외부 여백, 둥글게 깍기 등 다양한 형태를 만들 수 있다.

 

  • 글꼴, 문자 속성

- 글꼴은 HTML 요소의 폰트 종류, 크기, 두께 등을 설정하고 문자 속성을 통해 줄바꿈, 밑 줄, 정렬 등 속성을 변경할 수 있다.

 

  • 배경

- 상자 요소를 만들면 범위가 지정되는데 그 범위에 배경 색상이나 이미지를 추가할 수 있는 속성이다.

 

  • 배치

 

  • 정렬

- 수평 정렬과 수직 정렬을 사용하여 요소들의 순서를 정할 수 있는 속성

 

  • 전환

- 애니메이션 효과와 비슷한 속성을 의미한다.

 

  • 변환

- HTML의 요소를 2D, 3D로 회전을 시키거나, 비율을 조정해서 크기를 제어하는 효과를 주는 속성

 

  • 띄움

- HTML 요소(오렌지 박스)를 글자 위에 띄워 글을 쓸 수 있게 해주는 속성

 

  • 애니메이션

- 전환 효과 보다 복잡한 구조로 애니메이션을 표현할 수 있다.

 

  • 그리드

- CSS를 통해 HTML 요소들의 레이아웃을 쉽게 구성할 수 있게 해주는 속성

- 복잡한 레이아웃이 필요한 경우에 자주 사용된다.

 

  • 다단

 

  • 필터

- 필터 효과를 추가하면 HTML 요소에 블러, 그레이스케일, 색상 반전 등의 그래픽 효과를 적용할 수 있다.