【CSS】유용한 CSS Tips ～ 링크를 클릭했을 때 나타나는 점선을 지우는 방법

▼　아래와 같이 링크가 걸린 텍스트와 이미지를 클릭했을 때 나오는 아웃라인 (윤곽선)의 점선을 없애는 간단한 방법을 소개하겠습니다.

▼　아래의 예제처럼 outline 속성을 사용하여 a 요소에 "outline : none"을 추가하기 만하면됩니다.

a { outline:none; }

<style> 
 　a {outline:none;} 
 　a:hover {color:#FFF;background-color:#666;} 
</style>

<body> 
　<a href="#">Click HERE！</a>
</body>

스폰서 링크

CSS로 박스를 중앙에 배치시키기

홈페이지의 전체 레이아웃이나 작은 박스의 위치를 중앙 배치할 경우, margin(마진) 속성에서 설정할 수 있습니다.

마진은 요소의 바깥 쪽 여백을 말합니다.

margin-top, argin-right, margin-bottom, margin-left의 상하 좌우의 4 방향 중에거, 박스의 좌우 폭을 균일하게 유지시킴으로써 중앙에 배치할 수 있습니다.

두 가지 CSS 작성하는 방법이 있습니다.

▼　먼저 아래와 같이 margin의 좌우 속성을 사용하여 각각의 값이 "auto"로 지정합니다. margin의 상하의 값은 기술하지 않았지만, 0로 지정합니다.

《1》margin의 좌우를 각각 지정

<style> 
  #box {
       width:80%;
       margin-right: auto;/*오른쪽을 auto로 지정*/
       margin-left : auto;/*왼쪽을 auto로 지정*/
       }
</style>

▼　두 번째는 margin 속성을 사용하여 상하 좌우의 값을 함께 지정하는 방법입니다.

《2》margin의 상하 좌우를 함께 지정

<style> 
  #box {
       width:80%;
       margin:0 auto;/*상하:0, 좌우를 auto로 지정*/
       }
</style>

전체 박스

중앙 배치

스폰서 링크