겨리의 개발일기

시멘틱 마크업 시멘틱마크업이란? ✅ 시멘틱마크업은 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다. ✅ 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작된다. 시멘틱마크업 하기 🤔 어떻게 하면 브라우저가 코드를 잘 이해할 수 있을까 ? 🧐 마크업 할 때 의미에 맞는 태그와 요소를 사용하고, 문서를 표현할 떄 구조화를 잘 해주는 등 정해진 약속을 잘 지키면된다. HTML5 시멘틱 요소 HTML5에서 새로 생긴 Semantic 요소들 : 사이트 내 독립적 구분 게시판, 블로그 본문, 매거진, 뉴스 기사 등 : 문서 주요 내용과 간접적으로 연관된 부분 표현. 사이드바, 콜아웃 박스 등 : Figure 콘텐츠에..

HTML&CSS 2023. 4. 10. 00:07

Content Models HTML5 이전에는 HTML 태그들을 inline과 block 두 가지 요소로만 구분 지었지만, HTML5부터는 태그에 특성에 따라 7개의 카테고리로 분류한다. 1. Metadata Content ✅ 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함된다. ✅ 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 내에 들어간다는 것이 특징이다. base, link,meta, noscript, script, style, title 2. Flow Content ✅ 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함된다. ✅ Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함된다. ..

HTML&CSS 2023. 4. 10. 00:04

1. HTML 이해하기 - 기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다. 2. HTML 태그 1) 태그 ✅ anchor 태그 == a태그 == 앵커 == 링크 e.g. 네이버 href 속성 ✅ hypertext reference 속성 ✅ href 속성의 값은 링크의 목적지가 되는 URL target 속성 ✅ 링크된 리소스를 어디에 표시할지를 나타내는 속성 ✅ 속성값 - _self : 현재 화면에 표시한다는 의미. target 속성이 선언되지 않으면 기본적으로 self와 같이 동작한다. - _blank : 새로운 창에 표시한다는 의미. 외부 페이지가 나타나게끔 하는 속성 - _parent와 _top : 프레임이라는 특정 조건에서만 동작하는 속성. 최근에는 프레임을 잘 쓰지 않는다. 내부링크 ✅..

HTML&CSS 2023. 4. 9. 23:54