목록웹개발/HTML (8)
IT'S YU
22.05.02 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 한다 label / input 보통 폼의 기본적인 모습은 아래와 같습니다. 사용자가 입력할 수 있는 입력창이 있고, 사용자가 어떠한 정보를 입력해야할지를 앞에 붙여주고 있습니다. 이렇게 어떤 정보를 입력할지 설명을 해주는 부분을lable이라고 하며, 사용자가 정보를 입력할 수 있는 영역을 input이라고 합니다. label과 input은 대체로 세트로 함께 다닙니다. label을 붙이는 것은 사용자 경험 입장에서도 중요하지만, 웹접근성이나 시멘틱웹적인 부분에서도 매우 중요합니다. 1. : 입력 요소 HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이..
식별자 id 고유한 식별을 목적으로 하는 경우 사용 페이지에서 하나의 요소만 지정 가능 class 재사용을 목적으로 하는 경우 사용 여러 개의 요소에 지정 가능 name form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성 여러 개의 요소에 지정 가능 id : javascript에서 접근 목적. 현 페이지에서 한 개만이 유효 == Javascript class : js에서도 접근이 가능하지만, 일단은 css에서 디자인적인 요소인 경우가 많다. == css 쪽에서 주로 사용, 현 페이지에서 다중으로 설정이 가능하다. name : 값을 전달하기 위한 목적을 가지고 있는 경우가 많다. 다중 설정이 가능하다. 즉, A페이지에서 B페이지로 이동하는 경우 값을 넘겨준다. vs 두 태그의 공통점..
1) form 요소란? 웹 페이지에서는 form요소를 사용하여 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form요소를 사용합니다. 문법: action: 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시해야 합니다. (이렇게 전달 받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다.) method: 입력받은 데이터를 서버에 전달할 방식을 명시합니다. 2) method 속성 method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET방식과 POST방식으로 나뉩니다. GET 방식 주소에 데이터(data)를 추가하여 전달하는 방식 데이터가 주소 입력창에 그대로 나타남 전송할 수 있는 크기 또한 제한..
타임리프 소개 *공식 사이트: https://www.thymeleaf.org/ *공식 메뉴얼 - 기본 기능: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html *공식 메뉴얼 - 스프링 통합: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html 1) SSR : 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용된다. 백엔드 개발자가 리엑트, 뷰 같은 프론트엔드 기술까지 배워서 구사하기에는 현실적으로 힘들다. 따라서 SSR을 할 수 있는 뷰 템플릿을 하나 정도는 익히고 있어야 한다. 2) 네츄럴 템플릿 : 타임리프는 순수 HTML을 최대한 유지하는 특..