북마크 좀 정리할 겸.. 기록용으로 적어둡니다~꾸준히 추가할 예정 다들 줍줍하세요^//^  HTML이미지맵(태그) 사이트 : https://www.image-map.net/엠밋(단축어?) 사이트 : https://docs.emmet.io/cheat-sheet/파비콘 사이트 : https://www.favicon-generator.org/html 오류 체크 사이트 : https://validator.w3.org/html 태그 정리 사이트 : https://www.w3schools.com/html/default.asp폰트 어썸 사이트 :  https://fontawesome.com/무료 svg(아이콘) 사이트 : https://heroicons.com/무료 svg(아이콘) 사이트 2 : https://ion..

안녕하세요! 오늘은 텍스트 관련 요소에 대해 살펴보겠습니다. 텍스트 관련 요소들은 말 그대로 글자에 태그를 주어 요소를 넣어주는 것입니다. 텍스트 관련 요소들 중 어떤 것이 있는지 한 번 표로 확인해보겠습니다! 💬텍스트 관련 요소 태그명 태그의 의미 및 특징 강조하고 싶은 텍스트를 정의하기 위한 태그이며 기울임체로 표시됩니다. 중요한 텍스트를 정의하기 위한 태그이며 굵은체로 표시됩니다. 주의 깊게 볼 텍스트 부분을 강조하기 위한 태그이며 노란색으로 표시됩니다. 의미를 가지고 있지 않으며 단순히 텍스트를 굵은체로 표시합니다. 주의 사항, 법적 제한, 저작권 등의 정의하기 위한 태그이며 작은 글씨로 표시됩니다. 아래첨자 텍스트를 정의하기 위한 태그입니다. 위첨자 텍스트를 정의하기 위한 태그입니다. 테이블로만..

오늘은 시멘틱 마크업, 논리적인 순서 마크업에 대해 알아보겠습니다. ✔️시멘틱 마크업 먼저 시멘틱 (semantic)의 사전적 뜻은 '의미론적인' 정도로 해석합니다. 시멘틱 마크업은 '의미론적인 HTML 태그 문서 작성'을 뜻합니다. 즉, 의미를 잘 전달할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다. 이미지 출처 그렇다면 시멘틱 마크업을 사용하는 이유는 무엇일까요? HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 정보를 동일하게 받아들일 수 있는 환경이 아닐 수도 있습니다. 예를 들어 시각장애인의 경우 HTML문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데 이런 경우 전달하려는 태그의 의미가 적절해야 합니다. 또, 시멘틱 마크업은 웹을 개발할 때 생..

오늘은 HTML의 가장 기본적인 블록 구조와, 인라인 구조에 대해 알아보겠습니다. 웹사이트에 필수적으로 구성되어야 하는 구조이므로 잘 알아봐야겠죠? 이미지 출처 블록 레벨 요소(Block-level Element) 블록 요소는 쉽게 하나의 박스라고 생각하면 됩니다. 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 레벨 요소는 텍스트와 인라인 요소를 자식 요소로 포함할 수 있습니다. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함할 수 있는 요소와 포함할 수 없는 요소가 있습니다. margine과 padding을 줄 수 있습니다. 블록 구조 예제 블록 구조 하나의 박스 형태 줄 바꿈이 생김 인라인 요소(Inline Element) 인라인 요소는 텍스트라고 생각하면 됩..