Multi Developer SuHo

CSS 링크(link), 리스트 스타일(list-style) 본문

html5+CSS3

CSS 링크(link), 리스트 스타일(list-style)

Dreaming Developer Student 2024. 2. 24. 16:51
SMALL

안녕하세요~ 오늘은 CSS 링크에 스타일을 적용하는 방법, 리스트 스타일에 대해 알려드리겠습니다. 
글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.

https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com


먼저 링크에 스타일을 적용하는 방법부터 알아보겠습니다. 
다음 소스코드는 a 링크에 스타일을 적용한 소스코드입니다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   a {
     color:beige;
     background-color: cornflowerblue;
     font-size: 30px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: bold;
     text-align:center;
     text-decoration: none;
   }
  </style>
</head>
<body>
  <ul>
    <li><a href="#">안녕하세요</a></li>
    <li><a href="#">오늘도 화이팅!!</a></li>
  </ul>
</body>
</html>

 

링크에 스타일이 적용된 것을 확인할 수 있습니다.

다음은 링크 상태에 따라 각각 다르 스타일을 지정할 수 있는 특징이 있습니다. 

다음 CSS 코드는 링크에 상태에 따라서 각각 다르게 스타일을 지정할 수 있는데 대표적인 상태 입니다. 

a:link {
    color: green; /* 방문하지 않은 링크의 색상을 지정 */
}
a:visited {
    color: blue; /* 방문한 링크의 색상을 지정 */
}
a:hover {
    color: red; /* 마우스를 올려놓은 링크의 색상을 지정 */
}
a:active {
    color: yellow; /* 클릭 중인 링크의 색상을 지정 */
}


링크 상태에 따라 다르게 스타일을 적용할 수 있는  "active" 상태를 예를 들어 소스코드를 작성하였습니다.

특정 상태에 스타일을 지정할 때는 선택자와 상태를 (:) 콜론 으로 연결해야 합니다. 
a 링크인데 hover 상태로 스타일을 지정하고 싶을때는 "a:hover"  이렇게 적용하시면 될 것 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   a {
     color:beige;
     background-color: cornflowerblue;
     font-size: 30px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: bold;
     text-align:center;
     text-decoration: none;
   }
   
   a:active {
     background-color: darkorange;
   }
  </style>
</head>
<body>
  <ul>
    <li><a href="#">안녕하세요</a></li>
    <li><a href="#">오늘도 화이팅!!</a></li>
  </ul>
</body>
</html>




이렇게 클릭중인 링크의 색상이  동적으로 변경되신 것을 확인할 수 있습니다. 
====================================================================================
다음은 리스트에 적용할 수 있는 대표적인 속성을 살펴보겠습니다.
1. list-style-type : 이 속성은 리스트 아이템의 표시기를 지정합니다. 

2. list-style-position : 이 속성은 표시기의 위치를 지정합니다. inside는 표시기를 내부에 넣어 들여쓰기를 합니다. outside는 표시기를 외부에 두어 들여쓰지 않습니다.

3. list-style-image : 이 속성은 이미지를 표시기로 사용합니다. 이미지의 URL을 지정하면 해당 이미지가 표시기로 사용됩니다.
4. list-style : 이 속성은 위 세 가지 속성을 한 번에 지정할 수 있습니다. 순서는 list-style-type, list-style-position, list-style-image 입니다. 

다음 소스코드는  list-style-type 과 list-style 을 적용한 결과입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      list-style-type: georgian;
      list-style: inside;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#">안녕하세요</a></li>
    <li><a href="#">오늘도 화이팅!!</a></li>
  </ul>
</body>
</html>

 



이상으로 링크에 스타일을 적용할 수 있는 방법, 링크 상태에 따라 다르게 스타일을 적용,  리스트에 적용할 수 있는 대표적인 속성들에 대해 알아보았습니다. 설명이 부족한 부분이 있더라도 한 번씩 읽고 넘어가주시면 감사하겠습니다. 

LIST
저작자표시

'html5+CSS3' 카테고리의 다른 글

CSS 배경에 적용할 수 있는 속성(Background-Style)  (0) 2024.02.29
CSS 가상 선택자(Pseudo-selector)  (0) 2024.02.24
CSS 텍스트와 폰트 스타일  (0) 2024.02.23
CSS 선택자의 종류와 개념  (0) 2024.02.20
HTML에 스타일을 적용하는 방법 인라인(In-line), 익스터널(External), 인터널(Internal)  (0) 2024.02.19
'html5+CSS3' Related Articles more