정렬과 간격
1. text-align : 텍스트의 정렬방식 지정
- left: 왼쪽
- center : 가운데
- right : 오른쪽
- justify : 양쪽 정렬
- letter-spaceing : 자간
- word-spacing : 단어 간격(스페이스의 길이)
- line-height : 줄 높이 조절
사용예시
p{ text-align: center; /*가운데정렬*/ letter-spacing: 2px; /*단어 간격 2px*/ word-spacing: 1cm; /* 스페이스 간격 1cm */ line-height: 1.5em; /* 줄 간격 1.5em */ }<body> <p> 치코리타는 포켓몬스터에 나오는 포켓몬 중 하나이다. 치커리에서 이름을 따왔다는 말도 들어본 것 같다. 2세대 풀타입 스타팅 포켓몬으로 그냥 타는 쓰레기라는 별명이 잘 맞는 것 같다. </p> </body>실행결과
✏️ cm, px, em 등의 단위들의 감을 잡기 위해서 많이 사용해 보는 것이 좋을 것 같다.
text-indent
- +범위로 들여쓰기 조절, -범위로 내어쓰기 조절
list-style
- ul, ol목록의 불릿, 숫자 스타일을 지정할 수 있다.
- 기호, 서수, 문자, 이모지, 이미지까지 사용 가능하다.
- none을 통해서 아무것도 붙이지 않을 수도 있다.
사용예시
ul > li { /*css*/ list-style: "🌱" /*ul의 자식요소의 리스트스타일을 새싹모양으로 지정*/ } ol { /* ol요소의 리스트스타일을 소문자 알파벳으로 지정*/ list-style: lower-alpha; }<body> <!--html--> <ul> <li>치코리타1</li> <li>치코리타2</li> <li>치코리타3</li> </ul> <ol> <li>타는쓰레기</li> <li>타는쓰레기</li> </ol> </body>실행결과
리스트 스타일에 이미지 사용도 가능하다!
ul{ list-style-image: url(./love.png); }결과
꾸준히 진득하게 앞으로