gwooden_코린이

CSS 목록 만들어보기 본문

프론트엔드/html

CSS 목록 만들어보기

gwooden22 2022. 12. 15. 12:41
728x90

1. 목록

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <ol>
    <li>첫 번째 목록
      <ul>
        <li class="b1">첫 번째 하위 목록</li>
        <li class="b2">두 번째 하위 목록</li>
      </ul>
    </li>
    <li>두 번째 목록
      <ul>
        <li>처 번째 하위 목록</li>
        <li>두 번째 하위 목록</li>
      </ul>
    </li>
  </ol>
</body>
</html>
ol {
  list-style-type: lower-roman;
}

 

 

ul {
  list-style-type: square;
}

 

 

ol {
  list-style-type: lower-roman;
  background-color: aqua;
}

ul {
  list-style-type: square;
  background-color: bisque;
}

 

 

.b1 {
  background-color: blueviolet;
}

.b2 {
  background-color: chartreuse;
}

 

 

list-style-image: url("../image/KakaoTalk_20221215_121529290.gif");

2. 네비게이션 바 만들기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style2.css">
</head>
<body>
  <ul class="nav">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JAVA</a></li>
    <li><a href="#">JSP</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</body>
</html>
.nav {
  list-style: none;
}

/* 
아래 처럼 전체로 잡는것 보다 아래 두 번째 방법 처럼 구체적으로 하는게 좋다.
a {
  text-decoration: none;
} */

.nav li a {
  text-decoration: none;
}

.nav li {
  float: left;
  text-align: center;
  width: 10%;
}

728x90
저작자표시 비영리 변경금지 (새창열림)

'프론트엔드 > html' 카테고리의 다른 글

CSS 색상 투명도 조절 및 배경이미지 활용  (0) 2022.12.15
CSS 파비콘 적용해보기  (0) 2022.12.15
CSS 폰트 사용 해보기  (0) 2022.12.15
CSS 태그 스타일 작업 해보기  (0) 2022.12.15
VSCODE를 사용한 HTML 해보기  (0) 2022.12.14
'프론트엔드/html' Related Articles more
Comments