본문 바로가기
Develop Note

CSS 적용하는 방법 3가지

by Review Note 2017. 5. 26.


CSS 적용 3가지 방법


1. 태그에 직접적으로 선언하기


<div style="background-color: #ff0000"> 다양하게 CSS 적용하기 </div>

<div style="background-color: #00ff00"> 다양하게 CSS 적용하기 </div>

<div style="background-color: #0000ff"> 다양하게 CSS 적용하기 </div>


이렇게 태그안에 직접적으로 style을 선언할 수 있다.



2. <head>안에 <style>태그 선언하기


<head>

<style type="text/css">


div:nth-child(1){

background-color: #ff0000;

}

div:nth-child(2){

background-color: #00ff00;

}

div:nth-child(3){

background-color: #0000ff;

}


</style>

</head>

<body>


<div> 다양하게 CSS 적용하기 </div>

<div> 다양하게 CSS 적용하기 </div>

<div> 다양하게 CSS 적용하기 </div>


</body>


<style>태그에 css를 모아서 관리할 수 있다.

div:nth-child(1) 선택자로써 "div태그의 첫 번째"  (다음 포스팅에 선택자에 대해서 자세히 올리겠습니다~)



3. 외부에 문서로 선언하고 link태그로 불러오기


test.jsp or test.html 파일


<head>

<link href="cssgroup.css" rel="stylesheet" type="text/css">

</head>



cssgroup.css 파일


div:nth-child(1){

background-color: red;

}

div:nth-child(2){

background-color: #00ff00;

}

div:nth-child(3){

background-color: #0000ff;

}


test.jsp or test.html 파일과 동일한 경로에 cssgroup.css 파일이 있기 때문에 link="cssgroup.css" 작성

1번 방법은 간단하지만 2,3번은 어려울 수 있지만, 쉽게 생각해서 외부에 css만 모아두는 파일을 link로 가져오게 되면 

2번 같은 방법으로 <head> 태그 사이의 <link="cssgroup.css" rel="stylesheet" type="text/css"> 이 부분이  


div:nth-child(1){

background-color: red;

}

div:nth-child(2){

background-color: #00ff00;

}

div:nth-child(3){

background-color: #0000ff;

}


이렇게 바뀌게 된다고 생각하시면 될 것 같습니다.






blog 승제노트






↓ 공감, 댓글 부탁드려요 ↓

'Develop Note' 카테고리의 다른 글

Java jdk 설치 방법  (0) 2017.05.30
이클립스(Eclipse) 설치 방법  (5) 2017.05.29
CSS 선택자 종류와 사용법  (2) 2017.05.27
INPUT 태그 스타일(속성)  (3) 2017.05.24
윈도우10 Java 환경변수 설정  (9) 2017.05.24

댓글