티스토리 뷰
1) HTML 태그
- 태그에는 의미가 있다: Semantic Tag
> 의미에 안 맞게 태그를 써도 화면에 표시는 되지만, 시각장애인을 위한 페이지 리딩 프로그램이나 검색엔진에서의 인식 등에서 문제가 생길 수 있다. 시맨틱 웹의 정신.
<!-- -->: HTML에서의 주석
<div>: 영역을 정의
<font>: 이것처럼 스타일을 정의하는 태그들은 가급적 쓰지 말고 CSS로 대체하는 것이 좋음
+ jsbin.com의 기능으로 li*4라고 치고 Tab을 치면 <li> 태그 4개를 만들어주는 그런 게 있다는데, 내가 하면 <li> 가 아니라 CSS쪽의 뭔가가 나온다. CSS가 아니라 HTML 창에서 작업하고 있는데 왜...?
2) HTML 레이아웃 태그
레이아웃 (페이지의 구성, 배치) 을 위한 태그들.
사실 기능 자체는 <div> 랑 똑같은데, 이 부분이 어떤 영역이다라는 의미를 부여하는 역할이다. 딱히 aside를 쓴다고 페이지의 왼쪽으로 엘리먼트가 이동하거나 그런 것은 아님.
크롬 개발자 도구 -> Elements -> Inspector (왼쪽상단의 버튼)
페이지의 각 부분에 마우스를 갖다대면 어떤 부분인지 볼 수 있다.
종류: <header>, <section>, <nav>, <footer>, <aside>
+ 이 태그를 직접 쓰지 않고 <div class="header"... 와 같이 클래스를 이용해서 표시해줄 수도 있다. PC용 사이트에서는 보통 클래스를 이용하고, 모바일 사이트에서는 레이아웃 태그를 쓰는 경우가 많다고 함
3) HTML 구조 설계
태그들을 계층적으로 사용해서 페이지의 각 영역을 HTML로 표현하자.
영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서...
예를 들어서 이런 페이지를 만든다고 하면,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
// 일단 크게 header, 본문부분, footer로 3영역으로 먼저 나눈다
<header>
<h1>Company Name</h1>
<img src="..." alt="logo">
</header>
// 본문영역 안에서도 또 Home들이 있는 탭 영역, 사진이 스크롤되는 영역, 글자들이 있는 영역으로 div 태그를 사용해서 3영역으로 나눈다
<div>
<nav><ul> // 저 Home들이 있는 부분은 네비게이션 바이며, 리스트로 나타낼 수 있음
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul></nav>
<div>
<button></button>
<div><img src="aa" alt=""></div>
<div><img src="bb" alt=""></div>
<div><img src="cc" alt=""></div>
<button></button>
</div>
<div>
<ul>
<li>
<h3>About Us</h3>
<div>...</div>
</li>
<li>
<h3>What We Do</h3>
<div>...</div>
</li>
<li>
<h3>Contact Us</h3>
<div>...</div>
</li>
</ul>
</div>
</div>
<footer>
<span>Copyright @codesquad</span>
</footer>
</body>
</html>
4) class와 id 속성
- id: 고유한 값을 가짐. 즉 중복될 수 없으므로 개체 하나하나에 특별한 제어를 하거나 검색할 때 사용
- class: 중복해서 사용 가능. 같은 CSS 스타일을 여러 군데에 동일하게 적용하기 위해서 쓰는 것으로, 페이지의 전체적인 스타일을 일관성있게 지정하기 위해서 필수적. 하나의 태그가 여러개의 class를 가질 수도 있음 (공백으로 구분)
회사에 따라 id를 안쓰고 class만 쓰기도 한다.