nika-blog

요즘은 프레임워크를 많이 사용해서 HTML을 일일이 작성하는 경우는 많이 없지만, 그래도 작성할 일을 대비해 작성해보겠습니다.  바로 요즘에 거의 모든 IDE(IJ)와 Text Editor(vscode) 등에 탑재되어 있는 Emmet 입니다. 바로 아래와 같이 작성하는 것이데, 기억할 것은 다음과 같습니다.  부모 > 자녀형제 +. class# id{text}Tab키 누르기* 곱하기전 div.container>h1.title+p.description+ul#users>li{user}*5 후(Tab키 누르기) user user user user user  추가로 숫자로 클래스 명이나 내용을 작성할 때 자동으로 지정할 ..

안녕하세요.오늘은 HTML 태그가 어떻게 분류될 수 있는지에 대한 포스팅이에요. box vs itemhtml 태그는 크게 box 와 item으로 나눌 수 있을 것 같은데요,예시는 다음과 같습니다. box대표 예시 : div, span, header, nav, form, section, article, aside, main, footer...item대표 예시 : a, button, input, label, img, video, audio, map, canvas, table...줄바꿈 특성또 가장 큰 줄바꿈 특성에 따라 blockinline속성으로도 나눌 수 있습니다. CSS 의 display 속성으로 변경할 수 있다는 것도 기억해 주세요. inline인 경우, margin과 padding 이 적용되지 않고..

안녕하세요.오늘은 HTML 시멘틱 태그(Semantic Tag)에 대해서 글을 써보겠습니다.  시멘틱 태그는 웹(Web)을 의미 있게 만드는 역할을 합니다. 아래와 같은 이유로 적절한 시멘틱 태그를 사용하는 것은 매우 중요합니다. 웹 접근성SEO(Search Engine Optimization) : 검색엔진 최적화 검색 결과 상위에 문서를 노출하기 위해서 SEO 최적화는 필수입니다. 유지 보수시멘틱 태그를 적절히 사용하면, 코드의 가독성이 올라가 유지 보수에도 도움이 됩니다. 페이지의 모든 태그를 로 사용하는 것보다 의미를 가진 시멘틱 태그를 사용하는 것이 좋습니다.  주요 시멘틱 태그Tag용도문서의 제목 및 로고 등페이지 이동 및 주요 메뉴페이지의 주요 내용, 페이지 내 한번만 사용의 개별적 독자적 내..