# 📖수업내용

# 반응형 웹 (responsive web)

반응형

• 동일한 페이지를 보여주나 디바이스 크기에 따라 레이아웃을 다르게 보여준다.
• 사용자가 이용하는 디바이스 크기(예: 모바일, 태블릿, pc 등)가 점점 더 다양해지고 있기 때문에 반응형은 매우 중요한 기술이다.

반응형 웹 예시

1. viewport

• 기기마다 화면 사이즈가 다르기 때문에 기기에 맞춰 디자인을 하기 위한 크기 요소이다.
• 디바이스 화면 크기를 고려하여 사용자에게 최적화된 웹페이지를 제공할 수 있다.
  

  width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정한다. 즉 렌더링 영역을 기기의 뷰포크의 크기와 같게 만들어준다.
  initial-scale=1.0 : 처음 페이지 로딩식 확대/축소가 되지 않은 원래 크기를 사용하도록 한다. 0~10 사이의 값을 가질 수 있다.
  참고

이미지 참고

2. @media : 미디어 쿼리

• 서로 다른 미디어 타입(디바이스 화면)에 따라 별도의 CSS를 지정하게 하는 기술이다.
• 작성법 :

<style>
	@media 미디어유형 and (크기 규칙)
    
    // 예1. 화면 넓이가 480px 이하일 경우 화면에 적용
    @media screen and (max-width: 480px)
    
    // 예2. 화면 넓이가 480px 이상일 경우 인쇄에 적용
    @media print and (min-width: 481px)
</style>

-> 예2 : 미디어 유형이 print일 때, print 모드에서 사이즈 적용되면서 print 글자 크기는 커지고 screen 글자 크기는 작아진다.

• 미디어 유형: all(전부) / print(인쇄) / screen(전부)
• 크기 규칙: min(최소 뷰포트 넓이 설정) / max(최대 뷰포트 넓이 설정)

• Breakpoint (중단점) : media query가 적용될 지점으로, breakpoint마다 layout을 변경한다.

  예: mobile <= 480px / 768px <= tablet <= 1024px / 1600px <= laptop

• orientation : landscape : 가로 모드
  orientation : portrait : 세로 모드

+) 적응형

• 사용자가 이용하는 환경(모바일, pc)에 따라 다른 페이지를 보여준다.

적응형 웹 예시

-> pc 모드

-> mobile 모드

참고: 포스코x코딩온 강의 자료(1006반응형웹.pdf)

# 👩🏻‍💻 학습

# 실습1

-> 실행 결과

💡구현 방법

• 기본적으로 .container에 display: flex라는 속성을 주어서 div 요소들이 모두 한 줄에 표시되고 있는 상황이다. 미디어쿼리를 사용하여 화면이 줄어들었을 때 div들이 세로로 나열되게 하기 위해서, flex-direction을 column을 주어서 구현하였다.

  flex-direction: column을 주지 않고, display: block 속성을 주어서도 구현 가능하다.

# 실습2

-> 실행 결과

-> 내가 작성한 코드

💡구현 방법
① 웹 사이지가 줄어들었을 때, .menu가 로고 아래로 내려오게 하기 위해 position: absolute;를 사용하여 부모인 header .inner를 기준으로 자리를 잡을 수 있도록 하였다.
② header의 높이만큼 아래로 내려오게 하기 위해 .menu에게 top: 60px;를 주었다.

-> 해설 코드