안녕하세요. 저자입니다. HTML5의 가장 큰 특징은 HTML 문서의 구조와 기능을 설정해 주는 태그들이 대거 등장한 것입니다. 예를들어 ‹header› ‹article› ‹footer› 등의 태거들은 문서의 구조를 만들어 줍니다. 또한 ‹figure> 태그 또한 구조를 만들어 주는데, 사진을 넣을때 사용됩니다.
하지만 이러한 태그 자체는 디자인 기능이 없습니다. 문서의 구조를 나타낼 뿐이죠. HTML 문서의 디자인은 CSS을 통해 가능합니다. 따라서 figure 태그 내부에 class-"ceo" 라고 클래스 선택자를 지정해 준것입니다.
또한 문의 하신 div 태그는 아무런 의미가 없는 태그입니다만, 블럭을 설정할때 설정합니다. 이와 같은 태그는 span 태그가 있습니다. 이 두개의 태그는 하나의 블럭이나, 문서내의 인라인에 CSS을 이용해 디자인을 입힐때 사용됩니다.
간단하게 HTML 문서에서 ‹header› ... ‹/header› 라는 구문이 있으면, CSS에서는 header { 속성값 } 이렇게 지정해 줄 수 있습니다.
하지만 ‹header› 내부에 로고와 로그인 폼이 있는데, 로고는 오른쪽에 배치하고 로그인 폼은 왼쪽으로 배치하려면 ‹div id="logo"› 로고 ‹/div› ‹div id="login_form› 로그인 폼 ‹/div› 으로 구분해 주는 것입니다.
그렇게 되면 CSS 에서는
#logo { 속성값 } #login_form { 속성 값 }
으로 처리합니다.
그리고 이미지에 alt 를 넣는 이유는 시각 장애인들인 경우 이미지를 볼 수 없기 때문에, 웹 페이지를 읽어 주는 리더 에서 해당 이미지에 alt 들어 있는 값을 읽어 줍니다. 따라서 시각 장애인들까지 배려한다면 alt="이미지 설명" 을 해주는 것이 좋습니다.
HTML5의 가장 큰 특징은 HTML 문서의 구조와 기능을 설정해 주는 태그들이 대거 등장한 것입니다.
예를들어 ‹header› ‹article› ‹footer› 등의 태거들은 문서의 구조를 만들어 줍니다.
또한 ‹figure> 태그 또한 구조를 만들어 주는데, 사진을 넣을때 사용됩니다.
하지만 이러한 태그 자체는 디자인 기능이 없습니다.
문서의 구조를 나타낼 뿐이죠. HTML 문서의 디자인은 CSS을 통해 가능합니다.
따라서 figure 태그 내부에 class-"ceo" 라고 클래스 선택자를 지정해 준것입니다.
또한 문의 하신 div 태그는 아무런 의미가 없는 태그입니다만, 블럭을 설정할때 설정합니다.
이와 같은 태그는 span 태그가 있습니다.
이 두개의 태그는 하나의 블럭이나, 문서내의 인라인에 CSS을 이용해 디자인을 입힐때 사용됩니다.
간단하게 HTML 문서에서 ‹header› ... ‹/header› 라는 구문이 있으면, CSS에서는
header { 속성값 } 이렇게 지정해 줄 수 있습니다.
하지만 ‹header› 내부에 로고와 로그인 폼이 있는데, 로고는 오른쪽에 배치하고 로그인 폼은 왼쪽으로 배치하려면
‹div id="logo"› 로고 ‹/div› ‹div id="login_form› 로그인 폼 ‹/div› 으로 구분해 주는 것입니다.
그렇게 되면 CSS 에서는
#logo { 속성값 }
#login_form { 속성 값 }
으로 처리합니다.
그리고 이미지에 alt 를 넣는 이유는 시각 장애인들인 경우 이미지를 볼 수 없기 때문에, 웹 페이지를 읽어 주는 리더 에서 해당 이미지에 alt 들어 있는 값을 읽어 줍니다.
따라서 시각 장애인들까지 배려한다면 alt="이미지 설명" 을 해주는 것이 좋습니다.
충분한 답변이 되셨는지요.