[프론트엔드] HTML 강의 2일차

HTML 각종 요소 (태그)

  div 태그

• 빈 박스, 하나의 구역
• 웹 사이트에서 섹션을 나눌 때 사용
• a,p,img 등의 태그는 그 자체로 어떤 기능을 하는지 명확하지만 div는 특별한 기능이 없다.
• 그럼에도 div 태그를 사용하는 이유는 비슷한 부분끼리 그룹, 디자인에 맞게 레이아웃을 분리, 각 div태그에 class나 id라는 attribute를 부여하고 css 스타일을 입혀줄 수 있기때문이다.

  p 태그

• 한줄 단위의 글을 작성, 위 아래 공간이 생긴다. (하지만 이 위아래 공간은 보통 css로 초기화하여 사용)
• Paragraph의 줄임말로, 주로 문단을 통로에 넣을 때 많이 사용
• 한 줄에 이어서 안나오고 단락이 나뉘는 요소인 block-element이다.

  span 태그

• 단어 단위, 특정 구간을 분간
• span태그에는 주로 텍스트를 넣어준다.
• span태그는 line brake가 되지 않고, 한 줄에 이어서 나오게 된다.
• 이런 한 줄에 이어서 나오는 요소를 'inline-element'라고 한다.

  b, strong 태그

• 강조, 굵은 폰트 (단, 굵은 폰트는 보통 css를 통해 줄 수 있으므로 잘 사용하지 않는다.)

  h1 ~ h6

• 제목 태그, (폰트 크기, 폰트 굵기, 위, 아래 여백 등 숫자가 내려갈 수록 커진다)
• h1이 제일 크며 h6이 제일 작은 단위

  em, i 태그

• 폰트 기울기(이텔릭체)
• 자주 사용하지 않는다.

  mark 태그

• 형광
• 자주 사용하지 않는다.

  del 태그

• 가운데에 밑줄
• 자주 사용하지 않는다.

  ins 태그

• 밑줄
• 자주 사용하지 않는다. (쓰더라도 css로 대체 가능)

  sup, sub 태그

• 위 첨자, 아래 첨자
• 자주 사용하지 않는다.

  br  태그

• 줄 바꿈, 개행

  주석 태그

• 주석, 웹사이트에 영향을 미치치 않는다.
• 설명이나, 참조 사항등을 기재하고 싶을 때 사용하는 태그

<!-- 주석입니다 -->

  nbsp

• 태그내의 띄어쓰기를 한번까지 밖에 인식하지 못함.
• 따라서 한 칸 이상의 띄어쓰기를 위하여 사용하는 태그

ex) "안녕   하세요" => "안녕 하세요"
"안녕    하세요" => 안녕   하세요.

<p>안녕 &nbsp;&nbsp;&nbsp;하세요</p>

  lt, gt

• "<", ">" 태그를 의미
• HTML 위의 문자를 태그로 인식하여 표현하지 않는다. 이 "<", ">"를 문자로 표현하고 싶을 때 사용하는 태그

ex) <안녕하세요> (x)
&lt안녕하세요&gt (o)

<p><안녕하세요></p> -- (x)
<p>&lt안녕하세요&gt</p> (o)

  input 태그

• 입력하는 태그

        * 속성 <input type="" />
        ** 1.  type
                    text            : 디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다.
                    password        : 값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다.
                    button          : 기본 행동을 가지지 않으며 value을 레이블로 사용하는 푸시 버튼.
                    checkbox        : 단일 값을 선택하거나 선택 해제할 수 있는 체크박스.
                    radio           : 같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼입니다.
            2. 기타 다른 속성
                    placeholder     : 양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용
                    required        : 불리언값. 양식이 전송되기 위해서 반드시 입력하거나 확인이 필요한 값
                    readonly        : 불리언값. 이 값은 수정이 불가능함
                    (*중요) value         : 양식 컨트롤의 현재 값. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다
                    name            : input 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다

  select 태그

• 하위의 <option> .. 옵션명 </option> 을 활용하여 목록을 생성하는 드롭다운 태그
• 하위 옵션을 선택하면 select 의 value가 된다.

  label 태그

• 묶어주는 단위

  button 태그

• 버튼 ▶ <input type="button"/>랑 기능이 같다.
• 단, input은 버튼안의 text를 value로 넣어줘야 하지만 <button> 태그는 <button> "text" </button>으로 생성이 가능하다

  a 태그

• 링크, 페이지 이동
• href = "이동할 페이지", href 속성을 이용하여 이동

  img 태그

• 이미지를 넣는 태그
• src = "해당 이미지의 경로", src 속성을 이용하여 이미지 삽임

alt 속성
    * 해당 이미지의 설명
    * 이미지가 뜨지 않았을 때 (네트워크 오류) 대체되는 글
    * 쓰지 않는다면 스크린 리더를 고려하지 않았다고 합니다.