๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
HTML5 & CSS3

[HTML5 & CSS3] CSS ๊ธฐ์ดˆ - ํ…์ŠคํŠธ ์Šคํƒ€์ผ

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2021. 2. 3.
๋ฐ˜์‘ํ˜•

โ–ถ ํ…์ŠคํŠธ ์Šคํƒ€์ผ

* color ์†์„ฑ - ๊ธ€์ž ์ƒ‰ ์ง€์ •ํ•˜๊ธฐ

์›น ๋ฌธ์„œ์—์„œ ๋ฌธ๋‹จ์ด๋‚˜ ์ œ๋ชฉ ๋“ฑ์˜ ํ…์ŠคํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ธ€์ž ์ƒ‰์„ ๋ฐ”๊ฟ€ ๋•Œ ์‚ฌ์šฉ.

๊ธฐ๋ณธํ˜• โ€‹→ color:<์ƒ‰์ƒ>

 

โ€‹

* text-decoration ์†์„ฑ - ํ…์ŠคํŠธ์— ์ค„ ํ‘œ์‹œํ•˜๊ธฐ / ์—†์• ๊ธฐ

ํ…์ŠคํŠธ์— ๋ฐ‘์ค„์„ ๊ธ‹๊ฑฐ๋‚˜ ์ทจ์†Œ ์„ ์„ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋‹ค.

๋˜ํ•œ ์›น ๋ฌธ์„œ์˜ ๊ธฐ์กด ๋‚ด์šฉ์„ ์ทจ์†Œํ•˜๊ณ  ์ƒˆ๋กœ์šด ๋‚ด์šฉ์„ ์ž…๋ ฅํ•  ๋•Œ ์ทจ์†Œ ์„ ์„ ์ด์šฉํ•˜๋ฉด ๊ธฐ์กด ๋‚ด์šฉ์„ ์™„์ „ํžˆ ์‚ญ์ œํ•˜์ง€ ์•Š๊ณ  ์ƒˆ๋กœ์šด ๋‚ด์šฉ๊ณผ ๋น„๊ตํ•˜๋ฉฐ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

โ€‹

 

* text-transform ์†์„ฑ - ํ…์ŠคํŠธ ๋Œ€·์†Œ๋ฌธ์ž ๋ณ€ํ™˜ํ•˜๊ธฐ

โ€‹

 

* text-shadow ์†์„ฑ - ํ…์ŠคํŠธ์— ๊ทธ๋ฆผ์ž ํšจ๊ณผ ์ถ”๊ฐ€ํ•˜๊ธฐ

โ€‹

 

* white-space ์†์„ฑ - ๊ณต๋ฐฑ ์ฒ˜๋ฆฌํ•˜๊ธฐ

โ€‹

 

* letter-spacing๊ณผ word-spacing ์†์„ฑ - ํ…์ŠคํŠธ ๊ฐ„๊ฒฉ ์กฐ์ ˆํ•˜๊ธฐ

๊ฐ•์กฐํ•˜๊ณ  ์‹ถ์€ ๊ธ€์ž๋‚˜ <hn> ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด ํฌ๊ฒŒ ํ‘œ์‹œํ•œ ๊ธ€์ž๋“ค์€ ๊ธ€์ž ์‚ฌ์ด ๊ฐ„๊ฒฉ์„ ์กฐ์ ˆํ•ด ์ข€ ๋” ์—ฌ์œ  ์žˆ๊ฒŒ ํ‘œ์‹œํ•˜๋ฉด ์ฝ๊ธฐ ํŽธํ•˜๋‹ค.

letter-spacing ์†์„ฑ์€ ๋‚ฑ ๊ธ€์ž ์‚ฌ์ด ๊ฐ„๊ฒฉ์„ ์กฐ์ ˆํ•˜๊ณ  word-spacing ์†์„ฑ์€ ๋‹จ์–ด์™€ ๋‹จ์–ด ์‚ฌ์ด ๊ฐ„๊ฒฉ์„ ์กฐ์ ˆํ•˜๋Š”๋ฐ ์ฃผ๋กœ ๋‹จ์–ด ์‚ฌ์ด ๊ฐ„๊ฒฉ์€ ์ˆ˜์ •ํ•˜์ง€ ์•Š๊ณ  letter-spacing ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ์ž๊ฐ„์„ ์กฐ์ ˆํ•œ๋‹ค.

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€