• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

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

22.11.29 12:05 작성 조회수 194

0

안녕하세요.

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

 

  1. 아래와 같이 강의에서 알려주신 대로 하면 잘 됩니다.

.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%);
}

 

  1. 그런데, 아래와 같이 하면 안 됩니다.

(.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%);
}

 

  1. 아래와 같이 해도 안 됩니다.

(.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%);
}

 

이 세 가지의 차이점을 정확하게 설명해 주시면 감사하겠습니다.

 

 

course-thumbnail

실전! 웹사이트제작! Step by Step! (한국소비자원 소비자시대- 레이아웃제작 기초)

답변 1

답변을 작성해보세요.

0

J.영님의 프로필

J.영

지식공유자

2022.11.29

종성님 안녕하세요?
질문하신부분을 확인하여보니...제가 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드림

박종성님의 프로필

박종성

질문자

2022.11.30

답변 감사합니다.

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

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

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

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

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

그런데, 동영상 강의에도

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

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

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

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

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

J.영님의 프로필

J.영

지식공유자

2022.11.30

종성님~
top a부분을 제가 설명한 부분은
<div class="top"><a href=""><p>Top</p></a></div>
으로 마크업을 한 것으로 착각을 하고 실수한 듯 합니다.
그리고 .top a은 동작되는 것이 아니라 먹히지 않는것으로 생각하심 됩니다.
display:block은 top에 width와 height를 줬기 때문에 지워도 이상이 없는거구요...

다시 녹화를 하기엔 어려운 상황이라...
강의노트에 작성하려고 합니다.
그럴려면...강의 영상을 다시 들어보며 체크해야 할 부분이 있어서..주말에 작성하려고 합니다.
코멘트 감사합니다.
J.young드림

이 글과 비슷한 Q&A