[CSS] a 태그 클릭 범위 확장시키기

[ margin : 여백 부여하기 ] 

default

[ 태그 간격 설정 ]

1 > logo 여백 설정

header .logo {

  margin-right: 10px;

}

 

logo 여백 부여

2> 항목(li) 간격 조절

header .main-menu li {

  margin-right: 10px;

}

 

항목(main-menu li) 여백 부여

---

[ 클릭 가능 영역 넓히기 ]

1> 영역 확인하기 

header .main-menu li {

  margin-right: 10px;

  background-color: orange;

}

항목(main-menu li) 영역

 

 

2> padding 여백 확보하기 

 

// li 태그에 padding을 부여하면서 버튼 크기 늘어남

header .main-menu li {

  margin-right:10px;

  padding: 10px;

  background-color: orange;

 }

항목(main-menu li) padding 부여

 

 

Result.

➡ 텍스트 영역 안으로 들어가야 클릭 가능하다.

외부 / 내부 여백 확보한 의미가 없다. 

클릭해서 동작하지 않기 때문에 margin / padding 무엇을 부여하든 의미 없었다.

 

🔥 problem 🔥
버튼을 클릭할 때, 글자 범위 안에서만 커서가 변하며 클릭 가능 🖱
작은 버튼을 선택하려면 집중해서 클릭해야하는 불편한 UI

 

- li 태그 안에서 링크를 걸고 클릭하는 요소로서 a 태그를 넣었다. (html)

<ul class="main-menu">
        <li><a href="#">Personal</a></li>
        <li><a href="#">Open Source</a></li>
        <li><a href="#">Business</a></li>
        <li><a href="#">Explore</a></li>
</ul>

✅ 실질적으로 클릭해서 동작하는 영역은 a 태그
a 태그가 클릭되는 것으로 li 태그는 리스트( <ul>)의 특정한 항목일 뿐이다.

 

# a태그에 설정 (padding)

header .main-menu li a {

  padding: 10px;

  background-color: orange;

}

🔥 problem 🔥
a 태그는 display: inline; (default)
인라인 요소는 padding값을 사용할 수 없기에 제대로 된 영역 설정 불가

💡 solution 💡
a 태그를 레이아웃 설정이 가능한 블록 요소로 지정하기 
display : block;을 통해 padding 값이 정상적으로 작동 된다.

 

- a태그 block 요소로 변경 

header .main-menu li a {

  display: block;

  padding: 10px;

  background: orange;

}

 

클릭 가능한 범위 확장

📌margin이 아닌 padding을 통해서 영역을 늘려서 사용한 개념