Frontend/HTML12 [HTML] <form> 태그 0. 개요 1. 태그의 정의 2. 태그의 속성 ① name 속성 ② target 속성 ③ action 속성 ④ method 속성 (1). GET 방식 (2). POST 방식 3. 4. 마치며 0. 개요 위의 이미지는 통계에 따른 HTML 각 태그의 사용률 순위를 나타낸 이미지이다. 이번 게시글에서 다루는 것은 현재 57.3%의 사용률을 가진 태그에 관한 것이다. 요소의 예제에 , 와 같은 입력 요소를 같이 사용했기 때문에 해당 태그에 대해 잘 모르겠다면 하단의 링크를 참고하길 바란다. (, , 세 가지의 입력 요소에 대해 정리해 둔 게시글이다.) 내용적으로도 이전 게시글에서 다룬 입력 요소와 연관됐기 때문에 어느 정도 도움은 될 것이라고 생각한다. HTML 삽입 미리보기할 수 없는 소스 1. 태그의 정의.. 2023. 5. 14. [HTML] 입력 요소 3가지 (<input>, <select>, <textarea>) 1. ① type 속성 ② name 속성 ③ value 속성 2. 3. 1. 요소란 사용자로부터 값을 입력받을 수 있는 입력창을 만드는 요소이다. 해당 요소는 기본적으로 인라인 블록을 만드는 인라인 요소이며, 별도의 닫는 태그가 없는 단일 태그이다. 요소는 'type' 속성의 값에 따라 입력 요소의 형태를 다르게 할 수 있으며 추가적으로 'name' 속성을 통해서 각 입력 요소에 대해 식별자를 추가할 수 있다. ① type 속성 type 속성은 요소의 핵심적인 속성으로 해당 속성의 값에 따라 입력창의 형태와 입력할 값의 유형이 달라지고 거기에 맞춰서 추가로 적용할 수 있는 속성의 종류도 조금씩 차이가 생긴다. 해당 속성의 기본 값은 'text'로 아래의 예제를 보면 '이름' Part에 별도로 type을 .. 2023. 5. 5. [HTML] 시맨틱 태그 (Semantic Tag) 목차 시맨틱 태그 (Semantic Tag) ① 시맨틱 태그의 정의 ② 시맨틱 태그 종류 (1). (2). (3). (4). (5). (6). (7). 시맨틱 태그 (Semantic Tag) ① 시맨틱 태그의 정의 "Semantic"은 "의미의, 의미론적인"이라는 뜻을 가진 단어이다. 이번에 다루는 시맨틱 태그를 그대로 해석해 보자면, "의미를 가진 태그"라고 할 수 있다. 좀 더 쉽게 말하자면 앞에서 배운 와 같은 태그에 별도의 의미를 부여한 것이다. 상단의 이미지에서 빨간색 테두리로 감싼 , , 가 대표적인 시맨틱 태그이다. 시맨틱 태그는 HTML5에서 처음 등장하였으며, 각 태그의 명칭으로 사용된 단어의 뜻을 생각해 보면 는 웹 페이지의 상단부, 는 웹 페이지의 꼬리, 하단부라는 것을 쉽게 알 수 .. 2023. 4. 27. [HTML] 목록 만들기 (<ul>, <ol>, <li>) 1. 목록 태그 (, , ) ① 목록의 정의 ② ③ (1). type 속성 (2). reversed 속성 (3). start 속성 ④ 2. 마치며 1. 목록 태그 (, , ) ① 목록의 정의 목록이란 "연관 있는 항목들을 순서대로 나열한 것"을 말한다. HTML에서도 목록, List를 웹 페이지에 출력하고 싶은 경우 요소를 통해서 표현하고 싶은 콘텐츠, 텍스트를 목록의 형태로 표시할 수 있다. 그리고 이러한 목록도 순서 없이 표시하거나 혹은 순서대로 표시할 수도 있다. 순서가 없는 목록(Unordered List)은 , 순서가 있는 목록(Ordered List)은 요소를 통해서 표현할 수 있다. 아래는 , 요소를 통해서 목록을 표시한 예시이다. HTML 삽입 미리보기할 수 없는 소스 , , 태그 모두 블.. 2023. 4. 1. [HTML] <a> 요소 1. 태그 ① 태그의 정의 - a => anchor의 약어, '닻', '정박지'라는 의미를 가지고 있다. - 같은 문서 내에서 혹은 다른 문서로의 이동을 위해서 사용되는 태그로 인라인 요소를 만드는 인라인 태그이다. - 'href' 속성을 통해서 문서 내의 특정 위치, 파일, 이메일 주소 등 다른 URL로 연결된 하이퍼 링크를 만들 수 있다. 하이퍼 링크(Hyperlink) 클릭하면 현재 문서 내에서 특정 부분으로 이동하거나 혹은 다른 문서로 이동할 수 있는 수단 줄여서 '링크'라고도 한다. - 'target' 속성을 통해서 현재 문서에서 새로운 문서로 이동할 때 새로운 문서를 현재 탭에서 열지 아니면 새로운 탭에서 열지에 대한 여부를 설정할 수 있다. ② href 속성 - href => Hypertex.. 2023. 3. 29. [HTML] <img> 태그 1. 태그 - img => image - 이미지를 표시할 때 사용되는 태그로 단일 태그이다. - 필수적으로 있어야하는 속성은 이미지의 url을 담는 src 속성이 있고 그 외에 이미지가 나오지 않을 때 대체 텍스트를 출력하는 alt 속성 출력되는 이미지의 크기를 살정하는 width, height 속성 등을 사용한다. * 여기서 다루지 않은 나머지 속성들에 대해서는 아래 링크를 통해서 확인하면 된다. HTML 삽입 미리보기할 수 없는 소스 ① src 속성 - src => Source, (자료의)출처 - 표시할 이미지 파일의 url과 파일 명을 입력받는 속성, 여기서 들어갈 수 있는 값은 내 컴퓨터에 저장된 이미지의 url이나, 아니면 서버에 저장된 이미지의 url이 들어간다. - 의 필수 사항 ② alt .. 2023. 3. 19. 이전 1 2 다음
