Skip to content

Latest commit

 

History

History
92 lines (80 loc) · 5.4 KB

html_basic.md

File metadata and controls

92 lines (80 loc) · 5.4 KB

HTML 기초

HTML은 웹 어플리케이션 화면을 구성하는 단순한 구조의 언어입니다. 즉, 화면에 보이는 텍스트들 뿐만 아니라 이미지/버튼/입력창 뿐만 아니라 리스트나 테이블과 같은 데이터들도 구조적으로 화면에 표시 할 수 있도록 합니다.

HTML 문서의 기본구조

<html>
 <head>
  <title>website title</title>
 </head>
 <body>
  content of website ...
 </body>
</html>

모든 HTML 문서의 기본 구조는 위와 같습니다. <html>과 같은 각 태그(Tag)는 한번 열리면 반드시 닫겨야 한다는 기본 규칙(</html>처럼) 아래, <html> 안에 크게 <head>와 <body> 태그가 존재 합니다.

  • <head> 태그는 브라우저에서 접속 시 상단 탭에 보이는 제목인 <title>과 같이 현재 페이지의 전체 속성이나 특성들을 설정 할 때 사용 되는 공간입니다.
  • <body> 태그는 실제로 사용자의 눈에 보이는 모든 태그들이 위치하는 공간입니다.

따라서 html 파일을 구성한다는 것은 결국 <body>내에 텍스트/이미지/버튼 등을 고루 잘 배치 한다는 것을 뜻 합니다.

흔히 사용되는 태그

<h1> heading </h1>	제목태그. (h1에서 h6까지 점차 작아지는 형태의 제목 크기를 표현)
<p> paragraph </p>	문단. 태그 내부의 문장들을 하나의 단락으로 표현하며, 다음 단락과의 줄 간격을 약간 벌려줌.  
<b> bold </b>		두꺼운 글씨체. 
<i> italic </i>		이탤릭체.
<a href="url"> link name </a>	url에 해당하는 주소로 페이지를 전환 시키는 링크. 화면에는 link name 이라는 이름으로 표현. 
<div> ... </div>	내부의 컨텐츠를 섹션 단위로 나눠서 줄바꿈 하는 역할. 문서의 특정 구간을 묶어서 CSS 속성을 적용하거나 JS에서 처리 하고자 할때도 자주 사용.
<span> red </span>	줄 바꿈 기능이 없는 div. 특정 구간을 묶어서 CSS 속성을 적용하거나 JS에서 처리 하고자 할 때 사용.	
<img src="/filename.jpg">	프로젝트의 /public 디렉토리에 저장 된 이미지 혹은 웹 상에서 접근 가능한 url을 통해 화면에 이미지를 표시. 
<ul> <li> list </li> </ul>	순서 없는 리스트. 하나의 ul안에 li 항목들을 반복적으로 등장시켜서 리스트를 표현.
<br>			강제 줄 바꿈. (html 상에서는 엔터키를 사용한 줄 바꿈은 의미가 없다.)

속성

HTML의 각 태그들은 속성(attribute)이라고 부르는 값을 가질 수 있다.

<div style="color:red; background-color: yellow;"> ... </div>

div태그 내부에 위치한 style 속성은 모든 태그들에서 사용 가능한 가장 대표적인 속성으로, CSS 파일에 구현 되어야 할 style 구문을 html 파일 상에서 해당 태그에 직접 적용 시킬 수 있도록 할 수 있으며, 복수개의 CSS 구문도 세미콜론(;)으로 구분해서 적용 가능하다.

이러한 속성들 중 자주 사용 되는 것들은 다음과 같다.

id="?"		HTML 태그에 붙이는 유일한 값의 ID. CSS나 JS에서 해당 태그를 식별하여 접근하기 위해 사용
size="?"	텍스트/라인의 크기/굵기
width="?"	넓이 (픽셀 단위가 기본)
width="??%"	넓이 (전체 화변 대비 퍼센트 단위로 표현)
color="?"	텍스트 색. red 혹은 green과 같이 일반적으로 정의 된 색이름이나 #RGB값 형식으로 특정 값을 지정 가능.
align="?"	내부 컨텐츠의 수평 정렬. left, center, right 등의 값 사용 가능.
class="?"	CSS로 미리 구성 된 클래스들을 html 태그에 적용 시키기 위해 사용

Table

데이터의 항목별 리스트나 게시판을 표현하는 가장 일반적인 형태의 표.

<table>
  <tr>
    <td>이름</td>
    <td>나이</td>
    <td>전화</td>
    <td>이메일</td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>+82-10-0000-0000</td>
    <td>john.doe@mail.com</td>
  </tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

table 태그 내부에 tr 태그가 반복되는 형태로 구성되며, 각 tr 태그 내부에는 각 열을 나타내는 td 태그가 위치한다. 즉, 생성되는 tr 의 갯수만큼 화면에 표가 나타나며, td 태그의 갯수가 같아야 일치감 있는 표의 작성이 가능하다.

일반적으로 표는 데이터베이스에서 복수의 데이터를 가져온 후 화면에 전달하여 이를 반복해서 그리는 식으로 구현 된다.

Form

사용자로부터 데이터를 입력 받기 위해서 사용되는 입력 태그들.

<form> ... </form>	일반적으로 입력 그룹을 묶어 주기 위해 사용
<input type="?"> ... </input>	사용자로부터 단일 항목의 텍스트/파일 등을 입력 받음. type 속성은 text / password / checkbox / file 등의 값을 통해 다양한 형태로 적용.
<textarea rows="?" cols="?"> ... </textarea>	사용자로부터 문장을 입력 받음. rows 속성은 화면에 표시 할 최대 라인 수, cols는 각 줄당 최대 글자 수	
<select>		사용자에게 정해진 값을 선택하도록 하는 선택창.
  <option value="?">?</option>	선택창 내부 각 선택항목
  ... 
</select>

이 밖에도 HTML에서 사용되는 태그의 수는 셀 수 없이 많습니다. 최대한 다양한 활용 예를 검색하고 미리 알아 둘 수록 자신이 원하는 화면을 쉽고 빠르게 만들 수 있습니다.