TIL (22.03.17)

TIL/[멋쟁이 사자처럼] TIL

TIL (22.03.17)

맹찬

|2022. 3. 17. 23:09

오늘 하는 내용은 HTML이다.

HTML이란?

"Hypertext Markup Language" 의 준말로 우리가 보는 웹사이트가 어떻게 이루어져있는지 설명하는 "약속"

프로그래밍 언어라고 하면 혼남

각설하고 시작해보자.

일단 제일 처음부터 시작하겠다.

느낌표 하고 처음 나오는 애 선택하면 알아서

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

라고 만들어준다 뼈대를 미리 만들어주는 것.

아 맞다 설명이 늦었네, 일단 VSCode에서 확장 탭에서 live server를 설치하기 바란다.

설치를 하고나면, 작성한 HTML에 맞는 웹페이지가 나온다 (내가 만든 애가 어떻게 생긴놈인지 알 수 있음)

또 , 저장하면 즉시 반영되니 아주 편리하다고 할 수 있지.

HTML 태그

<title> TITLE 여기 바꾸면 탭에 있는 제목이 바뀐다 </title>

제목 문단이다. 마크다운에서 # 쓰는거랑 똑같음

<hr>

가로로 분단선을 직 그어버린다.

<p> paragraph </p>

문단이다 안에 내용 지이이익 넣으면 됨

<a> <-- 링크다 이 안에 내용 넣어서 클릭하면 거기로 갈 수 있음 참고로 화살표 한거는 HTML식 주석-->

<a href="https://www.google.co.kr" target="_blank">이거 누르면 구글로 감</a>
<a =href"tel:010-0000-0000" target="_blank">모바일에선 이거 누르면 전화번호로 바로 뜸</a>
target= "_blank" <-- 얘는 새창에서 띄우는거! 지금 보는 창이 바뀌면 짜증나니까 -->

<img src = " " alt= "">
<img src = "./국희몬스터.jpg" alt="">
<img src = "/html/국희몬스터.jpg" alt="">

이미지는 src(소스)와 alt(대체용)으로 나누어진다
소스는 이미지 위치고, 내 컴에 있는거는 파일의 디렉토리를 상대위치 또는 절대위치를 통해 접근하면 됨!

상대위치 : ./ 얘가 지금 html파일이 있는 위치고 이 위치를 중심으로 찾아서 넣어주는 방식
절대위치 : 처음부터 넣어줘야함 /html/국희몬스터 이런식으로

    <ul> <-- Unordered List -->
        <li>맹</li>
        <li>찬</li>
    </ul>

    <ol> <-- Ordered List-->
        <li>맹</li>
        <li>찬</li>
    </ol>

이거랑 똑같음

    <form action="">
        <input type="password" placeholder = "아이디를 입력하세요"> 
        <button type="submit">로그인!</button>
        <button type="reset">제거</button>
    </form>

폼이 두가지다.
하나는 입력하는 공간, 하나는 버튼
input type는 타입이다. 여기에 text넣으면 안 가려지고, password적으면 *** 이런식으로 가려짐
value는 초기값이다. 처음에 여기에 넣어져있는 값이라고 보면 됨.
placeholder는 사용자에게 이게 뭔지 정보를 줄 수 있음 예를들어, 아이디를 입력하세요.라고 적어놓으면
여기 누르면 아이디 입력할 수 있다는걸 알려줄 수 있겠지? 물론 placeholder에 있는 내용은 입력공간에 들어가있는 값이 아니지
.

버튼이다
버튼도 타입이 여러가지가 있다. submit 제출하는거다 물론 어디 연결안해놔서 별 소용은 없지만.
reset 입력해놓은 값을 지운다. 누르면 진짜 지워진다.

HTML메소드

GET방식과 POST방식이 있다.

GET방식은 URL주소 뒤에 전송되는 정보가 보인다. 비밀보장이 안됨
네이버에 검색하면 /query 뭐 이런거 나오는게 GET방식이지

POST방식은 사용자가 입력한 데이터를 URL에 붙이지 않는다. 보안이 유지됨
아이디 / 비밀번호로 로그인 할 때는 보안 유지가 되어야하니까 POST방식을 이용한다.

후기.

처음 HTML을 해봤는데 너무 어렵다.

물론 처음하는거니까 어려운게 맞다. 쉬웠다면 어려울 때 까지 해야한다.
배우는건 그런거니까

'TIL > [멋쟁이 사자처럼] TIL' 카테고리의 다른 글

TIL (HTML의 summary tag) (22.03.26) (0)	2022.03.26
TIL (22.03.26) (0)	2022.03.26
TIL (22.03.24) (0)	2022.03.25
TIL (22.03.24) (0)	2022.03.24
TIL (22.03.21) (0)	2022.03.22

TIL (22.03.17)

HTML이란?

HTML 태그

후기.

'TIL > [멋쟁이 사자처럼] TIL' 카테고리의 다른 글

티스토리툴바