[CSS] 문단과 목록 스타일 2-3

Yumin Jung·2023년 1월 18일
1

text-align 속성

텍스트의 정렬 방식을 지정한다. 직관적으로 알 수 있듯, 기본값인 left는 왼쪽, center는 가운데, right은 오른쪽으로 텍스트(및 인라인 요소들)을 정렬한다. justify는 왼쪽으로 정렬하면서, 텍스트가 여러 줄이 될 때 마지막 줄을 제외한 줄들의 오른쪽이 나란히 되도록 각 줄의 공간을 조절한다.

(letter/word)-spacing 속성

letter-spacing : 글자의 자간
word-spacing : 단어 간격
(단위 em 더 권장 : 상대적)

line-height 속성

줄 높이 조절
(단위 em 더 권장 : 상대적)

text-indent 속성

들여쓰기 or 내여쓰기
(단위 em 더 권장 : 상대적)

list-style 속성

ul과 ol 목록의 불릿, 숫자 스타일을 지정할 수 있다. ul, ol 여부와 관계없이 기호, 서수, 원하는(커스터마이징 : 따옴표에 넣어서 사용가능) 문자, 이모지, 이미지 등을 사용할 수 있다. none 값을 사용하여 아무것도 붙이지 않을 수도 있다.

HTML 코드에서 조절하는 것은 의미가 없음을 보여준다. ->CSS로 다 변경이 가능하다.
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style

나란히 두는 emmet

^ 를 이용해 한 단계 위로 가는 emmet 기능을 사용할 수도 있다.

ul>li{ul 아이템 $}*3+ol>li{li 아이템 $}*3

=

<ul>
	<li>ul 아이템 1</li>
	<li>ul 아이템 2</li>
	<li>ul 아이템 3</li>
	<ol>
		<li>li 아이템 1</li>
		<li>li 아이템 2</li>
		<li>li 아이템 3</li>
	</ol>
</ul>

<+대신 ^를 사용하였을 때>

ul>li{ul 아이템 $}*3^ol>li{li 아이템 $}*3

=

<ul>
	<li>ul 아이템 1</li>
	<li>ul 아이템 2</li>
	<li>ul 아이템 3</li>
</ul>
<ol>
	<li>li 아이템 1</li>
	<li>li 아이템 2</li>
	<li>li 아이템 3</li>
</ol>
profile
문과를 정말로 존중해

0개의 댓글