1. HTML

💙 연주의 공부기록 💙·2020년 10월 6일

html

HTML

목록 보기

1/4

📍 HTML

웹페이지 틀을 만드는 마크업 언어

tag들의 집합 / 부등호(<>)로 묶인 html의 기본 구성 요소

<>로 시작하여 </>로 끝내는것이 한 태그 이다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>제목</title>
    </head>
    <body>
    
      <script type ="text/javascript">
      	//자바스크립트언어 코딩
      </script>
       
      <h1>큰 제목</h1>
      <div>
      	<span>한줄 자리 차지 </span>
      </div>

    </body>
</html>

👌🏻 html 태그를 알아보자

<!DOCTYPE html> : html 문서임을 알린다. 
<html></html> : 시작태그로 문서 전체의 틀을 구성 
<head></head> : 문서의 메타데이터를 선언 
<title></title> : 문서의 제목, 브라우저의 탭에 보여짐 
<body></body> : 문서의 내용을 담는 곳
<script></script> : 자바스크립트 언어 입력하는곳
<h1></h1> : 글씨 크기를 조정 h1 부터 h6 까지 있음 
<div></div> : 줄바꿈이 되는 컨테이너 블록요소이다. 한줄을 차지한다. 
<span></span> : 줄바꿈이 안되는 컨테이너 인라인요소이다. 컨테츠 만큼 차지한다.
<img> : 이미지 태그  닫는 태그가 필요 없음  // src : 이미지의 파일 주소를 가르킨다. 
<a></a> : 링크를 넣을때 이미지, 글씨 등에 링크를 넣을수 있음  // target : 이동시 페이지 설정 (새창,현재창이동)

📌 리스트태그

<ul>
            <li>리스트1</li>
            <li>리스트2</li>
            <li>리스트3</li>
            <li>
                <ul>
                    <li>이중리스트1</li>
                    <li>이중리스트2</li>
                </ul>
            </li>
        </ul>

<ul></ul> :  리스트를 만들이 위한것 <ol>도 있음 
<li></li> : ul태그 안에서 리스트 한줄한줄을 의미 li 태그 안에 이중 ul태그를 사용하여 이중 리스트도 만들 수 있다.

📌 input 태그

<div>
  ID : <input type="text" placeholder="here">
  PW : <input type="text" placeholder="here">
</div>
 <div>
  <input type="radio" name="choice" value="a"> a
  <input type="radio" name="choice" value="b"> b
 </div>
 <div>
  <input type="checkbox" checked> a
  <input type="checkbox" > b
 </div>
 <button>버튼1</button>
 <input type = "button" value="버튼2">
 <input type="submit" value="버튼3">

<input> : 입력태그 이다. type엔 여러가지가 있다. 
type = text : 텍스트 박스이다.  // placeholder : 초기 바탕 텍스트 입력값 마우스 커서 누르는 순간 사라짐 
type = radio : 라디오 체크 동그라미 체크이며 중복체크 불가 // name값을 같게 해줘야 같은 name안에서 중복체크 방지 한다. 
type = checkbox : 체크박스 중복체크 가능 // checked : 초기 선택값이다. 
type = button : 버튼
type = submit : 폼값 전달 버튼 
<button></button> : 버튼

📌 시멘틱 태그
태그만 봐도 어떤 영역 인지를 나타 낼 수 있는 태그 의미론적인 태그 입니다.
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

💙 연주의 공부기록 💙

👩🏻‍💻항상발전하자 🔥

다음 포스트

1. HTML

HTML

2. CSS_스타일 지정 3가지

0개의 댓글