CSS [4] – List Style, 리스트 속성 정리

CSS Tutorial – Full Course for Beginners

Lesson 8 – List Styles

        <article>
            <h2>Ordered List</h2>
            <ol start="5" reversed>
                <li>Step One</li>
                <li value="26">Step Two</li>
                <li>Step Three</li>
            </ol>
        </article>
        <article>
            <h2>Unordered List</h2>
            <ul>
                <li>Step One</li>
                <li>Step Two</li>
                <li>Step Three</li>
            </ul>
        </article>

ol {
  list-style-type: lower-alpha;
  padding: 0;
}

ul {
  list-style-type: square;
  text-align: center;
  list-style-position: inside;
  color: #00f;
  line-height: 1.6;
  /* list-style-image: url('../images/checkmark.png'); */
  /* overwrite or fallback */
  /* list-style: square url('../images/checkmark.png') inside; */
}

ul li:nth-child(even) {
  color: red;
}

ul ::marker {
  color: red;
  font-family: fantasy;
  font-size: 1em;
  content: "only $5 >> ";
  /* content에 svg 넣는 것 가능 */
}

• list-style-type: none;일 경우 마커를 없앨 수 있음
  • none인 경우에도 ::marker의 content 속성을 넣어주면 화면에 노출됨

Lesson 9 – Mini Project

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0.5rem;
  font-family: "Roboto", sans-serif;
  text-align: center;
}

nav {
  border: 2px solid #333;
  border-radius: 2rem;
  margin: 0 auto 1rem;
  max-width: 600px;
  font-size: 3rem;
  line-height: 7rem;
}

h2 {
  padding: 1rem;
  background: gold;
  border-radius: 2rem 2rem 0 0;
}

ul {
  list-style-type: none;
}

li {
  border-top: 1px solid #333;
}

/* 마우스 오버 시에 전체 칸이 선택됨, 클릭할 수 있는 범위가 넓어짐 */
li a {
  display: block;
}

li a,
li a:visited {
  text-decoration: none;
  color: #333;
}

li a:hover,
li a:focus {
  background: #333;
  color: whitesmoke;
  cursor: pointer;
}

li:last-child a {
  border-radius: 0 0 2rem 2rem;
}