0523

1. 학습내용
   반응형 웹

• 웹 디자인 기법 중 하나로 기기의 화면에 맞게 레이아웃을 재배치하고 크기를 조정해서 보여줄 수 있는 웹

  <반응형 웹 참고 사이트>

https://mediaqueri.es/
https://flatuicolors.com/

-미디어 쿼리
• 반응형(%) 적응형(px) 웹사이트 만들 때 써서 모바일이나 태블릿과 호환되게 해줌

1) 미디어쿼리 안쪽의 코드가 미디어쿼리 바깥쪽의 css 속성을 상속받기 때문에 비교해가면서 작성해주거나 pc/모바일/태블릿을 분류하여 css 파일을 관리하기
2) head영역에 필수적으로 입력해야 하는 meta tag가 있음

PC와 모바일에서 각각 보이는 정보가 다를 때 위와 같은 방법을 쓸 수는 있지만, 작업이 복잡해지기 때문에 기획 단계에서 PC와 모바일 버전을 잘 고려하여 디자인하는 것이 중요함

@media screen and (min-width:768px) /and (max-width:1719px)/{
#container{
width:570px;
margin:50px auto;
}
.card{
position:relative;
width:550px;
height:250px;
}
.words{
position:absolute;
left:310px;
top:50px;
width:200px;
}
}

@media screen and (min-width:1720px){
#container{
width: 1716px;
}
.card{
position:relative;
float:left;
margin:10px;
width:550px;
height:250px;
}
.words{
position:absolute;
left:310px;
top:50px;
width:200px;
}
}

2.학습내용 중 어려웠던 점

미디어 쿼리부분에서 헤맴

3.해결방법
사이트 참고,공부

4. 학습소감

   속성종류 구분하는데 다소 어려움이 있어 힘들었다.