220141

복습필요한 부분

• @keyframes

반응형 디자인을 위해서는 반드시 <meta name="viewport" content="width=device-width, initial-scale=1.0">을 선언해줘야합니다.

1. @media

이전에는 적응형 모바일 위주로 웹전용 따로, 모바일 따로 제작이 되었다면 요새는 사용자의 디바이스에 따라 반응형으로 제작이 되어가고 있습니다. 이 반응형 제작에 특히 많이 사용되는 CSS는 바로 @media입니다.

• 사용방법
  @media 타입 and (기능)
  @media (기능) : 타입 생략
• 확장
  1. @media (기능) and (기능)
  2. @media (기능), (기능)
  3. @@media not (기능) and (기능)

@media (기능) and (기능)

• body의 크기가 600~800인 경우 베이지색에서 토마토 색으로 변경됩니다.

body {
  background-color: beige;
}

/* 600이상 그리고 800이하일때  */
@media (min-width: 600px) and (max-width: 800px) {
  body {
    background-color: tomato;
  }
}

미디어 타입(유형)

• 미디어 타입에는 총 4가지 있지만, 디자인에서는 크게 all과 screen으로 나누어 사용할 수 있습니다.
• 또한 all은 screen을 포함하며, all은 생략이 가능하기에 타입 없이 사용도 가능합니다.

• all : 기본 값 (생략가능 => 생략하는 것을 권장)
• all은 screen을 포함합니다.

미디어 기능

• mdn한국 버전에는 없기에 영어버전으로 확인을 하는 것을 권장합니다.

/* 세로너비가 더 길 때 */

@media (orientation: portrait){
  .box {
    width: 300px;
    background-color: royalblue;
  }
}

/* 가로너비가 더 길때 */
@media (orientation: landscape ){
  .box {
    width: 300px;
    background-color: royalblue;
  }
}

파일로 구분지어 반응형 제작

index.html head부분에 아래와 같이 명시를 해 미디어 타입에 따라 반응할 css파일을 나누어 사용을 할 수도 있습니다.

  <link rel="stylesheet" href="./main-sm.css" media="all and (max-width: 600px"> //all and는 생략 가능

main.css

.box {
  width: 100px;
  height: 100px;
  background-color: orange; 
}

main-min.css

.box {
  width: 300px;
  background-color: royalblue; 
}

2. CSS변수

• --가 변수 선언의 키워드
• var()을 통해 사용 가능합니다.

변수 선언 및 사용방법

• html{}의 {}안의 영역에 --를 통해 변수를 선언할 수 있습니다.
• html{}대신 :root를 사용할 수도 있습니다.
  • 차이점: :root의 경우 가상클래스 선택자로 명시도가 더 높습니다.

예시

/*html == :root*/
html {
  --primary: orange;
}

.box {
  width: 100px;
  height: 100px;
  background-color: var(--primary); 
}

변수 유효 범위

아래와 같이 특정 요소 내에서 변수가 선언된 경우 그 변수는 해당 요소 안에서만 사용가능합니다. 즉, 해당 요소에서 유효범위를 갖습니다.

변수 유효범위 예제1

  <div class="group1">
    <div class="box"></div>
  </div>

  <div class="group2">
    <div class="box"></div>
  </div>

변수에 defalt값 지정

아래와 같이 변수 사용시 디폴트 값을 지정해 사용을 할 수도 있습니다. 이 경우 해당 변수에 적용되는 스타일이 있는 경우 그 스타일이 적용되며, 그렇지 않은 경우 기본값이 적용됩니다.

.group1 {
  --primary: orange;
}

.box {
  width: 100px;
  height: 100px;
  background-color: var(--primary); 
  margin: 20px;
  border: 4px solid;
}

.group1 {
  --primary: orange;
  --danger: green;
}

.box {
  width: 100px;
  height: 100px;
  background-color: var(--danger, red); 
  margin: 20px;
  border: 4px solid;
}

이미 만들어져 있는 부트스트랩을 통해 레이아웃 구조를 잡는 경우 위와 같이 var(--dangaer,

(참고: 부트스트랩을 통해 스타일을 적용하는 경우 !defalt를 통해 부트스트랩에서 지정한 스타일이 아닌, 사용자가 지정한 스타일을 사용할 수도 있습니다.)

3. 레이아웃 클론 코딩 시범

• 정리필요