TIL #2 - CSS 기초

rosarang·2020년 12월 12일
0

CSS

목록 보기
1/3
post-thumbnail

CSS 기초

1. 스타일과 스타일 시트

<head>
	<style>
	</style>
</head>
  • <head> 태그 안에 위치

  • /* 주석 내용 */ - 주석

  • <link rel="stylesheet" href="css/style.css">- 외부 스타일 시트

  • 태그에 직접 표시하는 경우 - 인라인 스타일 (관리하기 어려움)



2. 주요 선택자

전체 선택자

* {속성: 속성 값; 속성: 속성 값; ...}

  • 보통 문서의 기본 스타일 초기화할 때 사용

태그 선택자

태그 {스타일}

클래스 선택자

.클래스 {스타일}

  • 텍스트 일부에만 클래스 스타일을 적용

    • <span class="클래스"> 이용해서 텍스트 묶고 클래스 입력
  • 특정 태그의 클래스에만 스타일 적용

    • 태그.클래스명 {스타일}
  • 둘 이상의 스타일 동시 적용

    • .클래스1 {} .클래스2 {} <span class="클래스1 클래스2"></span>

id 선택자

#아이디 {스타일}

  • 클래스 - 중복 사용 가능, 아이디 - 중복 사용 불가능
  • 문서 레이아웃 관련 스타일 지정 혹은 자바스크립트 프로그램에서 웹 요소 구별위해 주로 사용

그룹 선택자

이름1, 이름2 {}

  • 두개 이상 요소에 동일한 스타일을 적용



3. 캐스케이딩 스타일 시트 (CSS)

Cascading Style Sheet - 위에서 아래로 흐르는 스타일 시트

스타일 우선순위

  • 사용자 설정 > 제작자 중요 스타일(!Important) > 제작자 일반 스타일 > 브라우저 기본 스타일

  • 제작자 일반 스타일 - 인라인 > id > 클래스 > 태그 스타일

  • 나중에 정의된 스타일일수록 우선순위 높음

스타일 상속

  • 부모 요소에 적용된 스타일은 자식 요소에 상속됨

  • 배경색과 이미지는 상속되지 않음



4. CSS3와 CSS 모듈

  • CSS3는 이전과 달리 모듈 식으로 주제별 규약을 따로 만듦

  • 모듈에 따라 표준화 진행 상황이 다름. http://www.w3.org/Style/CSS/ 참고

  • 표준화 단계 - LC(최종 검토) > WD(초안) > CR(후보 권고안) > PR(제안 권고안) > REC(권고안)

브라우저 접두사(prefix)

  • 아직 표준 규약이 아닌 경우 브라우저 별로 속성 이름 앞에 접두사를 붙여 브라우저별로 구분해야 함

  • 접두사 종류

    • -webkit- - 웹키드 방식 브라우저용 (사파리, 크롬 등)

    • -moz- - 게코 방식 브라우저용 (모질라, 파이어폭스 등)

    • -o- - 오페라

    • -ms- - 마이크로소프트 ie

  • 표준화되지 않은 속성이 모든 브라우저에서 똑같은 결과로 보이려면 이 방법이 최선

  • 자동으로 접두사 붙이기



출처 : Do it! HTML5+CSS3 웹 표준의 정석

profile
UX에 관심 많은 개발 초보 Front-end Developer

0개의 댓글