본문 바로가기

교육/[Codeit]웹 퍼블리싱

어떤방식으로 css를 써야할까?

반응형

외부 css 파일을 이용해서 정돈한다. 링크 테그로 연결해주면 코드가 깔끔해진다.

코드 파일에서 스타일 테그를 수정해 쓸 수도 있지만 바로바로 테스트해보고 이대로 계속 쓸 마음이 생기면 스타일 코드를 외부 css 파일로 옮겨서 코드를 깔끔하게 만들어준다.

 

 

스타일을 적용하는 방법

HTML 코드에 스타일을 입히는 방법에는 세 가지가 있습니다.

1. <style> 태그

<style> h1 { color: green; text-align: center; } p { font-size: 18px; } </style> <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare convallis. Pellentesque ac posuere lectus. In eu ipsum et quam finibus fermentum vitae sit amet magna.</p>

2. style 속성

<h1 style="color: green; text-align: center;">Hello World!</h1> <p style="font-size: 18px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare convallis. Pellentesque ac posuere lectus. In eu ipsum et quam finibus fermentum vitae sit amet magna.</p>

3. 외부 CSS 파일 + <link> 태그

css/styles.css

h1 { color: green; text-align: center; } p { font-size: 18px; }

index.html

<link href="css/styles.css" rel="stylesheet"> <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare convallis. Pellentesque ac posuere lectus. In eu ipsum et quam finibus fermentum vitae sit amet magna.</p>

어떤 방법을 써야 할까?

일반적으로는 외부 CSS 파일에 스타일을 쓰고 HTML 코드에서 <link> 태그로 연결해주는 것이 가장 좋은 방식입니다. 하지만 조금씩 새로운 스타일을 시도해볼 때에는 간편함을 위해서 <style>태그를 쓰는 방법 또는 style 속성에서 테스트를 하고, 나중에 외부 CSS 파일로 옮기는 방법도 있습니다!

728x90
반응형

'교육 > [Codeit]웹 퍼블리싱' 카테고리의 다른 글

크롬 개발자 도구, 도움되는 웹 사이트  (0) 2021.02.17
코멘트  (0) 2021.02.17
css 파일 따로 쓰기 / link로 연결  (0) 2021.02.13
<div>태그  (0) 2021.01.02
실습과제. 노래 브릿지  (0) 2020.12.07