다양한 CSS3 스타일 적용 방식 알아보기
국비지원수업 2일차 ~ 3일차
0. CSS3
CSS(cascading style sheets)
- Tag안에서 지정되던 옵션을 포함하여, 다양한 옵션과 꾸밈 요소를 적용할 때 사용
- Tag안에 직접 기술하거나, 별도의 시트에 작성 후 name, id 등으로 연결하는 스타일 정의 구문
1. 스타일을 지정하는 방법
1-1. 태그 안에 style 속성을 삽입
- 스타일을 지정하고자 하는 태그 안에 style 속성을 넣고 필요한 내용을 ; (세미콜론)으로 구분해서 입력
<div style="width:300px; height:100px; background:yellow; border:2px solid red"></div>
1-2. id 또는 class 지정
1. 적용할 태그에 id 또는 class를 지정
2. id(or class)에 지정한 이름 또는 태그 이름을 이용해서 별도의 공간에 스타일을 지정
* 보통 head 태그 안쪽
(해당 내용은 밑에서 자세히 서술)
1-2-1. id
- id의 경우 style 태그에서 속성을 부여할 때, 지정한 이름 앞에 # 을 붙인다
<style type="text/css">
#div2{
width:300px;
height:200px;
background:yellowgreen;
}
</style>head 태그 안쪽
<div id="div2"></div>body 태그 안쪽
* style 옆에 붙은 type="text/css"는 붙이지 않아도 문제 없음
1-2-2. class
- class의 경우 style 태그에서 속성을 부여할 때, 지정한 이름 앞에 . 을 붙인다
<style>
.select{ color:red; }
.item{ background:pink; }
</style><h1>웹 프로그래밍</h1>
<ul>
<li class="select">HTML</li>
<li class="select">CSS</li>
<li class="item">JavaScript</li>
<li class="item">React</li>
</ul>
1-2-3. 스타일 적용의 우선순위
<style type="text/css">
#div2{
width:300px;
height:200px;
background:yellowgreen;
}
</style><!-- 태그 안에 직접 지정해 놓은 스타일이 우선 적용 -->
<div id="div2" style="background:blue;"></div>
<dr/><hr/><dr/>
<div id="div2"></div>
style 태그에서 부여한 yellowgreen이 아닌, div 태그 안에서 style 태그로 직접 부여한 blue가 background로 우선 적용
1-3. 별도의 CSS 파일
- 별도의 파일에 css 내용을 정의해놓고, 그 파일을 연결해서 사용
- head 태그 안에 link 태그를 이용해 파일을 연결
#div4{
width:200px;
height:200px;
background-color:brown;
margin:5px;
}
#div5{ width:300px; height:300px; background:cyan; margin:5px; }별도의 style.css 파일
<link rel="stylesheet" type="text/css" href="css/style.css" />head 태그 안쪽
<div id="div4"></div>
<div id="div5"></div>body 태그 안쪽
2. Selector (선택자)
- 앞에서 언급한 세가지 스타일 지정 방법 중 id / class / link 연결에 해당하는 경우
- 지정한 태그에 스타일을 적용하기 위해 태그를 선택하는 방식
1. Universal Selector : *
2. Tag Selector : (태그 이름만 사용)
3. Id Selector : #(아이디이름)
4. Class Selector : .(클래스이름)
5. 상대위치 및 기타 Selector
앞서서 짧게 3, 4의 예시를 들었으니(뒤에 또 언급), 이번에는 간단한 1, 2번 예시를 들겠다.
2-1. Universal Selector ( * )
- body, html 태그 또한 전부 포함하여 스타일 적용
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { color:lightcoral; border:3px solid orangered }
</style>
</head>
<body>
<h1>Universal</h1>
<h3>CSS Selector</h3>
<p>가나다라마바사</p>
</body>
2-2. Tag Selector (태그 이름만 사용)
- 같은 이름의 태그들에 모두 적용하기 때문에 특정 한 개의 태그에 적용하기는 부적합
- 동일 이름의 복수개의 태그에 동일한 스타일을 적용할 때 적합
<style type="text/css">
/* *로 인해 주석 또한 모양이 변함 */
/* margin : 해당 태그의 바깥쪽 여백 */
body{ margin:0px; border:2px dashed red;}
h1{ color:#FF0000; }
h3{ color:#0000FF; }
p{ color:brown; }
/* vertical-align : middle -> 그림과 텍스트의 수평 맞춤
top: 위쪽 맞춤 bottom : 아래쪽 맞춤 middle : 중간 맞춤 */
img{ width:100px; height:30px; vertical-align: middle; }
</style><h1>CSS Selector Basic</h1>
<h3>간세네 관련 포스팅 : 한글 Lorem Ipsum 생성기</h3>
<p>주소 : http://guny.kr/stuff/klorem/ </p>
<hr />
<h1>★ 각 포털 사이트의 로고</h1>
다음 <img src="images/daum.png">
페이스북 <img src="images/facebook.jpg">
네이트 <img src="images/nate.png">
3. ID Selector
- 하나의 태그에 유일한 id 값을 부여해서 사용
( = 태그 하나에 id 하나 부여)
- 같은 아이디를 두개 이상의 태그에 적용하면 에러는 발생하지 않으나, id를 생성해서 사용하는 목적에 부합하지 않음
ID Selector 사용법
1. 태그에 id를 지정
2. 해당 id를 사용하려면 style 태그 안에서, id 이름 앞에 ' # ' 붙여 사용
<style type="text/css">
/* margin:0 auto : (크기 변화도 감지해서) 자동으로 가운데 맞춤 */
/* overflow:hidden; #wrap 태그 안쪽 내용물이 가로:600px 세로:300px 경계선을 넘어 갈 정도로 크기가 크다면 바깥쪽으로 빠져나가는 부분을 화면에서 보이지 않게 함 */
#header{ width:600px; height:100px; background:orange; margin:0 auto;}
/* 구분할 게 없는 경우 마지막엔 ; 생략 가능 */
#wrap{ width:600px; height:200px; border:3px solid black; color:blue; margin:0 auto; overflow:hidden;}
/* float:left; 블럭형식(줄 바꿈 기능 포함)의 태그들을 줄바꿈 없이 옆에 나란히 이어 배치할 때 사용 */
#aside{ width:150px; height:300px; background:silver; float:left;}
#contents{ width:450px; height:300px; background:yellow; float:left;}
/* footer 가로 600 세로 100 배경색 yellowgreen 가운데 맞춤 지정 */
#footer{ width:600px; height:100px; background:yellowgreen; margin:0 auto;}
</style><div id="header">
<h1>Header-1</h1>
<h3>Header-3</h3>
</div>
<div id="wrap">
<div id="aside"><h3>Aside(subMenu)</h3></div>
<div id="contents"><h3>contents</h3></div>
</div>
<div id="footer">
<span>footer</span>
</div>
4. Class Selector
- 특정한 클래스를 가지고 있는 태그를 선택할 때 사용
- 웹 페이지를 개발할 때 가장 많이 사용
4-1. 기본형
Class Selector 사용법
1. 태그에 class를 지정
2. 해당 class를 style 태그 안에서, class 이름 앞에 ' . ' 붙여 사용
<style>
.container{
width: 50px;
height: 150px;
background: lavender;
}
.rect:nth-child(1){
width: 50px;
height: 50px;
text-align: center;
background: purple;
}
.rect:nth-child(2){
width: 50px;
height: 50px;
text-align: center;
border: 1px solid purple;
}
.rect:nth-child(3){
width: 50px;
height: 50px;
text-align: center;
color: purple;
}
</style><div class="container">
<div class="rect">rect1</div>
<div class="rect">rect2</div>
<div class="rect">rect3</div>
</div>
.(클래스):nth-child(n) : 가상 선택자, n번째 위치하는 자손을 선택
* 해당 코드 속 디자인 속성과 관련된 내용은 다음 포스트로 작성
4-2. 여러 개의 클래스 선택자 사용
- class 속성은 공백으로 구분해서 여러 클래스를 하나의 태그에 적용 가능
<style>
.select{ color:red; }
.item{ background:pink; }
</style><!-- class style : 두 개의 스타일 동시 적용 가능 -->
<h1 class="item select">화면 구현</h1>
5. 후손 선택자 (Descendant Selector)
- a > b : 부묘(a) 요소의 모든 자손(b) 요소를 선택
- 두개의 선택자 사이에 빈칸 하나를 넣으면, 왼쪽 태그안에 있는 오른쪽 태그를 선택
- id와 class의 무분별한 생성과 사용을 막기 위해 이미 생성된 태그와 id, class를 이용하여 상대적인 선택자를 구성
<style>
/* #header 안에 있는 h1 태그 */
#header > h1{
background: blue;
color: white;
}
#nav h2{
background: skyblue;
color: blue;
}
div h3{
border: 3px solid darkblue;
color: yellowgreen;
}
</style><div id="header">
<h1 class="title">회사 이름/로고</h1>
<h3>HTML5</h3>
<div id="nav">
<h1>Navigation</h1>
<h2>header 2</h2>
<h3>CSS3</h3>
</div>
</div>
6. 형제 선택자, 인접 선택자 (Adjecent)
- 하위 수준의 선택자가 아니라, 같은 수준의 태그들을 선택할 때 사용
- ' + ' : 지목된 요소 바로 뒤에 있는 요소 지목
- h1 ' ~ ' h3 : h3가 어디있던 h1 뒤에 있는 요소 지목
<style>
/* '+' : 지목된 요소 바로 뒤에 있는 요소 지목 */
h1 + h2{ color: red; }
h2 + h3{ color: orange; }
/* h1 바로 뒤에 h3가 없다면 적용되지 않음 */
h1 + h3{ background: green; }
/* ~ (tild) - h3가 어디있던 h1 뒤에 있는 요소 지목 */
h1 ~ h3 {background: green; }
</style><body>
<h1>Header - 1</h1>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
<h3>Header - 3</h3>
<h2>Header - 2</h2>
<h3>Header - 3</h3>
</body>
7. 상태 선택자 (State)
- 태그의 '상태'에 따라 다른 CSS를 적용하고자 할 때 사용
1. enabled : 활성화
2. disabled : 비활성화
3. focus : 커서를 대면 활성화
4. checked : 체크박스
<style>
input[type=text]:enabled{ background: yellow; }
input[type=text]:disabled{ background: orange; }
/* focus : 커서가 가있을 때 */
input[type=text]:focus{ background: pink ;}
/* input[type=checkbox]:checked{ background: red; } 비적용 */
</style><body>
<!-- 활성화 -->
<h2>Enabled</h2>
<input type="text"/>
<!-- 비활성화 -->
<h2>Disabled</h2>
<input type="text" disabled/> <br/>
<!-- 체크박스 -->
<h2>Checked</h2>
<input type="checkbox"/> 체크박스
</body>
8. 가상 클래스(1) 일반 구조 선택자
- CSS3부터 지원하는 선택자로, 후손 선택자(공백, >)와 병행해서 많이 사용
- 같은 이름의 태그들 또는 클래스 이름들을 대상으로 하는 선택자
1. first-child : 첫번째 위치하는 자손을 선택
2. last-child : 마지막에 위치하는 자손을 선택
3. nth-child(n) : n번째 위치하는 자손을 선택
8-1. 일반 구조 선택자 단순 예시
<style>
li:first-child{ background:red; }
li:last-child{ background:purple; }
li:nth-child(2){ background:orange; }
li:nth-child(3){ background:yellow; }
li:nth-child(4){ background:green; }
</style><body>
<ul>
<li>회사소개</li>
<li>사업</li>
<li>조직도</li>
<li>게시판</li>
<li>고객지원</li>
<li>사이트맵</li>
</ul>
</body>
8-2. 규칙성 있게 적용
<style>
/* 규칙성있게 들어감 */
li:nth-child(2n+1){ background:magenta; }
li:nth-child(2n){ background:pink; }
</style><body>
<ul>
<li>회사소개</li>
<li>사업</li>
<li>조직도</li>
<li>게시판</li>
<li>고객지원</li>
<li>사이트맵</li>
</ul>
</body>
- nth-child(2n+1) : 홀수 적용
- nth-child(2n) : 짝수 적용
8-3. 특정 요소 중 n번째 (first-of-type)
- 타입만을 체크하여 카운트
1. h1:first-of-type : h1 타입 중 첫번째
2. h2:last-of-type : h2 타입 중 마지막
3. h3:nth-of-type(2n) : h3 타입 중 2n번째(짝수번째)
<style type="text/css">
/* 같은 태그들을 그룹화 하되, 서로 인접되어 있지 않을 때 사용 */
h1:first-of-type{ color:red; }
h1:last-of-type{ color:blue; }
h2:first-of-type{ color:green; }
h3:nth-of-type(2n){ color:orange; }
h1:nth-of-type(2){ color:pink; }
</style><body>
<h1>Header - 1</h1>
<h2>Header - 2</h2>
<h3>Header - 3</h3>
<h3>Header - 3</h3>
<h2>Header - 2</h2>
<h1>Header - 1</h1>
<h1>Header - 1</h1>
<h3>Header - 3</h3>
<h3>Header - 3</h3>
</body>
8-3-1. first-child 와 first-of-type 의 차이점
- first-child : 자식 요소 중 가장 첫번째를 선택
- first-of-child : 자식 요소 중 특정 타입(p)이면서, 해당 요소(p)의 가장 첫번째를 선택
8-4. 응용
<style>
/* list style : 리스트의 글머리 기호 스타일
padding : 외곽선과 글자사이의 간격 */
/* body에도 마진 존재, 외곽을 완전 없애겠다는 뜻 */
body { margin:0; }
ul{
list-style: none;
margin:0;
padding:0;
}
li{
float:left;
border:1px solid red;
width:100px;
text-align:center;
height:50px;
line-height:50px;
}
li:nth-child(2n+1){ background:magenta; }
li:nth-child(2n){ background:pink; }
/* 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래, */
li:first-child{ border-radius:25px 0 0 25px; }
li:last-child{ border-radius:0 25px 25px 0; }
</style><body>
<ul>
<li>회사소개</li>
<li>사업</li>
<li>조직도</li>
<li>게시판</li>
<li>고객지원</li>
<li>사이트맵</li>
</ul>
</body>
1. margin : 0으로 간격 제거
2. padding
3. 네모의 크기 width로 통일 (설정하지 않으면 가로로 긺)
4. div등에서 글자 좌우 정렬 (text-align : center)
5. height로 높이 조정 → 이후 텍스트는 상하 좌우만 맞음
6. line-height (텍스트 행)을 height와 똑같이 맞춤
7. first-child / last-child로 리스트의 첫번째와 마지막 라인을 둥글게 만듦
9. 가상 클래스(2) 마우스 이벤트 셀렉터
9-1. hover
- 해당 태그에 마우스 포인터가 올라갔을 때 이벤트 발생
<style>
#box1{
background:yellow;
height:50px;
width:800px;
transition-duration:1s;
}
#box2{
background:yellow;
height:50px;
width:800px;
transition-duration:0.5s;
}
/* hover : 마우스 커서가 올라가면 적용 */
#box1:hover{ background:red; color:white; }
#box2:hover{ background:blue; color:white; }
</style><div>
<div id="box1">
<h1>User Action Selector</h1>
</div>
<div id="box2">
<h1>User Action selector</h1>
</div>
</div>
<div>
<div id="box1">
<h1>User Action Selector</h1>
</div>
<div id="box2">
<h1>User Action selector</h1>
</div>
</div>
9-2. active
- 해당 태그 위에서 마우스 버튼이 눌렀을 때 이벤트 발생
<style>
#box1{
background:yellow;
height:50px;
width:800px;
transition-duration:1s;
}
#box2{
background:yellow;
height:50px;
width:800px;
transition-duration:0.5s;
}
/* active : 마우스를 누른 상태 */
#box1:active{ background:blue; height:150px; }
#box2:active{ background:red; height:150px; }
</style><body>
<div>
<div id="box1">
<h1>User Action Selector</h1>
</div>
<div id="box2">
<h1>User Action selector</h1>
</div>
</div>
<div>
<div id="box1">
<h1>User Action Selector</h1>
</div>
<div id="box2">
<h1>User Action selector</h1>
</div>
</div>
</body>
9-3. 응용
- box1과 같은 위치에 있는 box2 태그에도 효과가 적용되도록 인접(형제) 선택자 ' ~ ' 를 이용해 active 적용
앞선 스타일 코드에 아래 코드를 추가 작성
/* 제 3의 요소에도 효과 적용 */
/* 현재는 바로 뒤에 있기에 + 옵션도 가능 */
/* 반드시 같은 위치(형제) 태그이거나, 자식 태그여야 함 (부모태그X) */
#box1:active ~ #box2{ background:green; color:white; }
/*
hover나 active로 해당 이벤트가 일어난 태그가 아닌 다른 태그에 변경을 주고 싶다면 그 대상은 형제 태그나 자식 태그로 한정되어 적용
*/
