1.학습한 내용
1.media-query
<장점>
1) 모든 기기에서 접속 가능
2) 가로모드에 맞춰 레이아웃 변경 가능
3) 사이트 유지 관리 용이
4) 최신 웹 표준 따름
<단점>
1) 사이트 디자인이 단순
2) 하위 버전 브라우저와 호환성 문제 있을 수 있음 -> 미디어쿼리는 CSS3기술
static = 고정되어있는 틀을 유지
fluid = 비율로 계산, 웹 크기를 변화시킬때 마다 크기에 맞게 변화(구성이 변화하지 않고 크기만 변화)
media query -> 중단점을 지정해서 환경에 따른 변화의 기준을 제시(모바일 기준, pc기준)
고정형 -> 보여지는 부분이 고정되어 있기 때문에 크기가 변화하면 화면이 짤려보인다
반응형 -> 레이아웃 재배치, 자연스럽게 재배치를 통해 크기변화에 반응
적응형 -> 기기에 따라 세밀한 조절이 가능(크기 변화에 따라 아예 보여지는게 달라질 수 있다, 레이아웃,콘텐츠 모두 변화)
-viewport : 스마트폰 화면에서 실제 내용이 표시되는 영역
-width : viewport의 너비
-initial-scale : 초기 확대/축소 값(1~10) ex.1) 1:확대없이 원래 크기로
-user-scalable : 확대/축소 가능 여부 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">-미디어가 print이고 별도로 css로 작성한 경우 연결 방법
<link rel="stylesheet" media="print" href="./CSS/print.css">-768px 이하 테블릿용 css를 별도로 만들었을 때 연결 방법
<link rel="stylesheet" media="screen and (max-width:768px)" href=".CSS/tablet.css">2.미디어쿼리 CSS
display: none; 화면에서 안 보이고 공간도 차지하지 않음
미디어쿼리 중단점: 모바일 | 테블릿 | 데스크탑
모바일기기 레이아웃을 기본으로 CSS만들고 이후 데스크탑 쪽으로 맞추는 방식 : 모바일 퍼스트
-> 모바일 기기 제약을 고려해 처리속도, 화면크기 최적화를 먼저 진행
320px ~ 768px미만 : 모바일기기
768px ~ 1024px미만 : 태블릿
1024px ~ : pc
@media (max-width:99px){
.pc{display: none;}
.mobile{display: block;}}
@media (min-width:600px) and (max-width:767px){
.pc{
color:blue;
font-size: 20px;
background-color: green;}}
@media (min-width:100px) and (max-width:599px){
.pc{
color:white;
font-size: 10px;}}landscape : 단말기 가로 방향
portrait : 단말기 세로 방향
@media screen and (orientation:landscape) {
body{
background-color: orange;}}
@media screen and (orientation:portrait) {
body{
background-color: crimson;}}-mobile fisrt-
모바일 코드 : 768 이하일 때 보이는 설정 ``` h1{ font-size: 20px; background-color: blue;} ``` 모바일 퍼스트로 작성해보자 - 미디어쿼리 작성시 작은화면 -> 큰화면 ==> min-width를 사용
최소 768px 이상일 때 적용 : 태블릿
(미디어쿼리 연속 사용 시 max-width가 있는 것과 마찬가지이므로 생략 가능)
@media (min-width:768px){
h1{
font-size: 40px;
background-color: pink;}}최소 1024px 이상일 때 적용 : PC
@media (min-width:1024px){
h1{
font-size: 80px;
background-color: gray;}}3.menu 정렬
기본설정
html, body{
margin: 0;
padding: 0;}메뉴 가로 정렬: flex 방식
.media-menu{
list-style: none;
margin: 0;
padding: 0;
width: 700px; /* 메뉴 폭 */
background-color: black;
display: flex;
justify-content: space-between;
align-items: center;}a 링크 초기값 지정
.media-menu a{
color: black;
text-decoration: none;}메뉴 항목에 대한 설정
.media-menu li{
width: 150px;
background-color: aliceblue;
border: 5px solid red;
padding: 5px; /*좌우 위아래*/
text-align: center;}폭이 768이하일 때 아래 적용
@media (max-width:768px){
.media-menu{
flex-direction: column;
align-items: flex-start;
width: 170px;} /* content(150) + border(10) + padding(10) */
.media-menu li{
margin-bottom: 10px;
}
.media-menu li:last-child{
margin-bottom: 0;}}4.card 만들기
기본 배치 : 세로 정렬
#container{
width: 320px;
margin: 50px auto;
}
.card{
position: relative;
width: 300px;
height: 500px;
margin: 20px 10px;
border: 1px solid #ccc;
background-color: white;
}부모 쪽 position:relative를 지정하면 자식쪽에서absolute 배치시
기준이 되는 위치가 변경된다 (브라우저 -> 부모 위치)
.words{
position: absolute; /* 브라우저를 기준으로 위치 설정 */
left: 10px;
top: 300px;
padding: 10px;
text-align: center;
}중복된 부분은 작성하지 않는다!
@media screen and (min-width:768px) /*and (max-width:1719px)*/{
#container{
width: 570px;
/* margin: 50px auto; */
}
.card{
position: relative;
width: 550px;
height: 250px;
/* border: 1px solid #ccc; */
}
.words{
position: absolute;
left: 310px;
top: 50px;
width: 200px;
}
}
@media screen and (min-width:1720px){
#container{
width: 1716px; /* 570*3 => 1710에서 변화하지 않아서 1716으로 바꿈 */
}
.card{
position: relative;
margin: 10px;
float: left;
width: 550px;
height: 250px;
}
.words{
position: absolute;
left: 310px;
top: 50px;
width: 200px;
}
}2. 학습한 내용 중 어려웠던 점
- 아직까지도 position에 대한 개념이 잡히지 않아서 예제 작성 시 어렵고 꼬이는 점이 많다.
3.해결방법
- 일단은 최대한 예시와 비슷하게 따라해보고 따로 position 설정을 다시 해보며 만들어보고 해야 겠다. 무엇보다 개념정의가 확실히하게 될 필요가 있는 것 같다.
- 메뉴 정렬 방식에서도 여러가지 방식이 있는데 확실히 정의하고 따라오는 다른 코드들도 어떻게 사용하는지 좀 더 명확히 알아야 겠다.
4.학습소감
- 예제 작성을 처음부터 끝까지 해보면서 부족한 부분이나 아직 멀었다는 것을 확실히 알 수 있었다. 솔직히 지금 이 상태로 과연 내가 앞으로 진짜 이 분야에서 일 할 수 있을지 걱정이다. 하지만 이제 겨우 2달 남짓 되었으니 부족한건 당연하다고 생각하고 시간을 갈아 넣어야겠다. 솔직히 이번 예제를 만들 때 만큼 시간을 갈아넣은게 처음인것 같은데 생각보다 갈아넣으니 뭐라도 하나는 배우고 할 수 있을 것 같다는 생각이 든다. 최대한 시간을 쓰고, 효율적으로 할 수 있도록 해봐야겠다.
