개발 공부/CSS

[CSS 001] CSS를 적용하는 3가지 방법

구운오니 2023. 3. 18. 19:59
728x90

 

1. 태그 안에 style 속성 부여하기

아래와 같이 태그 안에 style 속성을 부여하여 CSS를 적용할 수 있습니다.

 

 

기본형

<태그명 style="(스타일 속성): (스타일 값)">

 

예시

 

 

................................................................................................................................................................

 

2. style 태그를 활용하기 

 

기본형

 

예시

 

 

................................................................................................................................................................

 

하지만! CSS 코드를 별도의 파일로 관리해야하는 두 가지 이유가 있습니다.

 

1. HTML 내에서 디자인과 관련된 정보를 제거할 수 있다. 

2. 협업이 편리해진다.

 

따라서 css코드를 별도의 파일로 분리하여 작성해봅니다.

 

................................................................................................................................................................

 

 

3. css코드를 별도의 파일로 분리하여 작성

 

(파일명).css 

 

파일을 새로 만든 다음 

위에서 작성했던 <style>태그 안의 내용물을 그대로 옮겨주면 됩니다.

(태그는 삭제)

 

예시

 

 

그리고 html 파일의 <head>에서 css 파일을 연동해주는 코드를 추가하면 끝-!

 

<link href="(파일명).css" rel="stylesheet">

 

예시

 

이렇게 CSS를 적용할 때는 마지막 방법인 별도의 파일로 구성하는 것이 좋은 방법입니다. ☺

 

 

728x90