📃 요약

인터넷 초창기에 논문 공유를 위해 만들어진 언어(Markup 언어), 주로 문서 구조를 구성할때 사용함, 문서 구조를 만들기 위한 다양한 태그가 있고 태그로 코딩하는 언어

요소 기술 및 테이블 설계는 아래와 같습니다.

요소 기술 :

– Basic : HTML

📃 기술 구현

스펙 :

- vscode
- html 5

📃 기본 태그

마크업(Markup) 언어 : 여는태그와 닫는태그로 내용을 감싸서 코딩

사용법 : 
<여는태그>안녕하세요</닫는태그>

예)

<p>안녕하세요</p>

코딩 용어 : 자주 사용하는 기호를 특정 용어로 말함, 그외 기능등을 특정 용어로 말하기도 함

- : (콜론)
- ; (세미콜론)
- & (엔퍼센트)
- \ (역슬래쉬)
- / (슬래쉬)
- - (마이너스, 대시, 하이픈)
- , (콤마)

주요 단축키 : 코딩을 효율적으로 빠르게 작성하게 함

1) 인텔리제이 개발툴 단축키
- 주석 : ctrl + /
- 줄복사/블록복사 : ctrl + d
- 줄삭제 : ctrl + y
- 자동정렬 : shift + ctrl + l

2) 윈도우 단축키
- 복사 : ctrl + c
- 잘라내기 : ctrl + x
- 붙여넣기 : ctrl + v
- 실행취소 : ctrl + z
- 재실행 : shift + ctrl + z

Html 문서 생성 :

사용법 : 문서명.html (.html – 확장자라고 함) 

Html 주요 태그 :

1) 제목 태그 : 자동 줄바꿈됨 : h1 ~ h5

    <h1>안녕하세요 강태경입니다.</h1>

2) 단락 : 자동 줄바꿈됨 (*) : p

    <p>안녕하세요<p>

3) 링크(앙커) : 페이지 이동 : a

    <a href="http://naver.com">네이버</a>

4) 줄바꿈 : (*) : br

    안녕하세요<br/>
    안녕하세요<br/>

5) 특수태그 :

    < (less than) : <
    > (greader than) : >
      공백

    예)
    <안녕하세요>
         안녕하세요

6) 이미지 : (*)

    사용법 : <img src="이미지경로">

    예) 
    <img src="./image/bird.jpg" width="300" alt="" />

7) 목록 : (*)

    - 순서 없는 목록 : ul(unordered list) – li(list) (*)

    예)
     <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
     </ul>
    - 순서 있는 목록 : ol(ordered list) – li(list)

    예)
     <ol>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
     </ol>

8) 테이블 태그: (*)

    <table border="1">
       <!-- 테이블제목 -->
       <!-- thead : 생략 가능 -->
          <thead>
            <!-- tr : 1행 -->
               <tr>
                   <!-- td : 1열 -->
                   <th>요일</th>
              </tr>
          </thead>
        <!-- 테이블본문 -->
        <!-- tbody : 생략 가능 -->
        <tbody>
            <tr>
                <td>월</td>
            </tr>
        </tbody>
    </table>

📃 양식 태그

양식 태그 ( form, input, select ) (**) 소개

입력 양식 html 문서를 만들 때 사용되며 굉장히 자주 사용되는 태그로서 회원가입 / 로그인 / 게시판 등 다양한 홈페이지를 만들때 사용됨

0) Form : 양식 태그 중 최상위 부모 태그
자식태그로 input 태그 등을 가지고 있음. 생략 가능함

1) 입력 + 양식 태그 : input 태그의 속성 id=”이름” 과 label 태그의 속성 for=”이름” 를 일치시키면 =>
label클릭하면 input양식에 포커스 생김

사용법 :  <label for=”라벨명”>이름</label> : 화면에 이름이 보임
        <input type=”text” /> : 입력할 수 있는 컨트롤(양식) 이 화면에 보임

예) 
  <label for="name">이름</label>
  <input type="text" id="name"/>

2) 패스워드 : 패스워드 입력 양식에 **** 로 글자를 노출시키지 않음

예)
<input type="password" />

3) 파일선택상자 : 대화상자가 뜨며 파일을 선택할 수 있게 함

예)
<input type="file" />

4) 체크박스 : 체크할 수 있는 양식이 화면에 표시

예)
<input type="checkbox" />좋음<br/>
<input type="checkbox" />나쁨<br/>

5) 라디오박스 : 둘 중에 하나만 선택할 수 있는 양식이 화면에 표시

예)
<input type="radio" name=”gender” />남
<input type="radio" name=”gender” />여<br/>

6) select 박스 : 목록을 선택할 수 있는 양식이 화면에 표시

<select>
        <option>김밥</option>
        <option selected>떡볶이</option>
        <option>순대</option>
        <option>어묵</option>
    </select>