HTML은 웹을 개발하는데 있어 가장 기초적인 것이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 데이터를 입력 받는 태그들 --> <input type="text"> <br> <input type="password"> <br> <input type="number"> <br> <input type="date"> <br> <input type="color"> <br> <input type="button" value="확인"> <br> <input type="checkbox"> 운동 <input type="checkbox"> 독서 <br> <input type="radio" name="grade"> A <input type="radio" name="grade"> B <input type="radio" name="grade"> C <br> <!-- name이 같으면 세개 중에 하나만 체크가된다. 중복x --> <textarea rows="5" cols="50"></textarea> <br> <select> <option>1</option> <option>2</option> <option>3</option> </select> </body> </html> | cs |
html을 작성할땐 7번째 줄의 <body> 부터 31번째 줄의 </body>까지 사용한다.
10번째 줄의 <input type="text"> 를 통해 첫번째 박스에 보이는 환풍을 입력할 수 있는 텍스트 박스를 만들 수 있다.
11번째 줄의 <input type="password">는 두번째 박스와 같이 비밀번호를 치면 암호화처럼 나타난다.
12번째 줄의 <input type="number">는 오른쪽에 마우스를 가져다대면 위 아래 버튼이 나온다. 클릭시 증가및 감소한다.
13번째 줄의 <input type="date">는 달력이 나오며 날짜를 선택할 수 있다.
14번째 줄의 <input type="color">는 눌러보면 색을 볼 수 있는 창이 만들어진다.
각 줄마다 <br>이라는 태그는 강제 줄 개행이라는 의미이다.
16번째 줄의 <input type="button" value="확인"> 이라는 것은 버튼을 생성하여 버튼안의 글씨를 확인으로 채우는 것이다.
17번째 줄의 <input type="checkbox">는 네모난 체크 박스를 만드는 것이다.
19번째 줄과 21번째 줄의 <input type="radio" name="grade">란 동그란 박스를 만들어 체크하는데, name이라는 이름이 중복되어 있으면 하나만 체크되게끔 표시한다.
22번째 줄의 <textarea rows="5" cols="50">이라는 태그는 행으로 5줄, 열로 50자를 입력하면 꽉찰만한 크기의 input박스를 만드는 것이다.
24번째 줄의 <select> </select> 태그란 맨 밑에 나타나는 것과 같이 클릭시 option으로 지정한 1 2 3을 선택할 수 있도록 하는 태그이다.
1 2 3 4 5 | <a href="https://www.naver.com">www.naver.com</a> <br> <a href="https://www.naver.com" target="_blank">www.naver.com</a> <br> <!-- target은 새창열기 --> <a href = "html01.html"> html01.html 파일로 이동</a><br> <img src="dog02.jpg" width=200px; > | cs |
1번째 줄의 <a href= " " >은 클릭시 " " 안에 있는 사이트로 이동하라는 의미이며 태그가 끝난 후 문자를 칠 수 있다.
2번째 줄은 1번째 줄과 흡사하지만 " " 뒤에 target="_blank"가 붙어있다. 이것은 새로운 창을 열어 이동하라는 의미다.
3번째 줄도 1번째 줄과 흡사하다. 사이트 뿐만 아니라 만들었던 html파일로도 이동이 가능하다.
4번째 줄의 <img src="dog02.jpg" width=200px;>란 파일명 " "의 사진을 불러들여 가로 200사이즈로 변환하라는 의미이다.
'✨ Front-end > HTML' 카테고리의 다른 글
| [HTML] 문자, 기호, 심볼, 앵커 알아보기 (0) | 2023.08.07 |
|---|---|
| HTML을 부트스트랩(Bootstrap) 적용시키는 방법과 사용 팁, 주의사항 (0) | 2023.03.17 |
| [HTML] 스프링(Spring)에서 파일 생성 시 형식 추가 세팅 (0) | 2023.03.17 |
| HTML - table과 div의 사용법 (0) | 2023.02.08 |
댓글