DesignDev

html에는 중요도에 따라 h1부터 h6태그를 쓴다. h1태그는 검색엔진에서 검색랭킹을 올리는 역할을 하기때문에 가장 중요한 메인로고를 주로 h1에 쓴다. 그 다음에 중요한 것으로 h2, h3 ...h6태그까지 쓸 수 있다. h1메인로고 h2대메뉴 h3서브메뉴 위의 코드를 실행하면 다음과 같다. 기본적으로 폰트의 크기와 굵기가 지정되지만 css의 style로 조정 가능하다. 또한 h1안에는 텍스트뿐만아니라 다른 태그도 들어갈 수 있다. 메인로고 위 코드를 실행하면 다음과 같다. h1태그안의 a태그때문에 원하는 곳으로 링크를 걸 수 있다.

과 은 목록태그 이고 는 리스트 태그이다. ol태그와 ul태그 안에는 무조건 li태그가 들어가야 한다. ol태그는 orderlist의 줄인말로 순서가 표기되어있는 목록이다. 메뉴1 메뉴2 메뉴3 메뉴4 위 코드의 결과물은 다음과 같다. li태그 내용 앞에 숫자로 표기된다. ul태그는 unorderlist의 줄인말로 순서가 안 표기된 목록이다. 메뉴1 메뉴2 메뉴3 메뉴4 위 코드의 결과물은 다음과 같다. 앞에 가운데 점이 붙여진다. 이 점을 없애는 방법은 다음과 같다. css style에 ul에게 list-style: none; 속성을 넣어준다. 실행결과는 위와 같다. 이런식으로 리스트를 구성할 수 있다.

는 이미지를 삽입하는 HTML의 태그이다. 태그는 그 자체로 컨텐츠이므로 닫는 태그가 없다. 태그에 사용되는 태그 속성에 대표적인건 다음과 같다. src 태그 속성을 이용해 파일 확장자까지 써주는 2가지 방식으로 이미지를 불러올 수 있다. 내장 파일을 가져오는 방식에 대해서는 절대경로와 상대경로가 있는데 이는 추후에 알아보도록 하자. alt 태그 속성도 추가해야한다. alt 태그 속성의 내용은 시각장애인을 위한 스크린리더기에 읽히므로 해당 이미지를 잘 설명할 수 있는 단어로 써야한다. 이를 지키는 것이 웹 접근성을 지키는 것이라고 할 수 있다. 그 외에도 다음과 같은 태그 속성이 있다. - height : 이미지의 높이 (세로 크기) - width : 이미지의 너비 (가로 크기) - align : 이미지..

a태그는 로 이루어져 있다. a태그의 핵심기능은 하이퍼링크를 걸어주는 태그로 다음과 같이 표기한다. 네이버 //네이버(글자) 클릭시 네이버로 이동 a 여는태그 안에 href라는 태그 속성을 써서 링크를 단다. href는 hypertext reference의 줄임말로 href=" "안에 링크를 달아주면 컨텐츠를 클릭시 해당 링크로 이동한다 . 위의 코드는 페이지에서 페이지로 넘어가는 코드이다. 페이지에서 새 창으로 띄울려면 다음과 같다. 네이버 //네이버(글자) 클릭시 새창으로 네이버로 이동 target이라는 태그 속성을 추가해준다. target의 기본값은 target="_self"이다. 기존 페이지에서 그대로 다른 페이지로 이동한다. 태그 속성 값으로 "_blank"를 넣으면 해당 링크가 새창으로 열린다.

HTML은 Hyper Text Markup Language의 줄임말이다. 텍스트는 정보를 전달하기 위해 작성된 문서를 말한다. 그래서 텍스트로 작성된 정보를 습득하기 위해서는 책을 읽듣이 처음부터 끝까지순차적으로 접근해야한다. Hyper Text Markup Language를 나눠서 보면 다음과 같다. Hyper Text / Markup Language Hyper Text 앞의 하이퍼텍스트는 뛰어넘다라는 뜻의 하이퍼와 앞에 서 말한 텍스트의 조합으로 "텍스트를 뛰어넘다(초월하다)"라는 뜻을 담고 있다. 뛰어넘는다는 것은 비유를 하자면 부분부분 점프를 하며 나아가듯 순차적으로 나아가는게 아닌 비순차적으로 접근할 수 있다는것을 뜻한다. HTML문서는 문서와 문서가 하이퍼링크(링크)로 연결되어 있기때문에 각 ..