CSS 기초 총정리

본 글은 패스트캠퍼스의 “한 번에 끝내는 파이썬 웹 개발 초격차 패키지” 강의를 개인 실습하여 정리했습니다.

CSS 기본 문법

• 선택자{속성: 값;}
  • 선택자 : 스타일(CSS)을 적용할 대상 (Selector)
  • 속성: : 스타일(CSS)의 종류 (Property)
    • ex) color:red;
      • ; : 명령이 끝난다.
  • 값; : 스타일(CSS)의 값 (Value)
  • { : 스타일 범위의 시작
  • } : 스타일 범위의 끝

• div{color:red; margin: 20px;}
  • : div라는 태그를 찾아서 중괄호 안에 있는 것을 적용하겠다.
  • margin : 요소 외부 여백
  • 20px : 20픽셀을 의미
  • /*설명 작성 */ : 주석시작 ~ 주석 끝
    • html 주석과 다르다.

• Emmet : div를 치고 바로 tab키를 누르면 <div></div>가 완성된다.
• <link rel="stylesheet" href=""> 중
  • stylesheet : css파일을 가져와서 관계를 연결한다.
  • ./ : 현재의 파일 주변에 검색을 시작하겠다.

CSS 선택자

• 기본, 복합, 가상 클래스, 가상 요소, 속성

기본

• * : 전체 선택자 (Universal Selector) : 모든 요소를 선택
• ABC : 태그 선택자 (Type Selector) : 태그 이름이 ABC인 요소 선택
• .ABC : 클래스 선택자 (Class Selector) : HTML class 속성의 값이 ABC인 요소 선택.
• #ABC : 아이디 선택자 (ID Selector) : HTML id 속성의 값이 ABC인 요소 선택

복합

• ABCXYZ : 일치 선택자 (Basic Combinator) : 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
  • ex) span.orange {}
• ABC > XYZ : 자식 선택자 (Child Combinator) : 선택자 ABC의 자식 요소 XYZ 선택
  • ex) ul > .orange {}
• ABC XYZ : 하위(후손) 선택자 (Descendant Combinator) : 선택자 ABC의 하위 요소 XYZ 선택. ‘띄어쓰기’가 선택자의 기호!
  • ex) div .orange {}
• ABC + XYZ : 인접 형제 선택자 (Adjacent Sibling Combinator) : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택
  • ex) .orange + li {} (앞에 있는 건 조건이라 생각)
  • 오른쪽에서 왼쪽으로 가면 쉽게 찾을 수 있다!!
• ABC ~ XYZ : 일반 형제 선택자 (General Sibling Combinator) : 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택
  • ex) .orange ~ li {}

가상 클래스 선택자 (Pseudo-Classes)

• ABC:hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택.
  • ex) a:hover {}
• ABC:active : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택.
  • ex) a:active {}
• ABC:focus : 선택자 ABC 요소가 포커스되면 선택.
  • ex) input:focus {}
  • focus가 가능한 선택자만 가능
• ABC:first-child : 선택자 ABC가 형제 요소 중 첫째라면 선택.
  • ex) .fruits span:first-child {}
• ABC:last-child : 선택자 ABC가 형제 요소 중 막내라면 선택.
  • ex) .fruits h3:last-child {}
• ABC:nth-child(n) : 선택자 ABC가 형제 요소 중 (n)째라면 선택.
  • ex) .fruits *:nth-child(2) {}
  • ex) .fruits *:nth-child(2n) {} : 2,4,6,8…
    • n은 0부터 시작!
  • ex) .fruits *:nth-child(2n+1) {} : 1,3,5,7…
  • ex) .fruits *:nth-child(n+2) {} : 2,3,4,5,…

가상 요소 선택자 (Pseudo-Elements)

• ABC:before : 선택자 ABC 요소의 내부 앞에 내용(Content)를 삽입. (인라인(글자) 요소)
  • .box::before {content: "내용"}
• ABC:after : 선택자 ABC 요소의 내부 뒤에 내용(Content)를 삽입. (인라인(글자) 요소)
  • .box::after {content: "내용"}

속성 선택자 (Attribute)

• [ABC] : 속성 ABC을 포함한 요소 선택
  • [disabled] {} : disabled가 있는 요소만 선택
• [ABC=”XYZ”] : 속성 ABC을 포함하고 값이 XYZ인 요소 선택
  • [type="password"] {}

속성 (Properties)

• 박스 모델 : 화면에 보여지는 각각의 상자들을 어떤 구조로 만들 수 있는지.
  • width, height, margin, padding
• 글꼴 문자 : 다양한 서체들에 대한 CSS 속성
• 배경
• 배치
• 플렉스(정렬) : 수직, 수평에 대한 정렬 방식
• 전환 : 요소의 전상태와 후상태의 중간 단계를 자연스럽게 만들어 주는 것 (=애니메이션)
• 변환 : 요소가 변화하는 것 (회전, 이동, 크기, 2D, 3D)
• 띄움
• 애니메이션 : 전환의 확장편
• 그리드 : 플렉스의 확장편. 2차원의 레이아웃 구조
• 다단 : 글자를 반으로 쪼갬
• 필터 : 흐림, 흑백, 반전 처리

박스 모델

• box-sizing: border-box: : 원래 크기대로 맞춰준다. (다른 크기 생각 안하고 width, height에 맞춰서)
• box-shadow: 10px 20px 10px rgba(0,0,0,.3); : 첫번째는 x축, 두번째는 y축, 세번째는 blur 처리 수준, 네번째는 색깔
• opacity : 투명도

글꼴, 문자

1. font- : 주로 글꼴 (크기, 기울기, 두께)
2. text- : 문자와 관련 (정렬, 줄, 넘침)

• line-height: : 줄의 높이에 해당
• font-size : 글자 크기
• font-style : 글자 스타일
• text-align : 텍스트 정렬
• font-weight : 글자 굵기
• text-decoration: : 글자 꾸미기

배경

• background-image:: 배경이미지 삽입
  • url() 문구 넣는다.
• background-size: : 배경이미지 사이즈(가로)
• background-repeat: : 배경 이미지 반복
  • no-repeat : 반복하지 않겠다.
• background-position: : 배경이미지 위치
  • top : 위쪽에서 거리
  • bottom : 아래쪽에서 거리
  • left : 왼쪽에서 거리
  • right : 오른쪽에서 거리
  • center : 중심

배치

• position : 요소에 배치될 수 있는 기준을 설정
• position: absoulte : 어떤 요소를 기준으로 배치를 시작하겠다. (이거는 부모 기준) (만약 기준이 없다면 상위로 찾아 나선다.)
• position: relative; : 이 코드를 가진 요소가 기준이 된다.

플렉스(정렬)

• display: flex : 수평적으로 정렬 (1차원 레이아웃)
• justify-content: : 적용된 flex에 끝부분에 전체 컨텐츠를 이동하겠다.
  • flex-end : 끝으로 이동
  • flex-start : 원래 상태로 돌아옴 (default)
  • center : 가운데
• border : 테두리 선
• 글자도 하나의 요소이다. 이 요소를 적용하려면 이 태그에 기준을 다시 정해주고 각각을 설정해주면 된다.
• 축 = 차원

전환, 변환

• border-radius: : 테두리 모서리 부분
• transition: : 전환 효과 (애니메이션)
• transform: rotate(45deg) : 45도로 회전한다.
  • rotateX() : x축을 기준으로 회전한다. (3차원 변환 효과)
  • scale() : 규모 크기
  • perspective() : 원근법

References

• fastcampus