• 카테고리

    질문 & 답변
  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

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

21.11.17 20:24 작성 조회수 273

1

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

답변 1

답변을 작성해보세요.

0

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;

}