HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📚
위니브 책 모음(공개 링크)
/
📝
2022 30분 요약 강좌 시즌1
/
📝
HTML & CSS (21년 8월 업데이트 완료)
/
📝
007 기본 CSS
📝

007 기본 CSS

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="a.css"> <style> h1{ color: blue; } </style> </head> <body> <!-- css 들어가기 전 https://caniuse.com 사이트 언급 --> <!-- color에 대한 개념, 16진수 함께 설명 --> <h1>hello</h1> <h2 style="color: red;">hello</h2> <!-- 외부 CSS가 모두 끝나면 CSS reset 설명 --> </body> </html>
h1{color: red;}
a.css 파일
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="a.css"> <style> #one{ color: red; } #two{ color: blue; } #three{ color: green; } </style> </head> <body> <a href="#one">one으로 가라</h1> <a href="#two">two으로 가라</a> <a href="#three">three으로 가라</a> <h1 id="one">hello</h1> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <h1 id="two">hello</h1> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <h1 id="three">hello</h1> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="a.css"> <style> .one{ color: red; } .two{ font-size: 20px; } .three{ color: green; } </style> </head> <body> <!-- 이 이상의 선택자에 대해서는 요약강좌에서 하지 않음 --> <h1 class="one two">hello</h1> <h1 class="two">hello</h1> <h1 class="three">hello</h1> <!-- 1. 추가 공부할 선택자 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors 2. 추가 공부할 속성 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/Reference --> </body> </html>