<맨 위로>

상속(inherit)

  • 상위 요소에 적용한 스타일이 하위 요소까지 적용됨
  • 모든 스타일이 똑같이 상속되는 것이 아니라, 일부는 상속 대상에서 제외
  • border, margin, padding, float, position 등의 속성은 하위 요소에 상속되지 않음
<style type="text/css">
	.div1_class{font-size:62.5%;}
	.div2_class{font-size:2em; border: 1px solid red; padding:1em;}
	.p_class{font-size:1.5em;}
</style>
<div class="div1_class">
	<div class="div2_class">
		<p class="p_class">상속(inherit)이라고 합니다. 
			CSS의 속성은 기본적으로 하위 요소로 상속되는 속성과 
			상속되지 않는 속성이 있습니다.
		</p>
		<p class="p_class">
			border, margin, padding, float, position 등의 속성은
			하위 요소에 상속되지 않습니다.
		</p>
	</div>
	<p>
		em 단위는 부모 크기를 기준으로 상대적으로 변하는 단위를 말하며, 
		부모 요소에 영향을 받기 때문에 상속의 개념이 적용됩니다. 
		글자 크기를 em 단위로 지정한 경우, 상속으로 인해 예상한 것보다 
		글자 크기가 작게 나오거나 크게 나올수 있으므로 주의해야 합니다.
	</p>
</div>
  • 위내용을 붙여넣기 하여 확인하여 봅니다.

겹침(cascading)과 개별성(specificity)

  • 하나의 콘텐츠에 여러가지의 스타일이 중복 적용되어 충돌이 발생했을 때
  • 명시도 점수가 높은 스타일을 우선으로 적용
  • 명시도 점수가 같으면 가장 마지막에 스타일을 우선적으로 적용

명시도(specificity) - 개별성, 특정도

  • 명시도란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다.

각 선택자 및 스타일 별 명시도

<style>
div{} /*element 선택자*/
.d1{} /*class 선택자*/
#e1{} /*id 선택자*/
div:first-line{} /*가상 요소 선택자*/
div:hover{} /*가상 클래스 선택자*/
</style>

<div sytle="color:red"></div> <!-- inline 스타일 -->
  • element : 1
  • class : 10
  • id : 100
  • inline 스타일 : 1000
  • 가상요소 : 1
  • 가상 클래스 : 10

명시도에 따른 우선순위 예시

<style type="text/css">
	.cascade {color:green;}
	#specifi {color:blue;}
</style>
<div class="cascade"> 단계적으로 적용되는 스타일 </div>
<div class="cascade" id="specifi"> 단계적으로 적용되는 스타일 </div>
<div class="cascade" id="specifi" style="color:red;"> 단계적으로 적용되는 스타일 </div>

주석

  • 불필요한 주석사용 지양
  • 버전표시, 최종 갱신일, 스타일 설명 등에 사용
<!-- html의 주석 -->
<style>
    /* css의 주석 */
</style>

단위

절대 단위

  • pt 포인트 (1in = 72pt)
  • cm 센티미터 (1in=2.54cm)
  • mm 미리미터 (10mm = 1cm)
  • pc 파이카 (1pc = 12pt)
  • in 인치

상대 단위

  • px 픽셀 : 컴퓨터 내의 기본단위
  • ex : 소문자 X의 높이를 기준으로 크기가 결정
  • em : font-size값을 기준으로 크기가 결정 (1em = 100%)
  • % : (1em = 100%)

색상

색상 사용 방법

  • 색상명으로 표시 가능 : black, silver 등 총 16가지 색상
  • 16진수 컬러 코드로 표시 가능 : #000000, #000 : 순서대로 R,G,B
  • rgb(r,g,b)을 입력하여 사용가능
  • 색상명 : aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow
  • 컬러코드 : #000000, #000 #ff0000, #f00 #00ff00, #0f0 #0000ff, #00f #ffff00, #ff0 #00ffff, #0ff #ff00ff, #f0f #ffffff, #fff

색상 사용 예시

<style type="text/css">
	.kayword {color:red;}
	.hexa {color:#ff0000;}
	.decimal {color:rgb(255,0,0);}
	.percent {color:rgb(100%,0%,0%);}
</style>
<div class="kayword">red</div>
<div class="hexa">#ff0000</div>
<div class="decimal">rgb(255,0,0)</div>
<div class="percent">rgb(100%,0%,0%)</div>