HTML 12일차 - 목록태그,여백 계산하기

목록태그

사이트 상에서 목록으로 볼 수 있는 존재들을 만들때 사용하는 태그

비슷한 형태의 존재가 3개 이상일 경우 목록으로 볼 수 있다.(항상 예외는 존재 한다!!!)

<ul>,<ol> 사용시 하위 목록에 <li>태그를 사용하여 나열한다.

<ul> 태그는 순서가 없는 태그이고 <ol>은 순서가 있는 태그이다.

예)

<ul>

<ul>
	<li>사과</li>
	<li>딸기</li>
	<li>포도</li>
	<li>키위</li>
</ul>

 

을 사용하면 아래와 같이 출력된다.

●사과

●딸기

●포도

●키위

<ol>

<ol type="A">
		<li>1번손님</li>
		<li>2번손님</li>
		<li>3번손님</li>
		<li>4번손님</li>
</ol>

 

을 사용하면 아래와 같이 출력된다.

A.1번손님

B.2번손님

C.3번손님

D.4번손님

li 속성에 list-style:none를 넣어주면 목록을 없애 줄 수 있다.

 

여백계산법

웹사이트의 한정된 공간에서 동일한 가로 길이와 여백울 줘서 깔끔하게 태그들을 배치 시켜주기위한 방법

(총 가로의 길이 - 여백의 갯수 * 임의의 여백사이즈 ) / 한줄에 들어가야하는 내용물의 갯수 = 내용물 하나의 가로길이

1200px - 3 * 20px(10px~30px) / 4 = 285px

임의의 여백사이즈를 대입해서 값이 소수점 단위로 나올경우 소수점 값이 나오지 않을때 까지 다시 임의의 여백 숫자를 대입한다.

 

 

여백 계산하여 배치 후 반드시 넣어줘야하는 속성

1. 가로 배치하기위한 float:left 여백 계산법을 사용하는 대부분의 배치인 ul li 태그는 display:block 속성이기때문

2. 태그사이의 여백을 주기위한 margin-left,margin-right 를사용하여 값(계산시 사용한 임의여백사이즈)을 입력해준다.

3. 맨앞또는 맨뒤 태그에는 여백이 없어야 하기때문에 li:nth-child(1){margin-left:0px}를 사용한다.

4. 연속적으로 여백이 필요 없을 경우 li:nth-child(한줄에 필요한 내용물의 갯수n+1){margin-left:0px} 이렇게 작성하여준다.

5. float:left를 사용하기때문에 ul에 클래스 .clearfix:after{content:"";display:block;clear:both;} 를

목록에 불필요한 기호를 없애기 위해 li 에 속성 list-style:none을 적용하여 준다.