Front-End/HTML

1. html 다루기 - tag 구조 와 종류, form

TerianP 2022. 3. 18.

728x90

백엔드를 공부하면서 사실 프론트쪽인 html 이나 CSS, js 같은 것들은 안해도 되지 않을까...했지만 역시나 안하면 안되겠더라구요ㅠㅠ결국 프론트를 어느 정도는 알아야 백엔드에서 편하게 할 수 있어서 깊게는 아니더라도 간단하게라도 이것들에 대해서 정리하고 공부해둘까 합니다.

1. 웹 프로그래밍 개요

웹 프로그래밍 : 하이퍼텍스트 프로토콜 (hypertext protocol)을 활용하여, 월드 와이드 웹 (WWW: World Wide Web)을 통해 정보를 공유하는 환경을 구현하는 것
HTML5
- 하이퍼텍스트 (Hyper text) : 텍스트, 이미지, 영상 같은 문서의 개체가 서로 연결되어 있는 것
- - 마크업 언어 (Markup Language) : 태그 (tag)를 이용하여 문서나 데이터의 구조를 명시하는 언어
CSS
- 캐스캐이딩 (Cascading) : 우선 순위에 따라 적용하는 것
- 스타일 시트 (Style Sheets) : 웹 페이지의 스타일 (디자인)을 정의 하는 것
JavaScript 제일 중요!!!
- 웹을 풍부하게 만들어주는 스크립트 언어.
- 웹에 각종 부가 기능을 담당함

2. HTML 구조

HTML 은 크게 아래의 3가지의 요소를 갖는다

1) html

html 코드 영역을 알려준다. HTML 태그는 항상 쌍을 이루며 태그의 앞에는 / 가 없고, 뒤에만 / 가 존재한다.

2) HEAD

웹 브라우저의 여러 부가적인 내용을 추가하는 영역.
주로 CSS, JavaScript 등 의 내용이 들어간다.

3) BODY

BODY 는 웹 페이지의 본 내용이 담긴다. 우리가 웹에서 보는 모든 내용은 BODY 내 적힌 내용을 웹 브라우저가 해석&표현하는 내용이다.

3. HTML5 의 태그 TAG 구조와 종류

1) Tag 구조

html 태그의 구조는 크게 2가지로 첫번째는 시작은 있지만 끝은 없는 태그와 속성 이름과 속성 값이 있는 태그이다.

시작과 끝이 없는 태그
- img, br, hr
- <img src="html5.png"> : img 시작은 있찌만 끝은 없다!
속성 이름과 속성값 Value
- <h1 title="header">HTML5</h1>

2) Tag 종류

종류	예시
문서 요약 Document Summary	html, head, title, body
문서 정보 Document Infomation	base, meta, link, style, script
문서 구조 Document Structure	img, br, hr

4. HTML 전반적인 태그 종류와 내용

종류	내용
제목과 본문 태크
h1 ---- h6	제목으로 1부터 6까지의 크기 : 6이 가장 큼
p	본문 문단 생성
br	줄 바꿈
hr	수평 줄 삽입
div(Division)	영역 분할
pre	형식화된 텍스트 표시
(공백), <(<), >(>), &(&)	특수 문자 사용시에는 & 와 특수문자가 붙는다
form	form 은 주로 body 안쪽에 존재하는 태그로 로그인창, 게시판 글 작성 창 등 프론트에서 백으로 넘어가는 위치에 존재하며 다른 곳으로 넘기기 위한 문서 태그라고 생각하면 쉽다.
글자 모양 태크
b	굵은 글자
strong	볼드체
i	기울어진 글자
em	기울어진 글자
small	작은 글자
sub	아래 첨자
sup	위 첨자
ins	밑줄 글자
del	취소선 글자
mark	하이라이트 글자 - 형광펜 효과 -
marquee	태그 안의 텍스트를 움직이도록 만드는 태그 → 잘 만들면 매우 이쁘게 꾸밀 수 있을듯
center	중앙 정렬!!
표 태그
table	표 삽입
tr	표에 행 row 삽입
th	표 제목 table heading 삽입
td	표 내용 삽입
하이퍼 링크 태그
a	하이퍼링크 태그
href = "URL"	하이퍼링크 주소
target="blank"	target 태그는 새 창에서 열기기 위해 사용됨
img	img 태그를 추가로 사용하면 이미지에 해당 하이퍼 링크를 달 수 있음
이미지 img 태크
img="Source"	이미지 태그 및 이미지 경로
alt	화면 읽기 시 사용되는 태그 => 시각장애인들은 화면 읽기 프로그램을 사용하는데 이때 화면 읽기 태를 사용해야만 웹 페이지에서 해당 이미지나 하이퍼링크를 읽을 수 있음
width, height	가로 길이, 세로 길이
오디오 && 비디오 태그
controls	오디오와 비디오를 컨트롤 할 수 있는 컨트롤 박스 출력 재생 버튼, 소리 조절 등 막그대로 '컨트롤' 버튼
src="위치 경로"	오디오와 비디오의 경로
type="확장자" => type="video/mp4"	오디오와 비디오의 확장자명
<iframe src="주소 경로"><iframe>	외부 영상 삽입 태그 => 이때 동영상 주소 부분을 제외하고 모두 삭제해주어야 한다
공간 분할 태그 : CSS 사용할 때 매우 유용
div	블록 block 형식으로 공간 분할 => 위 아래로 출력
span	인라인 inline 형식으로 공간 분할 => 좌우로 출력
ol	OrderedList 즉 순서가 있는 목록, 안쪽에는 li 태그가 들어오고 자동으로 순서를 잡아줌
ol	UnOrderList 즉 순서가 없는 목록, 안쪽에는 똑같이 li 태그가 들어오며, 자동을 순서를 잡아주지 않음 >> 각 행마다 앞에 구분선 하나 정도?

5. HTML 입력 양식 GET , POST

- 데이터를 서버로 받아오는 방식은 크게 2가지로 GET 과 POST 방식이 있다.

Get 방식
- get 방식은 클라이언트에서 서버로 어떠한 리소스를 기반으로 정보를 요청하기 위해 사용되는 메서드이다. ⇒ 정보를 요청하고 받는것을 주로하는 방식이기 때문에 주로 어떤 게시판 확인, 검색 등에 자주 사용된다.
- get 방식을 통한 요청은 URL 주소 끝에 파라미터로 포함되어 전송되며 , 이 부분을 Query String 쿼리 스트링이라고 부른다.
- 쿼리 스트링은 URL 끝에 ? 를 붙인 후 변수명1=값1&변수명2=값2 등으로 이어진다.
- URL 주소 끝에 정보가 포함되기 때문에 민감한 정보(아이디, 비밀번호, 계좌정보 등) 은 GET 방식을 사용하면 보안에 위험성이 크다.
POST 방식
- POST 방식은 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용된다 ⇒ 리소스를 생성하는 것을 주로하는 방식이기 때문에 로그인, 게시글 작성 등에 사용된다.
- GET 방식과는 다르게 URL 주소가 아닌 HTTP 메시지 BODY 부분에 데이터를 담아서 서버로 보낸다 ⇒ GET의 변수명1=값1&변수명2=값2 가 담긴다
- POST 는 보통 HTML 의 FORM 에 등록된 정보가 넘어간다.
- URL에 데이터가 나오지 않기 때문에 주로 보안이 필요한 부분에서 많이 사용된다.

6. FORM type 종류와 내용

- type = "종류명" 로 사용한다

종류	내용
type="text" placeholder="텍스트"	텍스트 입력
type="button" value="버튼명"	버튼과 버튼 내용
type="checkbox"	체크 박스
type="file"	파일 업로드
type="password"	패스워드 입력창, 글자 입력시 * 로 암호화되서 보임
type="radio"	라디오 버튼, 체크 박스와는 다르게 only 하나만 선택 가능
type="submit"	일종의 전송 버튼
type="reset"	초기화 버튼
type="color"	색상 선택 기능
type="datetime-local"	날짜 시간 선택 기능
type="time"	시간 선택
type="url"	url 주소 입력 창
<select><option>옵션1</option><option>옵션2</option>	select 버튼 생성, 얘는 특이하게 따로 input type 을 사용하지 않음

2) 예시로 확인해보기!

- 아래 form 은 다음 사진처럼 보여진다

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>input tag 속성값</title>
    </head>
    <body>
        <form>
            <p>text: <input type="text" placeholder="이곳에 텍스트를 입력하세요!"></p>  // 텍스트
            <p>button: <input type="button" value="이곳을 클릭!"></p> // 버튼
            <p>checkbox:
                <label><input type="checkbox">체크박스 1</label> 
                <label><input type="checkbox">체크박스 2</label> 
            </p>
            <p>file: <input type="file"></p> // 파일 업로드
            <p>password: <input type="password"></p> // 패스워드 보호
            <p>radio: // 라디오 버튼
                <label><input type="radio" name="sex" value="male">남</label> 
                <label><input type="radio" name="sex" value="female">여</label>
                <button type="submit">Submit</button>
            </p>
            <p>reset: <input type="reset"></p> // 리셋 버튼
            <p>color: <input type="color"></p> // 색상 버튼

            <p>datetime-local: <input type="datetime-local"></p> // 날짜+시간
            <p>time: <input type="time"></p> // 시간

            <p>email: <input type="email"></p> // 이메일 주소 작성 칸
            <p>url: <input type="url" placeholder="https://example.com"></p> // 웹 주소 작성 칸
            <p>select:
                <select> // select 버튼 칸
                    <option>김밥</option> <option>떡볶이</option> <option>순대</option> <option>오뎅</option>
                </select>
            </p>
        </form>
    </body>
</html>

- 참고

[네트워크] get 과 post 의 차이

GET 과 POST 는 HTTP 메서드로 클라이언트에서 서버로 무언가를 요청할 때 사용한다. 2019/06/01 - [IT 정보 로그캣/CS] - [네트워크] http 란 [네트워크] http 란 기본적으로 네트워크 통신을 할 때 처음 접하

noahlogs.tistory.com

저작자표시 비영리 동일조건