HTML - 속성, 리스트

 

안녕하세요 :)

 

HTML을 주제로 한 다섯번째 포스팅에서 다루어 볼 내용은 속성 입니다.

 

지난번 포스팅때 까지 우리는 좋아하는 노래의 가사 정보를 출력하는 웹페이지에 여러가지 태그를 추가하여 보기 좋게 만들어 보았습니다. <p> 태그를 이용한 문단 나누기 까지 한 결과가 아래와 같았죠

 

그런데 뭔가 텍스트 자료만 있으니... 생동감없이 휑~ 합니다. 그래서 이번에는 속성을 다루기위해 이미지를 추가해 보겠습니다. 마음같아선 스테이씨 사진을 넣고 싶지만 저작권이 있기 때문에 무료이미지 사이트에 music이란 키워드로 검색한 아무 이미지를 .html 파일이 있는 디렉터리내에 sample.jpg 라는 이름으로 넣어 주었습니다.

 

그런다음 이미지를 넣는태그는 <img> 입니다.

 

그런데 그냥 <img> 라고 한다면 어떻게 내가 저장한 이미지를 불러올까요..? 여기서 파일에 대한 추가적인 정보가 필요합니다. 이것을 속성이라고 합니다. 속성을 추가한 이미지 파일 로드 태그는 아래와 같습니다.

 

<img src = "파일명">

 

 

결과를 확인 하면 다음과 같습니다.

 

 

이렇게 하면 이미지 가 너무 큰것 같죠? 또다른 속성인 width를 조정하여 크기를 줄여보겠습니다.

 

 

 

이렇게 해준다면 원래크기의 80퍼센트로 줄어든것을 확인할수 있습니다.

 

 

 

 

 

HTML 리스트

이번에는 목록, 즉 리스트에 대하여 다루어 보겠습니다. 위의 예제에서 맨위에 다른 곡들의 리스트를 더 추가해보려 할때 사용하는 태그는 <li> </li> 입니다. 코드는 아래와 같습니다.

 

 

하지만 여기서 한번더 짚고 넘어가야 하는것은 부모와 자식관계입니다. li라는 태그는 단독으로 사용해도 되지만 거의 <ol> 또는 <ul> 의 부모 리스트와 함께 사용합니다. ol은 오더드, ul은 언오더드를 의미 합니다.

 

여기서 <ol> 태그를 부모 리스트로 사용할때의 예는 다음과 같습니다.

 

 

위처럼 리스트 앞에 구분으로 숫자가 붙은것을 확인할수 있습니다.

type 이라는 속성을 부여하면 숫자가아닌 알파벳으로 구분지을수도 있습니다.