#1 HTML의 기본

📁Web Developing/HTML 기초

#1 HTML의 기본

Hush 2022. 3. 21. 19:46

HTML문서의 기본구조

태그란?

태그는 HTML에서 가장 중요한 문법이다. markup이라는 특징과도 맞닿아있는 것이 태그이다.

파일 올리는 법

<a>태그에서 href에 링크가 아닌 파일경로를 입력해주면 된다.

Form 만들기

<input type="text">라고 적어주면 입력이 가능해지는 박스가 만들어지며, text를 을 수 있도록 속성이 설정된것이다.

type에 "password"를 넣어주면 비밀번호를 입력할때처럼 땡땡땡...으로나온다.

입력한 내용을 제출할 때 누르는 버튼을 만들려면 type="submit"으로 속성을 부여하면 된다.

이렇게 아이디, 비밀번호, 제출버튼 등을 <form>태그로 감싸면 하나의 폼으로 관리가 되는 것이다.

입력한 정보가 어디로 제출될 지는 form 태그에 action이라는 속성으로 action="제출 주소" 이렇게 적어주어야 한다.

이렇게 정보를 서버에 전달할 때, 이 정보가 대체 무엇인지 파악할 수 없을 수 있다. 다 같은 문자열이니까.!

그래서 input태그에 속성으로 name="정보분류" 를 입력해주어야 한다.

value라는 속성에 문자열을 할당하면 사용자가 입력란을 채우기 전에 미리 입력되어있을 내용을 지정할 수 있다.

여러 줄을 입력받고싶은 경우에는 <textarea></textarea> 태그를 사용해야 한다. 속성으로 cols='숫자' rows='숫자'로 텍스트 입력란의 크기를 조절할 수 있으며, 두 태그 사이에 내용을 입력해놓으면 input태그의 value속성같은 효과를 낼 수 있다.

Dropdown List 만들기

<!DOCTYPE html>
<html>
    <head>
        <title>memo</title>
    </head>
    <body>
        <form action='제출할 서버'>
            
            <h1>color</h1>
            
            <select name="color">
                <option value='1'>red</option>
                <option value='2'>black</option>
                <option value='3'>blue</option>
            </select>
            
            <input type="submit">
        </form>
        
    </body>
</html>

form 태그로 감싸고, select태그를 연 다음 그 안에 option태그들로 선택할 수 있는 항목들을 적어주면 Dropdown List를 만들 수 있다. 이때 option에 value라는 속성을 설정해 주면 해당 선택지를 서버에 전송할 때 전송할 정보를 지정해줄 수 있다.

radio 버튼

라디오 버튼은 여러 항목 중 하나만 선택할 수 있도록 해주는 버튼이다.

<input type="radio"> 이렇게 적으면 올챙이알같은 라디오버튼이 생긴다. 이렇게 여러개의 라디오 버튼을 만들면 여러개의 라디오버튼을 동시에 선택하는 것 또한 가능한 것을 관찰할 수 있다.

하지만 속성으로 name을 지정해주면 같은 name을 가진 라디오버튼들은 동시에 하나만 선택 가능하다. value속성을 지정해주면 서버로 전달할 정보를 지정해줄 수 있다.

checkbox

체크박스는 라디오버튼과 달리 여러개의 항목을 선택할 수 있도록 해주는 input type이다. 라디오버튼과 사용법은 동일하다.

기본으로 체크되어있었으면 좋겠다 싶은 체크박스가 있다면 input의 속성으로 checked를 입력해주면 된다. 속성값이 없는 속성이다.