[기초]CSS 링크와 리스트 스타일(link, list)

CSS에서 링크 스타일에 대한 정의

링크 스타일은 웹 페이지에서 하이퍼링크(<a> 태그)를 다양한 상태에 맞춰 시각적으로 다르게 표시하는 방법을 정의합니다. 링크는 보통 다음과 같은 상태로 구분됩니다.

1. 일반 상태 (a:link): 사용자가 방문하지 않은 링크의 스타일을 지정합니다.
2. 방문 상태 (a:visited): 사용자가 방문한 링크의 스타일을 지정합니다.
3. 호버 상태 (a:hover): 사용자가 마우스를 링크 위에 올렸을 때의 스타일을 지정합니다.
4. 활성 상태 (a:active): 사용자가 클릭하여 활성화된 링크의 스타일을 지정합니다.
5. 포커스 상태 (a:focus): 키보드로 선택되었을 때 링크의 스타일을 지정합니다.

이러한 상태에 따라 색상, 텍스트 장식, 그림자 등을 변경하여 사용자가 링크와 상호작용할 때 시각적인 피드백을 제공합니다.

/* 일반 상태 */
a:link {
  color: blue;
  text-decoration: none;
}

/* 방문 상태 */ 
a:visited {
  color: purple;
}

/* 호버 상태 */
a:hover {
  color: red;
  text-decoration: underline;
}

/* 활성 상태 */
a:active {
  color: green;
}

/* 포커스 상태 */
a:focus {
  outline: 2px solid orange;
}

 

---

CSS에서 리스트 스타일에 대한 정의

CSS에서 리스트 스타일은 HTML 문서의 순서가 있는 목록(<ol>)과 순서가 없는 목록(<ul>)의 항목 표시 방법을 정의하는 속성입니다. 이 속성들은 목록의 기호나 번호를 커스터마이징하고, 시각적으로 다양한 스타일을 제공하는 데 사용됩니다.

 

주요 리스트 스타일 속성

 

• list-style-type
  • 설명: 목록 항목의 기본 기호나 번호 유형을 설정합니다.
  • 값:
    • disc: 원형 점 기호 (기본값)
    • circle: 빈 원형 기호
    • square: 사각형 기호
    • decimal: 숫자 (순서가 있는 목록에 사용)
    • lower-alpha (또는 lower-latin): 소문자 알파벳
    • upper-alpha (또는 upper-latin): 대문자 알파벳
    • lower-roman: 소문자 로마 숫자
    • upper-roman: 대문자 로마 숫자
    • none: 기호 없음

ul {
  list-style-type: square; /* 사각형 기호 */
}
ol {
  list-style-type: decimal; /* 숫자 기호 */
}

 

• list-style-image
  • 설명: 사용자 정의 이미지를 목록 항목의 기호로 설정합니다.
  • 값: 이미지 URL

ul.custom-image {
  list-style-image: url('custom-bullet.png'); /* 사용자 정의 이미지 기호 */
}

 

• list-style-position
  • 설명: 목록 항목 기호의 위치를 설정합니다.
  • 값:
    • inside: 기호가 텍스트 안쪽에 배치됨 (기본적으로 텍스트와 같은 줄에 위치)
    • outside: 기호가 텍스트 바깥쪽에 배치됨 (기본값, 기호가 텍스트보다 왼쪽에 위치)

ul.inside {
  list-style-position: inside; /* 기호를 텍스트 안쪽에 배치 */
}

 

• list-style (단축 속성)
  • 설명: list-style-type, list-style-position, list-style-image를 한 번에 설정할 수 있는 단축 속성입니다.
  • 값: list-style-type (기호), list-style-position (기호 위치), list-style-image (이미지 기호)의 순서로 설정합니다.

 

ul.custom-style {
  list-style: square inside url('custom-bullet.png'); /* 기호: 사각형, 기호 위치: 텍스트 안쪽, 사용자 정의 이미지 기호 */
}