[HTML] HTML Basics # 1

simoniful·2021년 4월 1일

HTML

목록 보기

3/4

네이버 부스트캠프 및 칸 아카데미 강의 관련 내용을 정리해봅니다. HTML과 CSS에서 놓치기 쉬운 포인트들을 복습하고 나아가 SCSS, 관련 애니메이션 등 확장적인 기능에 대하여 학습하고자 합니다.

HTML과 CSS

마크업 언어로 HTML

마크업 언어로서 HTML는 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어로 정의됩니다. 현실의 아날로그적인 기록매체와 유사한 역할을 합니다. 한번 작성하면 누가 언제 보든 동일한 모습을 보여준다. 특징적인 Tag는 HTML뿐만 아니라 XML, SGML, XHTML 등 다양한 마크업 언어에서 모두 사용됩니다.

그렇다면 마크다운 언어는 없는가?

마크다운 역시 현재 쓰이고 있습니다. 온갖 태그로 범벅된 HTML 문서 등과 달리, 읽기도 쓰기도 쉬운 문서 양식을 지향하며 기호를 추가하는 것만으로 쉽게 편집이 가능합니다. 현재 velog 또한 마크다운 형식으로 설명서만 참조하면 누구나 쉽게 편집이 가능합니다.

HTML은 우리가 흔히 생각하는 '주어', CSS는 이를 꾸며주는 '보어', 이후에 배울 JavaScript는 정적인 화면이 변화하게끔 하는 '서술어' 개념으로 이해할 수 있습니다.

HTML의 문법

HTML로 웹화면의 구조를 짜고 콘텐츠를 입력할 수 있습니다. HTML의 기본적인 문법은 아래와 같습니다. 여러 종류의 태그의 의미를 가져와 이를 시멘틱적으로 나타내고 또한 그 기능을 수행합니다.

<TagName> Some Content </tagName>

Idle 단축키

vscode 기반 사용자 편의를 위한 쓸모있는 단축키가 몇 가지 있습니다.

주석처리 : ctrl(command) + /

들여쓰기 / 내어쓰기 : tab / shift + tab

행 삭제 : ctrl+X(비어있을 경우), ctrl+shift+k

커서 위/아래 이동 : ctrl+alt+Up/Down

행의 시작으로 이동 : Home

행의 끝으로 이동 : End

HTML element Tag

<h1>~<h6> 중요도 차이 구분(폰트 크기)
<p> paragraph
<b> bold
<u> underline
<strong> 강조(bold)
<i> italic
<em> 강조(italic)
<ol> ordered list
<ul> unordered list
<li> list
<div> generic container : new line (block level)
<span> generic container : same line (inline container)

<b>는 시각적으로만 강조되는 반면 <strong>은 실제로 페이지 내 중요한 부분으로 브라우저에게 알려주는 역할을 하게 되며 이는 웹 접근성에 큰 기여를 합니다. 이는 <i>와 <em> 태그에서도 동일하게 적용됩니다.

HTML Attributes

속성은 이름과 값으로 이루어져 있습니다. 시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현합니다. 속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현합니다.

 <h1 id="title">Hello, HTML</h1>

Empty Tag

태그는 기본적으로 시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있지만, 태그 중에는 그렇지 않은 태그가 존재 합니다.

<br>, <img src="">, <input type="">

Space

기본적으로 HTML은 두 칸 이상의 공백을 모두 무시합니다. 이러한 공백 처리 방식에 대하여 css 로 제어 이외의 제어를 하는 것이 바람직합니다. <br>,  (non-breaking space) 사용은 지양해야 합니다.

Anchor

<a> (anchor)는 a태그, 앵커, 링크 등 여러 이름으로 불립니다.

<a href="http://www.naver.com/" target="_blank">네이버</a>```

링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 합니다. 속성값은 링크의 목적지가 되는 URL입니다.

target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성입니다.속성값으로는 _self, _blank 등이 있습니다.

_self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작합니다.
_blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성입니다.

<a>를 통해 외부 페이지로만 이동하는 것은 아닙니다.페이지 내부의 특정 요소로 초점을 이동하는 것을 내부 링크라고 합니다.

내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 됩니다.

<a href="#some-element-id">회사 소개로 이동하기</a>
<h1 id="some-element-id">회사 소개</h1>```

보통 페이지에 내용이 많아 스크롤이 길어질 경우, 빠르게 화면 최상단으로 이동하고자 할 때 내부 링크를 주로 사용합니다.

Form

폼 요소는 서버에 데이터를 전달하기 위한 요소이며 <form> 요소 자체의 attribute로 action과 method 가 있습니다.

action - where the form send data to
method - the type of HTTP request(get/post)

<form action=“/my-form-submitting-page” method=“post”>
<!-- All our inputs will go in here -->
</form>

<input>은 대표적인 폼 요소입니다. value를 설정해주면 선택한 답에 대한 정보를 url에서 볼 수 있습니다. 인풋에 따라 붙는 버튼은 <input type="submit"> 이 없어도 모두 submit의 기능을 합니다.

<input type="text">

<input type="password">

<input type="radio"> : 한 가지 선택

<input type="checkbox"> : 여러가지 선택

<input type="file">

<input type="submit | reset | image | button">

<select> : 드롭다운 메뉴, <option> 선택지 생성 + value를 설정해주면 선택에 대한 정보를 url에서 보기 가능

<textarea> : 박스 크기를 rows, cols로 설정 가능 가능

<button> : 빈 태그가 아니며 내용을 안에 직접 넣을 수 있으므로 좀 더 자유로운 스타일 표현이 가능

<label> : form 요소의 이름과 form 요소를 명시적으로 연결

<fieldset> : 폼 요소를 그룹화하여 구조적으로 만듦

<legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성