위키
포럼
도구
바뀐글
랜덤

"HTML에 CSS를 적용하는 방식 3가지"의 두 판 사이의 차이

14번째 줄: 14번째 줄:
<jsfiddle height='120'>cdp4Lv6k</jsfiddle>
<jsfiddle height='120'>cdp4Lv6k</jsfiddle>


==방법 2: 내부 스타일 시트==
 
* [[style 태그]] 내부에 기입하는 방식
<source lang='html5'>
<head>
<style>
#hello1
</style>
</head>_yellow
<body>
  <p id='hello1'>안녕하세요</p>
  <p id='hello2'>Hello.</p>
</body>
</source>{
  color: red;
#hello2 {
  color: green;
}
<jsfiddle height='120'>0x2twtmo</jsfiddle>
<jsfiddle height='120'>0x2twtmo</jsfiddle>


2019년 7월 22일 (월) 14:38 판

1 개요

Three Ways to Insert CSS
HTML에 CSS를 기입하는 방식 3가지 + 1
HTML에 CSS를 삽입하는 방식 3가지 + 1
HTML에 CSS를 적용하는 방식 3가지 + 1
  • 정확히는 HTML에 적용하는 방식 3가지 + CSS에 적용하는 방식 1가지

2 방법 1: 인라인 방식

  • 해당 태그의 style 속성에 넣는 방식
<p style="color:red; background-color:yellow;">안녕하세요.</p>
<p style="color:green;">Hello.</p>


3 방법 3: 외부 스타일 시트

  • link 태그를 사용하여 별도의 css 파일을 연결하는 방식
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <p id='hello1'>안녕하세요.</p>
  <p id='hello2'>Hello.</p>
</body>
mystyle.css
#hello1 {
  color: red;
  background-color: yellow;
}
#hello2 {
  color: green;
}

4 (방법 4: CSS 임포트)

CSS에서 CSS 임포트 문서를 참고하십시오.
<head>
<style type='text/css'>
@import url("mystyle.css");
</style>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <p id='hello1'>안녕하세요.</p>
  <p id='hello2'>Hello.</p>
</body>
mystyle.css
#hello1 {
  color: red;
  background-color: yellow;
}
#hello2 {
  color: green;
}

5 같이 보기

6 참고

원본 주소 "https://zetawiki.com/w/index.php?title=HTML에_CSS를_적용하는_방식_3가지&oldid=524904"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}