꿈꾸는 개발자, Front-end Developer

Trust that the dots will connect in your future.

#CSS #Dev #EJS #HTML #Hexo #JavaScript #dev #jQuery #smallTalk #번역 #삽질 #신세계 #이론 #정보처리기사

Dropdown 기능과 hover


기술적인 부분을 차치하고 내용적인 부분에서 가장 고민이 되었던 것은 ‘About 메뉴’

즉, 나에 대한 정보를 얼마나, 어떤 방식으로 표현할 것인가에 관한 것이었다.
그러다가 순간 이 모든 고민이 ‘사람들이 나에게 관심이 있을 것’이라는 전제 하에 진행 중인 것이며,

그 전제가 꽤나 큰 착각이라는 생각이 들면서 생각보다 고민은 쉽게 풀렸다.
결론은 ‘관심 있는 사람이 있다면 그 분들을 위해 통로만 열어 두자’였고,

이 생각을 바탕으로 평소에는 연락처가 보이지 않고 사용자가 원할 때 연락처를 볼 수 있는 방법을 모색했다.

Bootstrap에는 하위 메뉴를 숨겨놓았다가 클릭했을 때 펴게하는 ‘dropdown’ 기능이 있었고 이를 이용했다. (http://getbootstrap.com/components/#dropdowns)

<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
zzolain
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li><a href="..."><img src="..." alt="..."></a>
</li>
</ul>
</div>

현재(17.07.15) 좌측 상단 [zzolain] 메뉴 부분의 코드이다.

Bootstrap의 기능을 활용하려면 Class 이름을 바꿔주면 된다.

따라서 위 코드에서 주목할 부분은 ‘dropdown’과 ‘dropdown-toggle’, ‘dropdown-menu’ 부분이다. dropdown기능을 사용할 전체 영역을 <div class="dropdown"> 으로 감싸준다는 느낌으로,
사용자가 마우스 클릭을 했으면 하는 부분에 class="dropdown-toggle" 속성을,

펼쳐질 ‘속살’ 메뉴들에게는 class="dropdown-menu" 속성을 주고 사용하면 된다.

여기까지는 순조로웠으나 복병이 있었다.

연락처를 링크한 이미지에 마우스를 올리면 이미지가 하얗게 변해버렸다.

잽싸게 구글링을 해본다. ‘bootstrap a image mouseover’

(검색 키워드를 정하는 것도 실력이라고 하던데, 눈물 좀 닦고..)

검색을 하니 마우스를 올릴 때 대상에 변화를 주는 기능을 ‘Hover’라고 한단다.

그리고 검색어에 a를 넣었더니 관사 a 때문인지 검색 결과가 시원찮다.

다시 키워드 수정.. ‘bootstrap image link hover’

검색 결과를 보니 bootstrap에는 기본적으로 태그에 꽤나 많은 기본 옵션 기능이 설정 되어 있었고,

이를 해제하기 위한 CSS 선택자 명령어는 다음과 같다.

  • a:link 방문 전 링크 상태
  • a:visited 방문한 링크 상태
  • a:active 클릭 했을 때 링크 상태
  • a:hover 마우스오버 했을 때

링크 상태 마우스 오버 상태에 하얀색이 덮이는 것을 없애고 싶었으니 a:hover 선택자를 선택한다(라임 굿).

그런데 CSS 파일에 a:hover 선택자를 그대로 써버리면 웹페이지 전체에 영향을 미치게 된다.

따라서 dropdown 메뉴에 있는 이미지 링크에만 영향을 주도록 선택자를 정한다.

.dropdown li a:hover { background-color : init; }

init은 initial의 약자, 초기값을 설정함으로 bootstrap의 설정을 없앨 수 있다.

* 오류가 있다면 알려주세요. 큰 도움이 됩니다!


#dev

#dev