[HTML] Tag 정리(2)

태그(option)

• 중요도 : ●●●●●
• 종류 : 닫는 태그 필요
• option태그는 select태그의 구성 요소이다. 표시 텍스트는 태그 안에, 해당 선택지 값은 value 속성을 이용한다.
• 속성
• disabled : 해당 option을 선택하지 못하도록 한다. 속성값은 부여하지 않는다.
• selected : 해당 option이 선택된 상태로 초기화한다. 속성값은 부여하지 않는다.
• value : 해당 option을 선택했을 경우 실제 서버로 전송할 값.

태그(optgroup)

• 중요도 : ●●○○○
• 종류 : 닫는 태그 필요
• 유사한 을 묶어내는 역할을 하나, 이는 시각적 요소에 국한되어 있고 실제 역할은 없다고 할 수 있다.
• 속성
• label : 표시할 텍스트를 지정한다.

태그(h)

• 중요도 : ●●●●○
• 종류 : 닫는 태그 필요
• 문서나 구획의 제목을 담기위해 사용한다.
• h1 부터 h6 까지의 태그를 사용하며 h1이 가장 상위 제목, h6이 가장 하위 제목이다.
• 시멘틱 : 있음

태그(div)

• 중요도 : ●●●●●
• 종류 : 닫는 태그 필요
• 단순히 구획을 나눌때 사용한다.
• 기본적으로 문서의 한 줄을 다 차지한다.
• 시멘틱 : 없음

태그(span)

• 중요도 : ●●●●●
• 종류 : 닫는 태그 필요
• 단순히 구획을 나눌때 사용한다.
• 한 줄을 다 차지하지 않는다.
• 시멘틱 : 없음

태그(main)

• 중요도 : ●●●○○
• 종류 : 닫는 태그 필요
• 문서의 주된 내용을 담는데 사용한다.
• 기본적으로 문서의 한 줄을 다 차지한다.
• 시멘틱 : 있음

태그(nav)

• 중요도 : ●●●○○
• 종류 : 닫는 태그 필요
• 구획을 나눌때 사용한다.
• nav(Navigator) 태그는 서로 연관있는 링크를 모아놓을 때 사용한다.
• 기본적으로 문서의 한 줄을 다 차지한다.
• 시멘틱 : 있음

태그(header)

• 중요도 : ●●●○○
• 종류 : 닫는 태그 필요
• 구획을 나눌때 사용한다.
• 문서의 상단 정보(로그인 폼, 검색창, 로고, 메뉴 등)를 담는다.
• 기본적으로 문서의 한 줄을 다 차지한다.
• 시멘틱 : 있음

태그(footer)

• 중요도 : ●●●○○
• 종류 : 닫는 태그 필요
• 구획을 나눌때 사용한다.
• 문서의 하단 정보(저작권, 사업자정보, 연락처 등)를 담는다.
• 기본적으로 문서의 한 줄을 다 차지한다.
• 시멘틱 : 있음

태그(section)

• 중요도 : ●○○○○
• 종류 : 닫는 태그 필요
• 구획을 나눌때 사용한다.
• 사이트에서 분리하면 의미가 없어지는 내용을 담는다.
• 기본적으로 문서의 한 줄을 다 차지한다.
• 시멘틱 : 있음

태그(article)

• 중요도 : ●○○○○
• 종류 : 닫는 태그 필요
• 구획을 나눌때 사용한다.
• 사이트에서 분리해도 의미가 있는 내용을 담는다.
• 기본적으로 문서의 한 줄을 다 차지한다.
• 시멘틱 : 있음

태그(aside)

• 중요도 : ●○○○○
• 종류 : 닫는 태그 필요
• 구획을 나눌때 사용한다.
• 문서의 부수적인 내용을 담는데 사용한다.
• 기본적으로 문서의 한 줄을 다 차지한다.
• 시멘틱 : 있음

태그(input)

• 중요도 : ●●●●●
• input태그는 사용자에게 값을 받는 용도로 사용된다.
• 입력 받은 값은 주로 서버로 전송한다.
• 속성
• autofocus : 페이지가 로드되었을 때 해당 속성을 가진 input이 포커스를 가지게한다.
• checked : type이 checkbox이거나 radio인 경우 선택(체크)된 상태로 지정한다. 속성 값은 부여하지 않는다.
• disabled : 해당 input요소를 사용하지 못하게한다. 속성 값은 부여하지 않는다.
• max : type이 number인 경우 그 값의 최대값을 지정한다.
• min : type이 number인 경우 그 값의 최소값을 지정한다.
• maxlength : 값의 최대 길이
• minlength : 값의 최소 길이
• mutiple : type이 file된 경우 파일을 두 개 이상 선택할 수 있게 한다. 속성값은 부여하지 않는다.
• name : (상당히 중요) 사용자가 입력한 값을 서버가 식별하기 위해 사용하는 식별자다.
• pattern : (안 중요) 정규식(Regular Expression)을 통해 값을 필터한다.
• placeholder : 값이 비어 있을때 표시할 힌트 메세지.
• readonly : 해당 input의 값을 변경하지 못하게 한다.
• required : 빈 값을 허용하지 않음. 속성 값은 부여하지 않는다.
• value : 버튼(button, reset, submit)이 아닐때, 초기 값을 지정한다. 버튼의 경우 표시할 버튼 텍스트를 지정한다.
• type : input태그의 종류를 지정한다. 가능한 값은 아래와 같다.
• "button" : 그냥 버튼. 아무일도 안 함.
• "checkbox" : 체크박스 필드. 여/부 값을 받기 위해 사용한다.
• "email" : 이메일 필드. 입력 받는 값이 이메일이라면 반드시 해당 타입 값 사용.
• "file" : 파일 필드. 주로 파일을 업로드할 때 사용한다. (프로필 사진 선택, 첨부파일 추가 등)
• "number" : 숫자를 입력받기 위한 필드.
• "password" : 비밀번호 필드. 입력 문자가 보이지 않음.
• "radio" : name 속성 값이 같은 radio 중에 하나만 선택하게 하기 위해 존재.
• "reset" : 초기화 버튼. 해당 클리어 버튼이 포함되어 있는 태그 내부의 모든 input의 값을 초기화 한다.
• "submit" : 제출 버튼. 해당 제출 버튼이 포함되어 있는 태그 내부의 모든 값을 서버로 전송한다. (로그인, 회원가입, 글 작성 버튼 등)
• "tel" : 연락처 필드. 입력 받는 값이 연락처라면 반드시 해당 타입 값 사용.
• "text" : 일반 텍스트. type 속성 생략시 기본값.

경로

• 경로(path) : 어떠한 디렉토리(Directory) 혹은 파일(File)등의 리소스(Resource)에 접근하기 위해 사용하는 위치를 나타내는 값이다.
• 구분자(Separator) : 윈도우의 파일 시스템에서 만 역슬래쉬()를 쓰고 나머지 리눅스, 맥, HTTP 프로토콜 등에서는 슬래쉬()를 사용한다.
• 구분자로 구분된 구분자의 왼쪽에 있는 대상은 디렉토리이다.
• 경로의 끝이 구분자로 끝나지 않을 경우 마지막 대상은 파일이다.
• 웹 경로(주소, URL)는 다음과 같은 형식으로 이루어진다. (중괄호 생략)
  {프로토콜}://{도메인}/{경로}
• 절대 경로(Absolute Path) : 아래의 형식으로 경로를 작성하면 그것은 절대경로다. 절대 경로를 명시할 경우 올라갈 수 있는 최상위 디렉토리까지 올라간 뒤 탐색을 시작한다.

1. 프로토콜(Protocol)과 도메인(Domain)을 직접 명시하는 경우
2. 구분자(/, )로 시작하는 경우

• 상대 경로(Relative Path) : 절대 경로가 아닌 경우. 주로 파일 이름을 바로 적으면서 시작한다. 상대 경로를 명시할 경우 현재의 파일이 실행되고 있는 위치를 기준으로 탐색을 시작한다.
• 현재 위치는 마침표(.) 특수기호로 표시한다.
• 상위 위치는 마침표 두개(..)로 표시한다.