CSS _작성 위치와 연결방법

💻Coding/📒 CSS

CSS _작성 위치와 연결방법

음은응 2021. 8. 25. 20:34

728x90

CSS _작성 위치와 연결방법

CSS
Q : CSS는 어디에 작성해야할까요?

- "CSS는 인라인스타일 / 내부스타일시트 / 외부스타일시트 나뉩니다."

1). 내부 스타일시트
ㄴ html <head>~</head> 영역에 <style>~</style>로 작성하는 방법

2). 인라인 스타일 작성하는 방법
ㄴ html <style>태그를 사용해 <body>안에 작성한 태그에 작성하는 방법

3). 외부 스타일시트 작성하는 방법
ㄴ 자바스크립트 파일을 외부에서 따로 만들어서, html 파일에 연결하는 방법
ㄴ ※자바스크립트 파일을 만드는 확장자는 css입니다.
ㄴ 즉, 문서 저장시 파일이름.css 라고 저장해주시면 됩니다.

[파일 저장 예시]

📌 Q : css는 어디에 작성하고, 외부에서 작성한 파일은 또 어떻게 불러올까요?

A : 인라인스타일 / 내부스타일시트 / 외부스타일시트연결을 이미지로 한눈에 확인해볼까요?🤩
↓↓↓

[ html에서 css 작성]

오늘의 핵심!
ㄴ 각 위치에서 css를 어떻게 작성하는지, 어디에 작성할 수 있는지 이해하는 것입니다~

(↓↓↓아래의 코드를 복사해서 css가 잘 적용되는지 확인해보세요! ↓↓↓)

1). 내부 스타일시트에서 css 작성하기

▶ <head> 영역에서 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css_</title>
    <style>
        h2 {color: red;}
    </style>
</head>
<body>
    <h2>hello css</h2>
</body>
</html>

[ 실행화면 ]

2). 인라인 스타일 작성하는 방법

▶ <body> 영역에서 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css_</title>
</head>
<body>
    <h2 style="color: red;">hello css</h2>
</body>
</html>

3). 외부 스타일시트 작성하는 방법

▶ css파일 따로 만들어서 작성하기
ㄴ 먼저, basic.css 파일을 하나 만들어줍니다.
(파일 새로 만들기 : ctrl+n → 파일 이름은 영문으로 확장자는 css로 설정하여 저장하기: ex, basic.css )

▶ css 파일에 작성하기

h2 {color:red;}

▶ css 파일 html 파일에 연결하기

rel 은 HTML 페이지와 링크된 파일간의 관계를 의미
href 는 CSS file 경로를 의미함

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css_</title>
    <link rel="stylesheet" href="css/example.css">
</head>
<body>
    <h2>hello css</h2>
</body>
</html>

3개의 화면이 모두 똑같이 보인다면 잘 작성하신거예요!
여러분은 이제 css의 속성만 알면 다 꾸밀수 있게 되었습니다!!🎉🎉🎉

오늘의 css 끝~

728x90

저작자표시 비영리 변경금지

'💻Coding > 📒 CSS' 카테고리의 다른 글

CSS _선택자_그룹선택자 (2)	2021.09.13
CSS _선택자_클래스선택자 (0)	2021.08.27
CSS _선택자_아이디선택자 (2)	2021.08.26
css _문법 + (css 맛보기) (2)	2021.08.23
CSS _기초 : CSS란? (2)	2021.08.23

현재글CSS _작성 위치와 연결방법

250x250

쭈랜드입니다:)

SQL, oracle, 포토샵단축키, photoshop, HTML, 오라클, 오라클오류, 자바스크립트, javascript, 드로우마이브랜드, PSD, 드로우앤드류, eclipse, drawandrew, 포토샵, adobe, Spring, sqldeveloper, 어도비, css,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

CSS _작성 위치와 연결방법

CSS _작성 위치와 연결방법

'💻Coding > 📒 CSS' 카테고리의 다른 글

'💻Coding/📒 CSS'의 다른글

티스토리툴바

CSS _작성 위치와 연결방법

CSS _작성 위치와 연결방법

'💻Coding > 📒 CSS' 카테고리의 다른 글

'💻Coding/📒 CSS'의 다른글

관련글

티스토리툴바