목록Study/HTML 공부하는 인디안 (11)
인디안 보호구역
- Image tag웹페이지에 이미지를 어떻게 표현하나?태그를 이용하여 표현한다. img 태그의 속성 중 가장 중요한 것은 src이다.src의 값에는 경로, 파일명 등이 들어가게 된다. alt 속성에는 대체문구를 넣는다. 웹 접근성을 위해 반드시 사용하는 것을 추천한다고 했다. width, height는 너비 높이. 미리 정해두면 로딩 속도가 빠르다더라. 이미지가 심한 고화질에, 그 숫자도 심하게 많으면 서버에 과부하가 걸리는 요인이 되므로 적절하게 조절해야 한다. img의 위치를 위해 align 속성을 쓰면 안된다.예전엔 썼지만, HTML 4 이후로는 지원하지 않는 기능이다.대신 Style = "float : left"이런 식의 style 속성을 사용하라. 한 이미지 내에서 특정 부위를 눌렀을 때 링크..
- CSS ( Cascading Style Sheet)웹페이지에서 HTML Tag가 몸의 골격이라면CSS는 피부, 겉모습과 같다. 웹페이지를 다양하고 화려하게 치장할 수 있다. - CSS를 적용하는 방법 3가지 - Inline : 시작 태그 안에 집어넣는다. - Internal : 헤드 안의 스타일 엘리먼트에 집어넣는다. ex.(daum.net) - External : Style 파일을 별도로 만들고 헤드에서 링크 엘리먼트로 삽입한다. - Inline 방식 h1 시작 태그 안에 스타일이라는 속성으로 적용된다. - Internal 방식 태그 사이에 엘리먼트가 들어가있다. - External 방식 태그 사이에 태그를 통해서 외부에서 작성된 style 파일인 stylesheet를 가져오고 있다.
- 엘리먼트는 메타데이터를 담기 위한 그릇 이다.HTML 메타데이터는 HTML문서에 대한 정보이다.검색 엔진이 데이터를 찾거나, 페이지에 스크립트 삽입, 스타일 지정 등을 위해 사용하고 페이지에 그 내용이 나오진 않는다. - 엘리먼트타이틀 엘리먼트는 문서의 제목이다. 탭 란에 title의 요소가 적혀있는 모습을 볼 수 있다. - 엘리먼트스타일 엘리먼트는 html 문서의 스타일 정보를 정의해놓는다. 문서의 배경색깔을 노란색으로, p태그의 글자색을 파란색으로 변경하였다. - 엘리먼트먼저 배운 a태그와는 다르게, 웹문서를 작성할 때, 외부 소스를 페이지에 끌어오는 역할을 한다.대표적인 것이 스타일 시트이다. 스타일 시트를 별도의 파일로 작성을 해놓고, 그 스타일 시트를 이 웹문서에서 이용을 할 때 사용한다. ..
- Link는 클릭을 했을 때, 다른 사이트로 이동을 하거나, 서버 내의 특정 페이지로 이동을 하는 등의 기능을 칭한다.Link는 문자, 문장, 이미지 등에 모두 쓰일 수 있다. 태그로 시작해서 태그로 끝나며, a태그의 href속성의 값으로 이동한다. 클릭하면 target이라는 속성이 추가되었다. 값이 "_blank"이면 탭에 새 창을 띄우고,값이 "_top"이면 탭에 링크를 누른 창에서 그대로 옮긴다. 클릭하면 -Link는 북마크로 사용 할 수 있다. 태그에 id라는 속성을 사용했고, 그 속성 값이 tips이다. 태그에 href속성의 값을 "#tips"로 사용하면, 이 페이지 내에 tips라는 아이디 값을 가진 곳으로 이동하게 된다. id는 a태그의 속성으로도 쓰이고 h태그의 속성으로도 쓰이나보다.a태..
- Comment tag는 로 이루어져있다. 단순한 주석이다. - 조건부 주석, 특정 조건을 이용하여 스크립트를 실행하게 할 수 있다. 만약 인터넷 익스플로러 버전이 8이면, This Sentence가 실행된다.IE에서만 쓸 수 있는 코드이고, 아래와 같은 방식으로 사용한다.
여러가지 텍스트 포맷 형식들이 있다.글자는 bold체(굵다), italic체(기울여져있다), 그 외 computer output, subscript and superscript 등등이 있다. HTML에서는 태그를 통해 텍스트 포맷을 다루는데bold체와 유사한 가진 태그와 bold체인 가 있다.은 중요한 문자를 표현할 때 사용하고, 는 볼드체(굵게)이다.strong과 b는 육안으로 구분이 안되지만 브라우저는 위와 같이 달리 규정하고 있다.은 강조하고자 할 때, 는 italic체(기울임)이다.는 아래첨자, 는 윗첨자이다.는 밑줄, 은 취소표시선이다.는 형광펜 표시이다. -HTML "Computer Output" Tags, , , 태그 등을 대강 알려주는데 뭔진 잘 모르겠다. 태그는 코더가 화면에 보이고 싶은..
- HTML에서 단락을 나타낼 때는 p태그를 사용한다. 닫는 태그를 안써서 오류가 나는 경우가 많으므로 항상 숙지하도록 한다. - HTML Line Breaksbr태그는 줄바꿈 태그이다. 시작태그만 있고 끝태그가 없다.어떤 문장에서 특정한 위치에 강제로 줄바꿈을 시킬 때 사용한다. p태그는 끝날 때 자동으로 빈 라인을 만들어준다. ex. This is a paragraph.This is a paragraph.This is a paragraph. 줄바꿈을 위해서 위와 같이 적어도 줄바꿈은 이루어지지 않는다.중간에 태그를 삽입하거나 각 줄마다 p태그를 써야 한다.
-HTML Headings는 문서의 중요도를 나타낸다. (문서의 머릿말) H1부터 H6까지 있는데, H1 부터 H6 까지 구분하여 다양하게 문서의 중요도를 나타낼 수 있다.Heading 태그를 통해, 웹 검색엔진은 문서의 중요도를 판단하여 찾아낸다. 검색엔진은 아무리 디자인을 이쁘게 꾸민 이미지로 가시성을 높인다 하더라도,웬만하면 이미지를 구분하지는 않는다. (요새는 구분하긴하는데)가능하면 중요도를 인식할 수 있는 태그를 이용하여 만드는 것이 좋다. -HTML Lineshr 태그는 HTML 문서에 가로 수평선을 그을 수 있는 태그이다. (Horizontal Rules tag) HTML Horizontal Rules 라고 쓰여진 헤드 위에 줄이 있는데 그것이 hr태그이다.두번째 이미지를 보면 이해가 쉽다.
- HTML AttriutesHTML의 엘리먼트는 속성을 가진다.속성은 엘리먼트의 추가적인 정보를 제공한다.속성은 시작태그에만 부여할 수 있다. 종료태그에는 들어갈 수 없다.속성은 그 속성의 이름과 값 한 쌍을 이루면서 온다. (name="value") ex.This is a link a태그는 다른 사이트로 이동하거나 서버 내의 특정 페이지로 이동하는데이동할 곳에 대한 정보가 없으면 무용지물이기 때문에, href 속성이 들어가게 된다. ex2. 속성은 여러개 들어갈 수 있다.a태그에서 target 속성은 링크가 현재 프레임 내에서 이루어지거나, 탭, 새 창 등으로 띄울 수 있게 한다. 대부분의 태그에 공통적으로 다 사용될 수 있는 속성들이 있다.class, id, style, title 등이 있다.반면에..
- 문서의 머릿말을 표현하는 방법- 단락을 구분하는 방법- 다른 사이트로 연결하는 링크를 거는 방법- 웹에 이미지, 그림 파일을 표현하는 방법 - HTML Headings 문서의 머릿말을 표현하는 방법으로 부터 까지 구분되어있다. ex. This is a headingThis is a headingThis is a heading 1이 제일 크고, 6이 제일 작다. - HTML Paragraphs단락에 대한 태그는 p로 포현된다. - HTML Links링크에 대한 태그는 a로 포현된다. ex.This is a link This is a link라고 쓰여진 링크를 누르면 해당 사이트로 연결된다. - HTML Images그림, 사진 등을 표현하는 이미지 태그는 Image의 약자인 img로 포현한다. ex. s..