<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> title : 웹 브라우저의 탭에 표시되는 이름 </title>
</head>
<body>
<h1> h1을 레이아웃 태그로 사용하겠어.</h1>
<h3> div </h3>
<div> div : 레이아웃의 핵심!! </div>
-> 주로 레이아웃과 스타일을 적용하는 데 사용됩니다. <br>
-> 블록 레벨 요소이므로 디폴트로 수직으로 쌓이며, 부모 요소의 너비를 가득 채우려는 경향이 있습니다.<br>
-> 예를 들어, 웹 페이지의 섹션을 그룹화하거나 스타일을 적용하려는 경우에 사용할 수 있습니다.<br><br>
<h3> span </h3>
<span style="color: aqua;"> span : 특정 글자 디자인할 때.</span><br>
-> 텍스트의 작은 부분을 감싸고 스타일을 적용하기 위해 사용됩니다.<br>
-> 인라인 요소로, 텍스트 내에서 다른 인라인 요소와 함께 사용될 수 있습니다.<br>
-> 주로 텍스트의 일부분에 스타일을 적용하거나 JavaScript를 통해 특정 부분을 조작하는 데 사용됩니다.<br><br>
<h3> ★ a 태그 : 링크 이동 ★ </h3>
<a href="https://www.naver.com"> https로 시작하면 완.벽.한 절대경로! </a> <br>
<a href="./1_tagBasic.html"> 상대경로1_ ./ : 현재위치 </a> <br>
<a href="../P1004/2_tagBasic2.html"> 상대경로2_ ../ : 상위위치 </a><br><br>
<h3> img src : 이미지 로드 태그 </h3>
<img src="./img/zzanggu.png"><br>
img src="" : ""안에 ./쓰면서 이미지 가져올 수 있지
<img src="./img/zzanggu.png" width="100" height="100"><br>
width="100" height="100" 이렇게 크기 변경할 수 있긴한데... 사용금지!@!!!!★★★<br><br>
<h3> 입력양식 태그 input type ... </h3>
id : <input type="text"> -> type : text, enter없이 한줄로 주르륵 <br><br>
pw : <input type="password"> -> type : password <br><br>
성별 : <input type="radio"> 남 <input type="radio"> 여 -> type : radio, 보통 그룹화 시킨다. 이렇게만쓰면 체크 해제 불가 ㅋㅋ<br><br>
성별 : <input type="radio" name="gender"> 남 <input type="radio" name="gender"> 여 -> name : 그룹화 시킬 수 있음★, 중복체크 불가능 <br><br>
취미 : <input type="checkbox"> 축구 <input type="checkbox"> 농구 <input type="checkbox"> 야구 -> type : checkbox, 중복체크 가능 <br><br>
생일 : <input type="date"> -> type : date, 달력이 나온다구ㅎ.ㅎ <br><br>
첨부 파일 : <input type="file"> <br> -> type : file, 첨부파일을 지정할 수 있다 <br><br>
아무 기능도 없는 버튼.. : <input type="button" value="이것이 버튼"> -> type : button, value를 넣어줘야겠지 <br><br>
버튼2 : <button>이것도 버튼이다아</button> <br><br>
제출 : <input type="submit" value="저장"> -> type : submit, 글쓰기 저장완료 같은 느낌 <br><br>
취소 : <input type="reset" value="취소"> -> type : reset, 무언가를 취소할 수 있음. <br><br>
숨기기 : <input type="hidden"> -> type : hidden, 나중에 중요하게 쓰일 것! <br><br>
지역 :
<select>
<option>서울</option>
<option>대전</option>
<option>대구</option>
<option>부산</option>
</select> -> select : 옵션이 여러개일 때 유용하겠지.<br><br>
하고싶은 말 :
<textarea>
</textarea> -> textarea : enter가능함. 거의 메모장 수준이여.<br><br>
</body>
</html>
## 결과
h1을 레이아웃 태그로 사용하겠어.
div
div : 레이아웃의 핵심!!
-> 주로 레이아웃과 스타일을 적용하는 데 사용됩니다. -> 블록 레벨 요소이므로 디폴트로 수직으로 쌓이며, 부모 요소의 너비를 가득 채우려는 경향이 있습니다.
-> 예를 들어, 웹 페이지의 섹션을 그룹화하거나 스타일을 적용하려는 경우에 사용할 수 있습니다.
span
span : 특정 글자 디자인할 때.-> 텍스트의 작은 부분을 감싸고 스타일을 적용하기 위해 사용됩니다.
-> 인라인 요소로, 텍스트 내에서 다른 인라인 요소와 함께 사용될 수 있습니다.
-> 주로 텍스트의 일부분에 스타일을 적용하거나 JavaScript를 통해 특정 부분을 조작하는 데 사용됩니다.
★ a 태그 : 링크 이동 ★
https로 시작하면 완.벽.한 절대경로!상대경로1_ ./ : 현재위치
상대경로2_ ../ : 상위위치
img src : 이미지 로드 태그
img src="" : ""안에 ./쓰면서 이미지 가져올 수 있지
width="100" height="100" 이렇게 크기 변경할 수 있긴한데... 사용금지!@!!!!★★★
입력양식 태그 input type ...
id : -> type : text, enter없이 한줄로 주르륵pw : -> type : password
성별 : 남 여 -> type : radio, 보통 그룹화 시킨다. 이렇게만쓰면 체크 해제 불가 ㅋㅋ
성별 : 남 여 -> name : 그룹화 시킬 수 있음★, 중복체크 불가능
취미 : 축구 농구 야구 -> type : checkbox, 중복체크 가능
생일 : -> type : date, 달력이 나온다구ㅎ.ㅎ
첨부 파일 :
-> type : file, 첨부파일을 지정할 수 있다
아무 기능도 없는 버튼.. : -> type : button, value를 넣어줘야겠지
버튼2 :
제출 : -> type : submit, 글쓰기 저장완료 같은 느낌
취소 : -> type : reset, 무언가를 취소할 수 있음.
숨기기 : -> type : hidden, 나중에 중요하게 쓰일 것!
지역 : -> select : 옵션이 여러개일 때 유용하겠지.
하고싶은 말 : -> textarea : enter가능함. 거의 메모장 수준이여.
'HTML > DAY 29 _ 23.10.04' 카테고리의 다른 글
| Selector (0) | 2023.10.04 |
|---|---|
| 알아두면 좋을 Tag들 (0) | 2023.10.04 |
| a tag (0) | 2023.10.04 |
| Tag Basic3 (0) | 2023.10.04 |
| Tag Basic2 (0) | 2023.10.04 |