728x90
반응형
CSS
- 문서의 레이아웃과 스타일의 정의
- HTML로 작성된 정보를 꾸며주는 언어
<CSS 구성 요소>
선택자 { 속성 : 속성값; }
h1 { fontsize : 20px; }
- 선택자 : 디자인을 적용할 HTML 영역
- 속성 : 어떤 디자인을 적용할지 정의
- 속성값 : 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력.
CSS 연동 방법
<Inline Style Sheet>
- <h1 style = "color : red:">coding 101 </h1> : 태그 안에 직접 원하는 스타일을 적용 (좋은 방법이 아님)
<Internal Style Sheet>
<style>
h1 { background-color : yellow ; }
</style>
- <style> 태그 안에 넣기
<External Style Sheet>
<head>
{link rel = "stylesheet" href= "style.css" }
</head>
- <link> 태그로 불러오기
CSS 선택자
<Type Selector>
특정태그에 스타일을 적용 ( 예를들어 h1 태그에 적용하면 모든 h1에 적용되기 때문에 원하지 않는 태그에 적용될 가능성있음)
<Class Selector>
여러 태그를 하나의 클래스로 묶는 것이 가능
<h2 class = "coding"> Class Hello World </h2>
다음과 같이 클래스를 coding으로 부여하면
<style>
.coding {color : blue ; }
</style>
coding 클래스에 전체적으로 스타일 적용이 가능
<ID Selector>
ID는 단 하나만 지정하는 것이 가능
<h2 id = "coding"> ID Hello World </h2>
<style>
#coding {color : green ; }
</style>
부모 자식 관계
말그대로 위에 있는 태그가 부모태그 아래있는 태그가 자식태그 동등한 레벨은 형제태그
style은 자식태그를 따라감
headr p {color : green }
부모를 명명해주면 부모의 자식에 해당하는 것만 디자인 가능
728x90
반응형