-
[TIL] - 230828 html 기초TIL 2023. 9. 2. 16:36반응형
# 부스트캠프 멤버십 8기
📌Facts
HTML 기초
- HTML 문서구조
- 태그들의 종류, 쓰임
- block 속성 태그와 inline 속성 태그
- 태그들의 속성
- class와 id의 구분
- 주석
📚 Findings
HTML 구조
HTML은 계층적 구조를 띈다. 들여쓰기로 계층을 분리하는데, 그래서 맨 처음 설계할 때 계층적으로 어떻게 짤 지 잘 구상하는 것이 중요하다.
좋은 방법은, 먼저 빈 페이지에 박스들을 그려본다. 가장 큰 박스부터 다 그리고 그것들을 태그로 옮기는 것이다.
HTML 태그 종류
그럼, 우리가 쓸 수 있는 태그들은 어떤 것이 있을까?
우리가 vscode에 빈 html파일을 생성하고 !을 타이핑하고 tab을 누르면 기본 HTML 템플릿이 완성된다.
여기서 사용되는 태그들은 기본 태그에 해당한다. 그럼 기본 태그와 함께 Block 태그와 Inline 태그도 같이 알아보겠다. Block 태그와 Inline 태그는 구분하는 것이 중요하다.
문단 태그
<!DOCTYPE html>: 웹 문서의 유형을 html로 지정
<html>: 모든 html 태그들의 최상위 태그에 해당한다.
<head>: 문서의 공통적인 특성들을 넣는 곳이다.
- <meta>: 메타 데이터 입력
- <title>: 문서의 제목
<body>: 문서의 본문을 넣는 곳이다.
Block 태그
block 태그는 태그 구성 요소들이 라인 전체를 차지한다. 그래서 같은 줄에 여러 요소가 위치하지 못한다.
- <div>,<ol>,<li>,<h1>~<h6>등의 태그가 대표적으로 있다.
- 예를들어, <h1>rainyCode</h1>blog 라고 작성했을때 blog 는 다음줄에 표시된다.
Inline 태그
inline 태그는 태그 구성요소들 여러 개가 나란히 배치될 수 있는 태그이다.
- <span>,<a>,<img>등의 태그가 대표적으로 있다.
- 예를들어 프로필 사진: <img src="1.jpg"> 과 같이 했을때 텍스트와 사진이 나란히 배치된다.
제목 태그
<h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6>h1이 가장 크고 숫자가 커질수록 작아진다.
문단 태그
<p>This is rainyCode blog.</p> <p>I am going to be an awesome programmer.</p> <p>Come and join me!</p> <br> <pre> Awesome Rainy Code </pre>paragraph를 의미하고 문단을 구분하기 위해 사용되는 태그이다.HTML에서 공백을 여러개 넣어도 하나로 처리되고 줄바꿈도 그냥 공백으로 처리한다.
따라서 문단 구분 시 <p> 태그를 사용하고 줄 바꿈시에는 <br>을 사용한다. 그리고 여러 개의 공백을 넣으려면 를 사용한다.만약, 소스코드에 작성한 그대로 화면에 출력하고 싶으면 <pre> 태그를 사용할 수 있다.
목록 태그
<ul> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ul> <ol> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ol>목록을 만들기 위해서 <ul> 이나 <ol> 태그를 사용한다. 그리고 목록 안의 아이템들은 <li>태그를 사용한다. 단순한 리스트 나열보다는 메뉴 목록을 만들 때 많이 이용한다.
하이퍼링크
<a href="url" title="말풍선 도움말" target="브라우저 윈도우 옵션">링크 텍스트</a> <a href=“http://www.naver.com”> <img src=“naver-logo.png” alt=“naver-logo”> </a>url에는 상대경로와 절대경로 모두 들어갈 수 있다.
target 속성 값
- _blank 새로운 웹 브라우저 창으로 오픈.
- _self 현재 웹 브라우저 창으로 오픈. (기본값)
- _parent 부모 웹 브라우저 창으로 오픈.
- _top 웹 브라우저 전체 영역에 오픈.
HTML class와 id 태그
<div class="dropDown" id="left-dropDown">class 속성은 같은 유형으로 반복되는 태그를 유형별로 분리할 때 쓰인다. class 속성으로 css에서 해당하는 html 태그를 가지고 와서 style을 지정할 수 있다. 그리고 script에서 event listener를 등록하기 위해 해당 태그를 찾는 용도로도 쓰인다. 그런데, id도 그러한 역할을 수행할 수 있다.
하지만 id는 그 태그의 유일한 이름을 붙이고 싶을 때 사용 한다.
class는 스타일이 같은 것끼리 동일하게 둬서 코드의 중복을 줄일 수 있지만, id는 고유한 값으로 남겨 놓는 것이 좋다. 여러 개가 id를 겹쳐도 렌더링 하는데 문제는 없지만 id로 값을 찾을 때 중복으로 여러 문제가 생길 수 있다.
class는 .class-name으로 접근하고 공백을 통해서 여러 class name을 붙일 수 있다.
id는 #id-value 로 접근할 수 있다.
HTML 주석
ctrl + /를 누르면 된다.<!-- HTML 주석 -->html에서 주석은 조금 신기하다. <!-- 와 --> 사이에 주석 내용을 적으면 된다.
하지만, 어느 언어에서나 통하는 ctrl + /가 정말 편하다.
😁 Feelings
html 태그들에 대해서 공부를 하니, 구조를 어떻게 짤 지 감이 온다.먼저 피그마에 있는 웹페이지에 대해 영역을 나누고 어떤 태그를 사용할지 고민해봐야겠다.다양한 태그가 평소 많이 들어가는 웹페이지에 들어가서 개발자 도구를 통해서 어떤 태그들을 썼는지 살펴봐야겠다.
🧭 Future
내일은 css 기초에 대해서 공부할 것이다. 그리고 footer 같은 여러 semantic tag들에 대해서도 공부해볼 것이다.
반응형'TIL' 카테고리의 다른 글
[TIL] - 230918 mvc + service 구조 (0) 2023.09.20 [TIL] - 230829 css 기초 (0) 2023.09.18 [TIL] - 230705 자바 제어문, 캡슐화, 반복문, 배 (0) 2023.07.05 [TIL] - 230704 data type, 메모리 할당, has a relation, 묵시적 초기화 (0) 2023.07.04 [TIL] - 230703 자바 객체지향프로그래밍, jdk, jre, oop, 클래스, platform independence (0) 2023.07.03