HTML CSS
HTML - 텍스트,표,이미지 태그
CNOW
2024. 4. 10. 20:28
dl
<body>
<!-- dl 목록으로 dt가 제목역할, dd는 항목 들여쓰기 -->
<dl>
<dt>올레 1코스</dt>
<dd>코스: 시흥 초등학교 옆 - 광치기 해변</dd>
<dd>거리: 14.6km(4~5시간)</dd>
<dt>올레 2코스</dt>
<dd>코스: 시흥 초등학교 옆 - 온평 포구</dd>
<dd>거리: 14.5km(4~5시간)</dd>
</dl>
</body>table
table - 만들기
<body>
<!-- <tabel></tabel> : 표구성 -->
<!-- 테이블에서 border="0"이 기본값으로 표시 안됨 -->
<!-- <table border="0"> -->
<table border="1">
<!-- <tr></tr> : 행추가 -->
<!-- <td></td>: 열추가 -->
<!-- <th></th>: 제목 셀: 굵게 표시 -->
<tr>
<th>1행 1열(제목)</th>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<th>2행 1열(제목)</th>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<th>3행 1열(제목)</th>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
</body>
table - 셀 합치기
<body>
<table border="1">
<colgroup>
<col style="width: 100px;">
<col style="width: 300px;">
<col style="width: 100px;">
<col style="width: 300px;">
</colgroup>
<tr>
<th>이름</th>
<!-- style="width: ~: 스타일을 줘서 열 너비를 늘림 -->
<td style="width: 120px;"></td>
<th>연락처</th>
<td style="width: 120px;"></td>
</tr>
<tr>
<th>주소</th>
<!-- colspan : 열을 병합 -->
<td colspan="3"></td>
</tr>
<tr>
<th>자기소개</th>
<td colspan="3"></td>
</tr>
</table>
</body>
table - caption / figcaption
<body>
<!-- figure, figcaption으로 표의 제목 -->
<!-- figure은아래에 붙일시 아래에 붙는다 / caption 태그는 아래에 코딩해도 위에 출력됨 -->
<figure>
<!-- <figcaption>
<p>
<b></b> : 강조해서 진하게 표시
국내에서 자주 사용하는 <b>모던 브라우저</b></p>
</figcaption> -->
<table border="1">
<!-- caption : 표의 제목으로 가운데 정렬 -->
<!-- <caption>
<strong>Modern Browser</strong>
<p>국내에서 자주 사용하는 모던 브라우저</p>
</caption> -->
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<td>Google</td>
<td>https://www.google.com/chrome/</td>
</tr>
<tr>
<th>파이어폭스(Firefox)</th>
<td>Mozilla</td>
<td>https://www.mozilla.org/ko/firefox</td>
</tr>
<tr>
<th>엣지(Edge)</th>
<td>Microsoft</td>
<td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>
</tr>
</table>
<figcaption>
<p>
<b></b> : 강조해서 진하게 표시
국내에서 자주 사용하는 <b>모던 브라우저</b></p>
</figcaption>
</figure>
</body>col
<body>
<table border="1">
<colgroup>
<!-- <col style="background-color: blue;"> -->
<!-- span="2" => 영역을 2개의 열로지정 -->
<!-- background-color:blue => 배경색을 파란색 -->
<col span="2" style="background-color: blue;">
<col>
<col style="background-color: yellow;">
</colgroup>
<caption>colgroup 연습</caption>
<tr>
<!-- width: 100px; height: 30px: 너비 100px, 높이 30px -->
<td style="width: 100px; height: 30px;" ></td>
<td style="width: 100px; height: 30px;" ></td>
<td style="width: 100px; height: 30px;" ></td>
<td style="width: 100px; height: 30px;" ></td>
</tr>
<tr>
<td style="width: 100px; height: 30px;" ></td>
<td style="width: 100px; height: 30px;" ></td>
<td style="width: 100px; height: 30px;" ></td>
<td style="width: 100px; height: 30px;" ></td>
</tr>
</table>
</body>img
1
<body>
<h1>바빠 시리즈</h1>
<!-- img : 이미지 삽입 -->
<img src="images/cover.jpg">
<!-- alt : 이미지가 깨졌을 시 메세지 출력 -->
<img src="images/cover2.jpg" alt="없어">
</body>2
<body>
<h1>이미지 크기 조절</h1>
<!-- 원본 이미지는 "width="250" height="250" 보다 크다 -->
<img src="images/gugudan.jpg">
<img src="images/gugudan.jpg" width="250" height="250">
</body>figcaption
<body>
<h1>제품 선택</h1>
<img src="images/prod.jpg">
<!-- figure, figcaption : 이미지 설명글 -->
<figure>
<figcaption>
예멘 모카 마타리(Yemen Mocha Mattari)
</figcaption>
</figure>
예멘 모카 마타리(Yemen Mocha Mattari)
</body>link
<body>
<h1>텍스트 링크 만들기</h1>
<!-- a 태그에 href 속성으로 문서나 웹사이트 주소로 이동 -->
<a href="http://www.naver.com">네이버 홈페이지</a>
<h1>이미지 링크 만들기</h1>
<!-- a 태그에 img 태그를 사용해서 이미지로 이동 -->
<a href="http://www.naver.com">
<img src="images/naver.jpg" alt="구글로 꺼져"></a>
</body>target
<body>
<h1>텍스트 링크 만들기</h1>
<p>
<a href="http://www.easyspub.com">
이미지 퍼스블리싱 홈페이지(현재화면)
</a>
</p>
<!-- target="_blank" => 기존 탭은 그대로 두고, 새탭이 생기면서 이동 -->
<p>
<a href="http://www.easyspub.com" target="_blank">
이미지 퍼스블리싱 홈페이지(현재화면)
</a>
</p>
</body>child, parent
<chlid>
<body>
<img src="images/git.jpg">
<br><br>
<h2>문서 지옥, 깃&깃허브로 하루 안에 탈출한다.</h2>
<p>1시간이면 초보 탈출, 5시간이면 기본 활용법 완전 정복!</p>
<p>자주 쓰는 기능을 모두 담아 한권에 끝낸다!</p>
<p>
<!-- <a href="http://www.easyspub.co.kr/20_Menu/BookView/539/PUB"> -->
<!-- coupang : igrame 허용됨 -->
<a href="http://www.coupang.com">
도서 상세 보기(현재 화면에)
</a>
</p>
<p>
<!-- " target="_top" => 부모 창 전체를 사용해서 이동 -->
<a href="http://www.easyspub.co.kr/20_Menu/BookView/539/PUB" target="_top">
도서 상세 보기(전체 화면에)</a>
</p>
</body>
<parent>
<body>
<h1>Do it! 지옥에서 온 문서 관리자 깃 & 깃허브 입문</h1>
<p>
아래 화면은 iframe 태그를 이용해 외부 문서를 현재 문서에 삽입한 것입니다.
</p>
<br><br>
<!-- iframe : html 문서를 삽입할때 사용 -->
<iframe src="child.html" width="600" height="620"></iframe>
</body>anchor
<body>
<h1>앵커 만들기</h1>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<ul id="menu">
<!-- #content1 -> id="content1"로 찾아감 -->
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p><a href="#menu">[메뉴로]</a></p>
</body>실습
ul 안에 ul할 경우 빈공이 나타남
<body>
<h1>카카오 신입 사원 모집 공고</h1>
<p><b>IT</b> 기획, 편집 부서에서 함께 할 신입 사원을 모집합니다.</p>
<ul>
<li>모집 직군 : 편집 기획 부서</li>
<li>직무 내용 : 도서 프로듀싱 업무 (신입 지원 가능)</li>
<ul>
<li>도서 기획, 편집</li>
<li>도서 홍보, 독자 소통</li>
</ul>
<li>접수 마감일 :<b>2021.3.6</b></li>
</ul>
<p>자세한 내용은 공지 게시판을 참고하세요.</p>
</body>
