728x90
목차
005
transform
- transform: translate(50px, 100px);
- transform: translate(x축, y축)
- 해당 태그의 위치를 이동시켜준다.
- transform : translateX(100px);
- transform: translateX(x축의 값);
- y축은 없고 x축만 입력한 상태. 따라서 x축만 이동
- transform: scale(2,2)
- 크기를 조절할 수 있다.
- 0.5가 태그의 50% 크기이다.
- transform: rotate(125deg)
- 태그를 회전 시켜준다.
- 값은 각도로 입력한다. (45deg = 45도)
- 스타일 값이 변하면서 효과를 주는 방법
.box_5 img{
transition: transform 3s linear, border 1s ease-in-out, border-radius 1s ease-in-out;
/*스타일 값이 변하면서 효과를 줄 수 있다.
transition에 대해서 변화하는 시간 변화의 방법을 설정할 수 있다.
transform 3s: transform 속성이 3초간 변화 (태그가 돌아가는 것)
border 1s: border 값이 1초 동안 변화 (테두리가 생기는 것)
border-radius 1s: 값이 1초 동안 변화 (둥글게 모서리가 깎임)*/
}
- animation
.box_5 img{
/*animation: keyframes의 이름, 시간, 변화 방법*/
animation: ani0 1s ease;
width: 300px;
height: 300px;
}
- hover 기능 시 적용
.box_5:hover img{
/*마우스가 태그에 올려졌을 때*/
transform: rotate(720deg);
border: 10px solid red;
border-radius: 50%;
}
@keyframes
- css에서 애니메이션을 작성할 때 사용한다.
- @keyframes 뒤에 작성된 내용은 애니메이션의 이름이다.
작성방법
- 애니메이션 동작코드_HTML
@keyframes ani0 {
0%{
/*전체 동작 중 0~50%까지의 동작 내용을 입력한다.*/
transform: rotate(0);
}
50%{
/*전체 동작 중 50일때의 동작 내용을 입력한다.*/
transform: rotate(360deg);
}
100%{
/*전체 동작 중 50~100%까지의 동작 내용을 입력한다.*/
transform: rotate(0);
}
- 애니메이션 적용코드_CSS
.box_5 img{
/*animation: keyframes의 이름, 시간, 변화 방법*/
animation: ani0 1s ease;
width: 300px;
height: 300px;
}
@media
- media query: 브라우저 환경에 따라 css를 적용 시킨다.
- @media only(이곳에서만) screen(화면일 때) and(조건) {css스타일 작성}
- @media only screen and (max-width: 1000px);
@media only screen and (max-width: 1000px) {
/*화면 1000px까지 스타일이 적용된다.*/
/*여기에 css스타일 작성을 똑같이 해주면 된다.*/
.box {
width: 500px;
height: 500px;
border: 1px solid;
background-color: aquamarine;
}
}
- @media only screen and (min-width: 500px);
@media only screen and (min-width: 500px) {
/*너비가 500px 이상*/
.box{
width: 500px;
height: 500px;
border: 1px solid;
background-color: blueviolet;
}
}
- 1000px까지는 ’@media only screen and (max-width: 1000px);’속성을 가지고, 500px이상에서는 ‘@media only screen and (min-width: 500px);’의 속을 가진다.
css형제 선택자 ‘+’, ‘~’
css 인접 형제 선택자 ‘+’
- ‘a+b{ …’ : a와 b가 같은 계층에 있을 때 a 바로 뒤에 위치한 b를 선택자로 지정한다.
<!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>Document</title>
<link rel="stylesheet" href="./230306_4.css">
<style>
p+a{
color: red;
}
</style>
</head>
<body>
<p></p>
<a href="">나는 레드</a> /* p태그 바로 뒤에 위치하므로 style속성이 적용된다.*/
<div></div>
<a href="">나는 블루</a> /* p태그 바로 뒤에 위치하지 않으므로 style속성이 적용되지 않는다. */
</body>
</html>
css 일반 형제 선택자 ‘~’
- ‘a~b{ …’: a와 b가 같은 계층에 있을 때 인접해 있지 않아도 a뒤에 있는 모든 b를 선택자로 지정한다.
<!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>Document</title>
<link rel="stylesheet" href="./230306_4.css">
<style>
p~a{
olor: blueviolet;
}
</style>
</head>
<body>
<p></p>
<div></div>
<a href="">나는 레드</a> /*p태그와 인접해있지는 않지만 뒤에 위치하므로 style속성이 적용된다.*/
</body>
</html>
css 자식 결합자 ‘>’
- 첫 번째 요소의 바로 아래 자식 노드를 선택한다.
- 구문: A > B
예제: ul > li 는 <ul>요소 바로 아래에 위치하는 모든 <li>요소와 일치
input_radio 속성
<div class="tab-menu">
<!-- checked: input에 체크 속성을 줄 때-->
<!-- tab01 id를 가지고 있는 input과 label for 속성에 tab01을 입력하여 연결-->
<!-- for 속성으로 연결된 label을 클릭하면
id로 for에 연결된 체크박스가 클릭이 된다.-->
<input class="tab01" type="radio" id="tab01" name="tabmenu" checked>
<label for="tab01">탭 1</label>
<input class="tab02" type="radio" id="tab02" name="tabmenu">
<label for="tab02">탭 2</label>
<input class="tab03" type="radio" id="tab03" name="tabmenu">
<label for="tab03">탭 3</label>
<!-- box 클래스도 가지고 있고 item(1,2,3)클래스도 가지고 있다.-->
<div class="box item1">1번 박스</div>
<div class="box item2">2번 박스</div>
<div class="box item3">3번 박스</div>
<div class="text-box">
<input type="text">
</div>
</div>
css
- input 기본 노출설정
.tab-menu > input + label {
display: inline-block;
padding: 30px;
background-color: gray;
color: white;
font-size: 14px;
/*마우스를 올렸을 때 보여줄 커서를 설정할 수 있다.*/
cursor: pointer;
}
- input 선택된 항목 노출설정
.tab-menu > input:checked + label {
background: #157;
color: antiquewhite;
}
- 선택되면 노출 될 영역설정
.box{
width: 500px;
height: 600px;
background-color: #291;
margin: 0 auto;
display: none;
}
/*input 태그 중 class가 tab01이고 checked 속성이
있고 형제요소 중 밑에 있는 태그 중에 item01클래스를
가지고 있는 태그*/
input[class="tab01"]:checked ~ .item1{
color: white;
display: block;
}
input[class="tab02"]:checked ~ .item2{
color: white;
display: block;
}
input[class="tab03"]:checked ~ .item3{
color: white;
display: block;
}
- 검색창 만들기 + 백그라운드 이미지 입히기
.text-box::before{
position: absolute;
top: 7px;
left: 184px;
background-size: 12px;
width: 50px;
height: 50px;
background-repeat: no-repeat;
display: block;
content: "";
background-image: url("https://img.megabox.co.kr/static/pc/images/common/btn/btn-search-input.png");
}
.text-box{
position: relative;
}
.text-box input{
padding-right: 24px;
}
font 설정
- @font-face: 웹 폰트 사용.
- font-family: 사용할 폰트의 이름을 정해준다.
- scr: url(사용할 폰트 파일의 경로를 적어준다.)
css
@font-face{
font-family: 'flower';
src: url(./Gamja_Flower/GamjaFlower-Regular.ttf) format('truetype');
}
body {
font-family: 'flower';
}
👩💻중간실습_media 활용하기
실습내용
- 화면 1200까지는 테두리가 빨간색
- 600이하는 테두리 파란색
- 1200이상은 테두리 초록색
- div 태그 하나 만들어서 이미지가 돌아가는 애니메이션 만들기
결과물
html
<!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>중간 실습</title>
<link rel="stylesheet" href="./230306_중간실습.css">
</head>
<body>
<div class="box">
<img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn.crowdpic.net%2Fdetail-thumb%2Fthumb_d_D9CBEBBC9FD767A939F18C449B6D1675.png&type=a340" alt="개구리 이미지">
</div>
</body>
</html>
CSS
@media only screen and (max-width:600px){
.box {
width: 400px;
height: 400px;
border: 6px solid blue;
}
}
@media only screen and (max-width: 1200px) and (min-width: 600px) {
.box {
width: 400px;
height: 400px;
border: 6px solid red;
}
}
@media only screen and (min-width: 1200px) {
.box {
width: 400px;
height: 400px;
border: 6px solid green;
}
}
.box{
position: relative;
width: 400px;
height: 400px;
}
.box img{
position: absolute;
top: 45px;
left: 53px;
transform: rotate(360deg);
width: 300px;
height: 300px;
border-radius: 50%;
transition: transform 3s linear, border-radius 1s ease-in-out;
}
728x90
'블록체인_9기 > ❤️ HTML & CSS' 카테고리의 다른 글
4강_230303_html 태그 및 속성(video, audio, iframe, form, lable, position, background 등) (1) | 2023.03.14 |
---|---|
3강_230302_html (style속성) (1) | 2023.03.14 |
2강_230228_html의 태그, table (ol, ul, li, a, img, table, style 속성) (1) | 2023.03.13 |
1강_230227_html의 기초(h1~6, p, br, div, span) (1) | 2023.03.13 |