HTML Tags
각각의 의미를 가지고 있어 용도와 쓰임에 맞게 잘 사용해야 한다.
tag의 종류
- 링크
- 이미지
- 목록
- 제목
자세한 내용은 다음 사이트에서 확인가능허다
https://www.w3schools.com/TAGS/default.ASP
- 붉은 색으로 나오는 것들은 최신표준인 HTML5에서 지원되지 않는 아마 브라우저에서 오류는 안나지만 사용해서는 안되는 것이다.
실습코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<h1>반갑습니다</h1>
여기 여러분들이 좋아하는 과일이 있어요.
<ul>
<li><a href="http://www.apple.com">사과</a></li>
<li>사과</li>
<li>메론</li>
<li>귤</li>
</ul>
</div>
</body>
</html>div : 문단역할
ul : 순서없는 리스트
li : ul 안에서 항목이 됨
a : 링크 걸기
꿀팁
ul>li*4를치고 Tap을 치면 자동으로 li가 4개인 항목들의 틀이 많들어진다.
HTML Layout tags
- 레이아웃: HTML화면을 구성하는 어떠한 기본적인 모습들을 의미
- 레이아웃을 구성하는 태그이다.
- header
- section
- nav
- footer
- aside
footer는 제대로 인삭하는 브라우저 지원범위가 제한이 있다.
오류는 나지 않지만 footer가 생겼다는 것이 HTML5에서 새로 추가된 태그라서 보통 데스크탑 버전에선 쓰지 못하고 최신 브라우저들이 많은 모바일환경에서는 footer사용이 가능하다.
사실 내부에서의 어떤 동작은 의미만 footer,header라고 읽는 것이지 div와 같은 일을 한다.
- html의 전체구성은 위와 같은 태그들로 이루어진다.
HTML 구조와 설계
- 웹사이트를 큰덩어리 header, navigation, search, 본문..하고 나누다 보면 그 하위에 또 목록을 나누고 하는 식으로 웹사이트를 만들 수 있다.
- 영역안에 다른 영역이 있다면 점점 안으로 좁혀가면서 HTML tag를 사용하면서 완성해나가는 것이다. 이때 CSS코드전에 HTML로 먼저 문서의 구조를 잡아나가는 것이 개발단계에서 유리하다. 그래야 뼈대가 튼튼하게 된다.
실습과정
<!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>
<div> <!-- section태그를 사용했었지만, 별 의미없는 container에는 section태그가 적절하지 않아서 수정합니다 -->
<nav><ul>
<li>Home</li>
<li>Home</li>
<li>About</li>
<li>Map</li>
</ul></nav>
<div>
<button></button>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<button></button>
</div>
<div>
<ul>
<li>
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
</li>
<li>
<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>
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
</li>
</ul>
</div>
</div>
<footer>
<span>Copyright @codesquad</span>
</footer>
</body>
</html>class와 id 속성
- 고유한 값이 id와 중복사용이 가능한 class.
id
- identifier의 약자
- 아주 고유한 속성
- 아주 고유한 값이라 하나만 써야된다고 했는데 사실 하나이상 써도 오류가 나지 않음
- 개발자들이 의도적으로 하나만 쓰려고 노력해야 한다.
class
- HTML안에 중복해서 여러군데에 같이 쓸 수 있다.
- 물론 한군데에서만 써도 된다.
- class는 여려개를 써서 어떤 동일한 CSS 스타일을 부여할 수 있다.
- 비슷한 스타일을 여기저기에 같이 표현하기 위해서 CSS 클래스를 어떤 하나를 만들어두고, class이름을 여기저기에 부여함으로써, 같은 class 이름을 가진것들이 같은 스타일을 갖게 된다.
- id대신 class를 사용할 수 있다.
- 해당 페이지에서 해당 class속성을 가진 어떤 UI가 하나밖에 없다고 하여도 class를 써서 부여할 수 있다.
- 이 부분은 팀이나 개인이 개발할때 본인이 룰을 만들고 사용하면 된다.
- 그래서 필요한 스타일은 모두 다 class를 입힌다.
- 그리고 id는 어떤 분명하게 고유한 UI. 하나밖에 없는 UI일때는 id를 쓰면된다.
개발자