DOCTYPE은 무엇을 하나요?DOCTYPE은 document type의 약어입니다. DOCTYPE은 항상 DTD (Document Type Definition)와 관련됩니다.DTD는 특정 문서가 어떻게 구성되어야 하는지 정의합니다(예시: button은 span을 포함할 수 있지만, div는 그럴 수 없다.), 반면, DOCTYPE은 문서가 대략 존중할만한 DTD를 선언합니다. (예시: 이 문서는 HTML DTD를 존중한다.)웹 페이지는 DOCTYPE 선언이 필요합니다. 유저 에이전트에게 문서가 존중하는 HTML 사양의 버전을 알리는데 사용됩니다. 유저 에이전트가 올바른 DOCTYPE을 인식하면, 문서를 읽는데에 DOCTYPE과 일치하는 no-quirks mode를 트리거합니다. 유저 에이전트가 올바른..
CSS 선택자의 특정성은 무엇이며 어떻게 작동하나요?브라우저는 CSS 규칙의 특정성에 따라 요소에 표시할 스타일을 결정합니다. 브라우저는 이미 특정 요소와 일치하는 규칙을 결정했다고 가정합니다. 일치하는 규칙들 가운데, 네 개의 쉼표로 구분된 값 a, b, c, d는 다음을 기반으로 각 규칙에 대해 계산됩니다.a는 인라인 스타일이 사용되고 있는지입니다. 속성의 선언이 요소의 인라인 스타일이면 a는 1이고, 그렇지 않으면 0입니다.b는 ID 셀렉터의 수입니다.c는 클래스, 속성, 가상 클래스 선택자의 수입니다.d는 태그, 가상 요소 선택자의 수입니다.결과적인 특정성은 점수가 아니라, 컬럼마다 비교할 수 있는 값들의 행렬입니다. 선택자를 비교하여 가장 높은 특정성을 갖는 항목을 결정할 때, 왼쪽에서 오른쪽..
1. https://codepen.io/ CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.codepen.ioHTML, CSS, JS를 바로 볼 수 있다. 또한 다른 유저들이 사용한 포맷을 활용 할 수 있고, 내가 작성한 폼에 URL을 공유해서 다른 사람과 소스코드를 공유할 수 있다는 장점이 있다. 2. https://devdocs.io/ DevDocsFast, offline, and free documentation browser for deve..
SEO 진단 사이트를 통해 우리 웹사이트를 검사하고 개선하는 방법에 대해 알아보겠습니다. SEO 체크리스트를 통해 웹사이트의 상태를 파악할 수 있지만, 위 글은 웹사이트를 처음 만들 때 체크해볼 사항들을 보여주는 곳입니다. 우리 마케터는 주어진 웹사이트도 개선시킬 수 있어야겠죠. 이미 만들어져 있는 웹사이트를 개선하기 위해서는 우리가 보지 못하는 부분까지 살펴봐줄 수 있어야 합니다. 그것이 바로 SEO를 진단해주는 사이트들입니다.1. 진단 사이트의 종류구글에서는 우리 웹사이트의 속도와 모바일 친화도를 테스트할 수 있게 만들어주었습니다. SEO 자체를 보여주진 않지만 속도와 모바일 친화도는 SEO에 아주 중요한 부분을 차지하므로 구글 테스트 사이트에서 자신의 웹사이트르를 진단해보시기 바랍니다. 또 하나는 ..
1. 아이콘 무료다운 사이트https://icons8.kr/icons 무료 벡터 아이콘 — 1,357,100개의 아이콘 다운로드 (SVG, PNG)일러스트레이터 플러그인 어도비 일러스트레이터에서 바로 사용할 수 있는 백만 개 이상의 벡터 아이콘icons8.kr 2. SVG 그래픽 지식https://a11y.gitbook.io/graphics-aria/svg-graphics SVG 그래픽 | Graphics ARIA GuidebookSVG는 많은 웹 접근성 이점을 제공하는 강력한 웹 기술입니다. 접근성을 염두에 두고 구조화 된 방식으로 만들 수 있기 때문에 SVG를 사용하여 콘텐츠용 이미지, 그래프를 만듭니다. 또한 SVG는 모a11y.gitbook.io소개SVG는 많은 웹 접근성 이점을 제공하는 강력한 ..
오픈소스를 쉽게 받을 수 있는 사이트 목록 Bootstrap (https://getbootstrap.com/)Bootstrap은 세계적으로 반응형 웹 사이트 구축할때 사용되는 가장 인기 있는 프레임워크입니다. 필수 공식 테마에서 웹 사이트 템플릿을 받아서 자유롭게 커스터마이징 하신다면 빠르게 웹 사이트를 제작하실 수 있습니다. 웹 페이지를 구성함에 있어 필요한 아이콘, 목록, 메뉴, 이미지 등등 다양한 요소들이 CSS와 Javascript로 제작되어 있어 폭발적인 인기를 얻고 있습니다. GitHub (https://github.com/)깃허브를 빼놓고 오픈소스를 말할수는 없을 것 같습니다. 깃허브에 있는 검색창에다가 내가 원하는 기술을 검색만 하면 개발자들이 공개해놓은 오픈소스들을 어마어마하게 많이 ..
내용 css 를 활용한 퀵메뉴 입니다.