๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ‘‍๐Ÿ—จFRONT-END/๐ŸŽจCSS

[๋‚ ๋งˆ๋‹ค 3๋ถ„ CSS] CSS ์„ ์–ธ ๋ฐฉ์‹ - ๋‚ด์žฅ/๋งํฌ/์ธ๋ผ์ธ/@import

by ๋…น์ฐจ๋ง›๊ฐœ๊ตฌ๋ฆฌ 2022. 10. 10.

์‹œ์ž‘

CSS์ž‘์„ฑํ•˜๊ณ  HTML ๋ฌธ์„œ์— ํฌํ•จ์‹œํ‚ค๋Š” ๋ฐฉ์‹์€ ํฌ๊ฒŒ 4๊ฐ€์ง€ ๋ฐฉ์‹์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋‚ด์žฅ๋ฐฉ์‹
  • ์ธ๋ผ์ธ๋ฐฉ์‹
  • ๋งํฌ๋ฐฉ์‹
  • @import ๋ฐฉ์‹

 


๋‚ด์žฅ๋ฐฉ์‹

HTML์˜ ํ—ค๋” ์š”์†Œ์— ์ž‘์„ฑ ํ•˜๋ฉฐ.<style></style>ํƒœ๊ทธ๋กœ ์Šคํƒ€์ผ์„ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹

์ด ๋ฐฉ์‹์€ ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋กœ์ ํŠธ์—์„œ HTML, CSS, JS ํŒŒ์ผ์„ ๋‚˜๋ˆ„์–ด ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์  ์ด๋ฏ€๋กœ

์ž์ฃผ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

<head>
    <style>
      div {
        color : red;
        margin : 20px;
      }
    </style>
</head>
<body>
..
</body>

 

 


 

์ธ๋ผ์ธ๋ฐฉ์‹ 

์š”์†Œ์˜ style ์†์„ฑ์— ์ง์ ‘ ์Šคํƒ€์ผ์„ ํ•˜๋Š” ๋ฐฉ์‹.

...
<div style="color : royalblue; margin: 20px;"></div>
...

CSS์šฐ์„ ์ˆœ์œ„๊ฐ€ ์ง€๋‚˜์น˜๊ฒŒ ๋†’๊ธฐ๋•Œ๋ฌธ์— ๊ณตํ†ต๊ธฐ๋Šฅ์— ๋Œ€ํ•ด์„œ CSSํŒŒ์ผ๋กœ ๋”ฐ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒฝ์šฐ

์ธ๋ผ์ธ ๋ฐฉ์‹์œผ๋กœ ์“ฐ์—ฌ์ง„ ์š”์†Œ๋Š” ๋ฎ์–ด์“ฐ๊ธฐ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋ฉฐ ๋ณ€๊ฒฝ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์œ ์ง€๋ณด์ˆ˜์— ์–ด๋ ค์›€์ด ์žˆ๋‹ค.

( ๊ถŒ์žฅํ•˜์ง€ ์•Š๋Š” ๋ฐฉ์‹. )

 


๋งํฌ ๋ฐฉ์‹

HTML์˜ ํ—ค๋” ์š”์†Œ์— ์ž‘์„ฑ ํ•˜๋ฉฐ <link /> ํƒœ๊ทธ๋กœ CSS๋ฌธ์„œ๋ฅผ ๋ถˆ๋Ÿฌ์™€์„œ ์—ฐ๊ฒฐํ•˜์—ฌ ์Šคํƒ€์ผ์„ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹

<link rel="stylesheet" herf="./main.css">

๊ฐ€์žฅ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.

 

 


@import ๋ฐฉ์‹

CSS ์˜ @import ๊ทœ์น™์œผ๋กœ CSS ๋ฌธ์„œ ์•ˆ์—์„œ ๋˜ ๋‹ค๋ฅธ ๋ฌธ์„œ๋ฅผ ๊ฐ€์ ธ์™€ ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐฉ์‹

์ง๋ ฌ ๋ฐฉ์‹์ด๊ธฐ ๋•Œ๋ฌธ์— ์—ฐ๊ฒฐ์ด ๋๋‚˜๊ธฐ์ „๊นŒ์ง€ ์ ์šฉ์ด ๋ถˆ๊ฐ€

๋ณดํ†ต link ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ cssํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ฌ๋•Œ๋Š” ๋ชจ๋“  cssํŒŒ์ผ์„ ํ•œ๋ฒˆ์— ๋‹ค๊ฐ™์ด ๋ถˆ๋Ÿฌ์˜ค์ง€๋งŒ
@import ๋ฐฉ์‹์œผ๋กœ cssํŒŒ์ผ์—์„œ ๋ถˆ๋Ÿฌ์˜ฌ๊ฒฝ์šฐ html ํŒŒ์ผ์— ์žˆ๋Š” link๋ฐฉ์‹์˜ css๋ฅผ ๋ถˆ๋Ÿฌ์˜จ๋‹ค์Œ
๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ๋•Œ๋ฌธ์— ์‹œ๊ฐ„์ฐจ์ด๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

 

<link rel="stylesheet" herf="./main.css"/>
/* main.css */
@import url("./particle.css");

div {
	color : royalblue;
	margin: 16px;
}
/* particle.css */
.particle {
	color: orange;
	font-size: 10px;
}

๋‹จ, ๋งŒ์•ฝ ์ฒ˜์Œ ๋ถˆ๋Ÿฌ์˜ค๋Š” ํ•ด๋‹นํ•˜๋Š” cssํŒŒ์ผ์„ ์ ์šฉํ•œ๋’ค์— @import ๋ฐฉ์‹์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ค๋Š” cssํŒŒ์ผ์ด ์ ์šฉ์ด ๋˜์•ผํ•˜๋Š” ์ƒํƒœ์—ฌ์•ผ ํ•˜๋ฉด import๋ฐฉ์‹์ด ๋” ์ข‹๋‹ค.

728x90