간단한 OT 진행 후 바로 html 시작
당분간 editplus를 이용할 예정
# img 및 링크
<body>
<h3>이미지 불러오기</h3>
<figure>
<img src="images/fish.jpg" width="324" height="227" border="10" alt="망둥어">
<figcaption>
<font color ="red"><b>망둥어</b></font> 일수도 있고 아닐수도 있습니다.
</figcaption>
</figure>
<!--
img = 이미지 태그
src = 이미지를 불러올 경로
- 절대경로 : C:\webtest\1.client\1일차(프로그램설치 및 사용법(배포))\images = 드라이브 내 경로를 지정
- 상대경로 : 해당 파일이 저장되어있는 경로를 기준
현재폴더(.)
상위폴더(..) : 현재폴더 기준 상위 -> ..\..\.\sub
width, height (이미지크기(픽셀수 = 모니터에 출력하는 점의 개수)) = 가로,세로
border : 테두리(선의 굵기)
alt : 툴팁(설명란 표시), html5에서 잘 안씀
figure : 설명이 필요한 이미지를 사용할 때 태그
figcaption : figure 안에 들어간 이미지에 대한 설명란
-->
<hr> <!-- 절취선 표시 -->
<figure>
<img src = "./images/waiting.jpg">
<img src = "./images/Penguins.jpg" width = "324" height = "227" border = "10">
</figure>
<a href="https://www.naver.com" target = "_blank">네이버</a> <!--
a : 링크 태그
href : 클릭 할 시 이동할 페이지명(링크, html) 혹은 ~.jsp 혹은 특정사이트
target : 해당 링크 클릭시 어디에서 오픈할지 정하는 속성
target = "_self" : 현재 페이지에서 띄우기(브라우저)
target = "_blank" : 새창으로 띄우기(브라우저)
-->
<br><a href="https://www.daum.net">다음</a>
<br><a href="#">회원가입</a> <!-- # : 가짜링크, 임시링크 -->
<hr>
공부하다가 문의가 있으시면 <a href="test1@google.com">여기를 클릭해서 메일을 주세요.</a>
</body>
# semantic
<body>
<!--
semantic : '의미를 가진다' 각 태그가 스스로 의미를 가진다.
1. header(본문 머릿말) : 사이트 소개, 메인메뉴(상단메뉴), 사이트로고
2. nav : 사이트의 메뉴(좌측), 링크 문자열과 같이 연결
3. section : 실제 문서내용이 나오는 영역 = 소제목이 있는 단락구분
4. article : 실제적 자세한 문서내용
5. aside : 사이드바
6. footer(본문 꼬릿말) : 작성자 정보, 저작권 정보(링크 문자열)
-->
<header> <!-- 머릿말 -->
<h1>산과 벗하는 산악회</h1>
<h1>주말 산행뿐만 아니라 주중산행, 무박산행도 합니다.</h1>
</header>
<nav> <!-- 2. 상단메뉴 -->
<ul>
<li><a href = "#">산행예절</a></li>
<li><a href = "#">산행준비</a></li>
<li><a href = "#">산행종류</a></li>
<li><a href = "#">보행요령</a></li>
<li><a href = "#">등산식량</a></li>
</ul>
</nav>
<section> <!-- 3. 소제목을 가진 단락을 묶어주는 논리적인 단위 -->
<header>
<h3>산행예절</h3>
</header>
<article>
<h4>인사</h4>
<p>인사를 할 때에는 너무 큰소리로 하지 말고 상대방이 똑똑히 들을 정도의 소리로 인사한다. 산쟁이 중에는 "수고 하십니다"란 인사를 싫어하는 사람이 많다.
오히려 그것 보단 "힘내세요" "조금만 가면 정상입니다" "좋은 산행 되세요"라고 인사가 적당하지 않은가 생각한다.
그리고 단체로 갈 땐 모든 사람이 인사를 하면 안된다 여러 명이 줄지어서 갈 땐 선두에 선 사람이 인사를 하고 뒷사람은 가볍게 목례정도만 하면 된다.</p>
<h4>추월을 해야 할땐 먼저 양해를 구하자.</h4>
<p>좁은 등산로에서 예고없이 추월을 한다면 배낭 같은 것이 부딪혀 서로 중심이 흐트러질 경우가 많다. 약한 사람은 튕겨 날 경우도 있다. 추월을 할 땐 미리 "먼저 가겠습니다"라고 하고 비켜주면 그때 "고맙습니다"라고 인사를 하고 추월을 하자.</p>
<h4>올라오는 사람에게 양보를 하자.</h4>
<p>산에서 많이 경험을 하였을 것이다. 내려 오는 사람보단 올라가는 사람이 시간이 촉박하다. 또 페이스 유지도 올라오는 사람이 유지하기가 어렵다. 단체일 경우에는 소수인 그룹이 양보한다.</p>
</article>
</section>
</body>
# table - 1
<body>
<center>
<h1>테이블의 위치를 정가운데로 배치</h1>
<!--
*기본적으로 테이블을 생성시 테두리가 존재하지 않는다.
표를 작성 -> border(선의 굵기) -> width, height(표의 크기, %(상대적 단위))
cellspacing(셀 과 셀 사이의 거리)
cellpadding(셀 과 문자열 사이의 거리)
align(정렬, "left" | "center" | "right")
bgcolor(배경색)
color(글자색)
*원하는 행 전체적으로 적용할때 tr 태그에 속성부여
원하는 열 하나하나 적용할때 td 혹은 th에 속성부여
-->
<table border = "2" width = "60%" height = "150"
cellspacing = "10" cellpadding = "10">
<tr align = "center" bgcolor = "yellow"> <!-- tr : 행, td : 열 -->
<th>월</th> <!-- th : 테이블에서 요소별 제목(align = "center" + <b> 합쳐짐) -->
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
<tr>
<td align = "left" bgcolor = "yellow">왼쪽</td>
<td align = "center" bgcolor = "green">가운데</td>
<td align = "right" bgcolor = "red">오른쪽</td>
<td align = "left" bgcolor = "pink">왼쪽</td>
<td align = "center" bgcolor = "cyan">가운데</td>
<td align = "right" bgcolor = "orange">오른쪽</td>
</tr>
</table>
</center>
</body>
# table - 2
<body>
<!--
caption 태그 : 표의 제목을 설정할 때 사용
-정렬
가로로 정렬 align = "left", "center", "right"
세로로 정렬 valign = "top", "middle", "bottom"
height = 높이, width = 넓이 (경우에 따라서 %가 유리할때 있음)
가로로 병합 colspan ="병합할 개수"(= 가로로 합친 개수)
세로로 병합 rowspan = "병합할 개수"(= 세로로 합친 개수)
-->
<table align = "center" border = "2" width = "60%" height = "150"
cellspacing = "10" cellpadding = "10" >
<caption>참가자 목록</caption>
<tr height = "30" bgcolor = "#66ff66">
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr height = "100" colspan = "2">
<td width = "20%" align = "left" valign = "top">홍길동</td>
<td width = "30%" align = "left" valign = "bottom">35</td>
<td width = "50%" align = "center" valign = "middle">남</td>
</tr>
<tr height = "100">
<td>테스트</td>
<td>30</td>
<td>남</td>
</tr>
</table>
</body>'국비학원 > 공부' 카테고리의 다른 글
| 6일차 jsp(미니 프로젝트) (0) | 2023.04.28 |
|---|---|
| 5일차 jsp(Array) ~ DOM (0) | 2023.04.28 |
| 4일차 jsp(2) (0) | 2023.04.24 |
| 3일차 css(2) ~ javascript(jsp) (0) | 2023.04.23 |
| 2일차 css ~ div (0) | 2023.04.20 |