-
HTML - 웹페이지 기본 태그 (html, head, body)front-end/HTML 2021. 10. 21. 19:37
HTML은 Hyper Text Markup languege로 배웠다. HTML은 마크업 즉 구조를 생성하는 언어이다. 웹페이지 구조를 만들기 위해서 HTML은 여러 가지 Tag들을 제공한다. 그중 아주 기본이 되는 태그 10가지에 대해 알아보자 1. html html tag는 메인 루트 태그로 HTML 문서의 최상단 요소를 나타낸다. 모든 다른 요소는 요소의 하위 요소이다. 전역 속성을 가지고 있으며, 주로 lang 특성을 선언한다. (스크린 리더가 읽을 때 효율적이라나, 뭐라나... ) 👍 은 HTML 태그는 아니다. 다만 HTML버전이 무엇인지 웹 브라우저에 알려주는 역할을 한다. 그도 그럴 것이 수학 문제를 국어 답안지로 체점할 수는 없는 거랑 같은 이치다. 2. head head tag는 메타 데..
-
HTML5 - Form 셀렉트 박스(Select box) 만들기front-end/HTML 2021. 10. 14. 19:42
이번 포스팅에서는 HTML에서 많이 사용되는 셀렉트 박스를 구현해보는 시간을 가져보겠다. Select box(셀렉트 박스)? 셀렉트 박스는 콤보 박스라고도 하며, Pull-Down Menus라고도 한다. 주로 회원가입시에 많이 볼 수 있다. Select box 구현 하기 네이버 회원 가입시 성별 셀렉트 박스를 만들어보자. 성별 성별 남자 여자 선택 안함 https://codesandbox.io/s/festive-tesla-f6jq3?file=/index.html 에서 확인 가능하다 festive-tesla-f6jq3 - CodeSandbox festive-tesla-f6jq3 codesandbox.io 정리 및 느낀 점 Select box를 구현하기 위해서는 Select 안에 option tag들을 ..
-
HTML5 시맨틱(Semantic) 요소front-end/HTML 2021. 10. 6. 13:17
Semantic 프로그래밍에서, 시멘틱(Semantic)은 코드 조각의 의미를 나타낸다. 이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가? 이 JS 라인을 실행하는 것은 어떤 효과가 있는가? HTML Semantic HTML에는 Semantic 요소와 Non-Semantic 요소로 구분된다. Semantic 요소는 목적이나 역할이 존재한다. ( 내용에 대해 알려준다 ) Non-Semantic 요소는 특별한 목적이나 역할이 존재하지 않는다. ( 내용에 대해 아무것도 알려주지 않는다) Semantic 요소에는 100여개 종류가 있다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element HTML elements reference - HTML: Hyper..
-
HTML 이란?front-end/HTML 2021. 10. 4. 10:07
HTML Hyper Text Markup language(HTML)은 웹페이지의 구조와 내용을 담당하는 마크업 언어이다. HTML 기본 문법 Hello World HTML은 첫 줄에 문서 형식을 지정해줘야 한다. 브라우저가 받은 파일을 읽을 때 어떤 형식인지 알아야 제대로 읽을 수 있기 때문이다. 중국인한테 프랑스어 읽으라고 주는 거랑 같은 맥락이다. html 요소는 최상위 레벨에 위치하고 있다. doctype은 예외이다. head 요소 안에는 title, meta데이터, 외부파일참조가 있으며, 브라우저에 노출되지 않는다. body 요소는 실질적으로 웹브라우저에 노출된다. html 모든 요소들은 대소문자를 구분하지 않지만, 통상 소문자를 사용한다. 가독성을 위해 소문자를 사용하자 :) HTML 요소 He..