본문 텍스트에 다양한 강조 표기를 통해 여러 형식의 텍스트를 입력할 수 있다. 여러 방식으로 텍스트를 강조할 수 있다. 다만 출력만을 위해서가 아니라, 형식에 따른 의미까지 포함된다. 1. 강조 표기 EM & STORNG (주관적&객관적 강조) See the Pen dxVxJN by ++EXP (@pp_exp) on CodePen. 기존 요소와 요소와를 대신하여 과 을 사용한다. 은굵게 표시되어 강조되고, 은 기울어진 채로 강조된다. 그러나 이 두 요소는 의미마저도 포함하여 강조한다. 은 가장 객관적인 사실로서 강조를, 은 주관적인 감상으로서의 강조를 의미한다. 2. 인용 표기 BLOCKQUOTE, Q, CITE (인용 표기영역, 인용 줄, 인용 출처) See the Pen MNENQd by ++EXP ..
텍스트만으로는 불충분한 설명을 이미지, 동영상, 사운드 등을 통해서 전달할 수 있다. 이미지 요소는 ,비디오 요소는 , 오디오 요소는 를 사용한다. 1. See the Pen PMJMwj by ++EXP (@pp_exp) on CodePen. 는 이미지를 출력할 때 쓰인다. SouRCe 속성으로 이미지 경로의 값을 붙여 넣으면 된다. ALTernate 속성은 이미지가 어떠한 이유로든 출력되지 않을 경우, 혹은 시각장애인과 시각을 사용하지 않는 검색엔진을 대비하여 이미지의 설명을 추가한다. 또한, 빈 태그이므로, 스스로 닫는 표기 "/>"를 사용하여 닫는다. See the Pen WVZVbz by ++EXP (@pp_exp) on CodePen. 그 외에 TITLE 속성을 사용하여 마우스 오버 시 이미지 ..
목록은 문서 내 텍스트 구조를 명확하게 보이는 데 도움을 준다. 내부 문서 구조를 명확하게 하기 위해 사용한다. 가장 기본적인 목록 태그는 로 리스트를 만들 때 사용한다. 그러나 태그 혼자서만 존재하지 않는다. 반드시 목록을 규정하는 혹은 의 하위 요소로서 위치하여야 한다. 반대로, , 의 하위에는 반드시 1개 이상의 가 있어야 한다. 1. 순서가 있는 목록 (Ordered List) See the Pen RXLzZN by ++EXP (@pp_exp) on CodePen. 순서가 있는 리스트 목록을 만들 때 태그를 사용한다. 2. 순서가 없는 목록 (Unordered List) See the Pen RXLXwo by ++EXP (@pp_exp) on CodePen. 순서가 없는 리스트 목록을 만들 때 태..
See the Pen zgEVZL by ++EXP (@pp_exp) on CodePen. HTML 문서에서 가장 핵심적인 역할을 하는 제목태그와 본문 태그, 그리고 A 태그에 대해서 알아보자. 1. 제목 요소 See the Pen RXLzVw by ++EXP (@pp_exp) on CodePen. 제목을 설정할 때 사용한다. 1~6단계까지 있으며, 가장 중요한 제목이 , 덜 중요한 제목이 이다. 2. 본문 요소 See the Pen gVGNWa by ++EXP (@pp_exp) on CodePen. 긴 문장의 텍스트를 한 구역에 넣고 영역을 지정하는 태그. 일반적으로 제목과 본문으로 분리하여 영역을 구분한다. 가장 기본적인 형태의 문서 3. 링크 요소 See the Pen JgrQNx by ++EXP (..
1. 는 "메타정보"라고 하는, 출력되지 않는 정보를 전달 혹은 이용하는데 쓴다. 앞서 배운 빈 태그이며, 속성값으로 정보를 나타낸다. 여러 속성들 중 가장 대표적인 것은 국가별 언어 출력을 담당하는 인코딩 정보를 설정하는데 쓰인다. 위 사례에서, CHARASET(CHARACTER SET,( : 문자열 지정))은 인코딩 속성을 지칭하는 속성이름이며, "UTF-8"은 한국어 출력을 담당하는 속성값이다. 이 외에도 여러 속성이 존재한다. - 속성값 description : 현재 페이지의 설명을 담고 있고, 이는 검색엔진이 주로 확인함. 구글 검색결과의 페이지 소개 내용은 주로 이 메타 정보를 이용한다. 글자 수는 160자 이내로 작성 권장. - 속성값 Keywords : 페이지에 대한 주요 키워드들을 담고 ..
See the Pen voeqXo by ++EXP (@pp_exp) on CodePen. 1. 버전 선언 은 HTML의 버젼에 관한 정보를 나타내는 부분으로 HTML 문서에 가장 첫 줄에 위치한다. HTML 문서 작성시 웹 브라우저에게 버젼을 알려주기 위해서 맨 처음에 위치하며,현재 HTML5 버전의 독타입을 을 쓴다. 2. 웹 페이지에 직접적으로 노출되지 않는 데이터를 어떻게 처리하는지에 대하여 작성한다. 문서의 제목, 검색엔진 노출 여부, 페이지 소개 글, CSS와 JS문서의 연동 등을 연결하는 요소도 이 곳에 작성한다. *대표적 사례 : , , 3. 웹 페이지에 직접적으로 노출되는 영역 요소를 지칭한다. 제목, 본문, 목록, 이미지, 비디오 등 일반적으로 문서의 내용을 작성할 수 있다.
1. 요소 = 내용 or 내용 HTML은 시작태그와 종료태그가 "내용(컨텐츠)"를 감싸고 있는 형태이다. 그러나 반대로 "내용"을 감싸지 않는 태그도 있는데 이런 태그를 가리켜서 '빈 태그'라고 한다. 빈 태그는 와 같이 스스로 닫는 표기를 포함하여야 한다. 이렇게 완성된 태그로 표기된 대상을 '요소'로 지칭한다. 요소에는 속성과 값이 포함된다. 2. 태그의 속성 표기 HTML 속성은 태그의 동작을 제어하기 위해서 "시작태그" 안에 사용되는 특수 용어이다. 기본 기능을 수정하거나, 스스로 기능하지 못하는 특정 요소에 기능을 제공한다. HTML문법에서 속성은 HTML 시작 태그에 추가된다. 속성 중에 아직 배우지 않았지만, STYLE 속성을 통해 CSS를 구현할 수 있다. 이를 INLINE 이라 하여 내부..
[1] HTML의 소개 "HTML은 웹 페이지를 위한 지배적인 마크업 언어이다." HTML는 HyperText Markup Language의 약자로, '텍스트(text)'간에 뛰어 넘을 수 있는(Hyper) 마크업 언어라는 뜻이다. 우리는 본딧말에서 하이퍼텍스트(HyperText)와 마크업 언어(MarkUp Language)라는 핵심적인 두 가지 특성을 찾을 수 있다. 특징 1. 하이퍼텍스트 (HyperText) "참조를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트를 말한다. (중략) 접두사 'hyper-'는 '건너편의, 초월하는, 과도한'이란 의미와 'text', 즉, '글' 이란 의미와 합성하여 만든 컴퓨터 및 인터넷 관련 용어이다." 일반적으로 하이퍼텍스트는 우리가 아는, '링..
