Table, Display, 목록 꾸미기

FrontEnd/HTML

by H_Develop 2022. 6. 20. 17:47

<Table> 을 CSS로 경계선, 글자 정렬 등의 작업

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>



</style>
</head>
<body>
	<h3></h3>
    <table>
    	<tr>
        	<th id="col1">종류</th>
        	<th id="col2">대인</th>
        	<th id="col3">소인</th>
        	<th id="col4">비고</th>
        </tr>
        <tr>
        	<td class="bold">주간권</td>
            <td>20,000원</td>
            <td>10,000원</td>
            <td rowspan="3">공원 입장 및 놀이시설 이용<br>(일부 놀이기구 별도 요금)</td>
        </tr>
        <tr>
        	<td class="bold">야간권</td>
        	<td>15,000원</td>
        	<td>8,000원</td>
        </tr>
        <tr>
        	<td class="bold">2일권</td>
        	<td>30,000원</td>
        	<td>15,000원</td>
        </tr>
    </table>
</body>
</html>

Display 방식

인라인 (inline), 블록 (block) 방식 두가지.

inline 수평 방향으로, 줄 바꿈 없음

block 전체 행을 차지하여 앞 뒤 자동 줄 바꿈이 일어남.

inline-block 두가지 특성을 모두 가지게 된다.

default inline-block 방식 (따로 default를 지정하는 것은 없고, 속성을 넣지 않으면 자동으로 default 값이 됨.)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	
	div {width : 100px; height : 100px;	color : white;}
	
</style>
</head>
<body>	

	inline		 <div style="display : inline; background-color : black;">inline</div>inline
	block		 <div style="display : block; background-color : red">block</div>block
	inline-block <div style="display : inline-block; background-color : blue;">inline-block</div>inline-block
	default		 <div style="display : default; background-color : yellow; color : black;">default</div>
	
</body>
</html>

1. inline 은 자신의 크기를 포기하며, 한 행에서 다른 글자와 같이 있는다.

2. block 은 자신의 크기를 유지하며, 한 행에 유일한 조건이 되려한다.

3. inline 은 자신의 크기를 유지하며, 한 행에서 다른 글자와 같이 있는다.

목록 꾸미기

HTML 목록 테그인 <ul> <ol> <li> 를 만들고, CSS사용해서

글머리 기호 list-style-type

글머리 이미지 삽입 list-style-image

수평 방향의 목록 작성 list-style:none; 등을 만들 수 있다.

<ul> : disc, circle, square
<ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha
공통 : none

https://www.codingfactory.net/10537

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	li {list-style-type : square;}	
    
</style>
</head>
<body>
	<h3>곤충관 체험 프로그램</h3>
	<p>서울 대공원에서 한 겨울에 나비와 함께 하세요.</p>
	<ul>
		<li>기간 : 2022.12.01 ~ 12.30</li>
		<li>장소 : 곤충관 내 특별 전시장</li>
		<li>대상 : 동물원 관람객 누구나</li>
	</ul>
</body>
</html>

'FrontEnd > HTML' 카테고리의 다른 글

레이아웃 (배치),(margin:0 auto;),(float),(clear),(layout) (0)	2022.06.21
예제 (0)	2022.06.21
CSS 배경 이미지, repeat, background-position (0)	2022.06.20
선택자 (그룹, ID, CLASS, 하위) (0)	2022.06.20
DIV (BOX, division구분) (0)	2022.06.20