솔미는 성장중
[CSS] li태그 점 추가/수정(모양 바꾸기)/삭제 (feat. reset.css cdn) 본문
[문제 상황]
웹 브라우저마다 기본적으로 설정되어있는 css값들이 있다.
하지만 이러한 요소에 영향을 받으면 안되므로 reset.css cdn 내용을 html에 추가해주어야한다.
<reset.css cdn>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"><내용을 추가한 html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SOLMI</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">
</head>
<body>
<ul>
<h3>나의 장점</h3>
<li>착하다</li>
<li>예쁘다</li>
<li>고민상담을 잘해준다</li>
<li>도전 정신</li>
</ul>
</body>
</html>
이 코드를 짜고 기대했던 화면은 다음과 같다.
하지만 실제 출력된 화면은..
사진에서 보다싶이 h3태그, 줄 간격, li태그 모두 의도한 대로 출력되지 않는 것을 볼 수 있다.
reset.css cdn이 브라우저 기본 설정값을 초기화해주는 역할을 하기 때문이다!
reset.css cdn을 삭제해주면 위쪽 사진과 같게 출력되지만 이는 좋은 방법이 아니다.
[해결법]
css에서 추가적인 내용을 작성해주면 된다!
h3 {
font-weight: 700;
font-size:20px;
margin: 20px;
}
li{
list-style: inside;
line-height: 20px;
}- font-weight : 글자의 굴기
- font-size : 글자의 크기
- margin : 외부 여백
- list-style : 들여쓰기 (점을 생기게 해준다)
- line-height: 줄간격
의도했던 대로 출력되도록 코드를 짜보았다!
점 삭제
list-style: none;
[추가 공부 : 모양 바꾸기]
1. 네모
list-style-type: square;(그외에 circle (빈 동그라미), korean-hangul-formal (일, 이, 삼, 사) 등 다양한 시도를 해보도록 하자)
See the Pen li 네모 by sol _ (@sol-_) on CodePen.
2. 이미지 삽입 (1)
See the Pen Untitled by sol _ (@sol-_) on CodePen.
> 이미지 크기가 맞지 않을 때
아래 링크를 참고하자. 다양한 방법들이 있지만 어떤 코드 하나를 추가함으로써 해결하는 방법은 없었따.
[주요 내용 요약]
1) li::before 을 만들어서 height와 width를 지정해주고 display: inline-block;사용
2) background-image에다가 url을 삽입하고 padding, background-position, background-size를 통해 크기 및 위치를 조정
(li태그 내에 list-style: none;으로 설정)
3) svg확장자를 사용한 이미지의 경우 텍스트 편집기에서 편집 가능.
예시) 10 10 이미지로 표시되도록 내부적으로 크기를 조정한 32 32 svg
<?xml version="1.0" ?><svg width="10" height="10" id="chevron-right" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:#34a89b;" d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"/></svg>
CSS list-style-image size
I'm trying to set custom SVG icons with CSS on a <ul>'s list items. Example: <ul> <li style="list-style-image: url('first.svg')">This is my first item</li> <li s...
stackoverflow.com
3. 이미지 삽입 (2)
사실 이모지 삽입은 아주 쉽다. 이렇게 특수기호의 유니코드를 입력해주면 된다.
list-style-type: "\유니코드명";See the Pen li 이미지3 by sol _ (@sol-_) on CodePen.
유니코드는 아래 링크에서 참고하자
1) https://symbl.cc/kr/emoji/animals-and-nature/
동물과 자연 🐀 🐁 🐂 🐃 🐄 (◕‿◕) SYMBL
유니 코드 문자 검색 웹 서비스. 즐겨 찾는 문자를 찾아서 복사하십시오 : 😎 에모지, ️ 화살표, ✪ 별, 💲 통화, 🈂️ 글쓰기 시스템 및 기타 🚩
symbl.cc
2) https://www.emojiall.com/ko/emoji/%F0%9F%98%84
“😄” 뜻: 미소 짓는 눈으로 활짝 웃는 얼굴 Emoji 이모티콘
둥근 노란 얼굴에 👀 두 눈은 미소를 지으며 구부러졌고 입은 👄 넓게 웃으며 윗니 열을 보여주었다 🦷 . 다른 플랫폼 이미지도 약간의 혀를 보여준다.일반적으로 😃 보다 더 깊은 행복과 웃
www.emojiall.com
하단에 보면 '코드 포인트'라고 적혀있는 것을 복사해서 쓰면 된다.
3. 이미지 삽입 (3)
list-style-image: linear-gradient(to left bottom, red, blue);직접 코드로 image를 만들어낼 수 있는 것이다.
See the Pen Untitled by sol _ (@sol-_) on CodePen.
[참고 링크]
list-style 관련 문서 (여기 다있다)
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
'HTML & CSS' 카테고리의 다른 글
| [CSS] float & clear / flex 예제 (0) | 2023.07.17 |
|---|---|
| [CSS] 중앙 정렬 하는 방법 (0) | 2023.07.17 |
