qqqwe

이미지 출처 기존 HTML에서는 콘텐츠의 구조를 구분할 수 있는 시맨틱한 요소가 제공되지 않았지만, HTML5에서는 구조를 설계할 수 있는 다양한 구조 관련 요소가 새롭게 추가되었습니다. 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 있습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없습니다. 1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소 (~)를 포함하는 것이 좋습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. 1. HTML 문서의 푸터 영역을 의미하는 태그로 섹션..

See the Pen Tail Animation by Kimdohyun2002 (@Kimdohyun2002) on CodePen. 코드팬이라는 사이트에서 CSS로 애니메이션을 한번 만들어 보았습니다 !

See the Pen 연산자 by Kimdohyun2002 (@Kimdohyun2002) on CodePen.

이미지 출처 시멘틱 마크업 시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있습니다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 됩니다. 실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요합니다. 사용 방법 헤더/푸터에 와 사용한다. 메인 컨텐츠에 과 사용한다. 독립적인 컨텐츠에 사용한다. 최상위 제목으로 사용한다. 순서가 없는 목록으로 과 사용한다. 내비게이션에 사용한다. 이런 식으로 태그가 가지고 있는 의미에 맞게 사용 한다. 필요성 SEO(검색엔진 최적화) 적절한 태그의 사용으로 키워드에 맞는 웹사이트를 구성하여, 검색 결과 상위에 나올 수 있도록 한다. 웹 접근성 (Web ..

블록 레벨 요소(Block-level Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. 주요 블록 요소 ~ 특징 모든 인라인 요소를 포함할 수 있고 또다른 블록 요소도 일부 포함이 가능하다. 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다. width, height, margin, padding등을 사용하여 형태를 변형시켜 레이아웃을 수정할 수 있다. 블록 요소 다음으로는 줄바꿈이 이루어진다. 인라인 요소(Inline-Elements) 인라인 요소는 마크업을 할 때 가로로 정렬됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다. 주요 인라인 요소 특징 인라인 요소는 항상 블록 요소안에 포함되어 있다. 인라인 ..