CSS / Tutorial / 링크 꾸미는 방법
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의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
CSS / Tutorial / 세로 가운데 정렬하는 방법
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.
CSS 사용자 지정 속성을 :root와 특정 구성 요소에 선언하고 var()로 색과 간격을 재사용하는 방법을 설명합니다. 상속 범위, 값이 없을 때의 대체값, 유효하지 않은 값의 처리도 예제로 확인합니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
CSS / Tutorial / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.
CSS / Tutorial / 마우스 호버 효과 / 텍스트 나오게 하는 방법
CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있습니다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제입니다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.