[HTML] html입문 02 (170310)

- 프론트엔드의 구성

• HTML  : info
• CSS : design
• javascript : language    

- CSS 속성 display 살펴보기

• display

요소를 배치할 때 어떻게 보여줄지를 결정한다.

EX)    

display: inline; // 한 줄(inline)에 다 표현해준다.

display: inline-block; // width와 height를 모두 갖으며 inline으로 배치된다.

**출력 결과**

-inline은 width와 height를 반영하지 않았다. 반면 inline-block은 블록형태로 inline을 반영했다.

-image 표시하기

• img src="이미지 경로" alt="이미지 설명 "
• img에 css로 크기 조정하기 : style시트 내부에서 img { width:200px; height:200px; } 이용하여 조정

**출력 결과**

- ul (unorder list) 태그 이용하기

• ul을 이용하면 순서가 없는 리스트 형태로 나타낼 수 있다.
• style을 이용해 margin, padding을 0을 주면 리스트의 점을 없앨 수 있다.

**출력 결과**

-ol (ordered list) 태그 사용하기

• ol을 이용하면 순서가 있는 리스트로 나열할 수 있다.
• list-style-type: lower-roman; 을 이용하면 소문자 로마문자로 숫자 표현이 가능하다.
• list-style-type: disc; 는 ul형태로 표현할 수 있다.

**출력 결과**

-Button의 이용

• button을 이용하면 클릭 가능한 형태의 박스를 표현할 수 있다.
• button의 속성인 onclick을 이용하면 속성값은 javascript가 들어가야 한다.
• alert를 이용하여 버튼 클릭의 결과를 적용했다.

**출력 결과**

-상대경로와 절대경로

• 상대경로는 현재 위치에서 접근 가능할 때 상대적으로 나타내는 경로명
• 절대경로는 파일의 전체 경로를 모두 표기한 경로명

EX) 

상대경로 : <a href="Step01_Basic.html">

 

절대경로 : <a href="file:///D:/****/sublime_work/html/Step01_Basic.html">Step01-1</a>

-상위폴더의 html파일 접근하기

• ..을 이용하여 상위폴더로 이동 가능하다.

<a href="../hello/test.html">test</a> //상대경로 접근

<a href="file:///C:/***/sublime_work/hello/test.html"> //절대경로 제공