미디어쿼리 실습
1. 메뉴 만들기(PC버전 – x축 정렬, 모바일버전 – y축 정렬)
※ flexbox.help 사이트를 이용하여 미디어 쿼리 작업 수행
● PC 버전
● 모바일 버전
작성 코드
2. helbak.com 메뉴 pc버전 1줄-고정, 모바일 버전 2줄-비고정
● header(3차원)와 main(2차원) 일 때, 레이어가 겹치는 현상 발생
- 3차원이 2차원을 덮어 버림
- 해결방법
main { }에서header의 높이값만큼padding-top값을 줘서, 공백을 통해 main 콘텐츠를 내리는 방법
→ 하지만header와main의 영역은 여전히 겹쳐 있음
● PC 버전(1줄)
● 모바일 버전(2줄)
작성 코드
3. bootstrap agency portfolio 파트 콘텐츠 PC버전, 모바일버전 표현 (3x2, 2x3, 1x6)
※ 사이트 : https://startbootstrap.com/previews/agency
● 안의 박스(6개 박스의 width값의 합)가 박스를 감싸는 영역보다 큰 경우, 자동 줄 바꿈 현상이 일어나게 해야함
flex-wrap의 속성값wrap을 적용함 →{ flex-wrap: wrap; }
● 4번째 박스(column)에서 줄 바꿈이 되게 하기
- column에 width값을 설정해야 함
- 4개의 column의 width값이 container의 width값을 초과하게 되면 4번째 column에서 줄 바꿈이 되기에, 거기에 맞춰 column의 width값을 설정
● column의 width값에 맞춰 img의 크기 조절하기
.column img { }에width: 100%를 줘서 column의 width값(355px)에 맞게 확대되도록 함
● img 태그와 image-info 태그 사이에 미세한 공백을 제거하기
.column img { }에vertical-align: middle을 적용
● 1x6 사이즈에서 좌우 공간에 여백을 주는 방법 – box-sinzing과 padding 값 넣어주기
@media (min-width: 320px) and (max-width: 539px) {
.container {
box-sizing: border-box;
width: 100%;
padding: 0 20px;
}● PC 버전(3x2)
● 모바일 버전(2x3)
● 모바일 버전(1x6)
작성코드
4. 미디어쿼리 적용방법 3가지 – 1번과 2번 방법을 추천
1) 하나의 CSS 파일 안쪽에 pc버전, 모바일버전 모두 mediaquery 코드 기입하기
2) 모바일용 css 파일 만들기(<head> – link연결) → mediaquery 코드 적용
→ css 코드 내용이 길어지는 경우에 대비
3) <head> 에서 style 태그 사용
예시)
<head>
<style media="(min-width: 300px) and (max-width: 700px)">
body {
background-color: red;
}
</style>
</head>어려웠던 점
flexbox.help 사이트를 이용했을 때는 flex를 사용하는데 막히는 것은 없으나, 스스로 구도를 생각하고 코드를 작성하여 index.html을 올려보면 의도대로 나오지 않아서 많이 갑갑한 점이 있습니다.
해결방법
이전에 보고 배웠지만, 아직 태그나 코드가 익숙하지 못한 점은 강의영상을 다시 보거나 인터넷의 다른 개발자 분들이 알려주는 내용이나 코드를 참고하였습니다.
학습 소감
강의를 보고 따라할 때는 문제가 거의 없지만, 막상 스스로 구도를 생각하고 코드를 작성한 결과는 전혀 원하는대로 잘 되지 않습니다. 아직까지도 수박의 겉면만을 맛보는 느낌이라서 많이 답답하기도 하고, 더 열심히 공부해야겠다는 생각도 들었습니다.
반갑습니다. 잘부탁드립니다.