인프런 커뮤니티 질문&답변

김민형님의 프로필 이미지

작성한 질문수

[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

border 디자인 및 공지사항 디자인

21.11.17 20:24 작성

·

316

1

 
1) 가로 네비게이션에서 서브메뉴 a태그 갯수로 인해 이렇게 되는 부분은 어떻게 해결하면 좋을까요? 저부분에 border가 없습니다.
 
 
 
2) .btn span에 margin-bottom:-5px; 이라 입력했는데 위의 이미지처럼 span보다 아래 보더가 위로 올라오는데, 뭐가 잘못된걸까요?
다시 검토해보아도 잘못된 부분을 못찾겠습니다
 

답변 1

0

코딩웍스(Coding Works)님의 프로필 이미지

2021. 11. 17. 23:02

1) 가로 네비게이션에서 서브메뉴 a태그 갯수로 인해 이렇게 되는 부분은 어떻게 해결하면 좋을까요? 저부분에 border가 없습니다.

.sub-menu 밑에 a가 4개 있는 것을 기준으로 .sub-menu에 높이(height)를 주세요. 물론 실무에서는 min-height라는 속성을 사용하는 것이 효율적이지만 지금은 시험이니까 그냥 height를 사용하세요.

 

2) .btn span에 margin-bottom:-5px; 이라 입력했는데 위의 이미지처럼 span보다 아래 보더가 위로 올라오는데, 뭐가 잘못된걸까요? 다시 검토해보아도 잘못된 부분을 못찾겠습니다.

아래처럼 주시면 .btn이 .tab1, .tab2 보다 우선해서 위로 올라갑니다.

.btn {

  position: relative;

}

.btn span { position: relative; } 여기에 주셔도 됩니다.

기존에 있는 상태로는 .btn span에 주신 display: block을 display: inline-block 으로 바꿔주세요. 최종본 다운로드 해서 보시면 display: inline-block 이렇게 되어 있어요. display: block으로 했을 때 적용이 안되는 부분은 이 부분은 저도 처음 봤어요. 왜 그런지는 연구중입니다. 일단 말씀드린 부분으로 해결하세요.

.btn {}

.btn span {

  display: inline-block;

}