속성(attribute)

이미지를 넣는 태그의 이름은 img이다(image의 줄임말)

태그를 만든 사람들은 태그 이름만으로는 정보가 부족하다는 것을 알게되었고
그로인해 새로운 문법을 도입하게 된다.

그것이 바로 속성이다.
img 태그에 source의 줄임말인 src를 붙여 코드를 작성하면 이미지가 생성이 된다.

Ex)

이렇듯 src라는 속성을 통해 이미지를 불러올 수 있게 된 것이다.

내 컴퓨터에 있는 이미지를 등록하고 싶다면
일단 저작권에 침해되지 않는 이미지를 다운로드해 프로젝트 폴더에 위치한 뒤
src 주소에 그대로 적어주면 된다.

속성은 태그의 이름만으로는 정보가 부족할 때 사용되고,
속성이라는 문법이 추가되면서 이제 태그는 보다 풍부한 표현력을 갖게 될 것이다.

부모 태그와 자식 태그

ul,li,ol 태그를 생각해보자

• 1.ul(Unordered List):

  ul 태그는 정렬되지 않은 목록을 나타냅니다.
  목록의 각 항목은 li (List Item) 태그로 묶여야 합니다.
  브라우저는 일반적으로 이 목록을 점 또는 다른 기호로 마크하여 보여줍니다.

• 2.li 태그 (List Item):

  li 태그는 목록의 각 항목을 나타냅니다.
  ul 또는 ol 태그 내에서 사용되며, 각 항목을 포함하는 역할을 합니다.

• 3.ol 태그 (Ordered List):

  ol 태그는 정렬된(순서가 있는) 목록을 나타냅니다.
  목록의 각 항목은 역시 li 태그로 묶여야 합니다.
  브라우저는 보통 숫자 또는 다른 기호로 항목을 마크하여 보여줍니다.

웹 페이지가 깨지는 경우

영어가 아닌 문자로 웹페이지를 만들면 아래와 같이 문자가 깨지는 경우가 있다

Ex)

에디터의 하단을 보면 UTF-8이라고 적혀 있는게 보일텐데 이건 웹 페이지가 UTF-8 방식으로 저장되었다는 뜻이다.
UTF-8로 저장했기 때문에 웹페이지를 열 때도 UTF-8 방식으로 해석해서 열어야 한다는 뜻이다.

※UTF-8이란?
UTF-8은 유니코드(Unicode)를 인코딩하기 위한 문자 인코딩 방식 중 하나입니다. 유니코드는 전 세계의 모든 문자와 기호에 대한 표준 코드 포인트를 제공하는 국제적인 문자 집합입니다. UTF-8은 이러한 유니코드 문자들을 컴퓨터에서 표현하고 저장하기 위한 방법 중 하나로서 널리 사용되며, 웹과 소프트웨어 개발 등 다양한 분야에서 많이 사용됩니다

HTML 태그의 제왕(a 태그)

HTMl의 약자
HyperText Markup Language의 HyperText가 바로 이 태그를 의미하는데
이것은 바로 anchor의 첫글자 a를 딴 a태그이다.
앵커는 배가 정박할 때 사용하는 닻을 의미한다.
정보의 바다에 정박한다는 의미의 시적인 표현인 a태그가 어떤 기능을 하는지 알아보자.

a태그의 기능은 링크이다.
링크거는 기능을 알아보기 위해 검색창에 html link만 검색하면
href에 대한 글들이 검색된다.
href는 HyperText Reference의 약자이다.