๐ŸŒˆCSS:Basic Element

hojuneยท2023๋…„ 8์›” 13์ผ
CSSweb
0

Web Development

๋ชฉ๋ก ๋ณด๊ธฐ
5/33

Cascading Style Sheets

- INLINE STYLES


html ์ฝ”๋“œ ์ž‘์„ฑ์ค‘์— ์ง‘์–ด ๋„ฃ์„ ์ˆ˜ ์žˆ์ง€๋งŒ ํ”ํžˆ ์‚ฌ์šฉ x

    <h1 style="color: aqua;">Hello</h1>

    <button style="color: blueviolet;">push</button>



- THE <STYLE> ELEMENT

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Css intro</title>

    <style>

      h2 {color: palevioletred}

    </style>

</head>


<body>

    <h2>Hello</h2>

    <h2>speed</h2>

</body>



head์•ˆ์— style์„ ์ด์šฉํ•ด์„œ body์— ์žˆ๋Š” h2 ์š”์†Œ๋“ค์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ํ•œ๋ฒˆ์— ์ ์šฉ ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.



 - EXTERNAL STYLESHEET



์ƒˆ๋กœ์šด cssํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์„œ  <link>๋ฅผ ์ด์šฉํ•ด ์—ฐ๊ฒฐ์‹œํ‚ด

link๋Š” head ์•ˆ์—์„œ ์‚ฌ์šฉ

CSS Rules

color and background-color


h2 {color: indigo;}

p {background-color: aquamarine;}

semicolon ์ฃผ์˜ !



Color System - rgb, etc.



RGB

1.Red, Green, Blue channels

2.Each channel ranges  0-255



ex) rgb(173,20,219)

color: rgb(89,151,0)



Hex

1.Red, Green, Blue channels

2.Each channel ranges  0-255 (00~ff)

BUT represented with hexadecimal (16์ง„๋ฒ•)

# ff    ff    00

(red)(green)(blue)

CSS Text Properties


text-align - ์ •๋ ฌ

ex)text-align : center;



font-weight - ๊ตต๊ธฐ



text-decoration - ์•„๋žซ์ค„, ์œ—์ค„, ์ทจ์†Œ์„  ๋“ฑ๋“ฑ.

 text-decoration: #f1592f underline;



line-height - ์ค„ ๊ฐ„๊ฒฉ



letter-spacing - ๊ธ€์ž ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ



font-size - ๊ธ€์ž ํฌ๊ธฐ 



๊ฐ๊ฐ์˜ ๋‹จ์œ„๋Š” ์ข…๋ฅ˜๊ฐ€ ์ •๋ง ๋งŽ์Œ



font-family - ํฐํŠธ

,(์ฝค๋งˆ)๋ฅผ ์ด์šฉํ•ด์„œ ๋ฐฑ์—… ํฐํŠธ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ



+text-transform:uppercase
profile
hojune
์ด์ „ ํฌ์ŠคํŠธ

๐Ÿ’งHTML:Form and Table

๋‹ค์Œ ํฌ์ŠคํŠธ

๐ŸŒˆCSS:Selector

0๊ฐœ์˜ ๋Œ“๊ธ€