CSS 맨 마지막 top 클래스 부분 질문입니다
327
32 asked
안녕하세요.
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%);
}
이 세 가지의 차이점을 정확하게 설명해 주시면 감사하겠습니다.
Answer 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드림
0
답변 감사합니다.
.top a {display: block; width: 100%; height: 100%;}
이 부분은 잘못 작성하셨다고 하시는데요,
이 부분이 있어도 잘 동작하는 이유는 무엇인가요?
애초에 어떤 의도로 작성하신 건지도 알려주시면
학습하는데 도움될 것 같습니다.
그런데, 동영상 강의에도
.top a {display: block; width: 100%; height: 100%;}
이 부분이 포함되어 있습니다.
초보자들이 공부하는데 혼동되는 부분이니
공지사항에 글을 올려주셔서 학습하시는 분들이
이 부분은 작성하지 마시도록 해 주셔야 할 것 같습니다.
0
종성님~
top a부분을 제가 설명한 부분은
<div class="top"><a href=""><p>Top</p></a></div>
으로 마크업을 한 것으로 착각을 하고 실수한 듯 합니다.
그리고 .top a은 동작되는 것이 아니라 먹히지 않는것으로 생각하심 됩니다.
display:block은 top에 width와 height를 줬기 때문에 지워도 이상이 없는거구요...
다시 녹화를 하기엔 어려운 상황이라...
강의노트에 작성하려고 합니다.
그럴려면...강의 영상을 다시 들어보며 체크해야 할 부분이 있어서..주말에 작성하려고 합니다.
코멘트 감사합니다.
J.young드림
6-6
0
9
1
Json 플러그인 사용시 variable collection 없음
0
14
1
배리어블 목록 없음
0
23
3
Token 등록 방법 문의
0
21
1
6-6 실습 문의
0
24
2
섹션5 노션링크 는 따로 없나요?
0
30
2
Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.
0
33
2
첨부자료 Part 4 코드 확인 부탁드리겠습니다.
0
29
2
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
24
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
54
2
claude plugin 방법 자세히 부탁드려요
0
40
2
강의에 적용한 스크립트를 받아 볼수 있을까요?
0
40
2
최근 코테, 과제 테스트 트렌드
0
68
2
노션 25 인터렉션 구현 파트 안 보입니다!
0
39
2
파트3 13F부분도 짤린거같은데 확인해주세요
0
39
2
Gemini로 진행가능 여부 궁금합니다.
0
60
2
태그 id, class 에 관한 질문
0
334
1
overflow:hidden 과 float에 대해 질문 드립니다.
0
221
1
결과 파일 어떻게?
0
296
1
궁금한게 있는데요!
0
256
1
section.smart 질문
0
267
2
문의드립니다.
0
318
1
강의 결과 파일
1
235
1
img를 p로 묶는 이유가 있을까요?
0
246
1