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

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

[css] Flexbox

Flexbox란? CSS3의 새로운 레이아웃 방식이다. W3C에서이 정식 명칭은 CSS Flexible Box Layout Module이라고 정의 하고 있으며 이름처럼 레이아웃을 유연하게 구현하는 모듈이라고 보면 된다. 예전에 레이아웃을 구현하기 위해서는 정식 사용법이 아닌 편법처럼 복잡하게 구현을 했어야 했던것에 반해 Flexbox는 쉽게 레이아웃을 구현할 수 있다. Flexbox의 구성요소 Flexbox는 부모 요소인 container와 자식 요소인 item으로 구성된다. Flex의 선언은 container의 CSS에 display:flex;로 선언한다. .container{display:flex;} ※ flexbox 정렬 개념 - 주축이 되는 main-axis와 교차축이 되는 cross-axis의 ..

2021.03.10