hyejeong 코딩

Section 태그 일반적으로 부문, 구역, 영역을 나타내는 기능을 합니다. 문단이라던지 1장,2장,1절,2절 등과 같이 이루어지는 글 등을 하나의 그룹 혹은 묶음으로 다루어주는 역할을 합니다. 요소는 보통 제목 요소 (h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다. section 관련 태그 설명 header 주로 페이지의 제목영역에 사용합니다. 사이트 메인의 이름, 로고가 될 수 있고 article 내의 제목이 될 수도 있습니다. nav 내비게이션 역할을 하는 태그입니다. 페이지의 메뉴, 목차를 만들 때 사용하고, 사이트 내에서 다른 페이지로 링크되어 있는 경우입니다. 일반적으로 내부에 과 를 많이 사용합니다. section 논리적으로 관계있는 문서 혹은 요소를 분리할 때 사용합니다. art..

시멘틱 마크업이란? 시멘틱의 사전적 뜻은 '의미론적인' 정도로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다. 실제 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것이 중요합니다. 즉, 개발자와 브라우저에게 의미있는 태그를 제공한다고 이해하면 됩니다. 간단한 예로 는 non-senamtic 태그라 볼 수 있고 ,,등은 semantic태그라고 볼 수 있습니다. 이면 표가 들어 갈 것이고, 는 네비게이션을 의미할 것이라 유추 할 수 있습니다 이렇게 의미를 가진 태그는 검색엔진이나 그 이외에 기계적인 동작들이 웹페이지를 쉽게 이해 할 수 있게 됩니다. 접근성이 좋아집니다. 검색 엔진 최적화 ..

01. 블록 레벨 요소(Block-level Element) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성이 있어 가로로 정렬되지 않습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. 블록 레벨 요소는 줄 바꿈이 일어납니다. 블록 레벨 요소는 영역을 표시하기 때문에 패딩과 마진 값을 줄 수 있습니다. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 블록 레벨 요소 중에는 블록 레벨 요소를 지식 요소를 자식 요소로 포함할 수 있는 요소와 포함할 수 없는 요소가 있습니다. div header section aside footer 02. 인라인 요소(Inline Element) 인라인 요소는 마크업을 할 때 줄 바꿈이 일어나지 않으며 가로로 정렬이 됩니다. 인라인 요..