링크 꾸미는 방법

CSS 강좌

CSS에서는 a 요소와 :link, :visited, :hover, :active 등의 상태 선택자로 링크 모양을 바꿀 수 있습니다. 하지만 마우스로만 알아볼 수 있는 효과에 의존하면 키보드 사용자에게 링크의 현재 위치가 보이지 않습니다. 기본 상태의 식별성과 :focus-visible 표시도 함께 설계하세요.

링크를 식별할 수 있는 기본 스타일

브라우저는 일반적으로 링크에 색과 밑줄을 표시합니다. 링크가 본문 문장 안에 있을 때는 색만 바꾸는 것보다 밑줄 등 색 이외의 시각적 단서도 유지하는 편이 좋습니다. text-decoration으로 밑줄의 모양을 조정할 수 있습니다.

a {
  color: #1756a9;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

링크색은 배경색 및 일반 본문색과 구분돼야 합니다. text-decoration: none을 모든 링크에 일괄 적용하면 본문에서 클릭 가능한 위치를 찾기 어려워질 수 있습니다. 메뉴처럼 위치와 형태로 링크임이 분명한 구성 요소와 본문 링크는 다르게 판단하세요.

방문·마우스·활성 상태 구분하기

:link는 아직 방문하지 않은 링크, :visited는 방문한 링크에 대응합니다. :hover는 포인터가 올라간 동안, :active는 활성화되는 동안 적용됩니다. 네 규칙의 우선순위가 같다면 뒤에 선언한 규칙이 앞의 색을 덮을 수 있으므로 보통 아래 순서로 배치합니다.

a:link { color: #1756a9; }
a:visited { color: #6b438c; }
a:hover { color: #b53239; }
a:active { color: #8a2630; }

방문 기록 노출을 막기 위해 브라우저는 :visited에서 바꿀 수 있는 스타일을 제한합니다. 방문 여부에 따라 레이아웃이나 내용을 바꾸려 하지 말고 색상처럼 허용된 시각적 차이만 사용하세요. 또한 터치 화면에는 마우스 호버가 없거나 동작이 다를 수 있으므로 중요한 기능을 :hover에만 숨기지 마세요.

키보드 초점 표시하기

Tab 키로 링크 사이를 이동하면 현재 초점을 받은 링크가 눈에 보여야 합니다. :focus-visible은 브라우저가 초점 표시가 필요하다고 판단하는 경우에 맞춰 스타일을 적용합니다. 테마가 기본 윤곽선을 제거한다면 대체 표시를 반드시 제공하세요.

a:focus-visible {
  outline: 3px solid #e58c1f;
  outline-offset: 3px;
  border-radius: 2px;
}

outline은 일반적인 박스 크기를 바꾸지 않아 초점 표시로 편리합니다. 주변 배경과 충분히 구분되는지, 링크들이 좁게 붙어 있어 윤곽선이 가려지지 않는지 확인하세요. :focus가 필요한 오래된 환경이나 디자인 요구가 있다면 이를 보완 규칙으로 사용할 수 있습니다.

전체 예제로 상태 확인하기

아래 코드를 index.html로 저장해 열어 보세요. 링크에 포인터를 올리고 Tab 키로 이동해 차이를 비교합니다. href="#section"은 같은 문서의 해당 ID로 이동하므로 네트워크 없이 시험할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>링크 상태 꾸미기</title>
  <style>
    body { font-family: sans-serif; margin: 2rem; line-height: 1.6; }
    a { text-decoration: underline; text-underline-offset: 0.15em; }
    a:link { color: #1756a9; }
    a:visited { color: #6b438c; }
    a:hover { color: #b53239; }
    a:active { color: #8a2630; }
    a:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
  </style>
</head>
<body>
  <p><a href="#section">설명으로 이동하기</a></p>
  <p><a href="#other">다른 항목으로 이동하기</a></p>
  <h2 id="section">설명</h2>
  <p>링크의 기본, 호버, 초점 상태를 비교합니다.</p>
  <h2 id="other">다른 항목</h2>
</body>
</html>

방문 여부를 시험할 때는 실제로 링크를 연 뒤 다시 돌아와 확인하세요. 브라우저의 방문 기록 상태에 따라 결과가 달라집니다. 색만 구분하기 어려운 경우에는 밑줄과 초점 윤곽선이 남아 있는지도 함께 점검합니다.

선택자의 정확한 동작은 MDN의 :visited 문서와 MDN의 :focus-visible 문서를 참고하세요.

CSS 강좌

CSS / Tutorial / CSS를 HTML에 적용시키는 방법

외부 CSS 파일, 문서 안의 style 요소, 인라인 스타일을 HTML에 적용하는 방법을 예제로 비교합니다. 파일 경로와 규칙이 겹칠 때의 확인 방법도 설명합니다.

CSS / Tutorial / 변수 사용하는 방법

CSS 사용자 지정 속성을 :root와 특정 구성 요소에 선언하고 var()로 색과 간격을 재사용하는 방법을 설명합니다. 상속 범위, 값이 없을 때의 대체값, 유효하지 않은 값의 처리도 예제로 확인합니다.

CSS / Tutorial / 표 꾸미기 / 정렬

표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬

CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법

position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.

CSS / Tutorial / 문법

CSS 규칙의 선택자, 속성, 값과 선언을 예제로 설명합니다. 여러 선언과 주석을 쓰는 방법, 문법 오류를 확인하는 순서도 배울 수 있습니다.

CSS / Tutorial / 상속(inheritance)

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.

CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.

CSS / Tutorial / 구분선 만드는 방법

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.

CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법

유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.

CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.