Road to Web Developer/HTML (6) 썸네일형 리스트형 [입문] Hyperlink, a tag HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트를 순서대로 읽어야 하는 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다. HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다. 네이버 방문하기 1. href 속성 href 속성은 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의.. [입문] Text Tag 모바일 퍼스트Mobile First 기조로 인해 텍스트를 줄이고 이미지, 동영상 등의 미디어 사용을 늘리고 텍스트를 줄이고 있는 추세이긴 하나, 여전히 HTML 콘텐츠의 대부분은 텍스트로 구성된다. 시맨틱 태그, SEO를 고려해야 하기 때문에 사용성에 따라 제목, 본문, 모양 혹은 중요도에 맞는 태그를 사용하여야 한다. 01. 제목 (Headings) Tag Heading 태그는 제목을 나타낼 때 사용하며, h1 ~ h6까지 사용한다. 예전에는 웹사이트에서 가장 중요한 콘텐츠에 h1를 선언했다. 그래서 2000년대 초에 만들어진 사이트들은 대부분 로고를 h1으로 선언했다. 그러나 HTML5로 넘어오면서, header, footer 등 역할이 구분되는 영역에서 중요도에 따라 h1 ~ h6를 재사용하도록 권.. [입문] HTML Tag 기본 01. 문서 타입 선언 문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며, 대소문자를 구별하지 않는다. 문서별 기술 양식이 있었으나, HTML5이 표준이 되어 HTML5 문서 형식 정의만 사용한다. 02. html Tag html 태그는 모든 HTML 요소의 부모이며, 웹 페이지에 단 하나만 존재한다. 문서 타입 선언 태그 이외의 모든 HTML 태그는 HTML 내부에 작성해야 한다. Global Attribute (전역 속성)을 지원하며, 특히 lang 속성을 HTML 태그에 사용하는 경우가 많다. 03. head Tag head 태그는 메타데이터를 포함하기 위한 요소이며, html 태그와 마찬가.. 시맨틱 웹 (Semantic Web), 시맨틱 태그 (Semantic Tag) 대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 구글Google이나 네이버Naver 같은 검색사이트를 이용한다. “나는 검색된다. 고로 존재한다”는 말이 있을 정도로 웹사이트는 검색엔진에의 노출이 매우 중요하다. 당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. 검색엔진은 이 시대의 가장 강력한 권력 중의 하나라고 말할 수도 있겠다. SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다. 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의.. HTML 작성 시 유의사항 HTML은 진입 장벽이 낮아 배우기 쉬운 언어다. 하지만 컨텐츠 구조 설계, 그리고 웹 표준과 웹 접근성을 고려하여 HTML 코드를 작성하면 결코 쉽지 않다. 입문자는 표준 규격을 지키는 코딩 방식을 길러야 한다. 최근 Angular, React, Vue를 필두로 프론트 프레임워크를 사용하는 것이 트렌드가 되고 있는데, 경험자는 웹 표준과 웹 접근성을 잘 지키면서 사용하고 있는지 돌아볼 필요가 있다. '변하지 않는 것에 주목하라'는 말이 있다. 처음부터 HTML 코드를 작성하든, 템플릿이나 프레임워크를 사용하여 HTML 코드를 작성하든 잊지말야아 할 것은 표준 규격을 지키는 것이다. 1. 문법 (Syntax) Hello, world! - doctype을 포함해 모든 태그는 대문자로 사용하지 않는다. - .. HTML (HyperText Markup Language) 란? HyperText Markup Language의 약자로, 웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍 언어의 한 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다. HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다. HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호""를 사용하여 나타낸다. 일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으나 "img", "br" 등의 태그와 같이 시작태그만으로 그 영향을 나타내는 경우도 있으며, 종료 태그의 이름은 슬래시 문자[/]로 시작된다. 이와같이 HTML로 작성된 .. 이전 1 다음
