1) position
HTML 요소를 배치하는 속성
static : position 속성의 기본값, 일반적인 흐름으로 배치된다
relative : 현재 자신의 위치를 기준으로 배치를 변경할 수 있다
top, right, bottom, left 속성을 사용한다
absolute : 일반적인 흐름과 무관하게 배치할 수 있다
static이 아닌 부모요소를 기준으로 배치한다
fixed : 브라우저 화면상으로 보이는 영역(viewport)에 고정되도록 배치한다
sticky : 스크롤이 특정 위치에 도달하면 fixed처럼 화면에 고정된다
부모 요소에 height가 지정되어 있어야만 작동한다
z-index 요소가 배치될 때 겹치는 경우 어떤 요소가 위로 올라올지 순서를 정하는 속성
2) 고급선택자
1. 연결선택자
하위 선택자 상위요소 하위요소 {}
상위 요소에 포함된 모든 하위 요소를 선택한다
자식 선택자 부모요소 > 자식요소 {}
부모요소 바로 아래에 속한 자식 요소를 선택한다
인접형제선택자 요소1 + 요소2
형제 선택자 요소1 ~ 요소2
2. 속성선택자
선택자[속성]
선택자[속성=속성값]
1. 가상선택자
1) 가상 클래스
선택자:가상클래스 {}
실제 존재하는 요소의 특정 상태에 따라 css를 주고 싶을 때 사용
link : href속성을 가진 태그 중 아직 방문하지 않은 상태
visited : 이미 방문한 상태
hover : 사용자가 마우스를 올린 상태
focus : 입력가능한 칸을 선택한 상태
nth-child : 형제 중 순서로 선택함
not(선택자) : 해당 선택자를 제외하고 선택함
2) 가상 요소
선택자::가상요소 {}
요소의 특정 부분에 스타일을 지정하거나 새로운 요소를 삽입하기 위해 사용한다
first-letter : 첫 글자만 선택(블록요소에도 가능)
first-line : 첫 줄만 선택(블록요소에도 가능)
before : 선택한 요소의 컨텐츠 앞에 다른 요소 삽입
after : 선택한 요소의 컨텐츠 뒤에 다른 요소 삽입
2. transform, transition
1) transform
요소의 크기 조절, 이동, 회전 효과를 나타낼 때 사용한다
transform 함수를 사용한다
주의사항 : 요소의 display 속성이 block 또는 inline-block이어야한다
transform 함수
-translate(x, y), translateX(x), translateY(y)
넘겨준 값 만큼 x, y 좌표 이동
-scale(x, y), scaleX(x), scaleY(y)
넘겨준 값만큼 확대, 축소
-rotate(각도deg)
넘겨준 값 만큼 회전
2) transition
단순한 변형을 수행한다
변형에 시간을 설정하여 마치 하나의 애니메이션처럼 표현할 수 있다
transform과 달리 완전히 다른 스타일로 변경시킬 수 있다
transition의 속성
transition-property : all | none | 속성명
트랜지션을 적용할 속성을 설정한다
transition-duration : 시간s
트랜지션의 진행시간을 설정한다
transition-timing-function : 속성값
ease : 천천히 - 점점 빨리 - 천천히 (기본값)
linear : 시작부터 끝까지 같은 속도로
ease-in : 느리게 시작
ease-out : 느리게 끝
ease-in-out : 느리게 시작해서 느리게 끝
transition-delay : 시간s
트랜지션을 바로 시작하지 않고 지연시간을 설정한다
transition : property | duration | timing-function | deley
위의 모든 속성을 간편하게 설정할 수 있다
3. animation
css로 애니메이션 효과를 만들기 위한 속성
transition보다 더 쉽고 상세하게 애니메이션 효과를 설정할 수 있다
animation 속성은 특정 지점에서 스타일을 바꿀 수 있는데 그 지점을 keyframe이라고 한다
keyframe을 미리 만들어두고 적용시키고 싶은 요소에 다양한 속성으로 애니메이션을 적용시킨다
animation의 속성
@keyframes : 특정지점을 설정한다
만들고 싶은 애니메이션 이름을 설정한다
from(시작), to(끝), percent(진행도)를 선택자로 사용한다
@keyframes 키프레임이름{
선택자 { 스타일; }
}
적용시키고 싶은 요소에 사용하는 속성
animation-name : 키프레임 이름
적용시키고 싶은 요소에 애니메이션 효과를 지정한다
미리 만들어둔 키 프레임 이름을 사용하면 된다
animation-duration
애니메이션의 실행 시간을 설정
animation-iteration-count : 반복 횟수 | infinite
애니메이션 반복 횟수 설정
animation-delay
애니메이션 시작시간 설정
animation
애니메이션 속성을 간편하게 설정한다
4. form 태그
<form action="데이터를 처리할 주소" method="get|post">폼요소</form>
1) form 태그는 사용자에게 입력받은 데이터를 서버로 전송하기 위해 작성한다
2) 입력받은 데이터를 폼 데이터, 필드라고 부른다
3) form 태그의 내부 요소 input, textarea, select, option 태그 등을 가질 수 있다
4) 주요 속성값
action : form 태그 내부 요소에 작성된 데이터를 처리할 서버쪽의 파일 주소를 작성한다
method : 서버에 데이터를 넘겨주는 방법을 작성한다
+) http 메소드
get : 리소스 요청
정보를 서버로 요청할 때 사용된다
요청 파라미터는 url의 쿼리스트링(query string)으로 전달되며
검색 결과나 페이지 이동 등에 사용된다
post : 대기 리소스 추가 요청이나 수정/삭제 목적으로 사용한다
서버로 데이터를 제출할 때 사용된다
요청 파라미터는 http 요청 본문(body)에 포함되며 데이터는 숨겨져 전송된다
put : 리소스 수정 요청
delete : 리소스 삭제 요청
options : 웹서버가 지원하는 메소드 종류 반환 요청
trace : 클라이언트(사용자)의 요청을 그대로 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./../../css/day06/test01.css">
</head>
<body>
<main>
<div>
<a href="test01.html" target="_blank">링크1</a>
<a href="aa">링크2</a>
<a href="">링크3</a>
<a href="">링크4</a>
<a href="">링크5</a>
</div>
</main>
</body>
</html>a:link{
color:red;
}
a:visited{
color: black;
}
a:hover{
color: yellow;
}
a:first-child{
font-size: 40px;
font-weight: bold;
}
a:last-child{
font-size: 70px;
}
a:nth-child(3){
font-size: 60px;
}
a:not(a:nth-child(2)){
color: green;
}-가상 선택자 사용연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>selector02</title>
<link rel="stylesheet" href="./../../css/day06/test02.css" >
</head>
<body>
<main>
<ul>
<li>리스트 1</li>
<li>리스트 2</li>
<li>리스트 3</li>
</ul>
<p>이것은 가상요소를 사용한 예제입니다</p>
</main>
</body>
</html>li::first-letter{
color: red;
}
li:last-child::after{
content: "new";
color: white;
background-color: gold;
font-size: 20px;
margin: 0;
padding: 0;
}
p::before{
content:"\2713";
/* \2713 유니코드의 번호, 체크마크 문자를 나타냄 */
}
ul li:nth-child(odd){
background-color: beige;
}-가상 요소 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform01</title>
<link rel="stylesheet" href="./../../css/day06/test03.css">
</head>
<body>
<main>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>
<div class="div4">div 4</div>
<div class="div5">div 5</div>
</main>
</body>
</html>div{
border: 1px solid black;
background-color: antiquewhite;
color: purple;
font-size: 25px;
margin: 10px 0;
width: 100px;
text-align: center;
line-height: 100px;
}
.div1{
transform: translate(30px,30px);
/* 양수는 오른쪾, 아래로 이동/ 음수는 왼쪽 위로 이동
양수와 음수에 따라 위치가 다름 */
}
.div2{
transform: scale(2,0.5);
/* x축을 2배로 확대 , y축을 0.5배 축소 */
}
.div3{
transform: rotate(45deg);
/* 45도 각도로 회전시킴, 음수각도를 사용하면 반대 방향으로 회전 */
}
.div4:hover{
transform:scale(1.5,1.5);
}
.div5:hover{
transform: rotate(-45deg);
}- transform 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./../../css/day06/test04.css">
</head>
<body>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div2">div 3</div>
</body>
</html>* {
margin:0;
padding: 0;
}
main {
background-color: black;
width: 100%;
height: 1000px;
}
div {
border : 1px solid gold;
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 10px auto;
text-align: center;
}
.div1 {
transition-property: width, height;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
}
.div1:hover{
width:200px;
height: 200px;
}
.div2{
transition: all 2s ease-in;
}
.div2:hover{
background-color: red;
width: 300px;
height: 200px;
}
.div3{
transition: all 2s ease-out;
}
.div3:hover{
background-color: blue;
transform: rotate(45deg);
}-보통 hover 을 같이 쓴다.
-transition 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
main{
background-color: gray;
width: 100%;
height: 1000px;
display: flex;
justify-content: center;
align-items: center;
}
div{
height: 100px;
width: 100px;
border: 1px solid red;
background-color: black;
margin: 10px auto;
color: white;
text-align: center;
line-height: 100px;
font-size: 20px;
animation-duration: 2s;
/* 애니메이션 지속 시간을 2초로 설정 */
animation-timing-function: ease-in-out;
/* 애니메이션 타이밍 함수 설정 */
animation-iteration-count: infinite;
/* 무한반복 */
animation-direction: alternate;
/* 번갈아가며 반복 */
}
.div1{
animation-name: slidein;
}
.div2{
animation-name: rotate;
}
/* sildein 애니메이션 정의 */
@keyframes slidein{
0%{
transform: translateX(-200px);
}
100%{
transform: translateX(0);
}
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<main>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
</main>
</body>
</html>-animation 연습
-keyframes 이름 form{ 선택자 : };to{ 선택자 : };
-animation-name : keyframes 이름
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<form action="">
<div>id : <input type="text" placeholder="id를 입력하세요"></div>
<div>pw : <input type="password"></div>
<div>date:<input type="date"></div>
<div><input type="submit" value="완료"></div>
<!--submit 버튼을 누르면 form 에 있는 모든 데이터를 action속성의 url 로 전송한다.-->
<div><input type="reset"></div>
<div><input type="file"></div>
<div><input type="hidden" name="test" value="test"></div>
<div><div>radio</div>
<!--radio 버튼은 name 속성을 같은 값으로 지정해야만 하나만 선택하게 할 수 있다.
checked는 페이지 진입시 기본으로 선택된다.
value 는 서버에 데이터 전송시 실질적으로 보내지는 값이다.-->
선택1<input type="radio" value="1" name="radio1" checked>
선택2<input type="radio" value="2" name="radio1">
선택3<input type="radio" value="3" name="radio3">
</div>
<div>check box:</div>
선택1<input type="checkbox" value="1" name="check1" checked>
선택2<input type="checkbox" value="2" name="check1">
선택3<input type="checkbox" value="3" name="check1">
선택4<input type="checkbox" value="4" name="check1">
</form>
</main>
</body>
</html>-form 태그 연습
-type = "hidden" 은 태그를 숨겨준다.
-checkbox = 중복선택 가능
-radio = 여러 값중에서 하나만 선택( name 값이 다르면 다중선택 가능)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>사용자 정보</legend>
<label for="name">이름:</label>
<input type="text" id="name">
</fieldset>
</form>
</body>
</html>-fieldset 테투리 안
-legend : fieldset 제목
-label : 이름
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>form-input02</title>
<style>
li {
margin: 10px 0;
}
#id {
width: 200px;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for="name">이름 : </label>
<input type="text" id="name" />
</li>
<li>
<label for="id">id : </label>
<input type="text" id="id" placeholder="id는 영문, 숫자로 5글자 이상 작성" />
</li>
<li>
<label for="pw">pw : </label>
<input type="password" id="pw" required />
</li>
<li>
<label for="read">
<input type="text" id="read" value="readonly" readonly disabled />
</label>
</li>
</ul>
<input type="submit" value="보낸다~~" />
</fieldset>
</form>
</body>
</html>- placeholder : 입력전 뜨는 안내문구
- required : 서버에 제출되기전 반드시 채워져 있어야 하는 필드를 뜻함
- value : 페이지에 제출되는 속성값
'웹개발 기초 > html_css' 카테고리의 다른 글
| css 마무리 실습 (1) | 2024.03.06 |
|---|---|
| 반응형웹, 미디어쿼리 (0) | 2024.02.13 |
| position , 고급선택자 (2) | 2024.02.12 |
| display: flex (0) | 2024.02.12 |
| css 인라인 ,블록요소 ,박스모델 (0) | 2024.02.12 |