국비 35일차 css 정리
2021. 2. 25. 21:07
2021.02.25 국비교육 35일차
fieldset / legend
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form fieldset, legend 태그 실습</title>
</head>
<body>
<form name="myForm" action="target.html" method="get">
<fieldset>
<legend>로그인</legend>
아이디 : <input type = "text" name = "userid" value = "test"><br>
비밀번호 : <input type = "text" name = "passwd"><br>
<input type = "submit" value = "전송">
<button>전송</button>
<input type = "reset" value = "취소">
</fieldset>
</form>
</body>
</html>CSS
css적용 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" type = "text/css" href = "external.css"> -->외부 파일 불러옴
<style type = "text/css"> --> head에서 적용
.internal{
color : red;
}
</style>
</head>
<body>
<p>hello</p>
<p id = "external"> external style</p>
<p class ="internal">internal style </p>
<p style= "color:blue;"> inline style</p> --> inline에서 적용
</body>
</html>전체 선택자 (*)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전체 선택자 실습</title>
<style type = "text/css">
*{
color : red;
}
</style>
</head>
<body>
<h1> 전체 선택자 실습</h1>
<p>모든 태그의 color 속성에 red를 적용한다.</p>
</body>
</html>태그 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자 실습</title>
<style type="text/css">
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>태그 선택자 실습</h1>
<p>특정 태그의 color 속성에 css를 적용한다.</p>
</body>
</html>아이디 선택자(id)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 선택자 실습</title>
<style type="text/css">
#one {
color: red;
}
#two {
color: blue;
}
</style>
</head>
<body>
<div id="one">
<h1>Hello</h1>
<p>Hello2</p>
<h2>Hello3</h2>
</div>
<div id = "two">
<h1>World</h1>
<p>world2</p>
<h2>wordl3</h2>
</div>
</body>
</html>클래스 선택자(class)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클래스 선택자 실습</title>
<style type="text/css">
.select{
color : red;
}
</style>
</head>
<body>
<ul>
<li class = "select">홍길동</li>
<li>이순신</li>
<li class = "select">유관순</li>
<li>강감찬</li>
</ul>
</body>
</html>자식 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자식 선택자 실습</title>
<style type="text/css">
#one>h1 {
color: red;
}
</style>
</head>
<body>
<div id="one">
<h1>Hello</h1>
<p>Hello2</p>
<div>
<h1>world</h1>
</div>
</div>
</body>
</html>자손선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자손 선택자 실습</title>
<style type="text/css">
#one h1 {
color: red;
}
</style>
</head>
<body>
<div id="one">
<h1>Hello</h1>
<p>Hello2</p>
<div>
<h1>world</h1>
</div>
</div>
</body>
</html>형제 선택자
- tag1 + tag2 : tag1 바로뒤에 있는 tag2까지만 검색
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형제 선택자 실습</title>
<style type="text/css">
h1+h2 { /*인접한 h2까지만 찾음*/
color: red;
}
</style>
</head>
<body>
<h1>홍길동</h1>
<h2>이순신</h2>
<h3>유관순</h3>
<h2>강감찬</h2>
<h2>윤봉길</h2>
</body>
</html>- tag1 ~ tag2 : tag1 뒤에 있는 모든 tag2선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형제 선택자 실습</title>
<style type="text/css">
h1~h2 {
color: red;
}
</style>
</head>
<body>
<h1>홍길동</h1>
<h2>이순신</h2>
<h3>유관순</h3>
<h2>강감찬</h2>
<h2>윤봉길</h2>
</body>
</html>속성 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자 실습</title>
<style type="text/css">
[id] {
color: red;
}
</style>
</head>
<body>
<h1 id = "one">홍길동</h1>
<h2>이순신</h2>
<h3 id="two">유관순</h3>
<h2>강감찬</h2>
<h2>윤봉길</h2>
</body>
</html>- id속성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자 실습</title>
<style type="text/css">
[id = "two"]{ /* 속성 이름을 선택 [속성이름] */
color: red;
}
</style>
</head>
<body>
<h1 id = "one">홍길동</h1>
<h2>이순신</h2>
<h3 id="two">유관순</h3>
<h2>강감찬</h2>
<h2>윤봉길</h2>
</body>
</html>- a태그 -> href 속성 -> https값으로 시작하는 것 찾음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자 실습</title>
<style type="text/css">
a[href^='https' ]{ /* ^ = http로 시작값 검색 */
color: red;
}
</style>
</head>
<body>
<a href="http://naver.com">one</a><br/>
<a href="https://naver.com" target="_blank">two</a><br/>
<a href="https://daum.net">three</a><br/>
<a href="http://daum.net" target="_blank">four</a><br/>
<a href="https://korea.net">five</a><br/>
<a href="http://korea.net" target="_blank">six</a><br/>
</body>
</html>- a태그 -> href 속성 -> net으로 끝나는 값
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자 실습</title>
<style type="text/css">
a[href$='net']{ /* net으로 끝나는 값 */
color: red;
}
</style>
</head>
<body>
<a href="http://naver.com">one</a><br/>
<a href="https://naver.com" target="_blank">two</a><br/>
<a href="https://daum.net">three</a><br/>
<a href="http://daum.net" target="_blank">four</a><br/>
<a href="https://korea.net">five</a><br/>
<a href="http://korea.net" target="_blank">six</a><br/>
</body>
</html>- man값을 포함한 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자 실습</title>
<style type="text/css">
div[class*='man']{ /* man글씨가 포함되어 있는것 */
color: red;
}
</style>
</head>
<body>
<div class = "man-new">man-news</div>
<div class = "milk man">milk man</div>
<div class = "letterman2">letterman2</div>
<div class = "newmilk">newmilk</div>
<div class = "superman">superman</div>
</body>
</html>- 속성 탐색 순서 잘 파악하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자 실습</title>
<style type="text/css">
div[id][class$='man']{ /* man글씨로 끝나는 값 */
color: red;
}
</style>
</head>
<body>
<div id = "one">man-news</div>
<div class = "milk man">milk man</div>
<div class = "letterman2">letterman2</div>
<div class = "newmilk">newmilk</div>
<div id = "two" class = "superman">superman</div>
</body>
</html>- 단어 단위 검색
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자 실습</title>
<style type="text/css">
div[class |='en']{ /* en이 단어로 들어있는 값 */
color: red;
}
</style>
</head>
<body>
<div id = "one">man-news</div>
<div class = "en">milk man</div>
<div class = "kr en">letterman2</div>
<div class = "kr">newmilk</div>
<div id = "two" class = "en-UK">superman</div>
</body>
</html>attr이라는 이름의 특성값이 정확히value인 요소를 선택합니다.attr특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자 실습</title>
<style type="text/css">
div[class ~='en']{
color: red;
}
</style>
</head>
<body>
<div id = "one">man-news</div>
<div class = "en">milk man</div>
<div class = "kr en">letterman2</div>
<div class = "kr">newmilk</div>
<div id = "two" class = "en-UK">superman</div>
</body>
</html>pseudo code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>의사 코드실습</title>
<style type="text/css">
a:link{color:#FF0000;}
a:visited{color:#00FF00;}
a:hover{color:#FF00FF;}
a:active{color:#0000FF}
input:focus{background-color:#FF0000;}
</style>
</head>
<body>
<a href = "#" target = "_blank">This is a link</a><br>
이름<input type = "text" name = "username"><br>
나이<input type = "text" name = "userage"><br>
주소<input type = "text" name = "useraddress"><br>
</body>
</html>first-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>의사 코드실습</title>
<style type="text/css">
/* p:first-child{} : 첫번째 자식으로 된 모든 p 태그를 선택한다. */
p:first-child {
color: red;
}
</style>
</head>
<body>
<p>I am strong man</p> <!-- 선택됨 -->
<p>I am strong man</p>
<div>
<p>div의 첫자식</p> <!-- 선택됨 -->
</div>
</body>
</html>last-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>의사 코드실습</title>
<style type="text/css">
/* 모든 <p>태그중에서 마지막<i>태그지정*/
p > i:last-child {
color: red;
}
</style>
</head>
<body>
<p>I am a <i>Strong</i> man, I am a <i>Strong</i> man</p>
<p>I am a <i>Strong</i> man, I am a <i>Strong</i> man</p>
</body>
</html>only-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>의사 코드실습</title>
<style type="text/css">
/* 유일한 자식으로 된 모든 p태그*/
p:only-child{
color : red;
}
</style>
</head>
<body>
<p>0</p>
<div>
<p>1</p>
</div>
<div>
<p>2</p>
<p>3</p>
</div>
</body>
</html>nth-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>의사 코드실습</title>
<style type="text/css">
/* n번재 자식으로 된 태그*/
p:nth-child(2n){
color : red;
}
</style>
</head>
<body>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</body>
</html>font-size
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font size 연습</title>
<style type="text/css">
#one{
font-size : 100%;
}
#two{
font-size : 200%;
}
#three{
font-size : 1.5em;
}
#four{
font-size : 2em;
}
#five{
font-size : 40px;
}
</style>
</head>
<body>
<div id = "one">홍길동</div>
<div id = "two">이순신</div>
<div id = "three">유관순</div>
<div id = "four">강감찬</div>
<div id = "five">윤봉길</div>
<div class = "six">test</div>
</body>
</html>color
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css color 연습</title>
<style type="text/css">
#one{
color : red;
}
#two{
color : #00ff00;
}
#three{
color : rgb(0,0,255);
}
#four{
color : rgba(0,0,255,0.3) /*r,g,b, 투명도 */
}
</style>
</head>
<body>
<div id = "one">홍길동</div>
<div id = "two">이순신</div>
<div id = "three">유관순</div>
<div id = "four">강감찬</div>
<div id = "five">윤봉길</div>
<div class = "six">test</div>
</body>
</html>h'ETC > 국비교육' 카테고리의 다른 글
| 국비 37일차 CSS(position, overflow, float) + javascript 기초 (0) | 2021.03.02 |
|---|---|
| 국비 36일차 css 정리 2 (0) | 2021.02.26 |
| 국비 34일차 html(colspan, rowspan, ol, li, dl, div, span, form) (0) | 2021.02.24 |
| 국비 33일차 Html (0) | 2021.02.23 |
| 국비 27~32일차 mybatis 정리 (0) | 2021.02.23 |