css 개념과 구조

css란?

Cascading Style Sheet의 약자로  계단식 또는 폭포식으로 작동하는 스타일 설정

 

html파일에서 css파일을 나타내는 방법은?

<link rel="stylesheet href="css 파일의 위치">

 

css의 기본적인 적용 방법은?

h1{
	color:brown;
    }

 Box-Sizing이란?

-  css규칙의 속성 중 하나 

- 박스에 적용된 사이즈의 기준 정하기

- content-box의 기본값은 내용이 차지하는 영역에만 사이즈가 적용됨

 

 전체를 적용하고 싶다면?

*{
	box-sizing:border-box;
  }

css의 기본구조는?

h1{
	color:brown;
    }

• h1 - 선택자(selector) : 어떤 HTML요소에 스타일을 적용할지 선택
• color - 속성(property): 스타일을 부여할 항목
• brown - 값(value): 속성에 대한 값
• color:brown; - 선언(declaration): 속성과 값을 합한 부분

여러종류의 태그에 적용하려면?

h2, p {
		color: brown;
       }

클래스란?

- 같은 속성을 가진 묶음 

- css에서 클래스를 선택자로 사용하기 위해서는 .클래스명

 

특정 클래스가 명시된 특정 태그에 대해 적용하려면?

- 태그명 . 클래스명

h2.coding {
		color: brown;
        }

 

특정 아이디에 해당되는 요소에 대해 적용하려면?

- # 아이디값으로 표현

#original {
			color: brown;
           }

 

특정 아이디가 명시된 특정 태그에 대해 적용하려면?

- 태그명 # 아이디값

h2#original {
				color: brown;
             }

 부모 요소 내의 특정 자식요소를 적용하려면?

- 부모요소 자식요소로 표현

<div>
		<p> 안녕하세요 </p>
</div>

div p {
 		color: brown;
        }

css에서 주석은?

-  /*  */ 사용

/* h1 {
		color: brown;
       } */