CSS : Cascading Style Sheet
css๋ htmlํ์ผ์์ <style> ํ๊ทธ ์์ ๊ตฌํํ๋ค.
<head>
<meta charset = "utf-8" />
<style>
h1 {color:red}
</style>
</head>
์ด์ฒ๋ผ html ์ฝ๋ ์์ <style> ํ๊ทธ๊ฐ ์๊ณ ๊ทธ ํ๊ทธ ์์ css ์ฝ๋๊ฐ ๋ค์ด๊ฐ๋ค.
h1์ ์ปฌ๋ฌ๋ฅผ red๋ก ํ๋ผ๋ ๋ป!
selector(์ ํ์){description(์์ )}
์ด๋ค ํจ๊ณผ๋ฅผ ์ ํ์์๊ฒ ์ค ๊ฒ์ธ์ง ์์ ํ๋ ๊ฒ! ์ด๊ฒ์ด CSS
h1 {color:red; font-size:10px}
์๋ก์ฝ๋กฌ ์๊ธด ์ฝ๋๊ฐ ์๋ค๊ณ ํ๋ฉด color์ font-size ๊ฐ๊ฐ์ด h1์ ์์ฑ์ด ๋๋ ๊ฒ์ด๊ณ , ์์ฑ์ ๊ตฌ๋ถํด์ฃผ๋ ๊ตฌ๋ถ์๋ ์ธ๋ฏธ์ฝ๋ก (;)์ด๋ค.
h1,h2 {
color:red;
font-size:10px
}
์ด๋ฐ ์์ ์ง์ ๋ ๊ฐ๋ฅํ๋ค!
๋ง์ฝ์ ์ฌ๋ฌ h1์ค์ header์ ์๋ h1์๋ง ํจ๊ณผ๋ฅผ ์ ์ฉํ๊ณ ์ถ๋ค๋ฉด?
header h1{
border:1px solid red;
}
์ด๋ฐ์์ผ๋ก ์ง์ ํ ์ ์๋ค. ์ฐธ๊ณ ๋ก ์ด ์ฝ๋๋ ํ ์คํธ์ ์ฌ๊ฐํ์ ์์ฐ๋ ์ฝ๋์ด๋ค.
์ฐธ๊ณ ๋ก border์ ์์ฑ์ ์ง์ ํ๋ 1px, solid, red์ ๊ฒฝ์ฐ๋ ๊ณต๋ฐฑ์ผ๋ก ๊ทธ ์์ฑ์ด ๊ตฌ๋ถ๋๋ค. ๋ฐ๋ผ์ ์ธ๊ฐ์ง์ ์์๋ฅผ ๋ฐ๊ฟ์ ์จ๋ ๊ฐ์ ๊ฒฐ๊ณผ๊ฐ ๋์จ๋ค. (ex. border:solid red 1px)
๋ง์ฝ <li> ํ๊ทธ ์ค ์ผ๋ถ์๋ง ํจ๊ณผ๋ฅผ ์ ์ฉํ๊ณ ์ถ๋ค๋ฉด? ์์ด๋๋ฅผ ํ์ฉํ์!
<li id="selected">CSS</li>
์ด๋ฐ ์์ผ๋ก ํ๊ทธ์ id๋ฅผ ์ ์ฉํ๊ณ ,
<style>
#selected {
border:1px solid yellowgreen;
}
</style>
style, ์ฆ css ์ฝ๋ ์์ #id๋ฅผ ์ฐ๊ณ ์์ฑ์ ์ ์ํด์ฃผ๋ฉด ๋๋ค!
๊ทธ๋ฌ๋ฉด ์ด๋ ๊ฒ list ์ค ํ ๊ฐ์ ๋ฆฌ์คํธ์๋ง ์์ฑ์ ์ ์ฉํ ์ ์๋ค!
+padding์ ์์ชฝ ๊ฐ๊ฒฉ, margin์ ๋ฐ๊นฅ์ชฝ ๊ฐ๊ฒฉ์ด๋ค. xml์ด๋ ๊ต์ฅํ ์ ์ฌํ๊ตฐ
์์ 3๋ ๊ตฌํํด๋ณด์
<html>
<head>
<meta charset = "utf-8" />
<style>
img{
border:1px solid red;
float:right;
}
</style>
</head>
<body>
<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
์ํ์ฝ๋ฉ์ ์ธ๊ณ์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค. ์ํ์ฝ๋ฉ์ ์ผ๋ฐ์ธ๋ค์๊ฒ ํ๋ก๊ทธ๋๋ฐ์ ์๋ ค์ฃผ๋ ๊ฒ์ ๋ชฉ์ ์ผ๋ก ํ๋ ๋น์๋ฆฌ ํ๋์
๋๋ค. ๊ทธ๊ฐ ํ๋ก๊ทธ๋๋จธ๋ค์ด ์ด๋ฃฉํ ์ฑ์ทจ๋ฅผ ์ผ๋ฐ์ ์๋ ค์ ๊ณ ๋
ํ ํ๋ก๊ทธ๋๋จธ๋ค์ ๊ด๊ฐ์ ๋ชจ๊ฐํ๋ ํ๋์ด๊ธฐ๋ ํฉ๋๋ค. ์ํ์ฝ๋ฉ์ ์ธ ๊ฐ์ง๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค.
์จ๋ผ์ธ ๊ฐ์
์ํ์ฝ๋ฉ์ ๊ฐ์๋ ์์
๊ณผ ์ฌ์ ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค.
์
๋ฌธ์์ ๊ฐ์ฅ ํฐ ๊ณ ์ถฉ์ '๋ฌด์์ ๋ชจ๋ฅด๋์ง ๋ชจ๋ฅด๋ ์ํ'์ผ ๊ฒ๋๋ค. ์จ๋ผ์ธ์๋ ํ๋ก๊ทธ๋๋ฐ์ ์ตํ๋ ๋ฐ ํ์ํ ๊ฑฐ์ ๋ชจ๋ ์ ๋ณด๊ฐ ์์ง๋ง, ์ด ์ง์๋ค์ ๊ฒ์ํ์ด๋ ๋ธ๋ก๊ทธ ๋๋ ์ปค๋ฎค๋ํฐ์ ํฌ์คํ
๋จ์๋ก ํํธํ๋์ด ์์ต๋๋ค. ๊ทธ๋์ ์ต์ํ ๋ฌด์์ ๊ฒ์ํด์ผ ํ๋์ง๋ฅผ ์๋ ์ฌ๋๋ค์ ์ํด์๋ ๋ ์์ด ์ข์ ๊ณต๊ฐ์ด์ง๋ง, '๋ฌด์์ ๋ชจ๋ฅด๋์ง ๋ชจ๋ฅด๋ ์ํ'์ ์
๋ฌธ์์๊ฒ๋ ๊ทธ๋ฆผ์ ๋ก์ผ๋ก ๋จ์ ์์ต๋๋ค. ๋ค์๋งํด์ ์ ๋ฌธ๊ฐ๋ฅผ ๋์ฑ ์ ๋ฌธ๊ฐ๋ต๊ฒ ๋ง๋๋ ํ์ ์ ๋จธ๋ฌผ๊ณ ์๋ ๊ฒ์ด์ฃ .
์ํ์ฝ๋ฉ ์ค์ต ์๋ฆฌ์ฆ์ธ ์น ์๋น์ค ๋ง๋ค๊ธฐ๋ ์น ๊ธฐ๋ฐ์ ์๋น์ค๋ฅผ ๋ง๋๋ ์ต์ํ์ ์ ์ฐจ๋ฅผ ๋ฐฐ๊ฒฝ์ง์ ์์ด ๋ฌด์์ ๋ฐ๋ผํ๋ ์ฝ์ค์
๋๋ค. ์ด ์ฝ์ค๋ฅผ ์์ฃผํ๋ฉด ์น์๋น์ค๊ฐ ์ด๋ค ๋งฅ๋ฝ์์ ์์๋๊ณ , ์ด๋ค ๊ณผ์ ์ ํตํด์ ํ์คํ ๋๋์ง์ ๋ํ ์ ์ฒด์ ์ธ ์ธ์์ ๊ฐ๊ฒ ๋ ๊ฒ์
๋๋ค. ์ํ์ฝ๋ฉ์ ์ง๊ธ ์์ํ๋ค๋ฉด ์ฌ๊ธฐ์ ์์ํ์๋ฉด ๋ฉ๋๋ค.
์ํ์ฝ๋ฉ์ ์์
์๋ฆฌ์ฆ๋ ๋จผ์ ์ตํ์ผํ ๊ฒ๊ณผ ๋์ค์ ์ตํ์ผํ ๊ฒ์ ์์ฐจ์ ์ผ๋ก ๋ฐฐ์นํด์ ๊ทธ ๊ธฐ์ ์ ์ดํดํ๊ธฐ ์ํ ์ง์์ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋์ '๋ฌด์์ ๋ชจ๋ฅด๋์ง ๋ชจ๋ฅด๋ ์ํ'์์ ์ฌ๋น ๋ฅด๊ฒ ๋น ์ ธ๋์ฌ ์ ์๋๋ก ์ต์ํ์ ๊ฒ์ ์ ๊ณตํฉ๋๋ค.
์ํ์ฝ๋ฉ์ ์ฌ์ ์๋ฆฌ์ฆ๋ ๊ทธ ๊ธฐ์ ์ ์ค์ ๋ก ๊ตฌํํ๊ธฐ ์ํด์ ํ์ํ ์ ๋ณด๋ฅผ ์ง์ ์ฐพ์๋ณผ ์ ์๋๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ์์
์ ํตํด์ '๋ฌด์์ ๋ชจ๋ฅด๋์ง'๋ฅผ ์์๋ค๋ฉด ์ด์ '๋ชจ๋ฅด๋ ๊ฒ'์ ์ค์ค๋ก ์ฐพ์์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด์ผ ํฉ๋๋ค.
์ํ์ฝ๋ฉ์ ํฌ๊ด์ ์ธ ๊ธฐ์ ์ปค๋ฆฌํ๋ผ์ ์งํฅํฉ๋๋ค.
์์ ์ด ํ์ํ ๊ฒ์ ๋ฐ๋ผ์ ์๋์ ๊ฐ์ ์์๋ก ๊ณต๋ถํ์๋ฉด ๋ฉ๋๋ค.
์น ํ๋ก๊ทธ๋๋ฐ
์น ์๋น์ค ๋ง๋ค๊ธฐ ์ค์ต
ํ๋ก๊ทธ๋๋ฐ ์ค๋ฆฌ์ํ
์ด์
HTML
CSS
javascript
jQuery
</body>
</html>
'๐ก๐ธ๐ธ๐ถ3:๐น๐๐๐๐๐๐๐น > ๐ก๐ฅ๐ข๐ฃ:๐ป๐ฏ๐๐ฟ&๐๐ฎ๐ฎ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HTML] 2. ์๋ฏธ๋ก ์ ์ธ ์น (0) | 2021.01.01 |
---|---|
[HTML] 1. HTML ๊ธฐ๋ณธ ๋ฌธ๋ฒ (0) | 2020.12.31 |