[chap.2]html 둘째 날

1. List 만들기

1-1. Unordered list

말 그대로 순서가 없는 목록태그. 각 항목 앞에 기호로 표시된다.

<ul>
  <li>Limes</li>
  <li>Tortillas</li>
  <li>Chicken</li>
</ul>

 

->

• Limes
• Tortillas
• Chicken

<ul type ="square"> 을 쓰면 ■ 로 나타나는 등 다양한 기호로 바꿀 수 있다

 

1-2. Ordered List

순서가 있는 목록태그. 기본적으로 숫자로 표시된다

<ol>
  <li>Preheat the oven to 350 degrees.</li>
  <li>Mix whole wheat flour, baking soda, and salt.</li>
  <li>Cream the butter, sugar in separate bowl.</li>
  <li>Add eggs and vanilla extract to bowl.</li>
</ol>

 

->

 

1. Preheat the oven to 350 degrees.
2. Mix whole wheat flour, baking soda, and salt.
3. Cream the butter, sugar in separate bowl.
4. Add eggs and vanilla extract to bowl.

이 역시 <ol type="A">로 입력하면 알파벳 순으로 나열된다.

 

더 다양한 스타일과 디테일이 있겠지만 Codecademy의 기초 html 커리큘럼에 따라

일단은 전체적인 틀을 익히는 걸로!

 

 

2. Images

지금까지의 elements는 다 글자로 이루어져 있었다.

이제 이미지를 넣는 법을 알아보자

이미지 태그의 구조

 

Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash — both will render properly. the value of src must be the uniform resource locator (URL) of the image. A URL is the web address or local address where a file is stored.

 

여기에 alt 라는 요소를 더 넣을 수 있다.

 

The alt attribute, which means alternative text, brings meaning to the images on our sites.

즉. 이미지에 대한 설명을 입력하면 된다.

 

alt를 쓰는 목적은 크게 세가지이다.

1. 이미지가 로드되지 않을 때 그 위치에 마우스 오버를 하면 그 이미지에 대한 description을 얻을 수 있다.

   (이미 로드된 이미지 위에서 hover over 한다고 해서 description이 뜨진 않음

    이경우엔 title="" 으로 텍스트를 넣어주면 hover over 시에 텍스트가 뜬다)

2. 시각적으로 불편한 사람들이 웹을 이용할 때 screen reading software을 쓰면 description을 읽어준다.

3. 검색엔진 최적화(Search Engine Optimization,Seo)에 유리하다. 검색어를 통해 이미지를 찾아 웹사이트에 들어올 수 있다.

 

 

3. Videos

 

비디오 태그의 기본적인 구조

Like the <img> tag, the <video> tag requires a src attribute with a link to the video source. Unlike the <img> tag however, the <video> element requires an opening and a closing tag.

 

우선, 이미지와는 다르게 closing tag( </video> ) 를 따로 붙여줘야한다.

나열된 순서대로 구조를 살펴보면

1. 이미지 태그와 마찬가지로 video source에 링크하기 위해 src를 넣어준다.

2."비디오파일" 을 입력.

file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.

ex) https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4

3. width와 height 입력

4. controls 입력

controls attribute instructs the browser to include basic video controls: pause, play and skip.

5. opening tag 닫고 그 뒤에, video not supported 입력 후 </video> 로 마무리

이 문구는 비디오가 로드되지 않았을 때 표시된다.