CSS 101
Cascading Style Sheets
โ
์ํ๊ณ ์ ํ๋ ๊ธฐ๋ฅ์ property ๋ฅผ ๊ตฌ๊ธ๋ง ํ์
style ํ๊ทธ ์ฐ๊ธฐ
<style> a { color:red; text-decoration: none; } </style>
style ์์ฑ ์ฐ๊ธฐ
<li><a href="1.html"><font color='red'> HTML </font></a> </li>
Selector
id < class < tag
css seclector ๋ฅผ ๊ฒ์ํด๋ณด์
tag
๋ชจ๋ ํ๊ทธ์ ๋ํด
.class
<style> .class1 { ~ } .class2 { } </style> <body> <class='class1 class2'> </> -> style ํ๊ทธ์์ ์์๋๋ก ๋จ </body>
id
์ด๋ค id ์์ ์ด๋ค ํ๊ทธ
# id tag { }
Property
border
display
padding
์์๊ฐ ์ฐจ์งํ๋ ์นธ
margin
์์๊ฐ ์ฐจ์งํ๋ ์นธ
width
๊ฐ๋ก ์ฐจ์งํ๋ ์นธ
display
๊ฐ๋ ฅํจ. ์ด๋ป๊ฒ ๋ณด์ด๋์ง ํด์ค ์ ์์ inline block ๋ฐ๊ฟ ์ ์๊ณ none ๊ฐ๋ฅ
Box
block level element (div)
์ ์ฒด๋ฅผ ์
Inline element (span)
์์๋งํผ๋ง ์
Grid
css ์ ์ต์ ๊ธฐ์
how to use
<style> #grid { border:5px solid pink; display: grid; grid-template-columns: 150px 1fr; # 150์ ๊ณ ์ ์ผ๋ก ๊ฐ๊ณ Fr ์ ๋๋จธ์ง ๊ฒ๊ณผ ๋น์จ๋ก ๋๋ ๊ฐ๋๋ค. } div { border: 5px solid gray; } </style>
๋ฏธ๋์ด ์ฟผ๋ฆฌ
๋๋ฐ์ด์ค๋ง๋ค, ํ๋ฉด์ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ณด์ฌ์ง๋ ๊ฒ ๋ค๋ฅด๊ฒ
how to use
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { border: 5px solid green; font-size: 60px; } /* screen width > 800px */ @media(max-width:800px){ div { display:none; } } </style> </head> <body> <div> Responsive </div> </body> </html>
how to use 2
<style> body { margin: 0px; } #active { color: red; } .saw { color: gray; } a { color:black; text-decoration: none; } h1 { font-size: 45px; text-align: center; border-bottom: 1px solid gray; margin: 0; padding: 20px; } ol { border-right: 1px solid gray ; width: 100px; margin: 0px; padding: 20px; } #grid { display: grid; grid-template-columns: 150px 1fr; } #grid ol { padding-left: 33px; } #grid #article { padding-left: 25px; } @media(max-width: 800px){ #grid { display: block } ol { border-right: none ; } h1 { border-bottom: none; } </style>
css ํ์ผ ์ฌ์ฌ์ฉํ๊ธฐ
style.css ํ์ผ์ ๋ง๋ค์ด์ ์ฌํ์ฉํ์
html
<link rel="stylesheet" href="style.css">
style.css
style ํ๊ทธ๋ฅผ ์ ์ธํ๊ณ ์์ฑ
Last updated
Was this helpful?