HTML HTML 태그, id속성, input

김태헌·2022년 9월 18일
post-thumbnail

- HTML

  • HT : HyperText, 문서와 문서가 링크로 연결되어 있다
  • M : Markup, 태그로 이루어져 있다.
  • L : Language
  • 웹 사이트의 틀을 만들어 주는 마크업 언어

- list

  • 순서가 없는 목록 태그

1. HTML 태그

  • div : 영역을 의마한다. 무엇을 위한 영역인지는 알 수 없다.
  • h1~h6: 제목을 의미한다.
  • ol : 순서 있는 목록을 의미한다.이 태그 안에는
  • 가 포함될수
    있으며, 포함된 항목은 순서대로 일련번호가 포함
  • ul : 순서 없는 목록을 의미한다.이 태그 안에는
  • 가 포함될수
    있으며, 항목은 순서대로 도형표시가 포함된 상태로 출력된다.
  • hr : 직선을 표시하는 태그
  • p : 본문을 정의하기 위한 태그
    서로다른 p태그 간에는 문단간 여백이 형성된다.
  • address : 주소, 저작권(카피라이트) 회사의 연락처를 기입하는
    문장을 강조하기 위해 사용한다.
  • 카피라이트 특수문자 : ©
    < -> <
    > -> >
    & -> &
  • img : 이미지를 표시하기 위한 태그
  • figure, figcaption : 기존의 HTML은 이미지에 대한 시멘틱 특성을 충족시키기
    위해 설명을 alt속성으로 표현하는 것이 유일한 방법이였으나,
    브라우저에 따라서 표현에 어려움이 있었다.
  • figure : 캡션이 적용되는 범위를 지정하는 태그로, 대부분 이미지를 감싸는데
    사용된다.
  • figcaption : figure 태그안에 img태그를 배치시키고, 이미지에 대한 설명을 담은
    캡션은 figcaption을 사용한다.
  • table : 행 -> tr, 열 -> td
  • thead : 테이블의 head 부분을 의미
  • tbody : 테이블에서 본문
  • th : 제목
  • tfoot : 표상에서 가장 아래쪽
  • rowspan : table에서 사용하는 속성, 행을 병합한다.
  • colspan : table에서 사용하는 속성, 열을 병합한다.
  • input : 입력양식을 표시하는 태그
  • select : 드롭박스의 박스를 구성
  • option : 선택항목을 구성한다.
  • strong : 내용을 굵게 표시한다.
  • b : 내용을 굵게 표시한다.
  • i : 기울임 꼴로 표시한다.
  • u : 밑줄을 표시한다.
  • span : 태그 자체로는 어떠한 기능도 없다.
    css 스타일을 적용하여, 포함하고 있는 내용을 시각적으로 꾸미기 위한
    영역을 지정하는 용도로 사용된다.

2. 모든 태그에 사용되는 id 속성

<tag id=""> 내용.. </tag>
- 현재 웹 페이지에서 고유한 요소를 의미하기 위한 값
- 영역을 나누는 div에 사용될 경우, 해당 태그가 어떤 영역으로 사용되었는지
파악하기위해 지정된다.
- 다른 요소와 중복된 값을 갖지 못한다.

3. input

 <input name="이름" id="식별자" type="종류" value="기본 값" maxlength="숫자" />
  • name속성과 id속성
    -> name속성은 웹 프로그램과 연계된 속성으로 한 페이지 안에서 고유한 값을
    명시해야한다.
    -> id 속성은 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을
    명시해야 한다.
    -> id값과 name값은 서로 동일하게 지정해도 무관하다.
  • type속성에 따라서 화면에 표시되는 요소의 종류가 결정된다.
    -> text, password, hidden등
    -> checkbox(여러 항목 중 복수로 선택 가능)
    -> radio(여러 항목중에 한가지만 선택 가능)
  • value 속성은 해당 요서에 기본적으로 작성되어 있을 값을 기술한다.
  • 텍스트를 입력받는 요소의 경우 maxlength 속성을 사용하여 최대 입력 가능한
    글자수를 제한할 수 있다.
profile
개발자 과정 국비 수료 중

0개의 댓글