Media Query(Responsive web[반응형 웹])

🔴 반응형 웹을 만들기 위해서는 우선 html코드의 meta코드에

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

위의 코드를 선언해 주어야 한다.

🟠 그 후 CSS코드에

@media screen and (min-width : 768px) and (max-width : 991px){
/* CSS코드 작성 최소 768px이상 최대 991px이하일 경우 
여기에 쓰여진 CSS코드가 적용됨*/ } 

이와 같이 작성해 주면 된다.

🟡 vh(viewport height)

.box{
width: 100%;
height: 100vh; // 100vh는 viewport height의 100%를 차지한다는 것이다.
}

📌 반응형 웹을 만들때는 작은 크기의 모바일부터 시작하여 확장공사를 하듯 점점 큰 Desktop을 만드는 순서로 하면된다.

Typography 1

🔑 Typography - 텍스트를 예쁘게 디자인 하는것

px - 절대단위(Absolute unit)
em, rem - 상대단위(Relative unit)

em = equalto capitalM(1em = 실제로 적용된 폰트 사이즈)
rem = rootem(1rem = html에 적용된 폰트 사이즈)

🔴 font-size - 글자 크기 바꾸는 속성(px 주로 사용)
ex) font-size : 10px;

🟠 line-height - 줄 간격 바꾸는 속성(em 주로 사용)
ex) line-height : 1.5; (em은 생략 가능)

⭐ 글자는 줄간격의 가장 가운데에 배치된다. ⭐

🟡 letter-spacing - 글자 간격 바꾸는 속성(em 주로 사용)
letter-spacing : -.03em; (em 생략 불가능)

🟢 font-family - 글자 폰트 바꾸는 속성
font-family : "Poppins", sans-serif; // Poppins 폰트를 적용하는데 없으면 sans-serif를 적용한다는 의미

🔵 font-weight - 글자 굵기 바꾸는 속성
font-weight : 400;

Thin - 100
Thin Italic
Light - 300
Light Italic
Regular - 400
Regular Italic
Medium - 500
Medium Italic
Bold - 700
Bold Italic
Black - 900
Black Italic

🟣 color - 글자 색상 바꾸는 속성
hex - ex)#0066ff
rgb - ex)rgb(0, 102, 255)
rgba - ex)rgba(0, 102, 255, 1)
rgba의 a는 투명도(alpha)를 나타내며 '1 = 불투명, 0 = 투명' 을 의미한다
color : hotpink;

Typography 2

🔴 text-align - 글을 정렬할때 사용하는 속성
text-align : right; // left/right/center 사용가능

🟠 text-indent - 글자를 들여쓰기 할때 사용하는 속성
text-indent : 10px;

🟡 text-transform - 영문자를 소문자나 대문자로 바꿀때 사용
text-transform : capitalize; // none/capitalize/uppercase/lowercase

🟢 text-decoration - 글자에 줄 그을때 사용하는 속성
text-decoration : underline; // none/underline/line-through/overline

🔵 font-style - 글자 기울기를 줄 때 사용하는 속성
font-style : italic; // normal/italic/oblique

Webfont 사용법

✨ 직접 font-face 선언방법
ex)

@font-face{
    font-family : "pretty";
    font-style : normal;
    font-weight : 400;
    src : url('~');
    src : url('~') format('~'),
          url('~') format('~'),
          ~
          url('~') format('~');

⭐ font 적용방법

1. html에 link태그로 선언
2. css파일에 @import url("~");로 선언

Background

🔴 background-color - 배경 색깔 지정하는 속성

background-color : #0066ff; // hex/rgb/rgba 등이 올 수 있다

🟠 background-image - 배경으로 이미지 지정하는 속성

background-image : url("~~");

🟡 background-repeat - 배경 이미지 반복 지정하는 속성

background-repeat : no-repeat; // repeat/no-repeat 등이 올 수 있다.

🟢 background-size - 배경 이미지 크기 지정하는 속성

• contain - 어떻게든 이미지가 다 적용
• cover - 이미지가 짤리더라도 공간을 이미지로 가득 채움
• custom - 사용자가 원하는대로 설정
  ex) background-size : 50% 50% ;

background-size : auto 100%; // contain/cover/custom 등이 올 수 있다.

🔵 background-position - 배경 이미지 위치 지정하는 속성

background-position : center center;

👁‍🗨 예시

.box{
    width: 300px;
    height: 300px;
    background-color: hotpink;
    background-repeat: no-repeat;
    background-image: url("~~");
    background-size: contain;
    background-position: center center;
}

스크린 리더에서만 보이게 하도록 하기 위한 CSS코드

📍 첫번째 방법

.sr-only{
    display:none;

📍📍 두번째 방법(⭐추천)

.sr-only{
    position:absolute;
    z-index:-100;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    }

Transition

🔑 transition - 변화가 스르륵 일어나게 도와주는 친구

형식

• transition : property duration [timing-function][delay]

🔴 property - 어떤 속성을 바꿀 것인지
🟠 duration - 변화를 얼마동안 일어나게 할 것인지 (ms/s로 표현 [1s=1000ms])
🟡 timing-function - 움직이는 속도 변화 ( ease-in[점점 빠르게] / ease-out[점점 느려짐] / ease-in-out / cubic-bezier()[직접 timing 설정])
🟢 delay - 얼마동안의 delay를 줄 건지 설정

👁‍🗨 예시

.box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    border-radius: 5px;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    background-color: #0066ff;
    transition: font-size 1000ms ease-out, 
    background-color 2000ms cubic-bezier(0.08, 0.57, 0.97, -0.78) 1000ms;
}
    
.box.active{
    font-size: 30px;
    background-color: #ff4949;
}

animation

🔑 transition과 비슷하므로 바로 예시를 보도록 하겠습니다!

👁‍🗨 예시

.box{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #0066ff;
    animation-name: move-box; 
    animation-duration: 1000ms;
    animation-timing-function: ease-in-out;
    animation-delay: 1000ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes move-box{
    from {
        top: 0;
        background-color: #0066ff;
    }
    
    to{
        top: 200px;
        background-color: #ff4949;
    }
}

    or

/* @keyframes move-box{
      0%{
          rules
      }
      50%{
          rules
      }
      100%{
          rules
      }
  }  */  <from to 또는 0%~100%로 방향을 설정할 수 있음>
       

🔴 animation-name은 @keyframes 다음에 오는 이름으로 설정해준다.

🟠 animation-iteration-count : 애니메이션 반복 횟수 설정해주는 속성

🟡 animation-direction : 애니메이션 진행 방향( from to or 0%~100%의 방향을 의미 ) 설정
ex) animation-direction: alternate; // alternate는 진행 방향을 <원래 반대 원래 반대 ...> 순으로 애니메이션 진행방향을 설정함

https://developer.mozilla.org/ko/ - CSS 속성 검색 유용