뭘 잘못 건드렸을까요? 어느 부분 문제로 보이는지 말씀부탁드리겠습니다ㅠ
228
이유진
작성한 질문수 3
0
ui.css
/* menu */
.menu {
display: flex;
flex-direction: row;
}
.menu-item {
/* flex-grow: 1; */
width: 25%;
background: gold;
transition: 0.5s;
}
.menu-item:hover {
/* flex-grow: 1.5; */
width: 35%;
background: crimson;
}
.menu-link {
display: block;
padding: 1em;
font-size: 1.2rem;
font-weight: bold;
color: #555;
text-decoration: none;
text-align: center;
}
.menu-link:hover {
color: white;
}
/* search */
.search-form {
display: flex;
height: 40px;
}
.search-form input[type='search'] {
flex: 1;
margin-right: 10px;
border: 0;
border-radius: 0.3em;
font-size: 1rem;
padding: 0 1em;
}
.search-form input[type='submit'] {
width: 4em;
border: 0;
border-radius: 0.3em;
font-size: 1rem;
background: gold;
}
/* bullet list */
/* https://copychar.cc/ */
.info-list-item {
display: flex;
margin:0.5em 0;
}
.info-list-item:before {
content: '';
margin-right: 0.5em;
}
/* message */
.user-item {
display: flex;
margin-bottom: 1.5em;
}
.user-photo {
flex-shrink: 0;
width: 50px;
height: 50px;
margin: 0.5em;
border: 2px solid #333;
border-radius: 50%;
background-color: gold;
background-repeat: no-repeat;
background-position: center;
background-size: 150%;
}
/* friend list */
.friend-item {
align-items: center;
}
.user-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* modal */
.modal {
display: flex;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
}
.dialog {
width: 50vw;
padding: 2em;
border-radius: 1em;
background: white;
}
/* card list */
.card-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, auto));
column-gap: 2%;
}
.card-item {
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
.card-image {
height: 0;
padding-bottom: 60%;
background: lightgray;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.card-image img {
display: none;
}
.card-desc{
flex: 1 1 auto;
padding: 1em;
background: white;
}
ui-page.css
.header {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
padding:0 1rem;
}
/* .header에 justify-content: space-between; 대신 사용 가능 */
/* .search-form {
margin-left: auto;
} */
.website-title {
flex-shrink: 0;
margin-right: 10px;
color: #555;
}
.search-form {
width: 240px;
max-width: 60%;
margin-left: auto;
margin-right: 3rem;
}
.primary {
padding:1rem;
}
@media (max-width: 600px) {
.menu {
flex-direction: column;
}
.menu-item {
width: 100%;
transition: none;
}
.menu-item:hover {
transition: 0.5s;
width: 100%;
}
}
.secondary {
padding: 1rem;
}
.secondary-a {
background:white;
}
.secondary-b {
color: white;
background:#666;
}
.footer {
padding: 1rem;
border-top: 1px solid lightgray;
text-align: center;
}
.mb2rem {
margin-bottom: 2rem;
}
.modal-switch {
font-size: 2rem;
}
.modal {
display: none;
top: 80px;
}
#modal-switch:checked ~ .modal {
display: flex;
}
label[for="modal-switch"] {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 1.3rem;
right: 1rem;
width: 40px;
height: 40px;
/* background: red; */
}
label[for="modal-switch"]::before {
content: "⚑";
font-size: 2rem;
}
#modal-switch:checked ~ label[for="modal-switch"]::before {
color:blue;
}
#modal-switch,
label[for="modal-switch"] span {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
top: 0;
}
@media (min-width: 1024px) {
.page {
display: grid;
grid-template-columns: 20% 1fr 20%;
grid-template-areas:
'header header header'
'menu menu menu'
'secondary-a primary secondary-b'
'footer footer footer'
;
}
.header {
grid-area: header;
}
.menu {
grid-area: menu;
}
.primary {
grid-area: primary;
}
.secondary-a {
grid-area: secondary-a;
}
.secondary-b {
grid-area: secondary-b;
}
.footer {
grid-area: footer;
}
}
@media (min-width:1400px) {
.page {
display: grid;
grid-template-columns: 300px 1fr 300px;
}
}
답변 1
0
유진님 코드 상에 이상은 없어보이고.. 이 코드를 적용해보니 저는 이상이 없네요~
혹시 default.css도 잘 연결 해 주셨을까요?
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="ui.css">
<link rel="stylesheet" href="ui-page-1.css">
테스트 하고 계신 브라우저가 어떤건지 알 수 있을까요?
계속 이상 현상이 발생하면, 온라인에 페이지를 업로드 해주시면 저도 접속해서 확인해보도록 할게요!
가로스크롤 과 margin: 0 -1rem 질문 있습니다
0
131
1
수업자료 다운로드
0
136
1
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...
1
151
1
css grid repeat() 에서 autofit 사용시
0
195
1
menu 아이템 반응형 변경
0
112
1
질문은 아니고.. 오타 발견..
0
127
1
웹에서 위치?값
0
229
1
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
0
526
2
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
0
317
1
flex-basis auto, 0 차이
0
728
2
padding 대신 gap을 쓰는게 더 편하지 않나요?
2
614
1
animation forwards 관련 질문
0
499
2
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
0
567
1
flex-grow IE 질문드립니다.
0
635
2
Flex-grow가 적용되는 영역에 대해 질문드립니다.
0
443
1
Grid 수직정렬 문의
0
1081
1
card__item에 display:flex를 했을 때..
0
515
1
11vmin
0
427
1
header class 안에 div와 h2
0
582
1
grid 반응형 페이지 step1 질문있습니다~
0
287
1
반응형 페이지 step4 order
0
362
1
미디어쿼리 사이즈
1
293
1
figure + div
0
308
1
CSS Grid를 통한 정렬의 장점
0
256
1