2019/09/19 - [HTML | CSS] - <이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리)
<이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리)
1. 크기 단위 단위 설명 % 백분율 em 배수 px 픽셀 2. 색상 단위 단위 설명 #000000 HEX 코드 rgb(red,green,blue) RGB 색상 rgba(red,green,blue,alpha) RGBA 색상 hsl(hue,saturation,lightness) HSL 색상 hsla(..
jiaaan90.tistory.com
2019/09/19 - [HTML | CSS] - <이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트)
<이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트)
1. 폰트 속성 글자의 크기를 지정하는 스타일 속성이다. 크기 단위 등을 사용한다. font-size:30px; font-size:3em; font-size:large; font-size:small; font-family 속성 폰트를 지정하는 스타일 속성이다. font-..
jiaaan90.tistory.com
<<실습>>
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
div p{
color: red;
}
</style>
<div>
<h1>CSS 기본 선택자</h1>
<p>선택자란?<br>
특정한 HTML 태그를 선택 할 때 사용하는 기능으로 원하는 스타일과 기능을 적용 할 수 있다.
</p>
</div>
<hr>
<style>
div p{
color: red;
}
</style>
<div>
<h2>모든 선택자</h2>
<p>HTML 문서 안의 모든 태그를 선택할 때 전체 선택자를 사용 할 수 있다.</p>
<ul>
<li>테스트1</li>
<li>테스트1</li>
<li>테스트1</li>
</ul>
</div>
<hr>
<style>
p[id=p1]{
color: red;
}
</style>
<div>
<h3>태그 선택자</h3>
<p id="p2">HTML 문서 내에 같은 태그를 모두 선택할 때 사용한다.</p>
<p id="p1"><small>- p {color : red;} 와 같은 형태로 사용된다.</small></p>
</div>
<hr>
<style>
#id_selector p{
color : red;
}
#id_selector li:nth-child(2){
color : green;
background: yellow;
}
</style>
<div id ="id selector">
<h3>아이디 선택자</h3>
<p>HTML 문서 내에 해당하는 아이디 속성의 값을 가진 태그만 선택 할 때 사용한다.</p>
<p><small>- #아이디명{color : blue;} 와 같은 형태로 사용 된다.</small></p>
<ol>
<li>아이디 선택자 테스트1</li>
<li>아이디 선택자 테스트2</li>
<li>아이디 선택자 테스트3</li>
<li>아이디 선택자 테스트4</li>
<li>아이디 선택자 테스트5</li>
</ol>
</div>
<hr>
<style>
</style>
<div>
<h3>클래스 선택자</h3>
<p>HTML 문서 내에 여러 개의 태그를 동일한 클래스명으로 지정하여 선택할 때 사용한다.</p>
<p>-.클래스명{color : purple;}와 같은 형태로 사용된다.</p>
<ul>
<li>클래스 선택자 테스트1</li>
<li>클래스 선택자 테스트2</li>
<li>클래스 선택자 테스트3</li>
<li>클래스 선택자 테스트4</li>
<li>클래스 선택자 테스트5</li>
</ul>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
p[id=b]{
color = red;
}
</style>
<h1>기본 속성 선택자</h1>
<h4>기본 선택자 뒤에 []를 사용하여 속성과 속성값을 사용한다.</h4>
<p id = "a">선택자[속성=속성값]{설정내용} 의 형식으로 사용된다.</p>
<p id = "b">div 1<br>div 2<br>div 3<br>div 4</p>
<hr>
<style>
div h3{
background: red;
}
div ul{
background: yellow;
color: red;
}
div li{
background: skyblue;
}
</style>
<div>
<h1>후손선택자와 자손선택자</h1>
<h4>자손선택자 : 바로 아래의 요소, 후손선택자 : 하위 요소 전부</h3>
<p>자손선택자 : 선택자>자손선택자{설정내용} 의 형식으로 사용, 후손선택자
:선택자 후손선택자{설정내용}으로 사용</p>
<h3>자손입니다</h3>
<h3>나도 자손입니다</h3>
<ul>리스트
<li>나는 ul의 자손이면서 동시에 div의 후손입니다.</li>
<li>나는 ul의 자손이면서 동시에 div의 후손입니다.</li>
</ul>
</div>
<hr>
<style>
</style>
<div class ="abc">
<h1>동위 선택자</h1>
<h3>동위 관계에서 뒤에 위치한 태그를 선택할 때 사용한다.</h3>
<p>바로 뒤의 요소 선택시 : 선택자a + 선택자b{설정내용}으로 사용하며,
뒤에 있는 모두를 선택할 때는 선택자 a ~ 선택자b{설정내용}으로 사용된다.
</div>
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
#child-test>p:nth-child(4), #child-test>p:nth-child(6){
background: green;
color: white;
}
#child-test>p:nth-child(3){
background: red;
color: white;
}
#child-test>p:nth-child(5){
background: skyblue;
color: white;
}
</style>
<div id ="child-test">
<h2>일반 구조 선택자</h2>
<p>특정한 위치에 있는 태그 선택(위치로 구분)</p>
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<p><small>테스트6</small></p>
</div>
<hr>
<style>
#type-test>p:nth-of-type(2){
color: white;
background: red;
}
#type-test>p:nth-of-type(3),#type-test>p:nth-of-type(5){
color:white;
background: green;
}
#type-test>p:nth-of-type(6){
background: orange;
color: white;
}
#type-test>p:nth-of-type(4){
background: skyblue;
color: white;
}
</style>
<div id ="type-test">
<h2>형태 구조 선택자(태그 별로 구분)</h2>
<p>특정한 위치에 있는 태그 선택(태그 별로 구분)</p>
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<p><small>테스트6</small></p>
</div>
<br>
<hr>
<style>
#letter>p[id=p2]::first-letter{
font-size: 2em;
}
#letter>p[id=p2]::first-line{
background: aqua;
}
</style>
<div id = "letter">
<h1>문자 선택자</h1>
<p id="p1">태그 내부에서 특정 조건의 문자를 선택하는 선택자</p>
<p id="p2">1.사법부는 최고법원인 대법원과 그 밑의 고등법원, 지방법원, 가정법원, 행정법원, 특허법원 등으로 이뤄져 있다. 대법원장은 국회의 동의를 얻어 대통령이 임명하며, 대법관은 대법원장의 제청을 받아 같은 절차를 거쳐 대통령이 임명한다. 임기는 6년으로 동일하다.</p>
</div>
<br><hr>
<style>
#not>p{
background: orange;
}
#not>p:not(#p3){
background: white;
}
#not>p:not(#p5){
background: white;
}
</style>
<div id = "not">
<h1>부정 선택자</h1>
<p id = "p1">지금까지의 선택자에 대해 반대로 적용하는 선택자</p>
<p id = "p2">테스트1</p>
<p id = "p3">테스트2</p>
<p id = "p4">테스트3</p>
<p id = "p5">테스트4</p>
<p id = "p6">테스트5</p>
</div>
</body>
</html>
'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 13. CSS 스타일 속성 기본(5) 실습 (0) | 2019.09.20 |
|---|---|
| <이공계기술전문연수> 11. CSS 스타일 속성 기본(3) 실습 (0) | 2019.09.20 |
| <이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트) (0) | 2019.09.19 |
| <이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리) (0) | 2019.09.19 |
| <이공계기술전문연수> 8. CSS 선택자 (0) | 2019.09.16 |
