HTML5 시맨틱 태그 (Semantic Tag)

Semantic Tag? HTML5의 큰 특징 중 하나는 시맨틱 태그(Semantic Tag)다. 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다. 기존에 사용하던 div 태그는 non-semantic Tag라 할 수 있다. table, article 등의 태그는 semantic Tag라 할 수 있다. 일반적으로 태그만 보고는 검색엔진이 이 태그 안에 들어간 내용의 의미를 알 수 없다. HTML5에서 사용되는 시맨틱 태그는 를 사용하여 검색엔진이 이 태그를 분석하여 내용의 의미를 유추할 수 있는 장점이 있다. non-semantic Tag 주로 div로 레이아웃을 표현하며, class와 id로 스타일을 준다. semantic Tag 의미있는 태그를 사용하여 검색엔진이 태그를 분석하여 유..

2021.10.07

Reset.css / Normalize.css

브라우저마다 제공하는 user agent style이라는게 있다. 브라우저의 스타일링 기본값이라 생각하면 된다. 기본적으로 스타일이 적용된다는 게 사용자에게는 유용할 수 있지만 개발자 입장에서는 매번 번거롭게 새로 선언해줘야 하기 때문에 오히려 피곤하다. 그리고 크롬, 파이어폭스 등 브라우저들이 모두 일관된 스타일을 제공하지 않는 경우도 있어 크로스브라우징에 어려움이 있다. 이런 어려움을 극복하기 위한 전략으로 크게 reset css와 normalize css가 있다. Reset CSS란? reset css는 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 초기화 것이다. 구글링 해보면 리셋 방법도 굉장히 다양하게 나와 있는 걸 알 수 있는데, 그 중 Eric Meyer라는 개발자가 만들어 놓은 res..

2021.10.07

HTML Entity

엔티티 (Entity)란? HTML에는 미리 예약 된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(Entity)라고 합니다. Entity Code HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같습니다. 기호 HTMl코드 CSS코드 설명 공백 space > 우측 화살표 & & ⓒ © \00A9 저작권 서명 @ @ \0040 *참고사이트 https://unicode-table.com/kr/html-entities/ HTM..

2021.10.06

색 CMYK/RGB

색상(hue)이란 빨강, 노랑, 파랑 등의 색깔을 말한다. 서로의 색을 다른 색과 구별하여 나타낸 것으로, 우리가 색을 볼 때 가장 먼저 눈에 들어오는 게 바로 이 색상이다. 이 색상을 둥글게 배열한 것을 '색상환(hue circle)'이라고 하는데 이 색상환의 원리와 구조를 알면 능숙하게 색을 사용할 수 있다. 우리가 잘 아는 삼원색인 빨강, 파랑, 노랑 정확히는 마젠타(magenta)-자주색, 사이안(cyan)-청록색, 옐로우(yellow)중 두 색을 섞어서 만들어지는 색을 '순색'이라고 한다. 빨강과 파랑을 섞으면 보라가 되고, 파랑과 노랑을 섞으면 초록이 되는 식이다. 이런 순색을 삼원색 사이사이에 넣어주면 색의 연결이 좀 더 부드러워지고, 더 다양한 색들을 만들 수 있는데, 이렇게 만들어진 색의..

2021.10.05

HTML 기본 문법

HTML 기본 문법의 특징 1. 폴더와 파일명 : 영문(대/소) + 숫자 + _ + - (시작 문자는 꼭 영문이어야 함 ex. sample_1.html) 2. html/css/javascript 영문 대소문자를 구분한다. 3. html : 무조건 영문 소문자로 마크업한다. 4. 대다수의 태그들은 열고 닫는 세트로 되어있다. (태그의 계층, DOM, 부모/자식의 관계) 5. 태그들은 계층 (부모/자식)을 표현할 수 있다. (Tab) 6. 모든 웹문서(파일명.html)는 하나의 을 최상위부모로 가진다. 주언어 정의 7. : 화면에 보여지는 부분 이외의 것을 명시(코드명시/CSS 또는 js파일을 연결) 8. : 웹페이지의 본문을 처리하는 태그(화면 UI 구현) 9. 사이트제목 10. : 본문의 코드를 처리하기..

2021.10.05

웹표준과 웹접근성

웹표준(Web Standards)이란? 웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하는데, 이는 우리가 흔히 생각하는 표준(standard)과는 조금 다릅니다. 웹에서의 표준은 W3C의 토론을 통해 나온 권고안(recomendation)을 말하며, 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 합니다. - 웹에서 표준적으로 사용되는 기술이나 규칙 - 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨있다. - 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야 함을 의미 - 표준 스펙을 잘 지키는 것 뿐만 아니라 구조적 마..

2021.09.29