생활코딩 사랑해요
HTML 강의 주소 :
https://www.opentutorials.org/course/2039/10930
기술소개 - 생활코딩
기술소개 2015-12-05 10:55:56
www.opentutorials.org
역시 생활코딩
짧고 간단하고 이해하기 쉽다.
HTML 공부 처음할땐 생활코딩 추천~~
설렁설렁 들어서
3월 6일 ~ 10일(5일) 동안 들었다.
[HTML이란?]
HTML(Hyper Text Markup Language)
Hyper text란 문서와 문서가 링크로 연결되는 것을 의미한다.
문서와 문서가 링크로 연결되는 것은 a태그를 통해 이루어진다.
< a href = "~~~"> 도널드 </a>
이런 태그가 있다면 도널드란 글자를 클릭하면 ~~~에 있는 링크로 이동한다.
[태그의 중첩과 목록 ]
앞에 점 하나 붙여서 리스트 형식으로 나열할 때는 <li>를 이용한다.
이 li들을 묶을 때는 <ul>을 이용한다.
<ul>
<li> 유재석 </li>
<li> 이적 </li>
</ul>
만약 이 <li>에 순서가 있다면 <ol>로 바꿔준다.
<ul>은 unordered list의 약자이고
<ol>은 ordered list의 약자이다.
[ 문서의 구조 ]
html문서는 큰 구조가 정해져있다.
<html>
<head>
</head>
<body>
</body>
</html>
html 코드가 크게 감싸고 있고 그 안에 head에는 부가적인 정보를 감싸며 body에서는 본문을 감싼다.
[표 - table ]
각각의 값들을 td (table data) 로 묶어준다.
각각의 행들을 tr 으로 묶어준다.
그리고 크게 table 태그로 묶어준다.
<table>
<tr>
<td> 이름 </td> <td> 성별 </td>
</tr>
</table>
표의 맨 윗줄, 중간, 맨 아랫줄을 태그로 구분할 수 도 있다.
<thead> , <tbody> , <tfoot>
[ 입력양식 - form ]
<form action = "~~~">
아이디 : <input type = "text">
비밀번호 : <input type = "password">
<input type = "submit">
</form>
form태그의 action 에 들어가는 url으로 input태그에 있는 데이터가 보내진다.
위 처럼 아이디와 비밀번호를 써도 되지만 좀! 더!
이름표임을 분명하게 해주기위해서 label이라는 태그를 사용한다.
<label for = "id_txt"> 아이디 : </label>
<input id = "id_txt" type = "text">
label에는 for 속성을 ,input 태그에는 id속성을 추가하여
서로가 연결되어있음을 알려준다.
지금 사용하는 form (아무 method도 없다면) get을 이용하는 것인데
이것은 내가 입력하는 input태그의 data가 url에 그대로 노출되는데 이거은 굉장히 위험하다.
get과 달리 url 에 정보표시가 되지 않고 data를 서버에 전달할 수 있는
메서드는 post이다.
내가 생각하기에 중요하다싶은 내용만 추려 적어보았다.
html은 뭔가 쉽다고 얘기는 들었지만 공부하지않았었다.
공부하지않고 html 문서를 보니까
어떤 의미인지 이해할 수가 없어서 답답했는데
이렇게 하나하나 배워보니 쉽고 조금씩 html 코드가 보이는것같다.
'프로그래밍 > HTML&CSS&JAVAscript' 카테고리의 다른 글
| (2)HTML5와 웹표준(API, CSS 3.0) 마스터하기 _ 텍스트를 덩어리로 묶어주는 태그 (0) | 2023.03.05 |
|---|---|
| (1)HTML5와 웹표준(API, CSS 3.0) 마스터하기 _ html 구조 (0) | 2023.03.05 |
| HTML_from태그가 뭘까 (0) | 2023.01.24 |