Web(Front) - CSS

📒 CSS3 기본

1️⃣ CSS

• Cascading Style Sheets : 웹 페이지 디자인 담당
• 웹 페이지를 표현하기 위한 스타일 규칙을 모아 둔 문서
• CSS 구성
  • 선택자(selector)와 선언(declaration) 두 부분으로 구성
  • 선택자는 규칙이 적용되는 엘리먼트
  • 선언 부분에서 선택자에 적용될 스타일 작성
  • 선언은 중괄호로 감쌈 → 속성과 값으로 이루어짐
  • 속성
    • 선택자에서 바꾸고 싶은 요소 (color, font, width …)
  • 값
    • 속성에 적용할 값
  • 여러 선택자에 동일 스타일 적용시 , (콤마)로 구분
  • 하나 이상의 속성 작성 가능 → 각 속성 ;(세미콜론)으로 구분

2️⃣ 외부 스타일 시트 적용

• Link 태그
  • link 태그를 사용해 외부 스타일 시트 적용
  • link 태그는 head 태그 안에 작성 → rel, type, href 3가지 속성 주로 사용
    • rel 속성 : HTML 페이지와 링크된 파일간의 관계
    • href 속성 : CSS file 경로 의미
• style 태그
  • CSS 파일 내부에서도 사용 가능
  • @import는 스타일 시트 중 최상단에 위치

3️⃣ 내부 스타일 시트 적용

• head 태그 내부에 작성
• style 태그를 사용해 내부 스타일 시트 적용
• style 태그 내부에 css 규칙 작성
• 외부 스타일 시트보다 우선 적용

4️⃣ 인라인 스타일 적용

• 개별 element마다 스타일 지정 → 유지보수 용이 X

5️⃣ 스타일 적용 우선순위

• 인라인 스타일 > 내부 스타일 > 외부 스타일

6️⃣ CSS 상속

• 상속을 통해 부모 요소의 속성을 자식 요소에게 상속
• 모든 속성이 상속되는 것은 X
• 상속되는 속성
  • Text관련
• 상속되지 않는 속성
  • Box Model, Position 관련
• 상속되지 않는 속성을 상속받기
  • inherit 사용해 상속