본문 바로가기

HTML35

HTML의 핵심요소, 웹페이지의 내용을 담는 body 태그 BODY 태그란? HTML은 크게 환영합니다! 이곳은 내 웹 페이지의 내용을 담는 공간입니다. 링크 아래 그림처럼 박스를 쳐보면 더 쉽게 이해할 수 있어요 태그 안에는 아래와 같은 태그들을 통해서 컨텐츠를 만들수 있습니다. 아래 태그 외에도 많은 태그들이 존재합니다. 태그 설명 관련 포스트 ~ 콘텐츠의 제목을 작성할 때 사용 HTML 문서 제목을 만드는 H 태그, SEO 최적화 필수 태그 문단을 정의할 때 사용 HTML P 태그, 글을 구조화하고 가독성을 높이는 도구 링크를 걸때 사용 HTML의 핵심 요소, a 태그: 링크의 세계로의 초대 이미지 파일을 삽입할 때 사용 이미지 표현을 위한 HTML img 태그 웹페이지 구획을 나눌때 사용 웹 페이지 구성을 위한 HTML 태그 불렛 기호로 목록을 정리할 때.. 2023. 6. 4.
HTML Label 태그, input 태그와 함께 다니는 최적 조합 LABEL 태그란? HTML에서 Label 태그는 , 와 같이 사용자의 입력을 받는 태그와 함께 사용됩니다. 왜 label 태그가 함께 사용되는지 역할과 중요성에 대해 알아볼까요? 태그에 대해 더 알아보시려면 여기를 눌러주세요 사용법 사용자명: 태그는 태그 주변에 함께 있습니다 그리고 label 속성 for와 input 속성 id를 일치시켜야 해요 그래야 label에 입력된 text를 눌러도 input 요소로 커서(포커스)가 이동합니다 다른 예시를 볼께요. 이용 약관에 동의합니다 이번에는 label 태그가 input 뒤에 있습니다. 체크박스를 먼저 만들고 뒤에 텍스트가 이어지기 때문이에요 여기도 마찬가지로 input id "agree"와 label for "agree"가 동일하기 때문에 서로 연결되어 있.. 2023. 6. 3.
인터랙티브 웹페이지 구현을 위한 HTML Input 태그의 활용 INPUT 태그란? 태그는 말 그대로 어떤 정보를 넣는 기능을 가지고 있습니다. 사용자로부터 정보를 입력받을 수 있도록 도와줍니다. 웹페이지에서 로그인을 하거나 메뉴를 선택하거나 할 때 다양한 형태의 데이터를 입력받을 수 있도록 합니다. 사용법 태그는 여러 가지 속성을 함께 적어야 합니다. 태그는 self-closing tag라서 쌍으로 적지 않아도 됩니다. 먼저 type을 정해야 하는데요 text : 일반적인 텍스트를 입력받을 수 있습니다 number : 숫자만 받을 수 있습니다 checkbox : 여러개를 선택할 수 있는 네모난 박스를 만들 수 있습니다 radio : 하나만 선택할 수 있는 동그란 원을 만들 수 있습니다 password : 암호를 입력받을 수 있어요. 입력받은 값은 아스타리스크 (*).. 2023. 6. 2.
HTML <meta> 태그: 웹사이트 성능 향상과 검색 엔진 최적화를 위한 핵심 요소 META 태그란? 태그는 HTML 태그는 태그 사이에만 존재할 수 있는 태그입니다 메타데이터가 하나 이상이라면 태그를 여러번 사용할 수 있어요 태그의 속성 name, contect : 메타데이터의 이름과 내용을 적습니다. name의 종류는 "description", "keywords", "author", "robots" 등이 있습니다. 이 모든 메타데이터는 검색엔진이 내 웹페이지를 잘 검색할 수 있도록 도와줍니다. description : 웹페이지의 주제와 요약 내용을 적습니다 keywords : 웹페이지가 어떤 키워드를 담고 있는지 적습니다 author : 웹페이지를 만든 사람 이름을 적습니다 robots : 검색 엔진 크롤러에게 색인 여부와 방식을 알려줍니다. index, follow라고 적으면 크롤.. 2023. 6. 1.

티스토리툴바