본문 바로가기

Dev/Frontend4

[HTML] 시맨틱 태그 시맨틱 태그란?HTML에서 의미를 담고 있는(의미를 명확히 전달하는) 태그로, 그 태그가 페이지 구조 내에서 어떤 역할을 하는지 명확히 전달한다.→ 코드를 더 명확하게 함: 페이지나 섹션의 머리말 (로고, 사이트 제목 등): 내비게이션 링크 모음: 독립적인 콘텐츠: 페이지나 섹션의 바닥글: 본문과 간접적으로 관련된 내용. (사이드바, 광고 등): 문서의 주요 콘텐츠 부분. : 관련된 내용의 구획 시맨틱 태그의 장점1. 가독성: 명확한 이름 덕분에 이해를 돕는다.2. SEO(검색 엔진) 향상: 검색 엔진이 페이지 내용을 더 정확하게 파악한다. 2024. 9. 24.
[HTML] 문서의 구조 https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started#html_%EB%AC%B8%EC%84%9C%EC%9D%98_%EA%B5%AC%EC%A1%B0 HTML 시작하기 - Web 개발 학습하기 | MDNHTML 기본 사항을 둘러 보셨기를 바랍니다.developer.mozilla.org→ 참고 사이트   : HTML5 문서임을 선언. 브라우저가 올바르게 페이지를 해석하기 위함: HTML 문서의 루트 요소로, 모든 HTML 내용이 이 태그 안에 포함됨 / lang 속성으로 문서의 언어를 지정 ex. : 문서의 메타데이터 포함. 와 달리 내용이 페이지에 표시되지 않음. meta 태그로 다양한 속성 .. 2024. 9. 23.
[HTML] Attributes를 알아보자 https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started#%EC%86%8D%EC%84%B1attributes HTML 시작하기 - Web 개발 학습하기 | MDNHTML 기본 사항을 둘러 보셨기를 바랍니다.developer.mozilla.org➡️ 참고 사이트  Attributes(속성)는 Elements(요소)에 추가 정보를 제공하여 그 동작이나 표현 방식을 조정하는 역할을 한다.   종류- style: 인라인으로 CSS 스타일 적용- class: 참조가능한 클래스 이름 정의- id: 고유 식별자 정의- title: 추가 정보 정의 (마우스 올릴 시)등...  요소에 속성 추가하기: 태그는 하이퍼링크를 위.. 2024. 9. 23.
[HTML] 시작하기 ⁺. ⊹˚₊ ₊·(੭ · ˕ · )੭‧* https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started HTML 시작하기 - Web 개발 학습하기 | MDNHTML 기본 사항을 둘러 보셨기를 바랍니다.developer.mozilla.org위 사이트의 내용을 정리한 포스팅임. 가끔 프로그래밍 언어에 HTML이 포함된 글을 보면, HTML은 프로그래밍 언어가 아니야!!!!!! 라고 쓰인 댓글을 99.3%의 확률로 발견할 수 있다. HTML은 언어이긴 하지만, 프로그래밍 언어는 아니기 때문이다. HTML은 "마크업 언어"로, 구조화를 위한 언어라고 생각하면 된다. Elements: 요소HTML은 elements로 구성된다.elements = 태그 + 내용내용.. 2024. 9. 18.