• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

max-width:1199px 강의 앞부분이 궁금합니다.

23.05.18 21:03 작성 조회수 280

2

안녕하세요. 미디어쿼리 부분부터 열심히 달리고 있습니다.

좋은 정보가 많아서 큰 도움이 되네요. 감사합니다^^

그런데 "max-width:1199px" 강의 중 앞부분 영상이 누락된 게 아닌지 문의드립니다. 앞에 시작 부분 설명이 없고, font-size: 56.3%부분도 아무리 찾아도 없는데, 그 다음 강좌에 "지난 시간 설정했던"이라고 멘트가 나와서 어디있는지 궁금해서 문의드립니다.

감사합니다 :)

답변 1

답변을 작성해보세요.

2

앗 정말이네요! 누락된게 맞습니다. 찾아주셔서 감사해요!
강의 영상을 다시 작업할 수 가 없어 아래에 설명으로 남겨 놓겠습니다.

@media screen and (max-width:1199px){}
가로폭 1199에서 분기점을 만듭니다.
html,body{ font-size:56.3%}
html,body의 글꼴 사이즈를 변경해주면, rem 단위를 사용하기 때문에 root에서 딱 한번만 변경이 됩니다.
그래서 전체 html요소의 사이즈를 한꺼번에 변경할 수 있습니다.

header{height: 83px;}

header의 높이 값을 조정합니다.

header .inner{
align-items: center;
padding:0 20px ;
}

flex 교차축을 재정렬 합니다. 양쪽 여백을 띄어서 약간의 공간을 만들어 줍니다.

.visual{ height: 548px; }
.visu_txt{
position:static;
top:auto;
left:auto;
align-items: center;
margin:auto;
text-align: center;
}

.visual의 높이값을 재 조정하고 .txt의 position을 static으로 바꿔 기본값으로 나오게 합니다.
이때 top,left 값을 auto로 변경해 줍니다.

.dep03 .inner{
flex-direction: column;
align-items: center;
}

.dep03의 .inner에 flex 방향값을 변경하고 교차축 즉 direction이 column인 상태에서는 수평 정렬을 가운데로 잡아줍니다.

.dep03 .txt_wrap {
text-align: center;
margin-bottom:140px;
}

.dep03{ padding:130px 0; }
.dep03의 .txt_wrap 여백값과 문단 정렬을 정의 해줍니다.
.dep03 요소의 안쪽 여백도 조정합니다.

.depth { padding:100px 20px; }

전체 .depth의 여백을 조정합니다.
.dep1_list li{ width:calc(100% / 4 - 19.5px) }
.dep1_list li .img_wrap{ height: 220px; }

.dep1의 li의 너비를 조정해 25%에서 여백값을 제외하고 나눠 갖을 수 있게 합니다.
.img_wrap의 높이를 조정합니다.

.dep02 .img_wrap, .dep04 .img_wrap{
width:430px;
height: 430px;
}

2,4 섹션의 .img_wrap의 가로 세로 폭을 조정합니다.
이상 1199px에서의 mediaquery였습니다.
누락된 부분인데 말씀해 주셔서 감사드립니다!
완강하시고 하시고자 하는거 다 이루시길 기원합니다!

 

sena Park님의 프로필

sena Park

질문자

2023.05.18

어므낫... 이렇게 빨리 친절하게 답변해주셔서 넘 감사합니다!!!!
반응형 공부하면서 막힌 강의 통해서 부분들을 많이 해결했습니다. ㅠㅜ
꼼꼼히 정주행하겠습니다.
감사드려요 LIZ.B 강사님 :)