1-2. HTML / CSS (basic)

KEY WORD : position / Grid 레이아웃 / responsive_web / viewport / Media Query / interactiveUI

 

> responsive_web(반응형 웹) : 화면 크기에 따라 같은 페이지가 다른 모습으로 보이도록 만드는 것.

 pc, tablet, mobile 화면크기, 비율, 레이아웃이 변하게끔.

@media (max-width:768px) {   /* width가 768px 일때 적용 -> css cascade */
   .card {
     padding : 12px;
     }
}

반응형 웹을 위한 조건 -> viewport = 브라우저가 생각하는 화면의 기준 폭 / 위치 : head 태그 안

<meta name="viewport" content="width=device-width, initial-scale=1.0">
/* width=device-width -> 기기 폭 그대로 사용
initial-scale=1.0 -> 처음 확대/축소 안 함*/

 

> Grid -> 화면을 어떻게 나눌까?

grid의 시작은 컨테이너 display:grid -> 이영역을 격자 시스템으로 선언하는 것

.list {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* 3, 1fr -> 같은 크기 3칸*/
}

> interactive UI : CSS가 감지할 수 있는 상태 -> hover / focus / active

.card:hover {
   background-color: #f0f0f0;
} /* 마우스를 올렸을 때, 스타일을 (배경컬러를) 바꾸겠다는 의미 */