CSS : 03 HTML과 CSS 연동하기

나는선우 2020. 12. 28. 21:58

2020. 12. 28. 21:58

2020-12-28 수업내용 복습 겸 정리

HTML과 CSS 연동하기

HTML은 CSS를 포함하려면

외부 스타일 방식, 내부 스타일 방식, 인라인 스타일 방식 중 골라서 사용할 수 있다.

외부 스타일 방식 :

스타일시트 파일을 다운로드해서 적용하기 때문에

빈번한 네트워크 사용량을 줄여 데이터 소모를 방지

일단 외부 스타일 시트를 생성해서 link 태그를 이용해서 html 코드안으로 가져온다.

p {color:red}
div {color:blue}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 연동방법</title>
    <link rel="stylesheet" href="03cssstyle.css">
</head>
<body>

<h1>CSS 연동방법</h1>
<P>으악 한발 두발 세발 네발 탕탕탕 해물탕</P>
<DIV>으아아아아아아아~~~~~~~개졸리다 개졸려</dIV>
</body>
</html>

내부 스타일 방식 :

head 태그에 style 태그를 정의하고 css 선언

html 내부에 css를 포함하는 방법

보통 테스트용/학습용으로 CSS를 작성한 후

나중에 외부 스타일 방식으로 바꿈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 연동방법</title>
    <style>
            p{ color: orange;}
            div{color: aqua;}
        </style>
</head>
<body>

<h1>CSS 연동방법</h1>
<P >으악 한발 두발 세발 네발 탕탕탕 해물탕</P>
<DIV >으아아아아아아아~~~~~~~개졸리다 개졸려</dIV>
</body>
</html>

인라인 스타일 방식 :

html 각 요소에 style이라는 속성을 이용해서 CSS 적용하는 방식

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 연동방법</title>
</head>
<body>

<h1>CSS 연동방법</h1>
<P style="color: green">으악 한발 두발 세발 네발 탕탕탕 해물탕</P>
<DIV style="background: darkorange" >으아아아아아아아~~~~~~~개졸리다 개졸려</dIV>
</body>
</html>

CSS 적용 우선순위

인라인 스타일 -> 내부 스타일 -> 외부스타일

단, 우선순위를 강제로 바꾸고 싶다면! important를 이용하면 됨.

'JAVA & APP :국비지원 학원 복습 > CSS' 카테고리의 다른 글

CSS : 06 Background (0)	2020.12.29
CSS : 05 Display (0)	2020.12.28
CSS : 04 BOX (0)	2020.12.28
CSS : 02 Unit (0)	2020.12.28
CSS: 01 selector (0)	2020.12.28

서누레코즈