HTML
목록 만들기
순서 있는 목록
<ol>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ol>
목록 타입 바꾸기
<ol type="1"> 숫자
<ol type="a"> 소문자 알파벳
<ol type="A"> 대문자 알파벳
<ol type="i"> 소문자 로마자
<ol type="I"> 대문자 로마자시작점 설정 <ol start="시작점 숫자">
ex) 3부터 시작하고 싶다
<ol start="3">순서 없는 목록
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ul>
목록 타입 바꾸기
<ul type="disc"> 검은색 점
<ul type="circle"> 하얀색 점
<ul type="square"> 검은색 네모설명 목록
<dl>
<dt>이름</dt>
<dd>값1</dd>
<dd>값2</dd>
</dl>
📃 예제1
<h2>레드향 샐러드 레시피</h2>
<p><b>재료 :</b> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g<p>
<p><b>드레싱 :</b> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간<p>
<h4>재료 준비</h4>
<ol type="a">
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
</ol>
<h4>드레싱 준비</h4>
<ol type="a" start="3">
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
</ol>
<h4>샐러드 완성</h4>
<ol type="a" start="4">
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>📃 예제2
<h1>탐라국 입춘굿</h1>
<p>탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게 전통
<br>시대부터 존재했던 축제이다.</p>
<p>제주에서 입춘은 새철 드는 날.<br>
신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.</p>
<h3>일정</h3>
<ul type="disc">
<li>입춘맞이 : 1/27(월) ~ 1/31(금)</li>
<li>낭쉐코사 : 2/1(토)</li>
<li>거리굿 : 2/2(일)</li>
<li>열림굿 : 2/3(월)</li>
<li>입춘굿 : 2/4(화)</li>
</ul>
<h2>먹거리</h2>표 만들기
<h1>표만들기(2행 2열)</h1>
<table border="1">
<caption>표 제목</caption>
<tr><td>1행1열</td><td>1행2열</td></tr>
<tr><td>2행1열</td><td>2행2열</td></tr>
</table>
📃 예제
<h1>표만들기(5행 4열)</h1>
<table border="1">
<caption>선물용과 가정용 상품 구성</caption>
<tr><td>용도</td><td>중량</td><td>갯수</td><td>가격</td></tr>
<tr><td>선물용</td><td>3kg</td><td>11~16과</td><td>35,500원</td></tr>
<tr><td>선물용</td><td>5kg</td><td>18~26과</td><td>52,000원</td></tr>
<tr><td>가정용</td><td>3kg</td><td>11~16과</td><td>30,000원</td></tr>
<tr><td>가정용</td><td>5kg</td><td>18~26과</td><td>47,000원</td></tr>
</table>열이나 행의 제목 설정 하려면 제목 설정할 부분의 <td></td>를 <th></th>로 변경해주면 된다. bold 및 중앙정렬 됨
표 합치기
행, 열 합치기(3행 3열 표에서)
* 3행 1열 없애고 2행 1열과 합치기
<td>3행 1열</td> 지우고
<td rowspan="2">2행1열</td> 처리하기
rowspan="2" 2행을 합쳤다는 의미
* 1행 3열 없애고 1행 2열과 합치기
<td>1행3열</td> 지우고
<td colspan="2">1행2열</td> 처리하기
colspan="2" 2열을 합쳤다는 의미<table border="1">
<tr><td>1행1열</td><td colspan="2">1행2열</td></tr>
<tr><td rowspan="2">2행1열</td><td>2행2열</td><td>2행3열</td></tr>
<tr><td>3행2열</td><td>3행3열</td></tr>
</table>예제
<table border="1">
<tr><th>방이름</th><th>대상</th><th>크기</th><th>가격</th></tr>
<tr><td>유채방</td><td>여성도미토리</td><td rowspan="3">4인실</td><td rowspan="4">1인 20,000원</td></tr>
<tr><td rowspan="2">동백방</td><td>동성도미토리</td></tr>
<tr><td>가족1팀</td></tr>
<tr><td>천혜향방</td><td>-</td><td>2인실</td></tr>
<tr><td colspan="4">바깥채 전체를 렌트합니다</td></tr>
</table>표 영역나누기
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
영역을 나누면 영역별로 설정을 변경할 수 있다.
ex) 배경색 <thead style="background-color:blue;>열 별로 스타일 지정하기
<colgroup>
<col style="background-color:색깔;">
<col style="background-color:색깔;">
<col style="background-color:색깔;">
<col style="background-color:색깔;">
</colgroup>열 개수만큼 <col>을 입력한다.
이미지 넣기
웹에서 사용하는 이미지 .jpg .gif .png ...
- .jpg : 사진파일, 색상과 명암 다양하게 표현
- .gif : 최대 256개 색을 이용, 작은 아이콘, 블릿 이미지
- .png : 투명한 배경, 색상 다양하게 표현, 크기 작게 만듦, 웹에서 많이 사용
컴퓨터에 저장되어 있는 이미지를 이클립스의 html1 폴더에 드래그앤드롭 한다.
👀 이미지 태그
<img src="1.jpg">
<img src="" alt="이미지설명">
이미지가 없을 경우에 이미지 설명 내용이 뜬다
* 크기 설정
<img src="" width="" height="">
width : 가로 픽셀, 퍼센트
height : 세로 픽셀, 퍼센트
- 해상도(선명도) : 화면을 이루는 빛의 개수
- 픽셀 : 화면을 이루는 하나의 빛의 단위, 고정 크기
- % : 화면(브라우저)을 기준으로 몇퍼센트 적용하는 단위, 상대적 크기
* 사진 테두리
<img src="" border="굵기">