웹/HTML (6) 썸네일형 리스트형 HTML - 시맨틱 마크업 정의 와 관련 태그 정리 안녕하세요 이번 포스팅은 HTML 시맨틱 마크업에 대해 알아보겠습니다. 시맨틱 마크업이란? 의미있는 마크업을 뜻하거나 요소의 내용의 의미에 관련된 요소 하는 이유? 크롤러와 웹애플리케이션과의 작용을 좀 더 쉽게 만들기 위해 접근성이 좋도록 만들기위해 개발자들이 코드를 좀 더 보기 쉽게 만들기 위해 =>일반적인 태그랑 하는 동작이 같으나 마크업에 의미를 부여한다는 점이 다르다. 문서의 주요 내용을 담는다. 반복되는 내용은 전부 제외한다. 페이지에서 네이비게이션 링크를 제공하는 것 다른 사이트 이동이 아니라 같은 사이트이동 웹 사이트나 애플리케이션의 독립적인 부분을 나타낸다. 내용의 한 부분 → 독립적인 부분이어야 한다. 문서내의 독립적 구성 블로그기사, 뉴스에만 쓰지 않아도 된다. 한페이지에 여러 arti.. VS code Emmet 기능 알아보기 안녕하세요 이번 포스팅은 VS code에서 제공하는 Emmet기능에 대해 알아보겠습니다. Emmet이란? 특별한 기능이나 이런게 아니라 편의기능이라고 생각하시면 됩니다. HTML 작성을 돕는 도구입니다. HTML 마크업 작업을 일일이 작성하지 필요가 없도록 만들어 줍니다. 먼저 설치가 안되어있으면 깔아주세요 여기서도 깔리는 걸로 알고 있어요.. 확실하진 않음 사용방법은 vs코드에서 Emmet을 설치한다. EX) nav > ul > li*2 한 후 Tab 이런 식으로 자동으로 나옵니다. 여기는 티스토리라서 그런지.. 줄이 안 맞춰지네요.. 원래는 다 맞춰서 나옵니다. 여기에 더 추가하자면 ‘>’ 요소는 자식요소를 만들어주고 *을 통해 갯수를 정할 수 있다. ‘+’는 형제요소 ‘$’ 는 넘버링이 가능하다. .. HTML 엔티티 코드 알아보기 안녕하세요 이번 포스팅은 HTML 엔티티 코드에 대해 알아보겠습니다. 먼저 HTML엔티티 코드에 대해 알아보겠습니다. HTML 엔티티 코드 HTML대신 사용할 수 있는 특별한 코드 또는 시퀸스를 뜻 합니다. EX_ 저작권 기호, 다이아모양 , &시작해서 ;로 끝납니다. 흔하게 사용되는 건 예약문자라고 생각하시면 됩니다. 그러면 사용할려면 어떻게 해야하나? 필요하다고 생각되는 문자를 구글에 검색합니다. ex) 눈사람 HTML 엔티티코드 그후에 저기 Number를 복사해주세요 이렇게 넣어주면 됩니다. 웹사이트에 잘 들어가져있어요! 참고사이트 여기서 끝나면 섭섭하니깐 참고 할 만한 사이트 2개정도를 남겨두겠습니다. Entity Code - A Clear and Quick Reference to HT.. HTML 박스모델 및 레이아웃에 영향을 미치는 요소 알아보기 안녕하세요 이번 포스팅에서는 HTML 박스모델 및 레이아웃에 영향을 미치는 요소에 대해 알아보겠습니다. 위에 사진같이 마진, 테두리, 패딩, 콘텐츠로 여러개의 박스가 겹쳐있다. 박스 모델 4요소를 보면 1) margin 속성 bolder 속성 기준으로 바깥쪽 영역 -> 배치작업 중 좌표설정에 사용된다. EX) margin : 40 px 30 px 20 px 10 px top / right / bottom / left 순으로 2) Border 속성 공간 속 테두리 생성 Solid 실선 dotted 점선 뒤에 ~ px는 굵기를 의미 3) Padding 속성 Border기준으로 content 간의 간격 4) Content 안에 내용들을 의미 레이아웃에 영향을 미치는 요소들 1) display block 요소를.. HTML 공간을 정의하는 태그 및 Block 요소와 Inline요소 알아보기 안녕하세요 이번 포스팅에서는 HTML 공간을 정의하는 태그들을 알아보겠습니다. HTML과 레이아웃 웹사이트는 위에 사진들과 같이 상단, 중앙, 하단으로 구성되어있다. header 태그 태그는 웹 사이트의 머리를 담당하고 있다. 이안에 ~ -> 회사의 이름이나 슬로건 작성 + img 태그를 이용하여 회사로고를 배치한다. 헤더 태그안에는 태그를 사용할 수 있다. nav 태그는 메뉴의 버튼을 담는 공간이다 -> 이안에는 태그등을 사용한다. section 태그 웹 사이트 영역을 지정할 때 사용하는 태그이다. 책으로 치면 각 장(Chapter)라고 보면 된다. HTML 웹 표준을 지키기 위해서는 section태그 안에 한 개이상의 ~ 가 있어야 한다. article 태그 신문기사의 본문 영역처럼 웹사이트의 실제 .. HTML언어와 대표적인 태그들 알아보기 안녕하세요 이번 포스팅에서는 HTML언어와 대표적인 태그들에 대해 알아보겠습니다. HTML이란? HTML(Hyper Text Markup Language) 역할) 1. 웹에서 정보라는 요소를 입력 2. 메뉴, 배너, 본문 등 다양한 컨텐츠 공간 설정 => 현재는 HTML5 사용 HTML 태그 알아보기 HTML 태그 = 시맨틱 태그 구조 이전 1 다음
