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 |
댓글