반응형
요번에 HTML에 대해서 배운거를 블로그로 계속 작성하며 공부했다.
하지만 난 java ,DB만 해봤어서 매우힘들고 생소했다.
복습을 함으로써 조금이라도 익숙해져보자!
거의 코드위주로 복습을할거다
코드옆에 주석을 조금씩 달아놓을것임!!
일단 금요일의 예제문제에 대한 코드를남겨두겠다
예제)
나의 답(추후에 코드를 풀어서 따로 블로그 만들 예정)
1) 기본
1-1) text
1-2)list
1-3)table
1-4) a(링크)
1-5) form
2)
1) 기본
! + enter 를 하면 HTML구조가 전부 자동완성된다 이용하자!!
(주석 단축키 : c +enter)
<!DOCTYPE html>
<!-- HTML문서를시작한단 의미-->
<html lang="en">
<!--해당페이지는 en(영어)로 이루어져있다다-->
<head>
<!--페이지에보이지않는 숨은 요소-->
<meta charset="UTF-8"> <!-- 인코딩 방식-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <!--페이지 상단에 표시되는 문장-->
</head> <!-- /head 로 head의 종료를알림-->
<body><!-- 페이지에 표시되는 모든 것-->
<h1>안녕</h1>
<h2>안녕</h2>
<h3>안녕</h3>
<h4>안녕</h4>
<h5>안녕</h5>
<h6>안녕</h6>
<!--h1~h6 (제목) 숫자가클수록 크기가작아짐-->
<!-- h 는 자동 줄바꿈이 이루어짐-->
<hr><!--가로로 긴 줄-->
<p>
<!-- 그냥 문단을 나누겠단 의미뿐-->
작다(less than) : <
<br><!-- 줄 바꿈 (\n)-->
작거나 같다(less than equal) : ≤
<br>
크다(greater than) : >
<br>
크거나 같다(greater than equal) : ≥
<br>
안 녕(일반공백)
<br>
안 녕('& nbsp;')
<br>
안   녕('& emsp;')(nbsp보다 조금 간격이 큼)
</p>
</body>
</html>
1-1 text)
<body>
<h1>텍스트의 효과</h1>
<b>안녕하세요</b><!--두껍게-->
<strong>동곤자바</strong>
<mark>입니다</mark><!-- 형광펜(CSS사용한다면 더 좋음) -->
<s>아닙니다</s><!-- 취소선 -->
<u>지금 HTML공부 빡세네요</u><!--밑줄-->
<small>화난다</small> <!--작게-->
<pre> <!-- 코드는 pre태그 내에서만 사용가능 -->
<code>
private static int sum(int x){
int sum = 0;
}
</code>
</pre>
</body>
1-2) list
<body>
<!-- ul>li 로 하위태그까지 한번에생성가능-->
<ul><!--순서없는 리스트-->
<li>java</li>
<li>html</li>
<li>DB</li>
</ul>
<ul type="square">
<li>java</li>
<li>html</li>
<li>DB</li>
</ul>
<ul type="circle"><
<li>java</li>
<li>html</li>
<li>DB</li>
</ul>
<hr>
<ol><!-- 순서가 있는 리스트 -->
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol type="I"><!--소문자도가능-->
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol type="A">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
1-3) table
<body>
<caption>테이블1</caption> <!--제목-->
<table border="3"> <!--테이블 선의 굵기-->
<tr>
<th>1열</th> <!-- 테이블의 기준-->
<th>2열</th>
<th>3열</th>
<th>4열</th>
</tr>
<tr><!--하나의 행-->
<td>1</td><!--하나의 열-->
<td>2</td>
<td>3</td>
<td rowspan="2">4</td> <!--2개의 행을 다 쓴다(세로)-->
</tr>
<tr>
<td colspan="2">5</td><!--2개의 열을 사용(가로)-->
<td>6</td>
</tr>
</table>
<hr><br>
<table border="1">
<caption>이미지</caption>
<tr>
<!--../ : 최상위계층 연결-->
<td><img src="../images/DB.png" alt="DB" width="100px"></td>
<!--img도 테이블에 넣을 수 있음 alt로오류가 발생시
어디서 발생했는지 알 수 있으며 , width로 크기 지정-->
<td>
<figure> <!--이미지의 설명을위해 존재하는태그-->
<figcaption>html</figcaption>
<!--하위태그인 figcaption에 설명을 달자자-->
<img src="../images/html.png" alt="html" width="100px"></td>
</figure>
<td>
<figure>
<figcaption>자바바</figcaption>
<img src="../images/ja.png" alt="java" width="100px"></td>
</figure>
</tr>
</table>
</body>
1-4) a 링크
<body>
<!-- a href="주소" : 링크연결-->
<h1>링크로 연결</h1>
<a href="#">비어있는링크</a>
<br>
<!-- target="_blank" : 새창으로연결(권장)-->
<a href="https://www.naver.com/" target="_blank">네이버</a>
<h1>다른파일로 연결</h1>
<br>
<a href="./study1.html" target="_blank">study1링크</a>
<br>
<a href="study2.html" target="_blank">study2 링크</a>
<h1>이미지로 연결</h1>
<a href="D:\workspace\htmldong\html1\images\river1.jpg"
target="_blank">river1</a>
<h1>이미지를 클릭해서 링크로 이동하게하기</h1>
<a href="https://www.youtube.com/?hl=ko&gl=KR&app=desktop" target="_blank">
<img src="../images/youtub.png" alt="유튭">
</a>
</body>
1-5) form
<form ><!--사용자로부터 데이터입력받을수있는 창 구성-->
<fieldset><!--하나의 그룹이라고 생각하면 됨-->
<legend> input기능들</legend>
<p><!--아무의미X(문단나누기용)-->
<caption>글자 입력</caption>
<input type="text" placeholder="글자입력하세요" required>
<!--placeholder : 입력이드-->
<!--required 필수입력-->
<br>
<caption>5~20자리 숫자</caption>
<input type="number"min=5 max="20">
<br>
<caption>날짜선택</caption>
<input type="date">
<br>
<caption>pw</caption>
<input type="password" placeholder="7자리이상">
<br>
<caption>파일선택(file)</caption>
<input type="file">
<br>
<caption>버튼</caption>
<input type="button" value="그냥 버튼">
<br>
<caption>reset</caption>
<input type="reset" value="리셋버튼">
<br>
<caption>제출(필수조건입력안할시경고)</caption>
<input type="submit" >
</p>
</fieldset> <fieldset>
<legend>체크</legend>
<p>
<!--하나만 체크할수있음 (name이 같아야한다)-->
<label for="male">
<input type="radio" name="gender" id="male" >남자
</label>
<br>
<!--label for=id
id의 글씨부분을 눌러도 체크 됨
, 찾기편해짐-->
<input type="radio" name="gender" id="female">여자
<br>
<caption>checkbox(다중선택가능)</caption>
<br>
<input type="checkbox" name="xx" value="java">자바
<input type="checkbox" name="xx" value="html" checked>html
<!--checked : 기본값 설정-->
<input type="checkbox" name="xx" value="DB">DB
</p>
</fieldset><fieldset>
<legend>기타기능</legend>
<p>
<caption>여러행 이용하기</caption>
<textarea rows="4" cols="30" placeholder="여러행"></textarea>
<!-- textarea태그 사이에 공백이있으면 기본값입력이안됨-->
<br>
<caption>지역선택</caption>
<select>
<!--select : 여러개중 하나를 선택할수있는 창-->
<!--option으로 선택 할 value들을 설정해줌-->
<option value="basic" selected>지역을선택</option>
<!--selected : 기본선택-->
<option value="서울특별시">서울</option>
<option value="인천광역시">인천</option>
<option value="수원시">수원</option>
</select>
</p>
</fieldset>
</form>
'주말공부 or 복습' 카테고리의 다른 글
| 주말공부 (joinForm리팩토링 및 pw찾기 시 랜덤한번호(임시비번생성 )) (0) | 2025.04.27 |
|---|---|
| 주말복습8(javaScript) (1) | 2025.03.30 |
| 주말복습6 (DB) (2) | 2025.03.09 |
| 주말복습5 (0) | 2025.03.03 |
| 주말복습4(Collection(List,set,Map) (0) | 2025.03.01 |