CSS 맨 마지막 top 클래스 부분 질문입니다

Question

안녕하세요. 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%); } 이 세 가지의 차이점을 정확하게 설명해 주시면 감사하겠습니다.

J.영 · Answer

종성님 안녕하세요? 질문하신부분을 확인하여보니...제가 CSS작성을 잘못했었네요...

Top

로 마크업을 했기에... a.top인데...top a를 적어놨었네요..죄송합니다. CSS에서 top a {}은 지워주시면 되겠습니다. 그리고 질문 3번의 답을 드리자면

Top

의 부분은 a의 클래스명이 top이란 뜻이기에 a.top이나 .top으로 작성하는 것이 맞으며 top a는 top이 부모이고 자식요소가 a 라는 뜻이니..전혀 다른 경우입니다... 수정파일은 다시 첨부하여 올리겠습니다. 감사합니다. J.young드림

CSS 맨 마지막 top 클래스 부분 질문입니다

답변 감사합니다.

.top a {display: block; width: 100%; height: 100%;}

이 부분은 잘못 작성하셨다고 하시는데요,

이 부분이 있어도 잘 동작하는 이유는 무엇인가요?

애초에 어떤 의도로 작성하신 건지도 알려주시면

학습하는데 도움될 것 같습니다.

그런데, 동영상 강의에도

.top a {display: block; width: 100%; height: 100%;}

이 부분이 포함되어 있습니다.

초보자들이 공부하는데 혼동되는 부분이니

공지사항에 글을 올려주셔서 학습하시는 분들이

이 부분은 작성하지 마시도록 해 주셔야 할 것 같습니다.