html 태그(input, semantic, form, table) 및 id와 class 작성 규칙

HTML(Hyper Text Markup Language)

: 웹 브라우저에 출력해 주는 언어로 하이퍼 텍스트 기능을 통해 검색을 쉽고 빠르게 해 준다.

 

✔ html에 필수적으로 들어가는 태그

[ html , head, title, body ]

 

✔ 자동완성 단축키는!+Tab키 또는!+enter키

 

✔ 확장(open in browser) 설치하면 쉽게 브라우저를 연결해서 결과를 확인할 수 있다

- 단축키 alt+b (기본 브라우저), alt + shift + b (다른 브라우저)

 

✔ 태그는 원래 여는 태그 <>와 닫는 태그 </>로 이루어져 있지만 단일로 사용하는 태그가 존재한다 (<img>, <br>, <hr>등)

html에서는 그냥 사용해도 되지만 리액트에서는 단일태그에 /슬래쉬를 넣어 닫아줘야 오류가 나지 않는다 -> </br>

 

✔ 태그 속성리스트 단축키는 ctrl + space

 

  HTML 태그 

<br>	줄바꿈 태그
<hr>	구분선 태그 (글자 사이 불가)
<u>	글자 밑줄태그
<del>	글자 취소선 태그
<i>	이탤릭체 태그 ( 안녕하세요 )
<b>	볼드체 태그
<a>	하이퍼링크 태그 href속성과 같이 사용한다. href = " # " :현재문서 href = " https://naver.com" : URL href = " #id " : 현재 문서에서 해당 아이디 위치로 이동
<p>	문단태그 -> 웹 브라우저 크기에 맞춰 정렬된다.
<h>	제목 글자 태그 (heading) ※ h1~h6까지 있으며 h1>>h6순서로 사이즈가 커진다. ※ h1은 html하나의 문서에 한번만 사용한다.
<div>	블럭 형식의 공간분할 태그 ※ 텍스트 길이와 관계 없이 브라우저 상에서 한줄의 공간을 차지한다
<span>	인라인 형식의 공간분할 태그 ※텍스트 길이만큼의 공간을 차지한다
<title>	페이지 위 제목 표시줄 (검색엔진이 가장 먼저 찾는 태그)
<table>	테이블 태그 행은 <tr> , 열은 <td> 로 표 제목은 <th>태그로 작성한다. tr = table row / td = table data / th = table header  td 속성  rowspan = "2" -> 2개의 행 너비 차지(가로) colspan ="2" -> 2개의 열 높이 차지(세로)
<ul>	순서가 없는 목록 태그 (unorder list)  ul의 type 속성  type="circle", type = "square" 등과 같이 넣어주면 리스트 표기 모양이 변경된다 없애려면 css에서 list-style:none 목록은 <li> 안에 작성한다 ※ ul과 ol태그 안에는 자식요소로 li(list item)태그만 사용할 수 있다 ※ li안에는 다른 태그가 들어올 수 있다.
<ol>	순서가 정해진 태그 (order list) type="a", type="i" 등 속성을 넣어주면 리스트 순서 표기 모양이 변경된다. 목록은 <li> 안에 작성한다
<dl>	용어 설명 태그 (discription list) ※ 자식요소로는 <dt>와 <dd>만 올 수 있다.
<img>	이미지태그  src 속성  - 이미지 주소 입력 -절대경로: src="c:/data/html/img.jpg"와 같이 시작부터 경유한 전체 경로를 작성해준다. -상대경로: src="../img.jpg"와 같이 현재 디렉토리 기준으로 작성한다.(../은 상위문서 파일 선택)  alt 속성   -  이미지 오류 시 나타낼 대체 텍스트 입력
<form>	입력양식  태그 ※ 사용자에게 정보를 입력받는 공간으로 클라이언트가 서버로 데이터를 보내는 방식이다. ※ 보통 <table>태그와 같이 사용하며 <input> 태그로 사용자에게 데이터를 받는다. submit 쿼리전송 태그를 통해 데이터가 전달된다.   action 속성  - 데이터 전송되는 곳을 지정 (주소)  method속성   데이터 전송방식  method = "post"는 전송되는 데이터 값을 주소에 보이지 않도록 별도 설정  method = "get" 은 주소에 데이터를 직접 입력해 전달 ※get으로 전달시 URL이 '파일이름?search=데이터값' 형태로 뜬다.
<input>	type속성 -> 하단 상세 설명참조 name속성 - 입력 받은 값을 보내주기 위해 필수로 작성 value속성 - input요소의 초기값 disalbed속성 - 요소 비활성화 ※ form 요소 내에서 사용하며 type 속성에 따라 다양한 모양으로 나타낼 수 있다.
<select>	드롭다운 리스트 태그 <option>태그 또는 <optgroup>태그와 같이 쓴다.  selected속성  해당 option을 dafualt로 설정할 수 있음  multiple속성  multiple = "multiple"속성값을 주면 여러개 항목을 선택할 수 있다.
<textarea>	여러줄 텍스트 입력창 태그 cols속성 & rows속성을 이용해 요소 크기 지정 한다.
<fieldset>	form요소와 관련된 데이터를 하나로 묶는 태그  fieldset의 제목을 나타내는 <legend>태그와 같이 쓴다 (fieldset태그 안에서만 사용하는 태그)

  input 태그 Type = "속성"

text	텍스트입력   사용자에게 한 줄의 텍스트를 입력받음 ※ placeholder   = "텍스트" ; 속성을 사용하면 텍스트 상자에 입력한 "텍스트"가 보여진다. -> 해당 텍스트 상자의 목적을 알려주기 위해 사용한다.
checkbox	여러개 옵션 중 다수 옵션 선택   input 요소의 name속성을 전부 동일하게 설정줘야 서버로 정확한 값이 전송된다.   value값만 다르게 설정   checked 설정하면 기본값으로 설정되며 disabled는 옵션만 보여주고 선택불가능하게 함
password	비밀번호 입력(입력한 텍스트를 보이지 않도록 해준다)
radio	여러개의 옵션 중 하나만 선택하도록 입력받는 창    input 요소의 name속성을 전부 동일하게 설정줘야 서버로 정확한 값이 전송된다.   checked 설정하면 기본값으로 설정된다.
file	사용자로부터 파일을 전송받음   ※accept 속성을 이용해 확장자 및 종류를 명시할 수 있다   accept="image/*
reset	리셋(취소) 버튼 생성
submit	입력받은 데이터 서버 폼 핸들러로 제출하는 버튼 생성   ※폼핸들러 - 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미   ※ 데이터는 form의 action 속성에 명시된 곳으로 전송된다   ※ value 에 작성한 속성값이 버튼의 텍스트로 표기된다.
button	사용자가 누를 수 있는 버튼 나타냄

  sementic 태그

- 태그 자체에 의미를 부여하는 태그로 영역을 구분해 주기 때문에 코드 가독성이 좋다.

<header>	머릿말(헤더)
<nav>	네비게이션 태그
<aside>	사이드 태그
<section>	중심 내용
<article>	텍스트 태그
<footer>	하단

  특수문자 표시

 	공백
&lt;	<
&gt;	>
&amp;	&

 

  id & class

 id 

고유의 이름 식별자로 하나의 html문서에 한 번만 사용할 수 있다 (중복 X).

주로 태그에 대한 목적을 알려주는 용도로 사용한다.

 class 

중복적으로 사용가능한 식별자로 하나의 태그에 여러개의 class명이 들어갈 수 있다.

보통 공통적인 css를 적용할 때 기능적인 네이밍을 넣어서 사용한다.

 

아이디와 클래스에는 정해진 이름이 없고 개발자가 임의대로 이름을 작성하는 편이지만 몇가지 규칙을 가지고 있다.

[작성 규칙]

1. 한글금지, 첫글자는 대문자가 올 수 없다(Abc = x, aBc = o)
2. 모든 이름은 대소문자를 구분한다 (apple과 aPple은 서로 다른 이름)
3. 이름 중간이나 끝에 숫자가 올 수는 있지만 시작할 수 없다. (abc123 = o, 123abc = x)
4. 보통 두 개 이상의 단어가 합쳐지는 경우 띄어쓰기는 사용할 수 없다. ex) apple color는 하나가 아닌 두 개의 식별자이다.
5. 두 개 이상의 단어가 합쳐지는 경우 -,_를 사용하거나 뒤 단어의 첫글자를 대문자료 표기한다.  ex)apple_color, apple-color,  appleColor  (카멜기법)
6. 특수문자 사용금지(-,_만 가능)
7. 목적에 맞는 네이밍을 사용한다.

 

  샘플 텍스트 & 이미지 사이트

-립섬

Lorem Ipsum - All the facts - Lipsum generator

-더미이미지

더미 이미지 생성기 추천

 

인라인/블록요소 설명 자세히 보기 클릭

책으로 배우는 비전공자 코딩 챌린지 4일차 - HTML 태그와 특징(inline & box요소)