HTML Visual Studio Code로 태그 활용하기

비주얼 스튜디오 코드를 활용해서 HTML 태그 활용 방법을 알아봅시다.

---

1. 영역을 구분하기 위한 <div>태그

• 상단, 메뉴, 본문, 하단 등과 같이 웹페이지의 레이아웃에 대한 영역을 구분하기 위해 사용되나,
• 서로 중첩되어 사용할 수 있으며, 다른 태그를 포함할 수 있다.

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

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

<div> 태그를 활용해서 전체 사이트 영역과 상단 사이드바 영역으로 구분한다.

<div> 태그에 고유의 id값을 지정해서 나눈다.

3. 캡션을 지정하기 위한 figure태그와 figcaption태그

• 캡션 : 사진이나 삽화 등에 붙이는 설명
• <figure> : 캡션이 적용되는 범위를 지정하는 태그로 대부분 이미지를 감싸는 용도로 사용된다.
• <figure> 태그 안에 <img> 태그를 배치시키고. 이미지에 대한 설명을 담은 캡션은 <figcaption> 태그를 사용한다.

<figure> 태그 안에 <img> 를 배치한다. 그런 다음<figcaption>으로 사진에 대한 설명을 넣는다.

결과 :

4. table

4-1. 행,열을 병합

• rowspan = "3"
  4-2. 열을 병합

• colspan = "2" 2칸만큼 병합

  

  

1. <table>로 표 영역을 지정한 다음 border로 테두리의 굵기를 설정해준다.
2. 상단 제목영역을 <thead>로 지정하여 <tr>로 한 줄을 형성한 다음, 여기에 이름, 성별, 주소, 회비를 기입한다.
3. 다음 head가 나왔으니 <tbody>를 만들고 이름, 성별, 주소, 회비 값을 입력한다. 여기서 주소가 만약 같은 값으로 설정된다면, rowspan을 사용해서 값이 들어가는 칸의 행과 열을 합쳐본다.
4. 다음 <tfoot>로 합계를 내는데 여기서는 열만 합치면 되니 colspan을 사용한다.

5. input

5-1. 입력양식을 표시하는 <input> 태그

• name속성, id속성
  -> name 속성은 웹 프로그램과 연계되는 속성으로 한 페이지 안에서 고유한 값을 명시해야 한다.
  -> id속성은 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을 명시해야 한다.
  -> id값과 name값은 서로 동일하게 지정해도 무관
  -> id값과 name값은 서로 동일하게 지정해도 무관 type 속성에 따라 화면에 표시되는 요소의 종류가 결정된다.
  (text, password, hiiden..)

  

1. <input>으로 입력양식을 넣어 보기 위해서 서로 다른 type들을 알아본다.
2. 첫번째, userid, 아이디 입력칸은 type이 글자면 되므로, 타입은 text. 최대 길이는 5로 지정한다음 placeholder로 칸에 미리 입력 되어 있을 텍스트를 지정해준다.
3. 두번째, 패스워드 칸에는 보안을 위해 글자가 점으로 표시되도록 type을 password로 설정 placeholder로 텍스트를 지정한다.
4. 세번째, username도 userid와 비슷한 형식으로 설정한다.
5. <input>의 value는 초기값을 명시한다. 그러므로 text 타입으로 value에 "값 넣기"를 초기 값으로 명시해본다.
6. <input> 타입에서 hidden은 사용자에게 보이지 않는 숨겨진 필드를 만든다. 사용자가 변경해서는 안되는 폼을 만들때 쓰인다.

• 실습

  

• 출력 결과