서론
최근 회사의 프로젝트를 진행하다보니 매일 업로드 하지 못했습니다. ㅠㅠ
어느정도 프로젝트가 안정기로 접어들어서 다시 포스팅 하게 되었습니다.
오늘은 문서에 css를 적용하는 3가지 방법에 대해서 알려 드리려 합니다.
초보자 입문 CSS #02
문서에 css를 적용하는 3가지 방법은 아래의
1.요소에 style을 설정하여 요소에 직접 적용한다.
2.문서 내부에 <style>태그를 만들어 그 안에 적용할 코드를 만든다.
3.외부에 css파일을 생성하여 불러온다.
위의 것들에 대해서 알아보자
1.요소에 style을 설정하여 적용하기
<p style="color:blue">Hellow World</p>
<div style="width:100%; height:300px"></div>
요소 태그에 style을 넣어 원하는 css를 바로 입힐수 있다.
해당 요소에 바로 적용할수 있고, !important를 제외하고는 최우선으로 적용시킨다.
back-end 개발자 분들이 많이 사용한다.
2. 문서 내부에 <style>태그를 만들어 적용하기
<style>
p{
color : blue;
font-size : 15px;
}
div{
width : 300px;
height : 300px;
}
</style>
</head>
문서 내에 style을 만들어서 css 설정을 할 수 있다.
주로 <head>와 </head>사이에 만든다.
3. 외부에 css파일을 생성하여 적용
제일 많이 사용하는 방법이다.
css폴더를 넣어 관리 하기도 하고 같위 위치에 두어 파일 관리를 하기도 한다.
<head>
<link rel="stylesheet" href="./css/index.css">
</head>html에서는 <link>태그로 css파일이 위치해 있는 곳을 선언해준다.
p{
color : blue;
font-size : 15px;
}
div{
width : 300px;
height : 300px;
}위에는 index.css 입니다.
파일의 위치는 위의 사진과 같고
css폴더 안에 있기 때문에
href="./css/index.css"로 작성하였다.
./ (현재 문서가 있는 폴더)
./css/ (현재 문서가 있는 폴더에서 css폴더)
./css/index.css
(현재 문서가 있는 폴더에서 css폴더안에 있는 index.css파일을 연결하겠다)
아래의 사진처럼 같은 위치에 있다면
href="./index.css"로 작성하면된다.
결론
현재의 문서에서 사용하는 경우 문서에 style을 주는 경우도 많이 있고 요소에 직접 넣는 경우도 많이 있다.
하지만 페이지 수(문서 수)가 많아지게 되면
css폴더에서 공통되는 부분을 묶어서 작업하는 경우가 발생한다.
(예를 들면 헤더나 푸터, 공통게시판 등)
css를 다룰때는 외부 파일을 첨부하여 관리하는것이 좋다.
문서의 길이도 짧아지고, 관리하기도 좋다
css를 수정하게 된다 하면 파일을 찾아보던지 style을 찾아 수정하면 된다.
'웹언어 > CSS' 카테고리의 다른 글
| 초보자 입문 CSS #03 (2) | 2021.07.16 |
|---|---|
| 초보자 입문 CSS #01 (11) | 2021.07.07 |
| [CSS] 그라데이션 설정하기 (7) | 2021.06.28 |
| [CSS] #, . / id와 class (0) | 2021.05.31 |
| [CSS] 요소를 투명하게 만드는 여러가지 방법들 (8) | 2021.05.01 |
