Honey-Programming

html 기본1 본문

HTML

html 기본1

Latte_is_horse 2020. 7. 24. 11:21

1. HTML(HyperText Markup Language): 웹 페이지의 틀을 만드는 마크업 언어

HTML은 tag들의 집합

Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소

 

<!DOCTYPE html>			// 이 문서가 HTML 문서임을 명시
<html>				// html 시작 태그로, 문서 전체의 틀을 구성

<head>				// 문서의 메타데이터를 선언
  <meta charset="UTF-8"/>	// 한글의 호환성을 위한 유니코드 세팅
  <title> Page title </title>	// 문서의 제목, 브라우저의 탭에 보여짐
</head> 			// </태그이름>은 해당 태그가 끝났음을 의미

<body> 				// body 태그는 문서의 내용을 담는 곳
  <h1> Hello world </h1> 	// heading을 의미, 크기에 딸라 h1 ~ h6까지 있음
  <div> Contents here 		// content division을 의미, 줄바꿈됨
    <span>Here too!</span> 	// 줄바꿈이 없는 content 컨테이너
  </div> 			// div 태그가 끝났음을 의미
</body>

</html>

 

2. SELF-CLOSING TAG

  태그 내부에 내용이 없다면, (<tag></tag>와 같이 표현되는 경우) <tag/>와 같이 표현 가능

  Ex) 이미지 태그 (닫는 태그 생략가능)

<img src="codestates-logo.png"></img>	// src = 속성
<img src="codestates-logo.png" />

 

3. div vs span

<div>div 태그는 한 줄을 차지</div>
<div>division 2</div>
<span>span 태그는 컨텐츠 크기만큼 공간을 차지</span>
<span>span 2</span>
<span>span 3</span>
<div>division 3</div>

 

4. img 태그 : 이미지 삽입

Ex) 이미지 삽입(닫는 태그 필요없음)

<img src="https//i.imgur.com/JVAJ4to.jpg">

 

5. a 태그(링크) : 클릭시 링크로 이동

Ex) 링크 이동(기존창, 새창)

<a href="http://naver.com">네이버</a> // 기존창으로 링크열기
<a href="http://naver.com" target="_blank">네이버</a> // 새창으로 링크열기

 

6.  ul(unordered list), li(list), ol(ordered list): 리스트

Ex) 리스트

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3 has nested list</li>
    <ul>
      <li>Item 3-1</li>
    </ul>
</ul>

결과

- item 1
- item 2
- item 3 has nested list
   - Item 3-1
ul을 ol로 바꾸면 숫자의 순서로 바뀐다

 

7. input, textarea : 다양한 입력 폼

<div>
  ID <input type="text" placeholder="type here">
</div>
  
<div>
  Password <input type="password">
</div>
  
<div>
  <input type="checkbox"> 다음에 들어올 ID 기억하기
</div>  
   
<div>
  <input type="radio" name="option1"> 옵션
  <input type="radio" name="option1"> 옵션
</div>
  
<textarea name="" id="" cols="30" rows="10"></textarea>

<div>
  <button>로그인</button>
</div>

 

8. JavaScript를 HTML에서 사용하는 방법

  - HTML 내부에 작성 => <script> 태그 이용

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script type="text/javascript">
      console.log('write your JS here');
    </script>
  <body>
</html>

 

저작자표시 (새창열림)
Comments