웹사이트 제작시 고려사항
- 웹 표준 : 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
- 웹 접근성 : 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식
- 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법
Semantic Tag
"의미가 있는 태그"라는 뜻
= HTML tag들 중에서도 나름의 의미가 있는 태그 / 결과는 시각적으로 같지만, 말하는 의미적으로 차이
>> 이렇게 div 태그에서 class로만 구조를 만들 수 있지만 직관적으로 어느부분이 어떤 의미를 하는지 알 수 없다.
하단의 사진처럼 semantic tag를 사용한다면, 직관적으로 의미를 알아보기가 쉽다.
1. SEO ( Search engine optimization )
검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 테그를 잘 활용한다면,
특정 키워드로 검색했을 때 내가 만든 웹싸이트가 검색창에 노출될 수 있다.
브라우저의 검색 엔진이 내가 만든 웹싸이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수있다.
2. 웹 접근성
웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹사이트를 이용하는 경우,
적절한 시멘틱 태그로 잘 만들어진 웹사이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있다.
3. 유지보수성
단순히, div tag로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수있기 때문에,
다른 개발자들이 코드를 유지보수하기가 더 편해진다.
구조 잡을 때 사용하는 Tag (Box)
header
- 웹사이트의 머리글을 담는 공간
- 제목, 웹사이트를 나타내는 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.
nav
- 메뉴 버튼을 담는공간 (navigation)
<ul>,<li>,<a>와 함께 사용- header 안에 여러가지 메뉴들이 모여있다면, div로 나누지 말고 nav 태그를 사용
<header> <!-- 상단 영역 -->
<nav> <!-- 메뉴 영역 -->
</nav>
</header>main
- 문서의 주요 내용을 담는 태그
- 현재 웹사이트에서 중요한 컨텐츠는 main 태그 안에 넣기
aside
- main 안에서도 페이지의 컨텐츠와 직접적인 상관이 없는 내용들은 여기에 집어넣는 게 좋다. ex) 광고, 페이지와 연관된 다른 링크들 등
article, section
- main 안에서도 div로만 구성하기보다는 용도에 따라서 이 두개의 tag를 사용해볼 수있다.
footer
- 가장 하단에 들어가는 정보를 표기할 때 사용
tag 비교
- i vs em
- b vs strong
- ol vs ul vs dl
- img(html) vs background-image(css)
- table(html) vs flex, grid(css)
- button vs a
- article vs section
1. i vs em
- 둘다 이텔릭체로 폰트 타입을 변환을 의미
<i>: italic의 약자 / 시각적으로만 나타내고 싶을 때<em>: emphasize 약자 / 주위 텍스트와 비교했을 때 해당 부분을 강조하고 싶은 경우에 사용
2. b vs strong
- 둘다 폰트를 굵게 만들어줌
<b>: bold의 약자 / 단순 시각적 요소로 사용<strong>: 중요, 긴급, 경고'의 의미
3. ol vs ul vs dl
<ol>: ordered list / 순서가 있는 리스트<ul>: unor
dered list / 순서가 없는 리스트<dl>: description list / 설명들이 묶고 싶을 때, 그 목록을 나타내기 위해 사용
dt는 목록을 나타내는 단어 그리고 dd은 그 단어에 대한 부가적인 설명
4. vimg(html) vs background-image(css)
<img>: 이미지 자체에 어떠한 의미가 있는 경우 /
background-image: 스타일링 목적만 있다면 background-image를 사용
>>해당 이미지가 없어도 내용적으로 문서를 읽는데 전혀 지장이 없다면 background-image를 통해 CSS 파일 안에 이미지를 집어 넣음
5. table(html) vs flex, grid(css)
HTML에서 table 태그를 쓰면 되겠지만
단순히 아이템을 table이나 grid 형식으로 표현하기 위해서 table 태그를 사용하는 것은 추천하지 않는다.
테이블을 스타일링 할 때 CSS flex나 grid를 통해서 더 아름답고 섬세하게 스타일링을 할 수 있다.
따라서 문서 안에서 자체적으로 의미 있는 태그가 필요한 건지
내가 CSS로 스타일링을 목적으로 태그를 사용하는 건지에 따라서 선택할 수 있다.
6. button vs a
CSS로 스타일링을 해놓으면 다 똑같은 버튼으로 보임
button: 특정한 액션을 취할 때a: 순수하게 이동을 하는 목적일 때
>> home과 login 이 있을 때 home은 어떤곳으로 이동하는 것임으로 a태그
login은 특정한 액션을 취하는 것임으로 button이 적절함
7. article vs section
-
<article>: 이 자체만으로 독립된 페이지에 보여졌을 때 전혀 문제가 없다면 사용
main 안에 있는 다른 내용들과 전혀 상관없이, 독립적으로 고유한 정보를 나타낼 때 사용할 수 있다.
>> 서로 연관있는 내용을 묶어주고 싶다면 section을 이용
-
<section >: 서로 연관있는 내용을 묶어줄 때 사용
>> section은 article 안이나 main안에서나 연관있는 내용을 묶어줄 때 사용할 수 있음
출처 : https://www.youtube.com/watch?v=T7h8O7dpJIg
참고:
