Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
Trong thực tế! Tạo trang web! Từng bước một! (Thời đại tiêu dùng của Cơ quan tiêu dùng Hàn Quốc - Khái niệm cơ bản về bố cục sản xuất)
CSS 맨 마지막 top 클래스 부분 질문입니다
Viết
·
323
0
안녕하세요.
CSS 맨 마지막 top 클래스 부분 질문입니다
아래와 같이 강의에서 알려주신 대로 하면 잘 됩니다.
.top {
float: right; margin-right: 30px; margin-bottom: 30px;
width: 80px; height: 80px; border-radius: 50%; background: #454545;
background-image: url(../img/arrow.JPG); background-repeat: no-repeat;
background-size: 25px; background-position: top; position: relative;
}
.top a {display: block; width: 100%; height: 100%;}
.top p {
font-size: 16px; font-weight: bold; color: #fff; position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
}
그런데, 아래와 같이 하면 안 됩니다.
(.top a 부분을 따로 작성하지 않고 .top 안에서 설정함)
.top {
float: right; margin-right: 30px; margin-bottom: 30px;
width: 80px; height: 80px; border-radius: 50%; background: #454545;
background-image: url(../img/arrow.JPG); background-repeat: no-repeat;
background-size: 25px; background-position: top; position: relative;
display: block; width: 100%; height: 100%;
}
.top p {
font-size: 16px; font-weight: bold; color: #fff; position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
}
아래와 같이 해도 안 됩니다.
(.top p 를 .top a p 로 함)
.top {
float: right; margin-right: 30px; margin-bottom: 30px;
width: 80px; height: 80px; border-radius: 50%; background: #454545;
background-image: url(../img/arrow.JPG); background-repeat: no-repeat;
background-size: 25px; background-position: top; position: relative;
}
.top a {display: block; width: 100%; height: 100%;}
.top a p {
font-size: 16px; font-weight: bold; color: #fff; position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
}
이 세 가지의 차이점을 정확하게 설명해 주시면 감사하겠습니다.
Câu trả lời 1
0
종성님 안녕하세요?
질문하신부분을 확인하여보니...제가 CSS작성을 잘못했었네요...
<a href="#main" class="top"><p>Top</p> </a>로 마크업을 했기에...
a.top인데...top a를 적어놨었네요..죄송합니다.
CSS에서 top a {}은 지워주시면 되겠습니다.
그리고 질문 3번의 답을 드리자면
<a href="#main" class="top"><p>Top</p> </a> 의 부분은
a의 클래스명이 top이란 뜻이기에 a.top이나 .top으로 작성하는 것이 맞으며
top a는 top이 부모이고 자식요소가 a 라는 뜻이니..전혀 다른 경우입니다...
수정파일은 다시 첨부하여 올리겠습니다.
감사합니다.
J.young드림
종성님~
top a부분을 제가 설명한 부분은
<div class="top"><a href=""><p>Top</p></a></div>
으로 마크업을 한 것으로 착각을 하고 실수한 듯 합니다.
그리고 .top a은 동작되는 것이 아니라 먹히지 않는것으로 생각하심 됩니다.
display:block은 top에 width와 height를 줬기 때문에 지워도 이상이 없는거구요...
다시 녹화를 하기엔 어려운 상황이라...
강의노트에 작성하려고 합니다.
그럴려면...강의 영상을 다시 들어보며 체크해야 할 부분이 있어서..주말에 작성하려고 합니다.
코멘트 감사합니다.
J.young드림
답변 감사합니다.
.top a {display: block; width: 100%; height: 100%;}
이 부분은 잘못 작성하셨다고 하시는데요,
이 부분이 있어도 잘 동작하는 이유는 무엇인가요?
애초에 어떤 의도로 작성하신 건지도 알려주시면
학습하는데 도움될 것 같습니다.
그런데, 동영상 강의에도
.top a {display: block; width: 100%; height: 100%;}
이 부분이 포함되어 있습니다.
초보자들이 공부하는데 혼동되는 부분이니
공지사항에 글을 올려주셔서 학습하시는 분들이
이 부분은 작성하지 마시도록 해 주셔야 할 것 같습니다.