백엔드 개발자가 알아야 하는 기초 HTML

Backend

백엔드 개발자가 알아야 하는 기초 HTML

퐁고 2022. 9. 18. 01:30

오늘은 기초 HTML 태그에 대해서 다뤄보겠습니다.

사실 저는 백엔드를 준비중이여서 그런지 HTML과 CSS는 매우 어렵다고 느낀답니다..!

HTML 기본 구조

<head>태그 안에 있는 태그

meta : 웹서버와 웹브라우저 사이에 주고받는 정보를 정의하는데 사용됨 문서 자체의 특성을 나타냅니다.

<meta charset= "utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

title : 웹사이트가 열리면 상단에 생기는 tab에 이름을 나타냅니다.

<title> 사이트 제목 </title>

link : 필요한 스타일이나 아이콘등 외부 문서를 html 문서에 연결시키는데 사용됩니다.

<link herf=”css파일이름.css” rel="stylesheet" type="text/css" >

HTML 단축키

유튜브에 드림코딩 엘리님이라고 좋은 분이 있더라고요!

<!-- 간단한 것만 요약하자면 -->

.class명 or #id명 --> div 형태인 class 혹은 id가 생성됩니다.

.class명$*3 or #id명$*3 --> div 형태인 class 혹은 id가 다른 이름으로 3개 생성됩니다.

div>ul>li --> div 안에 ul 안에 li가 들은 부모,자식 형태로 생성됩니다.

div>ul+ol --> div 안에 ul태그 그리고 ol태그가 형제 형태로 생깁니다.

ul>li*5 --> ul 안에 li 5개가 생깁니다.

자주 쓰이는 태그

div

block 태그 - 한 줄 모두 차지합니다.(div, p), 영역을 나누는데 쓰입니다.

<div></div>

span

inline 태그 - 콘텐츠 크기만큼만 차지합니다.

<span></span>

p

block태그입니다, div보다 줄 간격(margin)이 더 큽니다.
보통 글을 작성합니다. (lorem 더미글을 사용하면 자동으로 테스트 글을 작성해줍니다.)

<p></p>

br

줄바꿈 태그입니다.

안녕하세요<br>
줄바꿈을 해줍니다.

hr

수평줄을 삽입해줍니다.

<h1>HTML</h1>
<hr>
<h1>CSS</h1>

img

이미지를 넣을 수 있다, 속성값 src에 사진 링크를 적어줍니다.
input 태그는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분됩니다.

<img src="이미지 링크" alt="이미지가 안나올 때 글">

form

form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있습니다.
<form> 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시합니다.
<form> 태그의 method 속성은 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시합니다.
method 속성은 속성값으로는 GET과 POST 두 가지 중 하나를 선택할 수 있습니다.

GET 방식은 URL에 폼 데이터를 추가하여 서버로 전달하는 방식입니다.
GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됩니다.
또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다.
따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다.

POST 방식은 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식입니다.
POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않습니다.
또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송됩니다.
따라서 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높습니다.

# <form action="URL" method="get">

<form>
      ID: <input type="text" name="id" value="1"><br>
      username: <input type="text" name="username" value="Bret"><br>
      <input type="submit" value="Submit">
 </form>

input

사용자로부터 데이터를 입력받기 위해 사용됩니다.

<input type="요소">입력창입니다.

ex) text, password, radio 등등

a

하이퍼링크, 새로운 창이나 html, 다른 div 내로 이동가능합니다.

<a href="이동될 링크">눌러주세요</a>

button

클릭할 수 있는 버튼을 생성합니다.
input 태그로도 버튼을 생성할 수 있지만 button 태그는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있습니다.


<button type="button" onclick="alert('Hello World!')">버튼</button>

<input type="button" value="버튼" onclick="alert('Hello world!')">

u

단어에 밑줄을 그어줍니다.

<u>단어</u>

h

내용의 제목을 나타낼 때 사용합니다.(글자의 크기에 사용하기도 합니다.), h1 ~ h6

<h1>제목</h1>

ul

순서가 필요없는 목록을 나타낼 때 사용합니다. li는 요소를 나타냅니다.
type : disc, circle, square (기본 값 disc)

<ul>
    <li>숫자가 아닌 리스트</li>
</ul>

ol

숫자나 알파벳 등 순서가 있는 목록을 나타낼 때 사용한다. li는 요소를 나타냅니다.
type : 1,a,A,i,I 등 여러 개 (기본 값 1)
start : <ol>의 시작 값 (start=”5”라고하면 5,6,7로 순서 시작), reversed : 역순

<ol>
    <li>숫자 리스트</li>
</ol>

table

표 만들기
th : 테이블의 헤더부분 - 실질적으로 이 태그는 안쓰는 사람이 훨씬 많습니다. (대부분 <tr>태그를 활용하여 테이블 헤더를 만듭니다.)
tr : 테이블의 행
td : 테이블의 열
border : 표의 테두리 두께를 나타냅니다.

<table>
    <tr> 
        <th>제목</th>
    </tr>
    <tr>
        <td>내용</td>
    </tr>
</table>

select

옵션 메뉴 고르기
select 안에 option 태그 넣습니다.
option은 value에 넣고 싶은 항목을 넣어줍니다.

<select>
    <option value="americano">아메리카노</option>
    <option value="caffe latte">카페라테</option>
    <option value="cafe au lait">카페오레</option>
    <option value="espresso">에스프레소</option>
</select>

dl

사전처럼 용어를 설명하는 목록을 나타낼 때 사용합니다.
dt : 정의되는 용어의 제목을 넣을 때 사용합니다.
dd : 용어를 설명하는데 사용합니다. (자동으로 들여쓰기가 됩니다.)

<dl>
    <dt>호박</dt>
    <dd> 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd> 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

textarea

여러 줄의 글자를 입력할 때 사용합니다.

 <textarea name="message" rows="10" cols="30">글을 써주세요</textarea>

아래는 html에 대해서 잘 설명해주는 사이트입니다. 참고해주세요!

HTML5 Introduction & Syntax | PoiemaWeb

HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의　내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하

poiemaweb.com

저작자표시 비영리 변경금지