HTML 기본구조
<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시
<html> : HTML 문서의 루트(root) 요소를 정의
<head> : HTML 문서의 메타데이터(metadata)를 정의
- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용
- 웹 브라우저의 툴바(toolbar)에 표시
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됨
- 검색 엔진의 결과 페이지에 제목으로 표시
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분
<h1> ~ <h6> : 제목(heading)
<p> : 단락(paragraph)
출처 - TCP 스쿨
HTML 요소구조
<img src="abc.jpg" alt="이미지가 없음"> //따옴표로 꼭 감싸기
기본 Html
01
헤드 부분
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 연습</title>
<style> //기본설정? 이라 생각
div{
border : 1px solid rebeccapurple;
}
span{ //밑에 span에 대한 설정
border : 1px solid rgb(255, 0, 0);
font-weight: bold;
color: 000000; /* 검정색 */
font-style: italic;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>안녕하세요</h1> <!--굵게, 크기, 줄바꿈-->
<h3>안녕하세요</h3>
<h6>안녕하세요</h6>
<!--font 태그 사용법-->
<div>
<font size = "1">크기 = 1</font><br/>
<font size = "3" color = "#ff6600">크기 = 3, 색상 = 오렌지</font><br/>
<font size = "5" face = "맑은고딕">크기 = 5, 글꼴=맑은 고딕</font><br/>
<font size = "7" color = "#0000ff" face = "궁서">크기 = 7, 색상 = 파랑, 글꼴 = 궁서</font><br/>
</div>
<hr/>
<!--font 태그 중첩 사용법-->
<div>
<font size = "3" color = "#003300" face = "굴림">
폰트태그는
<font size = "5" color = "#ff0000" face = "궁서">중첩사용</font>
도 가능합니다.
</font>
</div>
<hr/>
<!--글자의 모양-->
<div>
<strong>글자를 굵게 표시합니다.</strong>
<br/>
<u>글자에 밑줄을 표시합니다.</u>
<br/>
<i>글자를 기울임 표시합니다.</i>
<br/>
<strong><u><i>글자의 모양을 의미하는 태그 역시 중첩이 가능합니다.</i></u></strong>
</div>
<hr/>
<!--단어나 문장의 영역 지정-->
<div>
<span >SPAN</span>태그는
<span>문장 단위로 텍스트 영역을 지정하는 것</span>인데,
그 자체로는 아무 역할도 하지 않고,
문장의 특정 구역에 <span>CSS스타일</span>을 지정할 때 사용합니다.
</div>
</body>
요런 느낌...
02
헤드랑 스타일 부분은 생략
<body>
<!--이미지 태그 사용법-->
<p style = "border: 1px solid red;">
<img src = "http://localhost:8080/html/image/img1.gif" alt = "망상토끼"/>
</p>
<!--http://192.168.0.16:5500/html/image/img1.gif-->
<!--이미지 크기 지정-->
<p >
<img src = "./image/img1.gif" width = "200" height = "200" alt= "망상토끼"/>
</p>
<!--<a>는 링크 타고 url넘어가게 해주는 거-->
<p >
<a href="https://www.naver.com">
<img src="./image/img1.gif" width = "200" height = "200" alt= "망상토끼"/>
</a>
</p>
</body>
요런느낌...
03
<body>
<h1>링크의 기본 사용 방법</h1> <!-- <h1> ~ <h^> 글자 크기, 굵기, 줄바꿈-->
<ul id = "menu">
<li type = "square"><a href="./exam02.html">현재 사이트의 특정 파일로 링크</a></li>
<li><a href="https://naver.com" target="_blank">다른 사이트로 링크 (새창)</a></li>
</ul>
<hr/>
<div id = "blank">빈공간</div>
<hr/>
<h1>현재 페이지에서의 링크 이동</h1>
<ul>
<li><a href="#">현재 페이지의 맨 위로 이동</a></li>
<li><a href="#menu">현재 페이지의 특정 위치로 이동</a></li>
</ul>
</body>
<!--
(1) <ul> 비순차적 목록
- unordered list 의 약자. 세부리스트항목은 <li>태그로 사용
- <li>에는 <br>태그 속성이 포함된다.
<ul type="disc/circle/square">
<li type="disc/circle/square">
</li>
</ul>
(2) <ol> 순차적 목록
- Ordered List의 약자. 순서를 표현하는 방식을 지정할 수 있다.
<ol type="A/a/I/i/1" start="적용할 시작순서">
<li type="A/a/I/i/1" value="적용할 시작순서">
</ol>
--------------------------------
<a target=""></a>
- 새로운 웹페이지를 열 때 사용 된다
- target 에는 _blank, _self, _parent, _top 4가지가 있다.
① _blank
새 윈도우 창을 열어서, 웹페이지가 열린다. 기존의 창은 그대로 남겨져 있다.
② _self
현재 윈도우창에 그대로, 링크된 웹페이지가 열린다. (현재의 프레임)
③ _parent
현재 프레임의 부모 프레임에서 새 웹페이지가 열린다.
만약 어떤 창 A에서 창 B를 새로 열었다.
그런데 창 B에서 _parent로 창을 열면 창 A에서 열리게 된다.
④ _top
최상위 프레임에서 열린다.
_parent와 비슷하지만 _parent는 바로 이전 창(부모창)에서 열리고
_top은 최상위(가장 최고 부모)창에서 열린다.
-->
요런느낌...
04
<body>
<form action="">
<fieldset>
<legend>내용 입력하기</legend>
<div>
<label for="id">아이디</label>
<input type="text" name="user_id" id="id" maxlength="5" placeholder="아이디 입력" />
<!--label for와 input id는 일치해야함-->
</div>
<div>
<label for="user_pw">비밀번호</label>
<input type="password" name="user_pw" id="user_pw" maxlength="20" />
</div>
<div>
<label for="memo">자기소개</label>
<textarea name="memo" id="memo" maxlength="100"></div></textarea>
</div>
<div>
<label for="data">숨겨진 항목</label>
<input type="hidden" name="data" id="data" value="숨겨진 데이터" />
</div>
</fieldset>
</form>
</body>
<!--
FORM이란?
- 정보를 입력 또는 선택하고 버튼을 클릭하며 정보를 서버에 전달하고
응답받는 양방향의 의사소통을 지원하는 입력양식이다.
- form 의 내부에는 <input>, <select>, <textarea> 등의 태그들이 포함된다.
- name 속성의 값과 유저가 입력한 값이 한 쌍이 되어 서버측에 전달된다.
-->
요런느낌!
05
<body>
<form>
<fieldset>
<div>
<!--체크박스--> //버튼 여러개 눌림
<input type="checkbox" name="hobby" id="hobby1" value="축구" checked="checked" />
<label for="hobby1">축구</label>
<input type="checkbox" name="hobby" id="hobby2" value="농구" />
<label for="hobby2">농구</label>
<input type="checkbox" name="hobby" id="hobby3" value="야구" />
<label for="hobby3">야구</label>
</div>
</fieldset>
<br/>
<fieldset>
<legend>성별 선택하기</legend>
<div>
<!--라디오버튼--> //버튼 하나씩만 눌림
<input type="radio" name="gender" id="gender_m" value="M" checked />
<label for="gender_m">남자</label>
<input type="radio" name="gender" id="gender_w" value="W"/>
<label for="gender_w">여성</label>
</div>
</fieldset>
</form>
</body>
06
<body>
<form>
<fieldset>
<legend>이동통신사 선택하기</legend>
<div>
<!--드롭다운 (싱글타입)-->
<label for="telecom">이동통신사 선택</label>
<select name="telecom" id="telecom">
<option>-----선택하세요------</option>
<option value="SKT">SKT</option>
<option value="KT">KT</option>
<option value="U+">U+</option>
</select>
</div>
</fieldset>
<br/>
<fieldset>
<legend>스마트폰 운영체제 선택하기</legend>
<div>
<!--드롭다운 (멀티타입)-->
<label for="smartphone">스마트폰 운영체제</label>
<select name="smartphone" id="smartphone" multiple size="5">
<option value="android" selected="selected">안드로이드</option>
<option value="IOS">IOS</option>
<option value="Window">Window</option>
</select>
</div>
</fieldset>
</form>
</body>
positioning (많이 쓰인다함)
display: none;
=> 아예 없었던 것처럼 영역도 잡히지 않는다.
visibility: hidden;
=> 브라우저에는 보이지 않지만 영역은 잡고 있다.
inline
- 줄바꿈 없이 순서대로 한 줄에 다른 엘리먼트들과 나란히 배치된다
(텍스트면 텍스트만큼 자리잡음) - 컨텐트의 크기 만큼만 공간을 차지하므로 width, height 속성을 지정해도 무시된다
- padding, margin 속성은 좌우 간격만 반영이 되고 상하 간격은 반영되지 않는다
- , , 등
block
- 혼자 (무조건) 한 줄을 차지한다
- 매번 줄바꿈이 되어 여러 줄에 보이게 된다
- width, height, padding, margin 속성이 모두 반영된다
- ,
,
등
inline-block
- inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
- inline에서 불가능하던 width, height, padding, margin 속성의 상하 간격 지정이 가능하다.
- inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다.
- , 등 visibility 속성 기본값은 ‘visible'이며 'hidden'을 지정할 경우에는 지정된 요소가 보이지 않게 된다. 'display: none;'은 원래 없었던 것처럼 표현되지만, 'visibility: hidden'은 보이지만 않고 공간은 유지된다. float 속성 1) left, right - float를 지정하면 다음에 오는 컨텐츠가 float를 지정한 블록 주위를 감싸게 된다. - html 요소 중에서 인라인 요소나 블록 요소는 그 결과가 무척 다르다. 그러나, float를 지정하면 두 요소는 같은 결과를 보여준다. 인라인 요소가 블록 요소처럼 크기를 지정할 수 있게 된다. 2) clear 속성 - float를 해지한다. - clear: left; / float: left; 해지 / - clear: right; / float: right; 해지 / - clear: both; / float: left;, float: right; 둘 다 해지 /
공부하기위한메모장