HTML 19

[HTML] Emmet

Emmet 생성된 트리 내 요소의 위치와 요소의 속성을 설명하기 위해 CSS 선택기와 유사한 구문을 사용한다. 중첩 연산자 자식 : > > 연산자를 사용하여 요소를 서로 중첩한다. 예시 형제자매 : + 연산자를 사용하여 + 동일한 수준에서 요소를 서로 가까이 배치한다. 예시 상위 : ^ 연산자를 사용하면 > 생성된 트리 아래로 내려가며 모든 형제 요소의 위치가 가장 깊은 요소에 대해 배치한다. 예시 곱셈 : * 연산자를 사용하면 * 요소가 출력되어야 하는 횟수를 정의한다. 예시 그룹화 : () 괄호는 복잡한 약어로 하위 트리를 그룹화하기 위해 Emmet 의 고급 사용자가 사용한다. 예시 속성 연산자 아이디와 클래스 CSS에서 elem#id 및 표기법을 사용하여 지정된 또는 속성이 elem.class 있는..

HTML 2023.03.06

[HTML] Table 태그

Table 태그 표를 만드는 태그이다. 홈페이지의 전체구성을 만드는 데도 사용할 수 있다. 자동으로 닫는 태그 : x 각각 셀로 만드는 데 header cell 과 standard cell 로 구분한다. th / tr / td 내용 : table header 의 약자로, 표의 제목을 쓰는 역할이다. 기본값은 굵은 글씨체와 중앙 정렬이다. 내용 : table row 의 약자로, 표의 가로줄을 만드는 역할이다. 기본값은 보통 글씨체와 왼쪽 정렬이다. 내용 : table data 의 약자로, 표의 셀을 만드는 역할이다. 기본값은 보통 글씨체와 왼쪽 정렬이다. 예시 1 2 3 4 5 6 7 8 9 행 병합(rowspan)과 셀 병합(colspan) 행 병합(rowspan) : td태그의 속성 값으로 사용할 수 ..

HTML 2023.03.06

[HTML] Select 와 TextArea 태그(부가적 태그포함)

select select 태그는 input 태그와 마찬가지로 사용로주터 값을 받아 서버로 넘기기위한 목적이 있으나, 하나의 항목하에 선택지가 여러개 있을 때 유용하다. 자동으로 닫는 태그 : x select 태그 자체로는 값을 가지지 않으며 option 태그를 사용하여 그 값들을 나열할 수 있다. 속성 name : 해당 select 태그에서 선택된 option 태그를 가진값을 서버로 전송할 때 사용할 식별자, 특별한 경우가 아니라면 동일한 form 내에서 고유한다. autofocus : 페이지가 로드되었을 때 해당속성을 가진 select 태그에 자동으로 포커스가 주어진다. disabled : 해당하는 select태그를 비활성화한다.(속성 값 없음) required : 해당 option태그의 값이 비어있을..

HTML 2023.03.04

[HTML] Input 태그

input input태그는 사용자로 부터 입력값을 받기위해 사용한다. 자동으로 닫는 태그 : o 반드시 form태그에 속해있고, name속성값을 가지고 있어야 올바르게 서버노 전송된다. 속성 accept : type속성값이 file일때 입력 받을 수 있는 파일을 제한한다. 이는 콤마(,)로 구분된 .확장자 형식 혹은 MINE 타입이어야한다. 모든 확장자를 허용할 때 : *(기본값) jpg 및 jpeg 확장자만 허용할 때 : .jpg, .jpeg 모든 이미지 타입을 허용할 때 : images/* zip 파일 및 모든 이미지 파일을 허용할 때 : .zip, image/* autofocus : 페이지가 로드되었을때 해당 속성을 가진 input태그에 자동으로 포커스가 주어진다.(속성 값 없음) checked :..

HTML 2023.03.03

[HTML] from 태그

form form태그는 서버로 전송하고자 하는 input, select, textarea 등의 사용자 입력값을 받을수 있는 태그들을 담을 수 있는 양식 태그이다. 자동으로 닫는 태그 : x 속성 method enctype 에제) 상단 홈페이지 주소에 아래의 값을 포함한 주소값이 출력된다. e=asd%40f : 9번째 줄 입력값(ID) &p=1234 : 10번째 줄 입력값(Password) 보안코드는 form소에 포함되지 않아서 주소에 같이 나오지 않는다.

HTML 2023.03.03

[HTML] 컨테이너 태그

main main태그는 현재페이지의 주된 내용을 담기위해 사용한다. 자동으로 닫는 태그 : x header header태그는 페이지 상단부(주로 메뉴나 검색폼등)의 내용을 담기위해 사용한다. 자동으로 닫는 태그 : x footer footer태그는 페이지 하단부(부로, 저작권, 사업자정보 등)의 내용을 담기위해 사용한다. 자동으로 닫는 태그 : x aside aside태그는 의미적으로 페이지의 주된내용과 관련이 없거나 부수적인 경우 위치적으로 좌/우측에 해당하는 내용을 담기위해 사용한다. 자동으로 닫는 태그 : x nav nav태그는 서로 관련있는 링크(혹은 클릭과 관련되는 모든 기능)들을 모아놓기 위해서 사용한다. 자동으로 닫는 태그 : x article article태그는 게시글, 뉴스 기사등을 담기..

HTML 2023.03.03

[HTML] ol(Ordered List) 과 ul(Unordered List) 태그

ol ol(Ordered List)태그는 이가 가지는 항목이 순서와 유관한 경우 사용하는 목록 태그이다. 자동으로 닫는 태그 : x 자식으로 li태그를 가진다. ul ul(Unordered List)태그는 이가 가지는 항목이 순서와 무관한 경우 사용하는 목록 태그이다. 자동으로 닫는 태그 : x 자식으로 li태그를 가진다. li li(List Item)태그는 목록의 항목 하나를 의미하는 태그이다. 자동으로 닫는 태그 : x 자식으로 li태그를 가진다. 예제) 목차 서론 본론 결론 참조 짜장면 짬뽕 볶음밥 탕수육 짬뽕밥

HTML 2023.03.03

[HTML] img(Image) 태그

img img(Image)태그는 이미지를 삽입하고자 할때 사용한다. 자동으로 닫는 태그 : o 속성 src : (필수)삽입할 이미지의 주소 혹은 절대/상대 경로이다. alt : (필수)모종의 사유로 이미지가 정상표기되지 않거아 스크린 리더가 있을때 대신 표시 하는 텍스트이다. 이미지에 대한 간략한 설명을 문자열로 작성해야 하며 없을 때에는 빈문자열로 대체한다. 예제) 이 예제문을 사용시 붙여쓰지않고 개행을 하여 정리한 경우 사진사이에 _가 생성될 수 있다, 그 이유는 a태그가 개행(띄워쓰기 포함) 또한 하나의 글자로 취급하기 때문이다.

HTML 2023.03.03