본문 바로가기

HTML10

[HTML] 빈태그(Empty Element)란? 컨테이너 엘리먼트(Container Element) header, body, table, div, span 태그 처럼 시작태그와 종료태그가 있는 엘리먼트를 말한다 엠티 엘리먼트(Empty Element) 한국어로 빈 태그라고 불리며 img, br, input, link 처럼 종료 태그가 없는 엘리먼트를 말한다 HTML1, 2, 3, 4까지는 빈태그를 사용했지만 XHTML에서는 빈 태그에 self-closing 문법을 사용하면서 종료태그를 알려주는 심볼 슬래시(/)를 추가해주었다. HTML5에서는 닫힘기호 없이 사용하는 빈태그와 self-closing 문법을 사용한 빈 태그 모두 사용할 수 있다. 하지만 안전성을 위해 self-closing 문법을 사용한 빈태그 사용을 권장한다. 2022. 4. 22.
[HTML] HTML 요소의 구조 (HTML Syntax) HTML 요소(Element)의 구조 내용 요소(Element): 시작태그 + 요소의 내용 + 종료태그 엘리멘트의 기능 확장을 위해 속성(attribute), 값(value)을 주었다 2022. 4. 22.
[HTML/한줄정리] 라디오 버튼에 name 속성이 필요한 이유 Apple banana cherry 라디오 버튼 UI를 만들기 위해서는 input의 type을 radio로 지정해야한다. 여기서 주의해야할 것은 모든 input의 name이 동일해야한 다는 것이다. input의 name이 동일하지 않다면 같은 그룹에 있는 input 태그로 분류되지 않아 모든 라디오버튼이 선택 가능해진다. 라디오 버튼의 특성상 여러 옵션중에 하나만 선택이 가능해야하므로 name 속성을 입력해 하나만 선택될 수 있도록 한다. 2022. 4. 22.
[HTML] HTML 전역속성 5가지 정리 전역속성이란? img 태그의 src 속성은 이미지의 경로값을 가진다. 이처럼 태그마다 가질 수 있는 속성이 모두 다르고 미리 정해져 있지만 몇몇 속성은 전역적으로 사용할 수 있다. 즉, 전역속성이란 HTML body 태그 안에 있는 모든 요소가 가질 수 있는 속성을 말한다. content 1. title 요소의 정보나 설명을 지정해 해당 엘리먼트를 hover 했을때 tool tip UI가 해당 설명을 표시해준다. 2. style 요소에 적용할 스타일(CSS)을 지정해준다. 3. class 요소를 지칭하는 중복 가능한 이름을 지정해준다. 4. id 요소를 지칭하는 고유한 이름을 지정해준다. 5. data-이름 요소에 데이터를 지정해줘 자바스크립트로 해당 요소를 찾아 활용할 수 있다. 2022. 4. 22.
[HTML] <!DOCTYPE html> 태그의 의미 (HTML 버전) DOCTYPE(Document Type Definition)이란? DOCTYPE은 문서의 HTML 버전을 웹 브라우저에게 알려주기 위해 문서 상단에 위치시키는 선언부다. HTML5 문서임을 웹브라우저에게 알려주는 DOCTYPE 선언부는 로 표현한다. HTML5 선언시 DOCTYPE XHTML 1.1 선언시 DOCTYPE HTML문서에서 사용하는 DOCTYPE The content of the document...... 정리 DOCTYPE은 문서의 HTML 버전을 웹브라우저에게 알려주는 선언부이며 현재는 HTML5가 웹 표준이므로 를 문서 상단에 선언한다. 2022. 4. 22.
[HTML] HTML의 기본구조 (HTML, HEAD, BODY 태그의 역할) HTML의 기본구조 1. DOCTYPE 문서의 HTML 버전을 웹 브라우저에게 알려주는 선언부 2. HTML HTML 문서의 전체범위를 알려주는 태그로 HTML 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할 3. HEAD HTML 문서의 정보를 나타내는 범위로 웹페이지의 제목, 설명, 사용할 파일의 위치, 스타일 등 웹 페이지의 보이지 않는 정보를 작성하는 곳 4. BODY HTML 문서의 구조를 나타내는 범위로 사용자 화면을 통해 보여지는 UI가 이곳에 들어간다 2022. 4. 22.
[HTML] HTML 문서에 favicon 삽입 방법 favicon은 favorite icon의 줄임말로 웹 브라우저 탭에 위치한 아이콘을 말한다. 이 아이콘을 HTML 문서에 삽입하기 위해서는 아래와 같이 태그를 이용해 삽입한다. 이미지 파일이름은 favicon을 권장하며 파일 타입은 png 또는 ico가 주로 사용된다. ico를 사용하면 웹브라우저가 파비콘을 자동으로 인식해 파비콘으로 지정하기가 편리하다. 2022. 4. 22.
[HTML] 상대경로 vs 절대경로 용어정리 경로: 문서나 파일의 위치 루트 디렉토리: 최상위 디렉토리를 의미한다. 상대경로(Relative Path) 상대경로란 현재 디렉토리를 기준으로 상대적인 파일의 위치를 가리키는 경로를 말한다. 상대경로는 최상위 디렉토리를 포함하지 않으며 현재 디렉토리를 의미하는 점 하나(.) 또는 부모 디렉토리를 의미하는 점 두개(..)의 심볼을 이용한다. . 현재 디렉토리 .. 부모 디렉토리 ./folder 현재 디렉토리에 있는 folder 디렉토리 folder 현재 디렉토리에 있는 folder 디렉토리 (./는 생략할 수 있다) ../folder 부모 디렉토리에 있는 folder 디렉토리 절대경로(Absolute Path) 절대경로란 최상위 디렉토리부터 포함해 파일의 위치를 가리키는 경로를 말한다. 최상위 디.. 2022. 4. 22.
[HTML] 자주 사용하는 Emmet 단축키 10가지 정리 ⚠️ 이 포스팅은 드림코딩의 웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 1. HTML 양식 작성 ! + Tab or Return 2. div 태그 작성 div + Tab or Return .className + Tab or Return #idName + Tab or Return 3. 부모 자식 관계 (>) div>ul>li 4. 동등관계 (+) div>ul+ol 5. 아이템 반복 (*) ul>li*3 6. 상위로 올리기 (^) div>ul>li^ol 7. 그룹화 ( ) div>(header>ul>li*2>a)+footer>p 8. 태그안에 텍스트 넣기 { } p{hello} hello 9. 자동번호넣기 ($) p.class${item .. 2022. 4. 21.
[HTML/문제해결] 라디오버튼이 여러개 선택될때 해결 방법 (라디오버튼 다중선택 방지방법) ❓ 문제내용 일반적으로 라디오버튼은 여러 버튼 중에 하나만 선택이 가능하고, 체크박스버튼은 여러 버튼 선택이 가능하다. 라디오버튼을 만들었는데 다중선택이 된다면. ❗️ 해결방법 input 태그에 있는 name의 속성을 다른 input 태그와 같은것으로 사용했는지 확인해보자. 같은 라디오버튼에 속한다면 모든 input에 name의 속성값은 같아야한다. 아래 코드는 name="funding"이라는 값이 모든 input에 있다. 신생 5년 이상 10년 이상 2022. 3. 23.

티스토리툴바