본문 바로가기

Webstoryboy

Category

Explanation

HTML/Topic

(2)
시멘틱 태그 01. 참고 : 시맨틱 태그 난이도 쉬움 소스 다운로드 영상보기 소개 안녕하세요!. 웹스토리보이입니다. 이번 시간에는 시멘틱 태그에 대해서 알아보겠습니다. 시멘틱 태그가 있기 전에는 코딩을 할 때, 레이아웃 작업을 할 때 코드로 작업을 하였습니다. 하지만 웹 표준에 대한 개념과 웹 접근성에 대한 개념이 중요하게 되면서, 의미가 없는 요소를 사용하기 보다는 의미를 부여하기 시작했습니다. 즉 헤더 영역을 만들기 위해서는 주로 태그를 만들고 클래스 또는 아이디에 header라고 이름만 부여했습니다. 이런 부분을 태그를 만들어서 사용하기 시작했습니다. 즉 의미를 부여하고 그 의미에 맞는 태그를 쓰기 시작했습니다. 이 것을 시멘틱 태그라고 합니다. 즉 의미가 부여된 태그를 말합니다. 이렇게 시멘틱 태그를 사용하면..
블록구조/인라인구조 01. 참고 : 블록구조/인라인구조 난이도 쉬움 소스 다운로드 영상보기 소개 안녕하세요!. 웹스토리보이입니다. 웹 사이트 제작에 있어 가장 기본이 되는 블록 구조와 인라인 구조에 대해서 알아보겠습니다. 블록(block)은 하나의 박스, 인라인(inline)은 하나의 텍스트라고 생각하시면, 이해하는데 도움이 됩니다. 블록 구조에는 대표적으로 div, p, h1~h6, ul, li, ol, table 등이 있으며, 인라인 구조에는 대표적으로 span, a, em, i, strong 등이 있습니다. 인간도 남자, 여자가 있는 것처럼, 태그도 이렇게 블록 구조, 인라인 구조로 분류할 수 있습니다. 이렇게 얘기하면 학생들 중에 게이는 어디인가요? 라고 물을 수 있겠지만, 태그에도 게이가 있습니다. 🤬 그건 아래 ..
1