HTML
HyperText Markup Language -- 웹에서 페이지 표시할 때 사용
각 요소들은 태그 통해표현
<ul>
<li> hello </li>
<li> world </li>
<li> ! </li>
</ul>CSS
웹 페이지 문서가 어떻게 표현되는지 알려주는 스타일 시트 언어
CSS- cascading style sheets
css는 html이 표현한 문서가 어떻게 표현되는지 알려준다
css selector
- type selector: css타입에 따라 선택
- class selector: 클래스에 따라 선택
- id selector: id에 따라 선택
css 상속
css는 요소 위치에 다라 상위 요소의 스타일 상속
<div style="color:red">
<p> I have no stle </p>
</div>여기서 p 태그는 아무 스타일 적용이 되어있지 않지만 상위요소 div태그의 영향을 받는다
css 클래스
클래스는 어떤 특정 요소들의 스타일 정하고 싶을 때에 사용
동시에 여러 개 요소들에 대한 스타일 정할 때 보통 클래스 지정해 상속 받도록 정한다
특정요소 정의하기
<p class = "banana"> I have a banana class </p>^ 클래스 지정--> css에서 따로 해당 클래스에 대한 정의 내릴 수 있고, 웹브라우저 통해 열었을 때 적용
css에서는 . 을 활용해 클래스 정의할 수 있다
.banana {
color:"yellow";
}
여러 개 클래스 부여하기
<p class="banana fruit orange"> I have many classes </p>^ 한번에 3개 클래스 동시 부여
CSS ID
클래스와 비슷하게 사용하는 것이 ID , HTML에서는 클래스뿐만 아니라 ID도 지정가능
<p id ="pink">my id pink </p>html상에서 id 지정후 css에서 #기호통해 스타일 정하기
#pink {
color: "pink";
}이름처럼 id는 보통 특성 html 요소 가리킬 때에만 사용
클래스와 달리 여러 개의 요소에 사용되지 않는다
*id 클래스 구별하기 *