본문 바로가기
블록체인_9기/❤️ HTML & CSS

5강_230306_html (transform, @keyframes, @media, input, +, ~, >, 폰트설정)

weeji 2023. 3. 14.
728x90

 

 

 

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

'블록체인_9기/❤️ HTML & CSS' 관련글

티스토리툴바