[1] 강의
웹 프로그래밍(풀스택)
2. HTML - FE
4) class와 id 속성
[2] 개념 정리
ID
고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다.
Class
하나의 HTML문서 안에 중복해서 사용 가능합니다.
하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.
이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 합니다.
예를 들어 ID사용을 금하는 곳도 있습니다.
class로만 사용하는 곳도 있습니다.
그건 팀이 결정하기 나름입니다.
[3] 강의 정리
이번 시간에는 HTML을 만들 때 속성 중에 class와 id를 쓸 수 있다. 두 가지를 어떻게 사용하지는 한번 알아보겠다. id는 identifier의 약자기 때문에 아주 고유한 속성이고, class는 하나의 HTML 안에 중복해서 여러 군데에 같이 쓸 수 있다. 물론 한 군데에서만 써도 된다. id 같은 경우에는 고유한 값이어야 되기 때문에 하나만 써야 된다고 했다. 사실은 하나 이상 써도 어떤 오류가 나오지는 않는다. 그러면 개발자들이 하나를 의도적으로 쓰려고 노력을 해야 되는 것이다. class, id를 실제로 어떻게 쓰는지 한번 웹사이트를 통해서 알아보겠다. 이 body 태그 같은 경우에 보면 하위에 여러가지 div들을 크게 나웠다. u_skip, wrap 이런 것들을 나눴는데 여기에 wrap이라고 표현했다. 이런 것들은 겉은 다 id를 쓴 것 같다. 브라이저 호환성 이슈 때문에 footer, section, nav 이런 것들을 네이버에서 잘 안 쓰는 것 같다. IE 예전 버전을 지원해야 되기 때문에. 대신에 division 테이블 쓰고 id를 줘서 어떤 고유한 것들을 표시했다. 사실은 이 사이트에서 footer는 하나밖에 없을 거기 때문에 이렇게 id 값으로 준다. container도 하나다. 그렇기 때문에 이 container 값을 줄 수가 있다.
이 뉴스들을 한번 살펴보도록 하겠다. 여기 보면 하위에 비슷비슷한 목록들이 쭉 있다. 각각의 어떤 고유한 id 값을 가지고 있는 걸 확인할 수 있다. 이 id를 안 줘도 되는데 이렇게 준 이유는 각각 하나하나 어떤 특별한 제어를 할 때 얘를 쉽게 찾기 위함이다. 셀렉터라는 걸로 얘네들을 순서별로 얘는 세 번째, 네 번째 이렇게 찾아도 되는데 분명한 어떤 이름 정보라고 할 수 있다. 고유한 id 값이기 때문에 이 id만 가지고 쉽게 우리가 찾을 수가 있는 것이다. 여기서 혹시 class 중에 newssa, 이런 class가 있다. 이 하단에서 검색을 보면, newssa 이렇게 검색을 해보면 여러개 있는 걸 알 수 있다. 이 class는 이렇게 여러 개를 써서 어떤 동일한 CSS 스타일을 부여할 수 있다. class의 용도는 명확한데 비슷한 스타일을 여기저기에 같이 표현하기 위해서 CSS 클래스를 어떤 하나를 만들어주고, 여기 class는 해가지고 그 이름을 부여함으로 해서 여기저기 같은 class 이름을 같은 class 이름을 가진 것들이 같은 스타일을 갖게 되는 것이다. 예를 들어 제가 이 넓이 값을 이 class 값을 수정을 하겠다 그랬을 때 200이다 그러면 이 class를 가진 모든 녀석들이 넓이 값이 다 바뀐 것이다. 이렇게, 그런 걸 확인 할 수 있다.
이 전편에서 보신 분들은 이해를 할 거 같은데 사실은 이 li 왼쪽 About us, What we do 이런 거에도 하나의 동일한 class를 부여할 수 있을 것 같다. 그래서 ul, li가 다른 곳에도 있기 때문에 이렇게 표현하면 안된고 여기다 추가적인 걸 표현할 수가 있다. about us, 예를 들어서 우리에 대한 description. our_description, 우리에 대한 설명이다. 그래서 이 class를 어떻게 만들어 두고 우리가 아직 CSS를 모르는 분들은 좀 이해하기 어려울 수 있지만 어떤 옷을 입힌다. 같은 옷을 입혀서 이 세가지의 룩이 똑같다. 모습이 똑같게 하기 위해서 class를 이렇게 줄 수도 있다. 또 한편으로는 우리가 무엇을 할 수 있냐면 이 겉에 해당하는 이 내부 이런 것들은 유니크하니까. 이 section들은 예를 들어서 이 navigation을 구성하는 거랑 이 하위에 있는 것들은 두 개 다 section 태그를 썼다. 이 경우에도 하나밖에 없기 때문에 navsection - 라던가 이렇게 표현을 할 수가 있다. nav-section 이렇게 이름을 줄 수도 있고 이름 짓는 네이밍 컨벤션도 이제 좋은 룰을 찾아가지고 쓰면 된다. 이쪽은 roll-section 이렇게 했다. 그래서 뭐가 움직인다. 이쪽은 navi다.
이렇게 id 값으로 사실 이건 하나밖에 없다. 이런 어떤 고유한 정보를 딴데 쓸 일은 없기 때문에 이 section은 고유한 어떤 영역을 혼자만 차지하고 있긴 때문에 id 값을 놓는다. 얘도 id 값을 줬고 물론 얘도 class를 줘서 할 수도 있다. 이 페이지에서 이 class 속성을 가진 어떤 UI가 하나밖에 없다고 하여도 class를 써서 부여할 수도 있다. 이건 팀이나 개인이 개발할 때 본인이 룰을 만들어두고 사용하면 된다. 그래서 필요한 스타일은 모두 다 class를 입힌다. 그리고 id는 어떤 분명하게 고유한 UI. 하나밖에 없는 UI다 그럴 때는 id를 쓰시면 된다. 다른 웹사이트에서 id를 어떻게 썼는지 한번 살펴보시면서 이해를 돕는 것도 좋은 방법이다.
[4] 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<h1>Company Name</h1>
<img src="..." alt="logo">
</header>
<section id="nav-section">
<nav><ul>
<li>Home</li>
<li>Home</li>
<li>About</li>
<li>Map</li>
</ul>
</nav>
<section id="roll-section">
<button></button>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<button></button>
</section>
<section>
<ul>
<li class="our_diescriptipn">
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
</li>
<li class="our_diescriptipn">
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus, corporis, dolorum fugiat tenetur porro. Aspernatur commodi, ea suscipit non? Molestiae nulla explicabo debitis provident nostrum dolorem minima reiciendis suscipit?</div>
</li>
<li class="our_diescriptipn">
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
</li>
</ul>
</section>
</section>
<footer>
<span>Copyright @codesquad</span>
</footer>
</body>
</html>'강의 > 웹 프로그래밍(풀스택)' 카테고리의 다른 글
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리 (0) | 2022.03.24 |
|---|---|
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-1 강의 정리 (0) | 2022.03.24 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-3 강의 정리 (0) | 2022.03.22 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-2 강의 정리 (0) | 2022.03.22 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-1 강의 정리 (0) | 2022.03.21 |
