HTML & CSS 3일차.
2021. 9. 16. 15:27ㆍFront End
CSS 선택자 정리
:nth-child(N)= 부모안에 모든 요소 중 N번째 요소A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소:first-child= 부모안에 모든 요소 중 첫번째 요소:last-child= 부모안에 모든 요소 중 마지막 요소A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소A:last-of-type= 부모안에 A라는 요소 중 마지막 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
</head>
<body>
<span></span> %
<!-- 빨 노 녹 -->
<p>적정값이 high 보다 높을때,</p>
<meter low="40" high="60" optimum="70" min="0" max="100"></meter>
<!-- 40미만 빨강, 40부터 노랑, 60부터 초록 -->
<p>적정값이 low 와 high 사이일때,</p>
<meter low="40" high="60" optimum="50" min="0" max="100"></meter>
<!-- 40미만 노랑, 40부터 녹색, 60부터 노랑 -->
<p>적정값이 low 보다 낮을때,</p>
<meter low="40" high="60" optimum="30" min="0" max="100"></meter>
<!-- 40미만 녹색, 40부터 노랑, 60부터 빨강 -->
<!--
적정 값 표시, 색상으로 정도 표시.
빨강 경고
노랑 위험
녹색 안정
노랑 위험
빨강 경고
3개 모드를 적절히 색상으로 표시하고자 함.
-->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
var jumsu = 0;/* 공통 변수 */
function increment() {
if (jumsu == 100)
jumsu = 0;
console.log(jumsu = jumsu + 1);
var m = $("meter");
m.val(jumsu);
var p = $("span");
p.text(jumsu);
}
setInterval(increment, 100);
/* setInterval(함수명,밀리세크), 주어진 밀리세크 마다 함수를 반복 호출.
*/
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
h4:first-child { /* 첫번째 태그의 텍스트 색상 */
color: blue;
font-size: 20px;
}
h4:last-child { /* 마지막 태그의 텍스트 색상 */
color: red;
font-size: 20px;
}
h4:nth-child(2n+1) { /* 홀수 태그, 1번째(+1) 요소부터 1개씩 건너뛰며(2n) 선택 */
background-color: green;
}
h4:nth-last-child(2n) { /* 짝수 태그, 0번째 요소부터 1개씩 건너뛰며 선택. */
background-color: yellow;
}
</style>
</head>
<body>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
</body>선택자 예제.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
div {
color: white;
}
h2:first-letter {
font-size: 30px;
color: red;
text-transform: uppercase;
/*
capitalize : 첫글자만 대문자 처리
uppercase : 모두 대문자 처리
initial : 기본값
inherit : 부모 속성을 상속.
none : 지정 속성 없음.
*/
}
/* 해당 태그에 줄바꿈이 있을때, 첫째 줄 요소에만 속성을 적용. */
h3:first-line {
color: blue;
}
/* 입력창에 마우스 커서가 깜빡 거리는 상태. */
input:focus {
background-color: red;
}
/* input 태그에 선택이 되고, 그 (+)형제로(같은 수준) div 태그에 클래스 d1인 요소에
스타일 적용. */
input:checked+div.d1 {
background-color: gray;
}
input:checked+div.d2 {
background-color: black;
}
</style>
</head>
<body>
<h2>states pseudo-classes</h2>
<h3>
대한민국의 수도는<br /> 대한민국의 수도는<br /> 대한민국의 수도는<br />
대한민국의 수도는
</h3>
<p>
정답 작성 : <input type="text">
</p>
<h2>answer</h2>
힌트 보기 :
<input type="checkbox">
<div class="d1">남대문이 있는 곳이죠.</div>
정답 보기 :
<input type="checkbox">
<div class="d2">서울</div>
</body><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
/* 띄어쓰기 구분은 자식들 모두다 가르킴.*/
div ul {
color: red;
}
div h2 {
color: yellow;
background-color: purple;
}
</style>
</head>
<body>
<div>
<h2>Descendant Selector_1</h2>
<ul>
후손 선택자
<li>자식의 자식 (후손1)</li>
<!-- ul에 속성을 li가 상속받은 상황. -->
<li>자식의 자식 (후손2)</li>
</ul>
</div>
<h2>Descendant Selector_2</h2>
</body>자식 선택자 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
/* 자식들 모두다 지정(자손) */
body>div>h3 {
/* > 로 표현하면 직계 자식만 가르킴.
1대가 아버지라면 2대만 가르키는 형태.
띄어쓰기로 구분하는 경우,
자식들 모두다 가르킴. */
color: red;
}
body>p {
color: green;
background-color: yellow;
}
body>h3>tel>home {
color: blue;
}
</style>
</head>
<body>
<div>body div h3
<h3>Child Selector_1</h3>
<div>
<h3>Child Selector_2</h3>
<div>
<h3>Child Selector_3</h3>
</div>
</div>
</div>
<p>자식 선택자</p>
<h3>
<sno>123456</sno>
<br>
<std>홍민성</std>
<br>
<tel> <office>02-4567-1010</office> <br>
<home>010-1234-5678</home> </tel>
</h3>
</body>직계자식 선택자 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
/* 인접 형제, 인접 사촌 지정 선택자 */
h1 + h2 + ul { color: blue; }
div + h3 { color: red; }
h3 + p { color: purple; background-color: yellow; }
</style>
</head>
<body>
<div>
<h1>인접 형제 선택자1</h1>
<h2>인접 형제 선택자2</h2>
<ul>목록
<li>주제1</li>
<li>주제2</li>
</ul>
</div>
<h3>Adjacent Selector_1</h3>
<p>인접 형제 선택자에 의한 스타일 적용</p>
<h3>Adjacent Selector_2</h3>
</body>형제 선택자 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
/* 쉼표 구분 조합 선택자
몇개의 태그에 공통 스타일을 주고자 할때, 나열하는 식 */
h3, p, h2 {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Group Selector_1</h2>
<p>스타일 지정을 그룹으로 적용</p>
<div>
<h3>Group Selector_2</h3>
</div>
</body>조합 선택자 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
div {
background-color: yellow;
width: 300px;
padding: 25px;
border: 15px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<p>CSS3 박스 모델은 content, padding, border, margin으로 구성되어 있다.</p>
<div>박스 모델의 padding, border, margin 속성의 기본 값은 0이며, 상하좌우 네
가지 방향을
top, bottom, left, right를 이용하여 지정할 수 있습니다.</div>
</body>박스모델 이해
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
p {
background-color: yellow;
color: red;
font-weight: bold;
font-size: 16pt;
/* 너비나 높이를 지정하지 않는다면, 너비는 100% 사용하고, 높이는 컨텐츠 만큼만
이용. */
}
p.c1 {
width: 700px;
height: 80px;
color: green;
}
p.c2 {
width: 50%;
height: 150%;
color: purple;
}
p.c3 {
width: 10cm;
height: 3cm;
color: blue;
}
</style>
</head>
<body>
<p>박스 모델의 내용 영역 크기 지정</p>
<p class="c1">(1) 박스 모델의 크기를 픽셀(px) 단위로 지정</p>
<p class="c2">(2) 박스 모델의 크기를 퍼센트(%) 단위로 지정</p>
<p class="c3">(3) 박스 모델의 크기를 센티미터(cm) 단위로 지정</p>
</body>박스모델 높이와 너비 변경 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
body {
font-weight: bold;
font-size: 16pt;
}
.mp1 {
background-color: aqua;
color: red;
margin-bottom: 40px;
padding-left: 50px;
}
.mp2 {
background-color: silver;
color: green;
margin: 20px;
padding: 10px 20px;/* 값의 구분을 쉼표로 하면 오동작, 띄어쓰기로 구분. */
}
.mp3 {
background-color: gray;
color: purple;
margin: 50px 15px 20px;
padding: 20px;
}
</style>
</head>
<body style="background-color: lightyellow;">
<p>박스 모델의 네 방향 여백 지정</p>
<p class="mp1">mp1</p>
<p class="mp2">mp2</p>
<p class="mp3">mp3</p>
</body>마진,패딩 이해
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.br1 {
background-color: lime;
color: red;
border-style: solid;/* 직선 */
border-width: thick;/* 조금 굵은 선 */
border-color: green;/* 선색 */
border-radius: 10%;/* 4개 모서리 공통 */
}
.br2 {
background-color: maroon;
color: yellow;
border-style: dotted;
border-width: 2px;
border-color: white;
border-radius: 15px 35px;
}
.br3 {
background-color: teal;
color: aqua;
border-style: dashed;
border-width: 5px;
border-color: red;
border-radius: 5px 15px 25px 35px;
/* 좌측 상단에서 시작해서 시계 방향으로 지정 */
}
.br4 {
border: 3px solid red;
border-top-left-radius: 30px;
}
</style>
</head>
<body>
<h1 class="br1">둥근 모서리 스타일링 예제 1</h1>
<h1 class="br2">둥근 모서리 스타일링 예제 2</h1>
<h1 class="br3">둥근 모서리 스타일링 예제 3</h1>
<h1 class="br4">둥근 모서리 스타일링 예제 4</h1>
</body>블록 모서리 곡선 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.boxshadow1 {
background-color: yellow;
border: 5px solid blue;
box-shadow: 10px 10px 0px teal;
/* 수평 수직 흐림효과 색상 */
}
.boxshadow2 {
background-color: orange;
border: 5px solid red;
box-shadow: 20px 20px 50px red;
}
.boxshadow3 {
background-color: silver;
border: 5px solid black;
box-shadow: 20px 20px 30px -20px maroon;
/* 수평 수직 흐림효과 번짐효과 색상 */
}
.boxshadow4 {
background-color: lime;
border: 5px solid olive;
box-shadow: 10px 10px 0px 10px fuchsia inset;
/* 수평 수직 흐림효과 번짐효과 색상 inset효과*/
}
</style>
</head>
<body>
<h1 class="boxshadow1">박스 그림자 스타일링 예제 1</h1>
<h1 class="boxshadow2">박스 그림자 스타일링 예제 2</h1>
<h1 class="boxshadow3">박스 그림자 스타일링 예제 3</h1>
<h1 class="boxshadow4">박스 그림자 스타일링 예제 4</h1>
</body><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
div {
width: 200px;
height: 50px;
padding: 10px;
margin: 30px;
}
#bs1 {
border: 1px solid #ff8000;/* 0.1흐리게 1.0선명하게 */
box-shadow: 0px 0px 20px 10px rgba(102,186,255,0.4);
}
#bs2 {
border: 1px solid black;
box-shadow: 10px 10px #BCE55C, 20px 20px #CEF279, 30px 30px #E4F7BA;
/* 쉼표로 구분하면서 그림자 여러개 생성. */
}
</style>
</head>
<body>
<div id="bs1">
<h3>박스 그림자 특수 효과1</h3>
</div>
<div id="bs2">
<h3>박스 그림자 특수 효과2</h3>
</div>
</body>그림자 예제 1,2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.ap1 {
position: absolute;
left: 30px;
top: 70px;
/* 브라우저의 좌측 상단을 0,0으로 보면서 요소의 위치 지정. */
background-color: yellow;
width: 400px;
height: 50px;
}
.ap2 {
position: absolute;
left: 40px;
top: 90px;
background-color: lightgreen;
width: 400px;
height: 50px;
}
.rp {
position: relative;
/* 상대위치는 앞의 절대위치 요소에 영향 받지 않음. */
left: 0px;
top: 0px;
background-color: cyan;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style3</h1>
<!-- <div class="ap1">절대 위치 설정 적용 - left 30px, top 70px</div>
<div class="ap2">절대 위치 설정 적용 - left 40px, top 90px</div> -->
<div class="rp">상대 위치 설정 적용 - left 50px, top 80px</div>
</body>박스모델 절대, 상대배치 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
img {
float: right;
margin: 0 0 10px 10px;
}
</style>
</head>
<body>
<p>float 속성은 웹 문서의 레이아웃을 설계하는 과정에서 많이 사용하는
속성입니다.</p>
<p>
<img src="pic1.jpg" alt="image" width="140" height="140">
float
속성은 특정 요소를 떠 있게 해줍니다. 여기서 '떠 있다'라는 말의 의미는
특정 요소가 기본 레이아웃에서 벗어나 웹 문서의
왼쪽이나 오른쪽에 이동하는 것을 말합니다. float 속성은 복잡한 형태의
레이아웃을 구성하는 데 필요한 핵 심 속성으로,
특정 요소가 주변 요소와 자연스럽게 어울리도록 해줍니다. 주의할 점은 float
속성을 사용할 때 요소의 위치가 고정되면 안
되기 때문에 position 속성의 absolute를 사용하면 안 됩니다.
<img src="button.jpg" alt="image" width="140" height="140">
</p>
</body>float 모델 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 연습</title>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4 {
border: 1px solid red;
clear: left;/* float 속성의 제거. */
}
</style>
</head>
<body>
<h2>float 속성 사용</h2>
<div class="div1">div1</div>
<div class="div2">div2 - float 속성을 사용하여 대상 요소를 웹 문서에 배치하면
그 다음
요소에도 똑같은 속성이 적 용됩니다. 하지만 float 속성이 사용되는 것을
원하지 않을 때도 있습니다. 이때 clear
속성을 사용합니다. 다양한 레이 아웃 설계할 때에는 float 속성과 clear
속성을 적절히 잘 사용해야 합니다.</div>
<h2>clear 속성 사용</h2>
<div class="div3">div3</div>
<div class="div4">div4 - clear 속성은 float 속성이 적용되는 것을 원하지 않는
요소에
사용하여 float 속성을 초기화 시킵니다. float: left;를 사용했다면 clear:
left;로, float:
right;를 사용했다면 clear: right;로 초기화합니다. float 속성 값이 left
인지 right 인지 상관없이
무조건 초기화하고 싶다면 clear: both;를 사용합니다. 보통 clear: both;를
많이 사용합니다.</div>
</body>float 모델 제거 예제
'Front End' 카테고리의 다른 글
| JavaScript 2. (0) | 2021.09.23 |
|---|---|
| Java Script 실습 예제 (0) | 2021.09.23 |
| JavaScript 1. (0) | 2021.09.16 |
| HTML & CSS 2일차. (0) | 2021.09.15 |
| HTML & CSS 1일차. (0) | 2021.09.14 |