padding 0 1rem질문입니다.
387
작성한 질문수 29
안녕하세요 강의듣다가 궁금한점이있어서 질문드립니다.
현재 강사님이 하신대로 코드작성했을때는 반응형으로 600이상에서는 2줄 1200이상에서는 3줄이제대로 나오는데요
이방식은 default.css가 적용되있을때 제대로 나오고 만약 reset을 안해주면
윗부분과 같이 보라색으로 공간이생기면서 제대로 반응형이 안됩니다.. 여기서 제가 flex-item에 flex: auto을 해주면 600의 경우만약 50%씩 길이를해서 반씩 나눠서 합이 100%가되면 강사님처럼 제대로 공간이 채워지지만 9개중 짝이안맞는 1개의경우 flex:auto로 인해서 공간이 100%늘어나 간격이이상해집니다..
강사님이 주신 reset.css때매 줄간격이맞는거같은데.. 이럴경우 프로젝트할때마다 강사님의 reset파일을 써야할까요? 만약 그게아니라면 현재 상태에서 어떻게 보라색 간격을 없앨수있을까요??
아래는 제가 혼자할때 만든 실습코드입니다.
http://colorscripter.com/s/UAEVG5f
답변 1
2
소스코드를 보니 카드 사이의 간격을 margin으로 띄워주셨는데요,
box-sizing: border-box가 적용되었더라도 margin은 카드 크기에 포함이 안되기 때문에, width를 33.33333%로 한 상태에서는 넘칠 수 밖에 없답니다.
margin을 사용하시려면 .card-item의 width를 아래처럼 수정해보세요~ 좌우 margin을 합친 40픽셀만큼 빼준거랍니다.
@media (min-width:1200px) {
.card-item { width: calc(33.333333% - 40px); }
}
가로스크롤 과 margin: 0 -1rem 질문 있습니다
0
118
1
수업자료 다운로드
0
122
1
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...
1
136
1
css grid repeat() 에서 autofit 사용시
0
180
1
menu 아이템 반응형 변경
0
102
1
질문은 아니고.. 오타 발견..
0
120
1
웹에서 위치?값
0
211
1
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
0
510
2
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
0
309
1
flex-basis auto, 0 차이
0
708
2
padding 대신 gap을 쓰는게 더 편하지 않나요?
2
606
1
animation forwards 관련 질문
0
488
2
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
0
559
1
flex-grow IE 질문드립니다.
0
623
2
Flex-grow가 적용되는 영역에 대해 질문드립니다.
0
436
1
Grid 수직정렬 문의
0
1075
1
card__item에 display:flex를 했을 때..
0
512
1
11vmin
0
417
1
header class 안에 div와 h2
0
576
1
grid 반응형 페이지 step1 질문있습니다~
0
281
1
반응형 페이지 step4 order
0
354
1
미디어쿼리 사이즈
1
285
1
figure + div
0
297
1
CSS Grid를 통한 정렬의 장점
0
244
1