Full_Stack developer

tag 종류 본문

FE/HTML

tag 종류

develkbh 2024. 1. 25. 12:26

<meta> 태그

  • meta 정보
    • 정보를 위한 정보! 실제 브라우저에 내용을 보여주기 위한 것이 아닌 브라우저 정보를 담고 있음
  • 보여주기 위한 것이 아니므로 head 태그 안에 작성

meta charset=“UTF-8”

  • 유니코드(문자) 인코딩 방식: UTF-8
  • 유니코드? 인코딩?
    • 유니코드 : 여러 나라의 문자들을 표시할 수 있는 표준 코드 ‘가’ : ‘U+AC00’
    • 인코딩 : 컴퓨터가 읽을 수 있도록 변환해주는 것 컴퓨터가 읽을 수 있는 1001 등의 이진수로 변환

meta name="viewport" content="width=device-width, initial-scale=1.0"

  • width=device-width
    • 브라우저를 보는 장치의 화면 너비를 따르도록 페이지 너비를 설정
  • initial-scale=1.0
    •  브라우저에서 페이지를 처음 로드 할 때 크기 설정

<!DOCTYPE html>

  • 웹문서가 어떤 형식으로 작성되었는지 선언하는 것 (document type)
  •  html5형식으로 작성되었다고 브라우저에 알려주는 것
  • html 문서 최상단에 위치

제목 태그, <h1~6></h1~6>

  • 제목을 뜻하는 Heading 의 약자, h 사용!
  • 제목이니까, 자동 줄 바꿈!
  • 하나의 HTML 문서에는 하나의 h1 태그를 권장
  • 웹 검색 엔진이 제일 먼저 검색하는 태그

본문 태그, <p></p>

  • 본문을 뜻하는 paragraph 의 약자,<p>사용!
  • 제목이니까, 자동 줄 바꿈!

줄 바꿈 태그, <br>

  • 줄을 한칸 띄어준다.

목록 태그, <ul></ul> , <ol></ol>

  • <ul> 순서가 없는 목록
  • <ol>순서가 있는 목록
  • ol은 속성을 사용 가능
    • type="?" :말머리 기호 변경(1,A,a,I,i) 순으로 
    • start="?":시작 값 변경
    • reversed:역순으로 시작

수평 줄 태그, <hr>

  • 수평으로 된 줄을 그어 준다.

<summary> 와 <detail>

  • 내용을 숨길수 있다

summary를 클릭해서 숨긴 내용을 보이게 하거나 감출 수 있다.

<details>

            <summary>내용을 숨길 수 있어요.</summary>

숨긴 내용은 이 곳에 쓰면 됩니다.

</details>

문자 꾸미기 태그들

  • <b>: 두껍게
  • <strong>: 두껍게 + Semactic 한 의미를 지님
  • <i>:이탤릭
  • <em>:Emphasized, 강조 , 기울여서표시됨
  • <del>: 중간 줄
  • <u> :밑 줄 

이미지를 넣어주는 <img>

  • 이미지를 넣을 때 사용
  • 속성 값 중 하나인, src 를 사용하여 경로 지정
  • 이미지 로드가 안될 경우 alt 속성이 중요(이미지를 대체할 이름값)
  • 파일을 직접 가져오기, 인터넷 주소에서 가져오기 등등

하이퍼링크 <a>

  • 기존 문서나 텍스트의 제약에서 벗어나 사용자가 원하는 정보를 취득할 수 있는 기능을 제공
  • Anchor 의 약자인 <a> 태그 사용
  • 속성 값
    • href : Hypertext Reference 의 약자, 이동할 페이지의 링크
    • target : 링크 된 문서를 열었을 때 문서가 열릴 위치 표시 • _blank / _self

입력 값 받기! <input>

  • type
    •  button
    •  text
    •  email
    •  password
    •  checkbox
    •  radio
    •  date 
    •  color
    •  range
    •  file

버튼, type=“button”  

  • 버튼을 생성
  • 주로 특정 기능을 수행 시킬 때 사용

 

텍스트, type=“text”

  • 텍스트 입력 값을 받는 폼을 생성
  • 우리가 입력하는 ID 입력 부분?
  • 텍스트 값을 입력 받아 전달하는 기능

 

패스워드, type=“password”

  • 비밀번호 값을 받는 폼을 생성
  • 입력 값을 자동으로 안보이게 처리
  • 중요 or 비밀 텍스트 값을 전달하는 기능

체크 박스, type=“checkbox”

  • 여러 선택지 중 여러 개를 선택 가능한 체크 박스 생성
  • 속성
    • Name : 체크 박스의 이름, 같은 분류의 체크 박스는 같은 이름으로 설정
    • Checked : 화면 최초 로딩 시에 선택 된 상태로 로딩

날짜 선택, type=“date”

  • 특정 날짜(년/월/일)를 선택
  • 속성
    • Name : 날짜 선택 폼 이름
  • type=“datetime-local”
    • 시간 까지 선택 가능!

선택 메뉴를 만드는,<select>

  • 선택 메뉴(드롭 다운)를 만드는 태그!
  • <select>: select 폼 생성
    • Name : select 박스의 이름
  • <option>: select 폼의 옵션 값 생성
    • Value : 실제적으로 전달 되는 값
    • Selected : 최초에 선택 된 값으로 설정
  • <optgroup>: option 을 그룹화
    • Label : optgroup 이름 설정
  • Disabled : 옵션은 보이지만 선택을 못하도록 설정

테이블을 만들자!<table>

  • 표를 만들 때 사용하는 태그
  • 과거에는 테이블을 사용하여 레이아웃을 구성 하였으나 기능 상의 한계로 인하여 최근에는 공간 분할 태그인
    <div>태그를 사용
  • 먼저 행을 쓰고 행의 자식 요소로 칸을 넣어주는 것이 기본!
  • <table> : 표를 감싸는 태그
  • <tr> : 표 내부의 행
  • <th>: 표 내부의 제목 칸
  • <td>:행 내부의 일반 칸

 

<table> 속성

  • <table>
    • border : 테두리 두께
    • cellspacing : 테두리 간격 사이의 너비
    • cellpadding : 셀 내부의 간격
    • align : 테이블 정렬 속성
    • width 와 height : 테이블의 너비와 높이
    • bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색

<td> 속성

  • colspan : 해당 칸이 점유하는 열의 수 지정
  • rowspan : 해당 칸이 점유하는 행의 수 지정

'FE > HTML' 카테고리의 다른 글

GIT  (2) 2024.02.21
HTML이란 ??  (0) 2024.01.25
'FE/HTML' Related Articles more