HTML/기초 (19) 썸네일형 리스트형 [10. 태그의 관계] 태그의 관계란? 태그는 부모와 자식의 관계로 형성되어 있습니다. 모든 태그가 이러한 관계를 맺는 것은 아니지만, 자주 사용하는 태그들이 이런 관계를 맺는 경우가 종종 있으므로 어떻게 구성되어 있는지 확인해보겠습니다. ※ 구성 확인 부모와 자식 태그의 관계는 위와 같은 구조로 구성되어 있습니다. 필요하에 관계를 맺는 태그도 있는 반면에, 항상 같이 사용해야 하는 태그들도 있습니다. 태그의 관계를 에디터로 확인 부모 태그 : p 자식 태그 : a 위 사진에선 부모와 자식의 관계를 맺었지만, 필요하에 따라서 관계를 맺지 않고 단독으로 사용할 수도 있다. [9. 이미지 태그(IMG) 이미지 태그(IMG Tag) 이미지를 출력할 때 사용하는 태그입니다. ※ 사용 방법 img 태그만으로는 이미지의 주소 값을 모르기 때문에 이미지를 출력할 수 없습니다. 기본 태그로는 정보가 부족하므로 주소 값을 불러오는 src 속성을 같이 사용합니다. 이미지 태그 표현 태그를 사용하기 전에 무료로 이미지를 제공해주는 사이트에서 이미지를 다운로드해 봅시다. https://unsplash.com/ 다운로드 한 이미지와 해당 이미지를 출력할 소스코드 파일의 경로를 같은 디렉터리에 위치하게 합니다. 이미지 주소 값과, width 속성을 이용해 원본 이미지를 35% 크기로 축소합니다. 웹 페이지 화면에 이미지가 정상적으로 출력됩니다. 이미지가 같은 경로에 위치하지 않은 경우에는 이미지의 주소 값을 이용해 출력합니.. [8. 태그의 속성] 태그의 속성이란? 태그가 가진 기본 옵션 안에 잠재되어 있는 기능이며, 속성을 이용해 태그의 변화를 다양하게 추가해줍니다. 속성을 사용 시엔 속성 값을 정의해서 기본 태그를 변화시킵니다. 속성을 사용하는 이유는 기본 태그만으로 정보가 부족하거나, 다양하게 표현하기 위해 사용합니다. ※ 속성 사용법 [7. HTML의 본질과 사용법] HTML의 본질이란? HTML 언어가 가지는 정확한 의미를 갖고 사용하기 위해서 어떻게 사용해야 좀 더 접근하기 쉽고 명확한지 간단하게 설명해보겠습니다. 웹의 핵심은 접근성입니다. 웹은 모든 운영체제에서 동작하고, 다수가 웹 페이지를 통해 정보를 얻을 수 있으며, 저작권이 없는 공공재입니다. 이런 공공재를 특정 다수만 이용할 수 있다면, 웹은 이용하는 사용자마다 차별성을 갖게 됩니다. 어떤 방식으로 인해 차별성을 예로 들었는지 말해보자면 웹 페이지를 보기 위해서는 화면을 볼 수 있는 시력이 필요합니다. 그렇다면 시각장애인은 웹을 이용하지 못하는 것일까요? 답은 아니요입니다. 시각장애인은 "스크린리더"와 같은 보조 프로그램을 통해서 청각으로 웹 페이지를 접하게 됩니다. 시각에 불편함이 있어도 청각으로 인해.. [6. 제목 태그(H)] 제목 태그(H Tag) h 태그는 제목에 의미를 갖는 태그입니다. body 태그 안에 사용 시, 본문에 대한 제목에 의미를 갖고 head 태그 안에 사용 시, 웹 페이지에 대한 제목에 의미를 갖습니다. 웹 페이지에 대한 제목이란, 우리가 작성한 소스코드 파일에 대한 제목이라고 생각하면 됩니다. ※ 사용 방법 제목 h단어 뒤에 숫자라고 표기되어 있는데, 숫자에 따라 폰트의 크기가 변하며, 진해집니다. 1부터 6까지 사용할 수 있으며, 숫자가 커질수록 폰트의 변화는 작아집니다. 제목 태그 표현 h1부터 h6까지의 변화를 보기 위해 문장을 작성합니다. h1~h6 태그의 변화를 확인해봤습니다. h태그의 숫자가 커질수록 폰트의 크기와 굵기는 반대로 작아집니다. [5. 단락 태그(P)] 단락 태그(P Tag) 문장의 단락을 표현할 떄 사용합니다. 쉽게 말해서 문장간의 구분을 지을 떄 사용되는 태그 입니다. 범위를 지정해서 문장을 구분 지으므로, 관리하기 용이합니다. ※사용 방법 문장 단락 태그 표현 문장들을 구분짓기 위해 p 태그를 사용합니다. 문장간의 구분이 지어진 것을 확인할 수 있습니다. 앞으로 자주 사용하는 태그 중 하나이므로 유용하게 사용하도록 합시다. [4. 줄바꿈 태그(BR)] 줄바꿈 태그(BR Tag) br태그는 새로운 줄을 표현할 때 사용하는 태그이며 윈도우의 Enter키 같은 역할을 합니다. 닫힘 태그 없이 단독으로 사용하며, 비슷한 태그로는 P태그가 있습니다. ※ 사용 방법 줄바꿈 태그 표현 br 태그를 사용해서 HTML elements 문장이 새로운 줄로 표현될 수 있도록 줄 바꿈을 해보겠습니다. HTML 문장이 새로운 줄로 표현된 것을 확인할 수 있습니다. br 태그를 사용하게 되면, 새로운 줄이 br 태그의 개수만큼 생성됩니다. 윈도우의 Enter 키와 똑같은 역할을 하고 우리에게 친숙한 의미를 갖는 태그이므로 앞으로 유용하게 쓰도록 합시다. [3. 밑줄 태그(U)] 밑줄 태그(U Tag) 문장에 밑줄을 그을 때 사용하는 태그입니다. ※ 사용 방법 밑줄 그을 문장 밑줄 태그 표현 에디터를 이용해 u 태그를 사용합니다. 웹 페이지에 u 태그가 표현된 것을 확인할 수 있습니다. 이전 1 2 3 다음
