2일차 공부
HTML 개요
1. 기본 문법
<태그>내용</태그>-> 요소(Element)
<태그> : 시작(열린) 태그(Tag)
</태그> : 종료(닫힌) 태그(Tag)
2. 부모와 자식 관계의 이해
<태그><태그>내용</태그></태그>부모요소 자식요소
<태그>
<태그>내용</태그>
</태그>들여쓰기(Indent) Tab 를 이용해 자식요소 구분
내어쓰기(Outdent) : Shift + Tab
협업하는 사람과 코드를 읽기 쉽게하기 위해 깔끔히 정리하자!!
들여쓰기와 Beautify 이용!
3. 빈태그
<태그>빈(Empty)태그 : 종료태그가 없는 태그
<태그> : 편리함 HTML 1/2/3/4/5
vs
<태그/> : 안전함 XTML / HTML5
<태그 속성 = "값">내용</태그>
속성: Attribute
값 : Value
기능의 확장<img/> : 이미지를 삽입하는 요소(태그)
<img src="./dog.jpg" alt="개"/>src : 이미지의 경로
alt : 이미지의 이름 (대체 텍스트 / Alternate Text)
<input/> : 사용자가 데이터를 입력하는 요소(태그)
<input type="text"/>
<input type="checkbox"/>
4. 글자와 상자
인라인(Inline)요소 : 글자를 만들기 위한 요소들
블록(Block)요소 : 상자(레이아웃)를 만들기 위한 요소들
인라인
<span></span>대표적인 인라인 요소
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도.
- 인라인 요소는 요소가 수평으로 쌓인다
- 가로세로사이즈가 포함한 콘텐츠 크기만큼 자동으로 줄어든다
<span style="margin: 20px 20px;">Hello</span>
<span style="padding: 20px 20px;">World</span>margin : 요소의 외부 여백을 지정하는 CSS속성
padding : 요소의 내부 여백을 지정하는 CSS속성
- 상하여백은 사용불가❌ 좌우여백은 사용가능⭕
<span><div></div></span> ❌
<span><span></span></span>⭕- 글자 안에는 상자 넣을수가 없다
- 인라인요소 안에는 블록요소 불가!
블록
<div></div>대표적인 블록요소
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
- 요소가 수직으로 쌓인다
- 부모 요소의 크기만큼 자동으로 늘어난다
- 포함한 콘텐츠 만큼 크기가 줄어든다
<div style="margin:10px;">Hello</div>
<div style="padding:10px;">World</div>- 상하좌우 여백 사용가능
<div><div></div></div>⭕
<div><span></span></div>⭕- 블록요소 안에 인라인요소 가능하다
HTML 핵심 정리
핵심 요소 정리
<div>
<h1>오늘의 날씨</h1>
<p> 중부 집중호우, 남부는 열대야, 12호 태풍 북상중..</p>
<img src="img/weather.jpg" alt="99호 태퐁" />
</div><div></div>
- 블록(상자)요소
- 특별한 의미가 없는 구분을 위한 요소. (Division)
- 영역을 잡을때 묶을때 사용
<h1></h1>
- 블록(상자)요소
- 제목을 의미하는 요소. (Heading)
- H1 ~ H6 작을수록 더 중요한 제목을 정의
<p></p>
- 블록(상자)요소
- 문장을 의미하는 요소. (Paragraph)
<img/>
- 인라인(글자)요소
- 이미지를 삽입하는 요소. (Image)
- src 경로 alt 이름 필수 속성
<ul>
<li>사과</li>
<li>딸기</li>
<li>수박</li>
<li>망고</li>
</ul><ul>
- 블록(상자)요소
- 순서가 필요없는 목록의 집합을 의미. (Unordered List)
<li>
- 블록(상자)요소
- 목록 내 각 항목 (List Item)
<a href="https://www.naver.com">NAVER</a>
<a href="https://www.google.com" target="_blank">Google</a><a></a>
- 인라인(글자)요소
- 다른/같은 페이지로 이동하는 하이퍼 링크를 지정하는 요소. (Anchor)
- 속성 target ="_blank" 새탭
<p>
<span>동해물</span>과 백두산이 마르고 닳도록
</p><span></span>
- 인라인(글자)요소
- 특별한 의미가 없는 구분을 위한 요소.
<br/>
- 인라인(글자)요소
- 줄바꿈 요소. (Break)
<input> type="text"/><input/>
- 인라인(글자)요소 블록(상자)요소 = Inline-block
- 베이스는 인라인요소이지만 블록요소 특징도 갖고있다
- 사용자가 데이터를 입력하는 요소.
<label>
<input type="checkbox" /> Apple
</label>
<label>
<input type="checkbox" /> Banana
</label><label></label>
- 인라인(글자)요소
- 라벨 가능 요소(input)의 제목.
- input type = radio 경우 그룹에서 1개만 입력받을 수 있다
<table>
<tr>
<td>A</td><td>B</td>
</tr>
<tr>
<td>C</td><td>D</td>
</tr>
</table><table></table>
- 테이블 요소 (table) 표
- 표 요소 행(Row)과 열(Column)의 집합
<tr></tr>
- 테이블 요소
- 행(Row)을 지정하는 요소. (Table Row)
<td></td>
- 테이블 요소
- 열(Column)을 지정하는 요소. (Table Data)
<!--주석-->
- 수정사항이나 설명 등을 작성(주석)
- 브라우저는 이 태그를 해석하지 않기 떄문에 화면에 내용이 표시되지 않음.
- Ctrl + / or Cmd + /
전역 속성
<태그 title="설명"></태그>- 요소의 정보나 설명을 지정
<태그 style="스타일"></태그>- 요소에 적용할 스타일(CSS)을 지정
<태그 class="이름"></태그>- 요소를 지칭하는 중복가능한 이름
<태그 id="이름"></태그>- 요소를 지칭하는 고유한 이름
<태그 data-이름="데이터"></태그>- 요소에 데이터를 지정
FE 개발자(진)가 되고 싶습니다