생활코딩 1일차 (html-1)

1일차 수업내용

웹이란 무엇인가? : 상식선의 이야기들 요약할 내용이 없음.

html이란? : 마찬가지.

실습방법과 개발도구 : 크롬과 Aptana 를 준비 할 것.

DTD(Doctype) : html문서 최 상위에 배치되며 문서형식을 지정한다. HTML5는 <!DOCTYPE html> 요렇게 지정해주면 됨.

BODY : head와 형제격의 태그 웹페이지 본문에 표현되는 사항을 기록하는 곳

-링크 : a태그의 내용들

<a href="http://opentutorials.org/course/1">생활코딩</a> : 생활코딩 홈페이지로 이동한다.
<a href="http://opentutorials.org" target="_self">생활코딩</a> : 현재 프래임에서 생활코딩 홈페이지를 연다.
<a href="http://opentutorials.org" target="_blank">생활코딩</a> : 새창에서 생활코딩 홈페이지를 연다.
<a href="http://opentutorials.org/course/11/10#reference" title="생활코딩 html이란 무엇인가 참조">HTML 소개 참조</a> : 생활코딩의 HTML소개 페이지 중 참조 부분으로 문서를 이동한다

target 설정을 안하면 target="self" 가 기본옵션으로 채택됨. target="_blank"는 새창에서 지정된 페이지를 오픈함. 주소끝에 #이동시키고자하는 페이지name 를입력하면 해당페이지 참조된 부분으로 열림. title은 마우스가 올려졌을때 이동되는곳의 간략한 정보를 전해줄 수 있으며 검색사이트에서는 문서에 이런 다양한 정보가 담겨져있는걸 좋아하기때문에 검색사이트에 잘 노출시키기 위해서는 작성하는게 필요하다.

-문단, 줄바꿈, 띄어쓰기 : <p>, <br />,   에 관한 내용.

-이미지 : <img src="이미지가 위치하는 URL" alt="대체텍스트" width="폭" height="높이" longdesc="링크" />

alt는 이미지 로딩이 오래걸리거나 시각장애인을 위한 대체텍스트부분 써주는게 좋다
width, height 는 사용 할 필요가 없을 것 같음. 이미지 사이즈를 조정해서 넣어주는게 깨끗하고 빠를듯. 사용한다면 둘중에 한가지 변위만 지정해주면 나머지는 비율에 맞춰서 조정된다 longdesc 는 들었는데 뭔 내용인지 명확하지 않음 일단 무시하고 넘어가자

-목록이란? : <ol>이나 <ul> 태그로 감싸고 세부 항목은 <li> 태그로 표현한다. ol테그와 ul테그의 차이점(순서가 있느냐 없느냐의 차이)

-아이프레임과 프레임 : 프레임부분은 html5부터 지원하지 않는다고해서 안들음.

<iframe src="불러올 웹페이지의 URL" width="가로값 (퍼센트나 단위표기 안해도됨" height="세로값 (퍼센트나 단위표기 안해도됨" frameborder="1" scrolling="auto"></iframe>
이런식으로 구성되며 scrolling은 auto,no,yes 중에서 선택할 수 있다 우측과 하단에 스크롤 표시여부를 나타낸다.

-이스케이핑이란? : 약속된 명령어를 웹상에 명령어가 아닌 문자로 표기하는 방법으로 이해.

http://www.htmlescape.net/htmlescape_tool.html 이스케이핑을 지원해주는 사이트. 요정도만 알고 넘어가면 될 듯 하다.

-표란? : table로 싸여진 곳에 <tr>,<td>,<th>,<rowspan>,<colspan> 등을 사용하여 만든다.

HEAD : BODY와 형제태그로써 BODY에 들어갈 메타정보를 담는다.

-meta : <meta name="" content="" />, <meta http-equiv="" content="" /> 등의 형식으로 구성된다. 졸려서 흘려들음ㅋ ^^

1일차 수업은 대부분이 아는내용이라 동강만 들으며 수월하게 넘어갔다.

이렇게 하루 수업듣고, 다음날 정리하는 방법도 괜찮을 것 같다.

생활코딩 1일차 (html-1)

'BLOG/Blog' Related Articles