CSS 기초
html은 뼈대! css는 꾸미기!p = 선택자(Selector) p { 프로퍼티(property) font-size : 14px; 값(value) color: yellow;} 선언(declaration)CSS selector(CSS 선택자)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>선택자</title> <style> /* *{ color:blue; } p { color: red; } */ /*<p> 해당 부분만 red로 적용*/ h2,h3, h4, h5{ color: blue; } /*<h2>, <h3>, <h4>, <h5> 해당 부분만 blue로 적용*/ </style> </head> <body> <h1>hello world</h1> <p>hello world</p> </body> </html>
*: 문서 내의 모든 엘리먼트를 선택.
Class
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css class</title> <style> /* 1. clss는 중첩해서 사용할 수 있다. id는 사용할 수 없다. 2. page내 class는 여러개 존재해도 된다. 반면 id는 유일해야 한다. */ .one{ color:aqua; } .two{ border: solid 1px black; } .three{ font-size: 48px; } </style> </head> <body> <h1>hello world</h1> <h1>hello world</h1> <h1 class="one">hello world</h1> <h1 class="two three">hello world</h1> <h1 class="two">hello world</h1> </body> </html>Id
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css id</title> <style> #one { color: aqua; } #two { border: solid 1px black; } #three { font-size: 48px; } </style> </head> <body> <!-- 1. id는 중첩해서 사용할 수 없습니다. 반면 class는 중첩해서 사용할 수 있습니다. 2. page내 id는 유일해야 합니다. 반면 class는 여러개 존재해도 됩니다. --> <a href="#one">클릭하시오!</a> <h1>hello world</h1> <h1>hello world</h1> <h1 id="one">hello world</h1> <h1 id="two">hello world</h1> </body> </html>class, id이름은 간단명료하게 부여!
class보다 id가 우선순위!
헷갈리는 선택자
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>헷갈리는 선택자</title> <style> .one .two{ color:red; } .one.two{ color:blue; } </style> </head> <body> <!-- .one 자동완성--> <!-- **.one .one.two .one>.two**--> <div class="one">hello world</div> <div class="one two">hello world</div> <div class="one"> <div class="two">hello world</div> </div> </body> </html>
웹개발