본문 바로가기

HTML37

왜 HTML 첫 문장은 <!DOCTYPE html>일까? 란 무엇인가? 크롬 웹브라우저에서 F12를 누르면 개발자도구를 열 수 있는데요. 항상 첫 문장은 입니다. 다른 사이트들도 마찬가지에요. 은 HTML 문서의 첫 줄에 위치한 선언문입니다. 브라우저에게 이 문서가 어떤 문서인지 알려주는거에요. DOCTYPE 선언은 "Document Type Definition"의 약자로 문서 타입을 정의한다는 뜻입니다. 예전에는 선언문이 더 복잡했다고 해요. HTML 4.01 Transitional 선언문 지금은 최신 웹 표준인 HTML5가 등장하면서 이라는 단순한 선언으로 통일되었습니다. 정리해보면! 은 HTML 문서의 첫 번째 문장으로 사용되는 표준 선언문이며, 브라우저가 문서를 올바르게 해석할 수 있도록 도와줍니다. 2023. 7. 5.
동영상 삽입을 위한 HTML video 태그 Video 태그란? 태그가 이미지를 삽입하는 용도라면 태그는 동영상 콘텐츠를 추가하는 용도입니다. video는 전체 이름을 쓰는데 왜 이미지 태그는 라고 하지 않고 라고 하는지 잘 모르겠네요. 사용법 Your browser does not support the video tag. video 태그를 열고 src, width, height 등의 속성을 입력합니다 src : 비디오 파일이 있는 URL을 입력합니다 width : 재생할 비디오 영상의 너비를 정합니다 height : 재생할 비디오 영상의 높이를 정합니다 width, height를 입력하지 않으면 동영상 원본 크기로 재생됩니다 controls 이 속성을 추가하면 유저가 비디오를 재상, 일시정지, 음량 조절 할 수 있는 버튼이 보입니다. contro.. 2023. 7. 3.
HTML <strong> 텍스트를 굵게 만들고 강조하는 태그 STRONG이란? 태그는 텍스트를 강조하는 태그입니다. 우리가 흔히 알고 있는 굵게, bold체로 만들어 버리죠. 사용법 할인 50%! 한정판매 굵게 강조하고자 하는 텍스트를 태그로 감쌉니다 간단하죠? See the Pen Untitled by 40's Programmer (@40sProgrammer) on CodePen. 태그와 태그의 차이점 그런데 텍스트를 굵게 만드는 라는 태그가 존재합니다. 어떤 차이가 있는지 살펴볼께요. 태그는 굵게 만드는 시각적 효과 뿐만 아니라 '이 텍스트는 중요하다'라는 의미도 내포하고 있습니다. 따라서 검색엔진 등이 볼 때는 'strong 태그에는 중요한 텍스트가 있구나' 라고 생각하죠. 반면에 태그는 특별한 의미없이 텍스트를 굵게 만듭니다. 단순하게 보여주는 태그에요. .. 2023. 7. 1.
HTML <div> 태그, 웹 페이지를 구조화하고 스타일을 입히다 DIV태그란? html에서 태그는 정말 많이 쓰이는 중요한 요소입니다. 웹페이지를 구조화하고 레이아웃을 정돈하기도 하고 CSS를 통해 스타일을 입힐 수도 있기 때문입니다. 사용법 인사 안녕하세요! 위의 예시에서 과 만 써도 컨텐츠를 출력하는데는 아무런 문제가 없습니다. 하지만 를 통해서 2개의 구역으로 나누었지요. 이 부분이 바로 웹페이지 구조화입니다. 그럼 스타일을 입히는 예시를 살펴볼께요 예시 코드 See the Pen div by 40's Programmer (@40sProgrammer) on CodePen. 위의 예시는 를 통해 header와 content를 클래스로 나누었어요. header는 메뉴 네비게이션 영역, content는 실제 내용 영역으로 구분된게 보이죠? 각 div에는 다른 이름의 .. 2023. 6. 30.

티스토리툴바