HTML (2) -1

1. 리스트태그

2. hyper text

3. 이미지를 다루는 태그

4. 테이블 태그

5. div 태그와 p태그

6. class & id - CSS

7. 태그의 박스모델 구조 & 레이어 구조

       태그 : 

        1. 각 태그들은 각자의 스타일을 기본적으로 가지고 있다

        2. 각 태그들은 각자의 역할을 가지고 있다 (시메틱simatic : 의미있게 만들기)

        3. html태그들 사이에도 상위레벨, 하위레벨 개념이 있다. 

       * 태그는 검색해서 찾는 경우가 많다

1. 리스트 태그

1) ul - li 태그 : 항목 앞에 점이 온다. 

* div : 문법적으로 문제가 되지만 실행이 안되진 않음. 

2) ol -li 태그 : 순서가 정해진다. 

- 속성 : type=""를 이용해 순서 타입을 바꿀 수 있다. 

* ul / ol 태그는 CSS 를 이용하면 똑같이 만들 수 있다. 

2. hyper text (a태그)

 : 연결되는 내용(a 태그) - 처음 생성된 태그는 파란색으로 보이고 한번이라도 클릭해서 이동했으면 보라색으로 바뀐다 (visit) - CSS 

<a href="주소 or 파일이름"> 화면에 띄울 text </a>

* HTML 은 'Hyper Text' Markup Language 의 줄임말이다. 그만큼 hyper text가 중요한 기능.

1) 주소로 이동하기 

-a태그

- 실행

- 네이버로 이동

2) 파일명으로 이동하기 

-apple.html 파일 만들기

- a태그

- 실행시

- 사과페이지로의 이동 

* 다른 폴더에 있는 파일 열기

- 다른 폴더에 apple2.html 만들기

1) 속성에 파일명만 쓰기

:결과 ->  href = "" 안에 파일명만 쓰는 것은 실행되는 파일과 같은 폴더에 있을 때만 가능

2) 위치를 다 적었을 때는 hyper text를 눌러도 아무것도 나오지 않았다.

3) .. (부모폴더로 이동) 이용

: 성공

--> 상대경로를 이용해 다른 폴더에 있는 파일 열 수 있다. * 바로 뒤에서 설명 

( 절대경로가 왜 안되는지 더 알아보기) - 수정예정 

3. 상대경로와 절대경로 

1) 상대경로 : 대상을 기준으로 해서 찾는 것 

- '/' 로 자식폴더로 갈 수 있고 '..' 으로 부모폴더로 갈 수 있다. 

- ex ) /apple.html , ../01/apple2.html

2) 절대경로 : 위치를 기준으로 찾는 것

- ex) http://grace-go.tistory.com/ , D:\프론트엔드\part1_\01\apple2.html

4. 이미지를 다루는 태그

1) 이미지 종류

- jpg : 용량이 작지만 퀄리티가 좋다 -> 압축기술 좋아짐. 완전 큰 사진 쓸 때 사용

- png : 용량이 작지 않고 퀄리티가 좋다. 무손실 타입의 이미지 - 원본 그 자체 ex 아이콘

- gif : 용량이 작고 퀄리티가 떨어짐. 움직이는 사진 가능

2) img 태그 : 풀태그. 닫기 위해서 /를 닫힘꺽쇄 '>'앞에 쓴다

<img src=" " width=" " height=" " title=" " alt= " " ... /> 

(현재 실행하고 있는 index.html과 같은 폴더에 html.png 이미지를 저장했다.) 

(상대경로)

* 속성

-src : 이미지 위치

-width : 출력할 너비

-height : 출력할 높이 *CSS를 이용해서 크기를 변경하는 것이 좋다

-title : 이미지의 이름

이렇게 마우스를 올리면 title이 뜬다

-alt : 이미지 설명, 한글과 영어를 섞는것이 좋다.

* 타이틀, alt사용- 웹접근성 고려, 검색이 잘 되기 위해 타이틀과 alt를 쓴다

3) 주소로 이미지 띄우기. 다음 홈페이지에서 이미지 주소 복사로 사용할 이미지의 주소를 얻어냈다. (절대경로)

4) 상대경로, 절대경로 이용. 

(실행하고 있는 파일이 있는 폴더에 image폴더를 만든 후 html.png를 그 폴더 안에 넣었다)

- 위치를 바꾸니 전에 출력했던 이미지가 출력되지 않는다.

: 속성 alt에 적었던 내용이 나옴.

- 상대경로 

- 절대경로

절대경로가 계속 안된다. 이유 알아낼 것 - 수정 예정

사진출처 : http://www.daum.net, http://www.codingdojo.com/blog/html-vs-css-inforgraphic/