Be a groovy man by positive thinking

UI/UX_004 본문

IT/_HTML_CSS_JS

UI/UX_004

KhanSelf 2017. 7. 5. 19:52

간편정리



1. 자손,후손, 동위 선택자

 - 후손 : 여러 계층 구조에서 기준이 되는 태그 안에 위치하는 모든 태그

 - 자손 : 여러 계층 구조에서 기준이 되는 태그 바로 아래에 위치하는 태그

 - 동위(형제) : 계층 구조에서 동일한 계층

 - 후손 선택자

element element 

  div p ==> div 태그 안에 있는 모든 p 태그들


 - 자손 선택자 

element > element

div > p ==> div 태그 바로 아래에 있는 모든 p 태그들


 - element + element : 기준 선택자 바로 뒤에 위치하는 선택자 

  div + p ==> div 태그 바로 뒤에 있는 p

 - element1~element2 : 기준 선택자 뒤에 위치하는 모든 선택자

 

2. 구조 선택자

 - 일반구조 선택자 

  + first-child

형제 관계 중에서 첫번째 위치하는 태그 선택

  + last-child

형제 관계 중에서 마지막 위치하는 태그 선택

  + nth-child(수식)

형제 관계 중에서 앞에서 수식에 해당하는 태그 선택

  ** odd : 홀수, even : 짝수

  + nth-last-child(수식)

형제 관계 중에서 뒤에서 수식에 태그 선택

 

 - 형태구조 선택자

  + first-of-type

형제 관계 중에서 첫번째 등장하는 특정 태그

  + last-of-type

형제 관계 중에서 마지막으로 등장하는 특정 태크

  + nth-of-type(수식)

형제 관계 중에서 수식 번째 등장하는 특정태그

  ** odd : 홀수, even : 짝수

  + nth-last-of-type(수식)

형제 관계 중에서 뒤에서 수식 번째 등장하는 특정태그







예문



Ex_01

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Property Basic</title>

<style>

div p {

background-color: yellow;

}

</style>

</head>

<body>


<h1>Welcome to My Homepage</h1>


<div>

<h2>My name is Donald</h2>

<p>I live in Duckburg.</p>

</div>


<p>My best friend is Mickey.</p>


</body>

</html>








Ex_02

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Property Basic</title>

<style>

/* id 속성값으로 header를 가지는 태그의 후손 위치에 있는 h1 태그의 color 속성에 red 키워드를 적용합니다.*/

#header h1 {

color: red;

}


/* id 속성값으로 section을 가지는 태그의 후손 위치에 있는 h1 태그의 color 속성에 orange 키워드를 적용합니다.*/

#section h1 {

color: green;

}

</style>

</head>

<body>

<div id="header">

<h1>후손 이면서 자손</h1>

<div>

<h1>후손</h1>

</div>

</div>


<div id="section">

<h1>후손 컨텐츠</h1>

<p>컨텐츠</p>

</div>

</body>

</html>








Ex_03

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Property Basic</title>

<style>

/* id 속성값으로 header를 가지는 태그의 후손 위치에 있는 h1 태그의 color 속성에 red 키워드를 적용합니다.*/

#header h1 {

color: red;

}


/* id 속성값으로 section을 가지는 태그의 후손 위치에 있는 h1 태그의 color 속성에 orange 키워드를 적용합니다.*/

#section h1 {

color: green;

}

</style>

</head>

<body>

<div id="header">

<h1>후손 이면서 자손</h1>

<div>

<h1>후손</h1>

</div>

</div>


<div id="section">

<h1>후손 컨텐츠</h1>

<p>컨텐츠</p>

</div>

</body>

</html>







Ex_04

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic</title>

<style>

/* table 태그 아래의 tr 태그 아래 th 태그의 color 속성에 red 키워드를 적용합니다. */

table>tbody>tr>th {

color: red;

}

</style>

</head>

<body>

<table border="1">

<tr>

<th>Name</th>

<th>Region</th>

</tr>

<tr>

<td>윤인성</td>

<td>서울특별시 강서구 내발산동</td>

</tr>

</table>

</body>

</html>







Ex_05

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic</title>

<style>

div+p {

background-color: yellow;

}

</style>

</head>

<body>

<h1>Welcome to My Homepage</h1>


<div>

<h2>My name is Donald</h2>

<p>I live in Duckburg.</p>

</div>


<p>My best friend is Mickey.</p>


<p>I will not be styled.</p>

</body>

</html>







Ex_06

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic</title>

<style>

p ~ ul {

background-color: yellow;

}

</style>

</head>

<body>

<div>A div element.</div>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>


<p>The first paragraph.</p>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>


<h2>Another list</h2>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>







Ex_07

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

p:first-child {

background-color: blue;

}


p:nth-child(2n) {

background-color: gray;

}


p:last-child {

background-color: yellow;

}

</style>

</head>

<body>

<p>첫번째 단락입니다.</p>

<p>두번째 단락입니다.</p>

<p>세번째 단락입니다.</p>

<p>네번째 단락입니다.</p>

<p>다섯번째 단락입니다.</p>

</body>

</html>







Ex_08

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

p {

color: green;

}


p:nth-child(2) {

color: red;

}


p:nth-child(3) {

color: blue;

}

</style>

</head>

<body>

<p>첫번째 단락입니다.</p>

<p>두번째 단락입니다.</p>

<p>세번째 단락입니다.</p>

<p>네번째 단락입니다.</p>

</body>

</html>







Ex_09

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic</title>

<style>

ul {

overflow: hidden;

}


li {

list-style: none;

float: left;

padding: 15px;

}


li:first-child {

border-radius: 10px 0 0 10px;

}


li:last-child {

border-radius: 0 10px 10px 0;

}


li:nth-child(2n) {

background-color: #FF0003;

}


li:nth-child(2n+1) {

background-color: #800000;

}

</style>

</head>

<body>

<ul>

<li>First</li>

<li>Second</li>

<li>Third</li>

<li>Fourth</li>

<li>Fifth</li>

<li>Sixth</li>

<li>Seventh</li>

</ul>

</body>

</html>







Ex_10

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

/* li > a:first-child { color: red; }*/

li:first-child>a {

color: red;

}

</style>

</head>

<body>

<ul>

<li><a href="#">일반구조1</a></li>

<li><a href="#">일반구조2</a></li>

<li><a href="#">일반구조3</a></li>

<li><a href="#">일반구조4</a></li>

<li><a href="#">일반구조5</a></li>

</ul>

</body>

</html>







Ex_11

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic Page</title>

<style>

h1:first-of-type {

color: red;

}


h2:first-of-type {

color: red;

}


h3:first-of-type {

color: red;

}

</style>

</head>

<body>

<h2>Header - 2</h2>

<h3>Header - 3</h3>

<h3>Header - 3</h3>

<h1>Header - 1</h1>

<h2>Header - 2</h2>

<h1>Header - 1</h1>

</body>

</html>







Ex_12

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title></title>

<style>

/*ul > *:first-child

{

color:red;

}

*/

ul>*:first-of-type {

color: red;

}

</style>

</head>

<body>

<ul>

<test>1</test>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</body>

</html>







Ex_13

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic Page</title>

<style>

/* input 태그 중에서 type 속성값을 text로 가지는 태그의 background 속성에 red 키워드를 적용합니다.*/

input[type=text] {

background-color: red;

}


/* input 태그 중에서 type 속성값을 password로 가지는 태그의 background 속성에 blue 키워드를 적용합니다.*/

input[type=password] {

background-color: blue;

}

</style>

</head>

<body>

<form>

<input type="text" /> 

<input type="password" />

</form>

</body>

</html>







Ex_14

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic Page</title>

<style>

a[target] {

background-color: yellow;

}

</style>

</head>

<body>


<a href="#">서울IT교육센터</a>

<a href="http://www.naver.com" target="_blank">네이버</a>

<a href="http://www.daum.net" target="_self">다음</a>


</body>

</html>







Ex_15

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic</title>

<style>

li {

background-color: gray;

}


li:hover {

color: red;

background-color: yellow;

}


li:active {

background-color: white;

}

</style>

</head>

<body>

<ul>

<li>메뉴 1</li>

<li>메뉴 2</li>

<li>메뉴 3</li>

</ul>

</body>

</html>







Ex_16

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic</title>

<style>

/* input 태그가 사용 가능할 경우에

background-color 속성에 white 키워드를 적용합니다. */

input:enabled {

background-color: yellow;

}


/* input 태그가 사용 불가능할 경우에

background-color 속성에 white 키워드를 적용합니다. */

input:disabled {

background-color: gray;

}


/* input 태그에 초점이 맞추어진 경우에

background-color 속성에 white 키워드를 적용합니다. */

input:focus {

background-color: orange;

}

</style>

</head>

<body>

<h2>Enabled</h2>

<input type="text" />

<h2>Disabled</h2>

<input type="text" disabled="disabled" />

</body>

</html>







Ex_17

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic</title>

<style>


/* 

input 태그의 type 속성값이 checkbox인 태그가 체크되었을 때,

바로 뒤에 위치하는 div 태그의 height 속성에 0픽셀을 적용합니다. 

*/


input[type=checkbox]:checked+div {

height: 0px;

}


div {

overflow: hidden;

width: 650px;

height: 300px;

/* 변환 효과를 적용합니다. */

-ms-transition-duration: 1s;

-webkit-transition-duration: 1s;

-moz-transition-duration: 1s;

-o-transition-duration: 1s;

transition-duration: 1s;

}

</style>

</head>

<body>

<input type="checkbox" />

<div>

<h1>Lorem ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</body>

</html>

'IT > _HTML_CSS_JS' 카테고리의 다른 글

UI/UX_006  (0) 2017.07.06
UI/UX_001  (0) 2017.07.05
UI/UX_002  (0) 2017.07.05
UI/UX_003  (0) 2017.07.05
UI/UX_005  (0) 2017.07.05
'IT/_HTML_CSS_JS' Related Articles more