웹개발20 웹 폼의 구조화와 접근성을 높이는 HTML legend 태그 LEGEND 태그란? 태그는 HTML 폼 그룹의 제목을 정의하는 태그입니다. 이렇게 얘기하면 어떤 의미인지 감이 잘 안오는데요. 예시 화면을 보면 바로 이해하실 수 있을 겁니다. 사용법 개인정보 .... ... 배송정보 .... ... 태그는 열고 닫아야 하는 태그입니다 class나 id 외에 별다른 속성은 없습니다 폼 내에서 제목이 필요한 곳에 사용합니다 위치는 과 다음입니다 예시 See the Pen legend by 40's Programmer (@40sProgrammer) on CodePen. legend의 역할이 바로 보입니다. 여러개의 폼들을 묶어서 제목을 보여주네요. 2023. 6. 11. 매력적인 이미지 설명을 위한 HTML figcaption 태그 활용 방법 FIGCAPTION 태그란? 태그는 figure caption의 약자입니다. 태그와 함께 HTML5에서 도입되었습니다. 이미지, 동영상 같은 미디어가 어떤 것인지 설명하는 태그입니다. 하위 태그로 활용됩니다. 활용법 이미지 캡션 figcaption 태그는 열고 닫아야 하는 태그입니다 과 사이에 설명하는 텍스트를 입력합니다 예시 See the Pen figcaption by 40's Programmer (@40sProgrammer) on CodePen. 고양이 이미지 하단에 설명하는 캡션이 잘 붙는 것을 확인할 수 있습니다. 2023. 6. 9. 효과적인 이미지 및 콘텐츠 표현을 위한 HTML figure 태그 활용 FIGURE 태그란? 태그는 HTML5에서 도입되었습니다. 이미지, 그래픽, 동영상 컨텐츠와 설명을 그룹화하는 태그입니다. 사실 기능이 있다기 보다 이나 태그처럼 이 컨텐츠는 어떤 컨텐츠이다 알려주는 겁니다. 검색엔진이 잘 찾아볼 수 있도록 구조화하기 위한 태그이고 SEO에 중요합니다. 활용법 이미지 캡션 figure 태그는 열고 닫아야 하는 태그입니다 별다른 속성값이 없는 심플한 태그입니다 와 함께 다니는 태그 : 이미지를 삽입할 때 사용되는 태그 : 동영상을 삽입할 때 사용되는 태그 : 콘텐츠의 설명(캡션)을 표시할 때 사용되는 태그 2023. 6. 8. HTML Form 태그 : 효과적인 웹 폼 디자인과 상호작용을 위한 태그 FORM 태그란? 태그는 다양한 폼 요소를 생성하는 태그입니다. 폼은 우리가 흔히 보는 입력 창 등을 말합니다. 우리가 자주 쓰는 이메일도 여러가지 폼으로 구성되어 있죠. 제목, 수신/참조, 내용, 첨부파일 등 하지만, FORM 태그만 쓴다고 위의 모든 입력폼을 만들 수는 없습니다. 관련된 태그들이 같이 따라다녀요. 활용법 .... ... form 태그는 열고 닫아야 하는 태그입니다 method : 데이터의 전송 방식을 설정하는데 보통 post 또는 get으로 설정합니다 post, get은 HTTP를 활용한 방식입니다. get 방식 : URL에 요청값을 같이 보내는 방식이에요. 예를 들면 http://example.com/search?query=apple 이런 URL을 접해봤을텐데 apple이라는 검색어.. 2023. 6. 7. 이전 1 2 3 4 5 다음