-------------------------------
4. Grouping Selectors
- 여러개의 선택자를 동시 사용.
- 구분자로 , (comma)를 사용.
CSS 표현 -> 선택자1, 선택자2, ... {속성:값}
5. 하위 요소 선택
CSS 표현 -> 부모선택자 > 자식선택자 {속성:값}
CSS 표현 -> 조상선택자 자손선택자 {속성:값}
<div> 부모선택자(조상선택자)
<div> 자식선택자(자손선택자)
<div> 자손선택자
</div>
</div>
</div>
6. 속성 선택
CSS 표현 -> [속성=값] {속성:값}
<a href="">
<a href="" target=""> -> a[target=_blank] {text-tecoration:none;}
<img src="" alt="">
<img src="" alt="" width="" heigth=""> -> img[width] {속성:값}
7. shadow 선택
- 특정 대상이 특정 상황에 놓인 경우에 한해서 선택되는 경우
CSS 표현 -> 특정대상:hover {속성:값}
- 특정 대상이 특정 위치에 놓인 경우에 한해서 선택되는 경우
CSS 표현 -> 특정대상:first-child {속성:값}
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
div { font-size: 10pt; color: #666666; }
h1 { font-size: 12pt; color:#53CF7C; }
/* 선택자 선택자 { 속성: 값; ... } */
/* text-decoration 속성은 텍스트에 대한 장식 지정 */
div#menu a { color: #666666; text-decoration: none; }
div#menu a:hover { color: #000000; text-decoration: underline; }
</style>
</head>
<body>
<div>
<!-- id="", class="", name="" 식별자 지정 -->
<div id="menu">
<h1>CSS Tutorial</h1>
<p><a href="">CSS HOME</a></p>
<p><a href="">CSS Introduction</a></p>
<p><a href="">CSS Syntax</a></p>
<p><a href="">CSS Selectors</a></p>
</div>
</div>
</body>
</html>
-----------------------------------------------
CSS 적용 방법
1. CSS 적용 범위
- 인라인 단위 적용 방법 : 특정 태그에만 적용되는 CSS. 웹페이지 내에서 특정 부분에만 적용하는 스타일 지정시 사용.
<태그명 style="CSS속성:값; CSS속성:값; ...">데이터</태그명>
- 페이지 단위 적용 방법 : 특정 페이지에만 적용되는 CSS. 웹페이지 전체의 스타일 지정시 사용.
<style type="text/css">
선택자 { CSS속성:값; CSS속성:값; ... }
</style>
- 파일 단위 적용 방법 : 특정 파일 단위로 적용되는 CSS. 웹사이트 전체의 스타일 지정시 사용.
<link rel="stylesheet" type="text/css" href="파일명.css">
-> 별도의 .css 파일을 만들어서 그 안에 스타일 내용을 작성한다.
http://www.w3schools.com/stdtheme.css
----------------------------------------------
CSS Text
1. color - Sets the color of text
2. line-height - Sets the line height
3. text-align - Specifies the horizontal alignment of text
4. text-decoration - Specifies the decoration added to text
5. vertical-align - Sets the vertical alignment of an element
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
/* 선택자 { 속성:값; 속성:값; ...} */
div { width: 550px; line-height: 170%;}
h1 { font-size:15pt;}
h2 { font-size:9pt; color:gray; font-weight: normal;}
p { margin-top:25px; margin-bottom:25px; }
p#img { text-align: center; }
</style>
</head>
<body>
<!-- 뉴스 기사 전체 -->
<div id="news0003251960">
<!-- 제목 영역 -->
<div>
<h1>"구글 유튜브, 1조원 게임 스트리밍 서비스 인수"</h1>
<h2>기사입력 2014-05-19 08:38 | 최종수정 2014-05-19 09:09</h2>
</div>
<!-- 내용 영역 -->
<div>
<p id="img"><img src="http://imgnews.naver.net/image/277/2014/05/19/2014051908351937334_1_99_20140519090908.jpg"></p>
<p>[아시아경제 조유진 기자] 구글 유튜브가 비디오게임 스트리밍 서비스 트위치를 인수한다. 인수금액은 10억달러(약1조250억원)로 인수가 성사되면 전액 현금으로 지급될 예정이다. </p>
<p>18일(현지시간) 미국 버라이어티 등 외신에 따르면 구글의 동영상 서비스 유튜브가 비디오 게임 스트리밍 업체 트위치(Twitch)를 인수하는 계약을 체결했다. </p>
<p>이번 거래는 규제 당국의 심사를 거친 뒤 발표될 예정이다. </p>
<p>트위치는 2011년 6월 저스틴 칸과 에미트 시어가 게임 콘텐츠에 중점을 둔 스트리밍 서비스로 시작했으며, 서비스 2년 만에 게임전용 방송국으로 인기를 얻고 있다.</p>
<p>트위치 사이트의 월간 사용자 수는 4500만명이며, 동영상을 업로드하는 활동 이용자 수는 100만명이 넘는다.</p>
<p>조유진 기자 tint@asiae.co.kr</p>
</div>
</div>
</body>
</html>
![http://imgnews.naver.net/image/277/2014/05/19/2014051908351937334_1_99_20140519090908.jpg"></p](http://imgnews.naver.net/image/277/2014/05/19/2014051908351937334_1_99_20140519090908.jpg"></p){kind=link}
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
table#form01 tr > td:first-child { text-align: right; }
input[type=text]:focus { background-color: #FFE6E6 ; }
</style>
</head>
<body>
<div>
<h1>회원가입</h1>
<form>
<table id="form01">
<tr>
<td>이름</td><td><input type="text" placeholder="이름"></td>
</tr>
<!-- HTML5 전용 속성 -->
<tr>
<td>전화</td><td><input type="text" placeholder="010-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>이메일</td><td><input type="email" placeholder="이메일"></td>
</tr>
<tr>
<td>성별</td><td><input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female</td>
</tr>
<tr>
<td>취미</td><td><input type="checkbox" value="1">운동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감상</td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>생년월일</td><td><input type="date"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>수강 횟수</td><td><input type="number" min="0"></td>
</tr>
<tr>
<td style="vertical-align: top;">자기 소개</td><td><textarea style="width: 400px; height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
</tr>
<tr>
<td></td><td><input type="submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
---------------------------------------
CSS Background
1. background-color - Sets the background color of an element
2. background-image - Sets the background image for an element
3. background-position - Sets the starting position of a background image
4. background-repeat - Sets how a background image will be repeated
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
table tr > td:first-child { text-align: right; }
input[type=text]:focus { background-color: #FFE6E6 ; }
table { border: 1px solid #FFCCFF ;}
tr { background-color: #FFEBFF ; }
</style>
</head>
<body>
<div>
<h1>회원가입</h1>
<form>
<table id="form01">
<tr>
<td>이름</td><td><input type="text" placeholder="이름
"></td>
</tr>
<!-- HTML5 전용 속성 -->
<tr>
<td>전화</td><td><input type="text" placeholder="010
-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>이메일</td><td><input type="email" placeholder="
이메일"></td>
</tr>
<tr>
<td>성별</td><td><input type="radio" name="gender"
value="male">Male <input type="radio" name="gender"
value="female">Female</td>
</tr>
<tr>
<td>취미</td><td><input type="checkbox" value="1">운
동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감
상</td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>생년월일</td><td><input type="date"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>수강 횟수</td><td><input type="number"
min="0"></td>
</tr>
<tr>
<td style="vertical-align: top;">자기 소개</td><td><textarea style="width: 400px;
height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
</tr>
<tr>
<td></td><td><input type="submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
table#form01 { background-image: url('smiley.gif') ;
background-repeat: no-repeat;
background-position: top right;}
table#form01 tr > td:first-child { text-align: right; background-color: #C2C2C2; }
</style>
</head>
<body>
<div>
<h1>회원가입</h1>
<form>
<table id="form01" >
<tr>
<td>이름</td><td><input type="text" placeholder="이름"></td>
</tr>
<!-- HTML5 전용 속성 -->
<tr>
<td>전화</td><td><input type="text" placeholder="010-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>이메일</td><td><input type="email" placeholder="이메일"></td>
</tr>
<tr>
<td>성별</td><td><input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female</td>
</tr>
<tr>
<td>취미</td><td><input type="checkbox" value="1">운동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감상</td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>생년월일</td><td><input type="date"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>수강 횟수</td><td><input type="number" min="0"></td>
</tr>
<tr>
<td style="vertical-align: top;">자기 소개</td><td><textarea style="width: 400px; height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
</tr>
<tr>
<td style="background-color: white;"></td><td><input type="submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
-----------------------------------
CSS Font
1. font-size - Specifies the font size of text
2. font-style - Specifies the font style for text
3. font-family - Specifies the font family for text
-----------------------------------
CSS Tables
1. Table Borders - border: 1px solid black;
2. Collapse Borders - border-collapse:collapse;
3. Table Width and Height - width:100%; height:50px;
4. Table Text Alignment - text-align:right; vertical-align:bottom;
5. Table Padding - padding:15px;
6. Table Color - background-color:green; color:white;
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
table { border-collapse:collapse; }
table, td { border: 1px solid #B2CCFF; }
td { padding: 5px; }
td.back01 { background-color:#E0EBFF ; }
</style>
</head>
<body>
<div>
<h1>회원가입</h1>
<form>
<table id="form01">
<tr>
<td class="back01">이름</td><td><input type="text" placeholder="이름
"></td>
</tr>
<!-- HTML5 전용 속성 -->
<tr>
<td class="back01">전화</td><td><input type="text" placeholder="010
-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td class="back01">이메일</td><td><input type="email" placeholder="
이메일"></td>
</tr>
<tr>
<td class="back01">성별</td><td><input type="radio" name="gender"
value="male">Male <input type="radio" name="gender"
value="female">Female</td>
</tr>
<tr>
<td class="back01">취미</td><td><input type="checkbox" value="1">운
동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감
상</td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td class="back01">생년월일</td><td><input type="date"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td class="back01">수강 횟수</td><td><input type="number"
min="0"></td>
</tr>
<tr>
<td style="vertical-align: top;" class="back01">자기 소개</td><td><textarea style="width: 400px;
height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
</tr>
<tr>
<td></td><td><input type="submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
//Table.css
@CHARSET "EUC-KR";
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="Table.css">
<style type="text/css">
table#form01 { background-image: url('back03.jpg') ;
background-repeat: no-repeat;
background-position: top right;}
table#form01 tr > td:first-child { text-align: right; background-color: #C2C2C2; }
</style>
</head>
<body>
<div>
<h1>회원가입</h1>
<form>
<table id="customers" >
<tr class="alt">
<td>이름</td><td><input type="text" placeholder="이름"></td>
</tr>
<!-- HTML5 전용 속성 -->
<tr>
<td>전화</td><td><input type="text" placeholder="010-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr class="alt">
<td>이메일</td><td><input type="email" placeholder="이메일"></td>
</tr>
<tr>
<td>성별</td><td><input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female</td>
</tr>
<tr class="alt">
<td>취미</td><td><input type="checkbox" value="1">운동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감상</td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>생년월일</td><td><input type="date"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr class="alt">
<td>수강 횟수</td><td><input type="number" min="0"></td>
</tr>
<tr>
<td style="vertical-align: top;">자기 소개</td><td><textarea style="width: 400px; height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
</tr>
<tr class="alt">
<td></td><td><input type="submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
--------------------------------------------
The CSS Box Model
1. Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
2. Border - A border that goes around the padding and content. The border is inherited from the color property of the box
3. Padding - Clears an area around the content. The padding is affected by the background color of the box
4. Content - The content of the box, where text and images appear
----------------------------------------------
CSS Border
1. border - Sets all the border properties in one declaration
CSS 표현 -> border : 굵기 선의종류 색상;
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="Table.css">
<style type="text/css">
table#form01 { background-image: url('back03.jpg') ;
background-repeat: no-repeat;
background-position: top right;}
table#form01 tr > td:first-child { text-align: right; background-color: #C2C2C2; }
input { border : 1px dashed black; font-size: 13pt; }
textarea { border : 1px dashed black; }
</style>
</head>
<body>
<div>
<h1>회원가입</h1>
<form>
<table id="customers" >
<tr class="alt">
<td>이름</td><td><input type="text" placeholder="이름"></td>
</tr>
<!-- HTML5 전용 속성 -->
<tr>
<td>전화</td><td><input type="text" placeholder="010-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr class="alt">
<td>이메일</td><td><input type="email" placeholder="이메일"></td>
</tr>
<tr>
<td>성별</td><td><input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female</td>
</tr>
<tr class="alt">
<td>취미</td><td><input type="checkbox" value="1">운동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감상</td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr>
<td>생년월일</td><td><input type="date"></td>
</tr>
<!-- HTML5 전용 폼 태그 -->
<tr class="alt">
<td>수강 횟수</td><td><input type="number" min="0"></td>
</tr>
<tr>
<td style="vertical-align: top;">자기 소개</td><td><textarea style="width: 400px; height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
</tr>
<tr class="alt">
<td></td><td><input type="submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
------------------------------------------
CSS Margin
1. margin - A shorthand property for setting the margin properties in one declaration
CSS 표현 -> margin: 값; margin: 값1 값2 값3 값4;
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
div#main { width: 912px; margin: auto; }
div#header { margin:3px; height: 100px; background-color: #FFCCCC;}
div#menu { margin:3px; float:left; height: 300px; width: 200px; background-color: #CCFFCC;}
div#content { margin:3px; float: left; height: 300px; width: 700px; background-color: #C2D6FF;}
div#footer { margin:3px; clear:both; height:50px; background-color: #D1FFF0 ; }
</style>
</head>
<body>
<!-- 전체 영역을 하나의 큰 틀로 묶는다 -->
<div id="main">
<!-- 화면 상단부 - 주로 메인메뉴 또는 타이틀 표시하는 영역 -->
<div id="header"><h1>Main Title of Web Page</h1></div>
<!-- 서브메뉴 영역-메뉴 목록 출력하는 영역 -->
<div id="menu">
<h2>Menu</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</div>
<!-- 콘텐츠 영역-페이지마다 다른 내용의 콘텐츠가 출력되는 영역 -->
<div id="content">Content goes here</div>
<!-- 화면 하단부 - 회사 이름 등이 출력되는 영역 -->
<div id="footer">Copyright (c) W3Schools.com</div>
</div>
</body>
</html>
-----------------------------------------
CSS Padding
1. padding - A shorthand property for setting all the padding properties in one declaration
CSS 표현 -> padding: 값; padding: 값1 값2 값3 값4;
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
div { font-size: 10pt; color: #666666; }
h1 { font-size: 12pt; color:#53CF7C; }
div#menu a { color: #666666; text-decoration: none; }
p { border: 1px solid #B2CCFF;
width: 200px;
padding: 5px;
margin-top : 1px;
margin-bottom : 1px; }
p:hover { color: #000000; text-decoration: underline;
background-color:#E0EBFF ; }
</style>
</head>
<body>
<div>
<div id="menu">
<h1>CSS Tutorial</h1>
<p><a href="">CSS HOME</a></p>
<p><a href="">CSS Introduction</a></p>
<p><a href="">CSS Syntax</a></p>
<p><a href="">CSS Selectors</a></p>
</div>
</div>
</body>
</html>
---------------------------------------------------
CSS Navigation Bar
//Menu.css
@CHARSET "EUC-KR";
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="Menu.css">
</head>
<body>
<div>
<h1>w3schools.com</h1>
<div>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JAVASCRIPT</a></li>
<li><a href="">MORE...</a></li>
</ul>
</div>
</div>
</body>
</html>
------------------------------------------------
'HTML/CSS' 카테고리의 다른 글
| 3일차_HTML 태그의 종류, CSS (0) | 2015.06.21 |
|---|---|
| 2일차_HTML 태그의 종류 (1) | 2015.06.21 |
| 1일차_웹어플리케이션개요, HTML개요, CSS개요.txt (0) | 2015.06.21 |
| 09일차_거품정렬,선택정렬,삽입정렬 (0) | 2015.06.21 |
알 수 없는 사용자
![http://imgnews.naver.net/image/020/2015/04/20/70793740.1_99_20150420040904.jpg?type=w540"></p](http://imgnews.naver.net/image/020/2015/04/20/70793740.1_99_20150420040904.jpg?type=w540"></p){kind=link}