HTML (6) 썸네일형 리스트형 table 태그를 의미론적으로 제대로 쓰는 방법 표 형태로 데이터를 보여줄 때에는 을 써야 한다. 은 테이블의 한 열을 의미하고 와 는 각 열의 한 칸씩을 차지한다. 에는 테이블의 제목이 들어가고 에는 데이터가 들어간다. 제목 1 제목 2 데이터 1 데이터 2 colspan 속성을 넣어서 나 가 두 칸을 차지하게 할 수도 있다. 제목 데이터 1 데이터 2 위의 태그들만 사용하더라도 표를 그리는 데에는 문제가 없지만 검색 엔진이 표의 제목이 무엇인지 내용이 무엇인지 등을 알 수 있게 하려면 , , 도 넣어줘야 한다. 제목 1 제목 2 데이터 1 데이터 2 foot 1 foot 2 CSS , , 모두에 border를 설정하면 테이블 라인이 두 줄로 나타난다. 이를 하나로 묶어주려면 border-collapse: collapse;를 넣어준다. table, .. SEO를 위한 HTML 태그 작성 - title, meta 인공지능 기술이 무섭게 등장하는 이 시대에 검색엔진 역시 똑똑해졌다. 더 이상 키워드를 중복해서 넣는 등의 상위 노출을 위한 꼼수가 통하지 않는다. 그래도 역시 썸네일은 중요하다. 검색엔진 크롤링이나 사용자가 썸네일을 보고 사이트에 제일 먼저 접근하기 때문이다. title title 태그에는 제목이 들어간다. 검색엔진 입장에서 가장 중요한 정보일 수 있다. 때문에 페이지의 내용을 정확히 설명할 수 있도록 적어야 한다. Trouble Shooter - 자바스크립트를 이용한 문제 해결 방법들 meta meta 태그를 이용해서 아래처럼 페이지를 설명하는 글을 작성할 수 있다. 마찬가지로 검색엔진 입장에서 중요한 정보이고 title과 함께 썸네일로 활용되거나 검색 키워드에 영향을 줄 수 있다. meta 태그에서.. Data URL을 이용한 이미지 CSS Spirtes 말고도 Data URL을 이용하면 HTML 텍스트 안에 이미지 데이터가 포함되므로 GET 요청을 줄일 수 있다. 그러나 기존 이미지보다 용량이 커진다는 것과 (1.4배 정도) HTML 문서의 크기와 복잡도를 높인다는 것과 모바일 장치에서 느리다는 점 때문에 잘 사용하지 않는다. 브라우저의 렌더링 순서와 속도 개선 방법 렌더링 순서 브라우저는 제일 먼저 HTML 문서를 다운 받는다. 다운 받은 문서의 text를 바탕으로 DOM을 생성한다. 의 를 만나면 CSSOM도 같이 생성한다. DOM과 CSSOM에는 문서의 요소가 되는 객체들이 트리 형태로 묶인다. DOM과 CSSOM을 조합하여 화면에 렌더링 하기 위한 정보를 담은 렌더링 트리를 만든다. 화면에 표시하기 위해 위치 등의 정확한 px을 계산하는 레이아웃 또는 리플로우 과정이 이어진다. 이어지는 페인트 과정에서 화면에 색을 입히게 된다. removeChild 등으로 페이지가 수정되면 DOM 생성 단계부터 이어진다. 기본적으로 CSS를 불러오기 전까지 렌더링이 차단 되기 때문에 지금 막 필요하지 않은 반응형에만 필요한 CSS 파일은 렌더링 이후에 다운 받도록 하면 속도 .. 다양한 입력 태그들 예제 - Form 안에 들어가는 태그들 다음의 부트스트랩 사이트에 들어가서 원하는 형태를 가져다 쓰자. 참고 : https://getbootstrap.com/docs/4.5/components/forms/? 의미론적 HTML 태그 구조 header : 위쪽에 위치하는 섹션으로 제목, 로고, 검색, 이름 등이 온다. main : 핵심 기능이나 내용이 오는 섹션 (페이지에 하나만) aside : 메인과 직접적으로 관련이 없는 사이드바 등 (광고) footer : 아래쪽에 위치하는 섹션으로 저작권, 관련 문서 등이 온다. section : 그밖에 딱히 의미가 없는 섹션 nav : 다른 페이지로 넘어가는 링크가 있는 섹션으로 메뉴, 목차, 색인 등이 온다. article : 사용자의 입력 등으로 내용이 바뀌는 섹션 (독립적 콘테이너) address : 연락처 정보가 있는 섹션 글자 검색 엔진을 위해 강조하고 싶은 내용의 글자를 넣는다. 은 이탤릭채가 되고 은 볼드채가 되니 CSS에서 적당히 바꿀 필요가 있다. 같은 CSS 효과가 있는 와.. 이전 1 다음
