본문 바로가기

WEB/HTML

(6)
6. HTML - 하이퍼 링크 태그 <a> (anchor) 현재 사이트에서 다른 웹 문서나 다른 사이트로 연결하는 태그 링크가 있는 부분에 마우스를 올려놓으면, 손가락 모양의 커서로 바뀌어서 표시된다. 태그 형태 네이버 이동 href 속성의 속성값으로 연결할 웹 문서의 경로나, 사이트의 주소를 입력한다. 화면에 표시되는 "네이버 이동"을 클릭하면 href 속성 값에 입력한 사이트로 이동하게 된다. 링크 태그 에 적용되는 속성 속성 속성값 내용 href 웹 문서의 경로, 사이트 주소 이동할 웹 문서 또는 웹 사이트 주소 명시 target _blank 새 창 또는 새 탭에서 해당 링크 열림 _self 현재 창에서 해당 링크 열림 (기본값) _parent 현재 프레임의 부모 프레임에서 해당 링크 열림 (바로 이전 창) _top 최 상위 프레임에서 링크 열림 (최 상위..
5. HTML - 자주 쓰는 기본 태그 <h>, <p>, <br>, <pre>, <hr> 1. Heading 태그 제목 텍스트로 지정하는 태그로 크기가 크고 진하게 표시된다. 제목의 크기에 따라 ~ 까지 사용할 수 있다. 태그를 이용해서 제목 텍스트를 만든 다음 진하게 바꿔도 비슷하겠지만, 태그를 이용하는 것이 웹 표준에 적합하다. (검색 엔진에서 문서 제목을 잘 알 수 있게 한다.) ex) See the Pen NWGVgjY by Kephi (@kephi) on CodePen. 2. Paragraphs 태그 단락을 나타내는 태그 ~ 사이에 텍스트를 입력하면 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. 줄 바꿈이 없는 텍스트 단락은 화면 너비를 넘어갈 경우 자동으로 아래 줄로 넘겨 표시된다. ex) See the Pen paragraph tag p by Kephi (@ke..
4. HTML - style 속성 style 속성은 html 태그 요소를 꾸며주기 위한 속성이다. (ex : 글꼴 색상, 크기, 모양 등..) style 속성의 값으로는 CSS 문법이 들어가야 한다. style 속성으로 자주 오는 속성값 예 - 배경색상 지정 : background-color 해당 요소(태그)의 바탕색을 지정한다. See the Pen background-color attribute by Kephi (@kephi) on CodePen. - 텍스트 색상 : color 해당 요소(태그)에 해당되는 텍스트들의 색상을 지정한다. See the Pen color attribute by Kephi (@kephi) on CodePen. - 글꼴 모양 지정 : font-family 해당 요소(태그)에 해당되는 텍스트들의 글꼴 모양을 지..
3. HTML - 특수 문자 표시를 위한 특수 기호 사용하기 HTML 문서에서 한글, 영어, 숫자등은 입력하는데로 텍스트를 화면에 보여줄 수 있지만, 특수 문자는 특수 기호를 사용해서 표시해야 한다. HTML 문서의 특성 상 여러 개의 공백 문자 (띄어쓰기)를 여러번 입력해도 한 칸만 인식된다. 또한 소스창에 그대로 따옴표를 입력하면, 화면에 표시되지 않고 태그 속 따옴표로 인식할 경우가 있다. ex) 속성 값의 따옴표로 인식될 수 있다. 따라서 웹 페이지에 특수 문자를 화면에 표시하고자 한다면, 특수 기호를 사용해야 한다. 화면에 표시할 특수 문자에 해당되는 특수 기호 화면에 표시되는 모습 (특수 문자) 특수 기호 & & (공백) > " " | | ( ( ) ) . , - - ` ´
2. HTML - 주석 comment 추가하기 HTML 주석 (comment) 자신이 작성한 html 문서의 소스를 보거나 다른 사람이 볼 때 웹 페이지 내용을 쉽게 이해할 수 있도록 설명글을 붙인다. 주석도 태그와 마찬가지로 비슷한 형태를 가지고 있다. ex) See the Pen comment by Kephi (@kephi) on CodePen. cf) CSS 영역인 영역에는 /* 주석 내용 */ 형태로 주석을 붙일 수 있다.
1. HTML 이란? 1. HTML 정의 - HTML : Hypertext Markup Language 웹 페이지의 구조를 설명하는 프로그래밍 언어의 한 종류로 웹 브라우저에서 웹 페이지를 볼 수 있도록 웹 페이지의 구조를 설명한다. (웹 페이지의 정보를 알려준다.) 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다. 2. HTML 특징 ① 구조가 단순하고 문법이 쉽다. 다른 프로그래밍 언어에 비해 단순한 구조를 가지고 논리적이고 연산적인 요소가 없다. ② 컴파일 되지 않은 텍스트 문서이기 때문에 편집이 쉽다. 텍스트 문서를 기계 언어로 바꾸는 컴파일 작업이 필요없다. 실행되는 프로그램에 따라 웹 문서, 텍스트 문서가 되기 때문에 문서를 편집하여 수정된 문서를 즉시 적용이 가능하다. ③ 마크업 언어 마..