2020-06-05 HTML 자습

 

HTML 자습 

 

-  <div> 태그는 <p> 태그와 함께 블록을 구성하기 위해 가장 많이 사용됨  div 는 여러 HTML 태그들을 블록으로 묶는 컨테이너로 이용된다.  <div> 블록 전체에 동일한 CSS 스타일을 적용하거나 자바스크립트로 블록을 하나의 단위처럼 다루고자 할때!! 

 

이미지 맨아래 나온것 처럼 하나의 블록처럼 바탁색과 여유공간 폰트크기를 줄수있음 

 

- 중첩리스트 /  <li> 태그 안에  새로운 <ul> 태그를 넣어서  리스트 안에 또 다른 리스트를 만드는 작업

 

- 표만들기 <table> /  표만드는 방법에는  두가지 방법이 있는거 같다.

1. <caption> < thead><tbody><tfoot> 을 이용한 표만들기 

2.  그냥  <th> 와  <td> 로만 이루워진 표만들기. 

 

2번이 만들기는 빠른데  나중에 코딩을 확인할때  1번으로 만드는 것이 보기가 편할것 같다. 

 

+ 표를 사용하면 이미지 같은거나 form을 쓸때 깔끔하게 표현하는 것이 가능하다.

 

- 하이퍼링크 만들기 /  자습할때 해본건 <a> 태그와  이미지 태크를 이용해서  이미지를 누르면  지정해둔 링크로 이동하게 만드는 연습을 해봤다. 

 

+ 링크할떄 target 속성을 이용해서 링크를 어디에 불러올 것인지 정할 수 있다.  새로운 브라우저에 열것인지  부모 화면에 뛰울건지 top인지 현재 프레임인지를 정할 수 있다.

 

 

- 앵커로 이동하는 링크만들기 / <a> 태그와  선택자 <id ="  "> 를 이용해서  같은 페이지 내에서 원하는 화면으로 이동하게 만들 수 있다.   <a href ="#love"> 라고 하면   <id ="love"> 라고 지정한 문단으로 화면이 이동된다. 

 

- 파일 다운로드 링크 만들기 / <a href="media/elvis.png" download> 엘비스 이미지 다운로드 </a>

 앵커 태그 뒤에 download 태그를 넣어주면  "앨비스 이미지 다운로드" 라는 문구를 클릭하면 다운로드가 된다

 

 

위에 실습들을 해보고 실습과정에서 주의해야할 점이나  막힌 부분에 대해서는 메모장에 따로 메모를 해두었다. 

 

1.id 선택자를 이용할때  id에서 지정하는 이름과  #로 이름을 불러올때  대소문자도 일치시켜야 제대로 동작한다.

2.  파일 다운로드 링크 만들기 할때에 링크를 클릭해도 다운로드가 되지않고  그저 화면에 사진만 나온다.