시맨틱 태그

시맨틱이란?

코드의 의미? 를 나타내는것이다. 이HTML엘레먼트가 어떤 역할을 할지 무슨 목적을 가졌는지이다.

처음부터 웹 접근성에대해 생각하고 시맨틱 태그등을 사용한다면 비용이 덜든다. 나중에 개발이 전부 완료된 후 웹 접근성을 고려한다면 .. 비용이 만만치 않을것이다.

장점

• 시맨틱 태그를 사용하면 웹 접근성이 좋아진다.
• 가독성이 좋아진다.

웹 접근성

접근성이란?

가능한 한 많은 사용자들이 웹 페이지를 이용할 수 있게 하는 방법이다. 모든 사람들에게 평등하게 기회가 주어져야한다. 어느 나라에선 법으로도 지정되있을만큼 공정성이 중요한 것 같다. 시각장애인의 경우 웹 사이트 이용제한이 있어선 안된다. 이를 위해 시맨틱 태그를 사용하고 이미지 같은 태그에는 alt속성을 꼭 입력해주는 것이 좋다.

실생활에서 예를들면 건물의 엘레베이터와 같다. 시작장애인, 청각장애인 뿐만 아니라 모든 사람들이 이용할 수있어야한다. 그래서 휠체어를 탄 사람은 엘레베이터를 타서 건물을 이용할 수 있다. 시각장애인은 엘레베이터의 첨자로 건물을 이용할 수 있다. 이러하듯 웹 페이지에서도 차별을 하지 않고 모든 사람에게 이용할 수 있게 제공하여야한다.

모바일, 태블릿 또한 접근성에대해 생각하고 처음부터 고려하면 좋다. 그래서 작은 크기부터 큰 크기로 레이아웃 잡고 개발하는 건가?

웹 접근성이 좋으려면 시맨틱 태그를 사용하면 좋다.

접 근성이 좋으면 SEO 검색엔진에도 최적화되어 이점을 가져다준다.

접근성이 향상된 시맨틱 HTML은 SEO도 개선해 사이트를 찾기 쉽고 시장성 있게 해준다.

SEO

웹 사이트가 검색 결과에 더 잘 노출되도록 최적화 하는 과정이다. 검색 랭크 개선 이라고도 한다.

검색 엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과에 보이는 것은 바로 그 콘텐츠 색인입니다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출되어(전자상거래와 광고) 수익으로 연결될 수도 있다고 한다.

클로링

웹 크롤러(web crawler)는 웹 페이지에서 데이터를 수집하기 위해 Web을 체계적으로 탐색하는 프로그램으로 종종 봇 또는 로봇이라고 한다.

CSS

MDN 문서 위주 학습 왜 사용하는지? 어떨때 사용하는지? 를 중점으로 보자

flexbox

행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃이다.

float이나 position과는 다르게 신세계이다.

한 라인을 정렬할때 굉장히 유용하고, 요즘은 대부분 flexbox로 디자인한다.

main-axis, cross-axis가 있는데

flexbox 방향의 기본값은 row이고 왼쪽에서 오른쪽, 위에서 아래이다.

여기서 main-axis 는 왼쪽에서 오른쪽이고, cross-axis는 위에서 아래이다.

main-axis의 정렬 속성은 justify-content가 되고 cross-axis는 align-items 으로 정렬할 수 있다.
앗! 참고로 상황에 따라 하나의 축이 아닌 두개의 축이 생길 수 있는데 이때는 align-content를 사용하면 된다!