230306 day5

transform 태그

transform: translate 속성: 해당 위치로 이동 시켜준다.

transform: translate(150px, 100px); ->(x축,y축)
transform: translateX(100px); -> x축으로만 이동
transform: translateY(100px); -> y축으로만 이동

transform: scale 속성: 크기 조절

transform: scale(1);
    /*1이 기본 크기고 크기를 조절할 수 있다. 0.5가 50%의 크기*/
    /*두 값을 입력하면 x,y크기를 조절 가능하다.*/

transform: rotate 속성 : 회전 시켜주는 속성

transform: rotate(45deg); -> 오른쪽으로 45도 회전

css에서 애니메이션을 작성할 때 사용/ @keyframes 뒤에 애니메이션 이름

@keyframes ani {
    0%{ /*전체 동작중 0~50% 까지의 내용*/
        transform: rotate(0);
    }
    50%{/*전체 동작중에 50%일 때*/
        transform: rotate(360deg);
    }
    100%{ /*전체 동작하면서 50% ~100%까지*/
        transform: rotate(0);
    }
}

transition 속성 :스타일 값이 변화하면서 효과를 줄 수 있다.

transition: transform 3s linear, border 1s ease-in-out, border-radius 1s ease-in-out;

transform 속성은 3초 등속, 테두리 속성이 바뀌는데 1초, 둥글게 깎이는데 1초 / ease-in-out :천천-보통-천천

.box6{
position: relative;
}

.box6 img{
    position: absolute;
    /*상 50% 좌 50% 태그 이동시키고*/
    top  :50%;
    left :50%;

    /*태그의 반지름 만큼 좌로 50% 이동, 위로 50%이동 */
    transform: translate(-50%,-50%);
    /* 
     width: 200px;
     height: 200px; */
}

-> box6에 정가운데에 위치하기
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
@media only screen and (조건) / 브라우저 환경에 따라 css를 적용
-> 이 화면에서만 조건 수행

@media only screen and (max-width : 1200px) { 
    .box{
        width: 300px;
        height: 300px;
        border :5px solid red;
    }
}

@media only screen and (min-width : 1200px){
    .box{
        width: 300px;
        height: 300px;
        border :5px solid green;
    }
}

@media only screen and (max-width : 600px) {
    .box{
        width: 300px;
        height: 300px;
        border :5px solid blue
        
    }
}

@keyframes ani {
    0%{ /*전체 동작중 0~50% 까지의 내용*/
        transform:translate(-50%,-50%) rotate(0);
    }
    100%{ /*전체 동작하면서 50% ~100%까지*/
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

.box{
    position: relative;
}

.box img{
    
    position: absolute;
    top  :50%;
    left :50%;

    transform: translate(-50%,-50%);
    width: 200px;
     height: 200px;

    animation: ani 2s infinite normal linear;
}

600px 까지는 blue, 600 ~ 1200px 사이는 red, 1200px 이후 green
으로 테두리 색상이 바뀌고, 박스 정가운데에서 2초에 한바퀴 회전하는 이미지
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
폰트 적용하는 방법

/* 폰트 파일을 다운받고
    @font-face 작성한다.
    @font-face{
        font-family : 사용할 폰트의 이름을 정해준다.
        src:url('사용할 폰트 파일의 경로를 적어준다.')

    }
*/
@font-face{
    font-family: 'noto';
    src: url('./Noto_Sans_KR/NotoSansKR-Black.otf') format('truetype');    
}
body {
    font-family: 'noto';
}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<div class="tab_menu">
        <!-- checkded 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 클래스도 가지고 있고 각 item1,2,3의 클래스를 가지고 있어 총 2개를 가지고 있다. -->
        <div class="box item1">1번 박스</div>
        <div class="box item2">2번 박스</div>
        <div class="box item3">3번 박스</div>

  
    </div>      

.tab_menu input{/*선택 버튼 사라지게함*/
    display: none;
}

/*tab_menu 클래스에 input 태그에 인접하는 label 태그에 스타일 부여한다는 뜻*/
.tab_menu input + label{
    display: inline-block;
    padding : 10px;
    background-color: gray;
    color: white;
    font-size: 14px;
    
    /* 마우스를 올렸을 때 보여줄 커서를 설정할 수 있다.*/
    cursor: pointer;
}

/*tab_menu 클래스에 checked가 있는 input 태그에 인접한 label 태그에 스타일을 적용시키겠다*/
.tab_menu input:checked + label{
    background : #222;
    color: bisque;
}

.box{ display :none;} 속성을 부여해야지 1,2,3번 박스가 전부 표시 되지않고 선택된 1번 박스만 표시된다.

/*input 태그 중 class 이름이 tab01에 체크되었다면 그 아래로 .item1 클래스를 찾아
  해당 스타일을 적용시킨다, 같은 div 안에서 찾을 수 있다.*/
input[class="tab01"]:checked ~ .item1{
    display: block;
    color: white;
}

.textbox::before{
    position: absolute;
    top : 6px;
    left: 184px;

    content: "";
    background-image: url("돋보기 사진 주소");

    width: 12px; 
    height: 12px;
    background-size: 12px; /*사진 넓이, 높이, 크기*/
    background-repeat: no-repeat;
    display: block;

}

.textbox{
    position: relative;
}

.textbox input{
    padding-right: 26px; /*input 태그인 textbox 오른쪽 여백을
    줘서 돋보기 까지 글자가 침범하지 않게 한다.*/
}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
line-height: 40px; -> 세로 정렬 (px는 높이와 같게)

overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
-> 텍스트가 넓이 초과 시 ...로 처리

border-color: blueviolet blueviolet white blueviolet;
-> border 테두리 색상을 위 / 오른 / 아래 / 왼 따로 지정 가능