(C:)
drawing
HTML을 통한 웹사이트 구조 설계
HTML을 통한 웹사이트 구조 설계
HTML이란
정보를 쉽게 표현하기 위해 포맷을 통해 구조화한 마크업 언어
이를 주력으로 개발하면 Markup 개발자
| <head> | 화면에 보여지기 위한 추가적인 정보(메타정보)를 담고 있는 부분 |
|---|---|
| <body> | 화면에 보여지는 부분 |
별도의 개발환경이 필요없이 웹사이트에서 바로 HTML/CSS/JS 편집이 가능한 에디터 JS Bin 을 사용해 실습을 진행한다.
태그의 종류
앵커(Anchor) 태그
<a href="www.naver.com">네이버로 이동</a>
- 주소를 알려주는 속성값 href=””, 속성은 있을 수도 있고, 없을 수도 있다.
- 이 주소를 브라우저가 토큰 단위로 잘라서 웹사이트로 이동할 수 있도록 화면에 뿌려준다.
시맨틱 태그
HTML 태그에는 다양한 종류가 있고, 제각각의 쓰임새를 가진다.
이렇게 ‘각각의 의미를 지닌다’는 것을 Semantic하다고 하는데, 의미를 유추하기 쉬운 태그들을 가리켜 시맨틱 태그라고도 한다.
각각의 태그는 오용하지 않도록 그 쓰임새에 따라 올바르게 사용해야 한다. 오류가 나지 않는다고 부적절하게 가져다 쓸수록 가독성이 떨어지게 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- 더미 영역을 표시하는 div 태그 -->
<div>
<h1>반갑습니다.</h1>
여기 여러분들이 좋아하는 과일이 있어요.
<!-- list set -->
<!-- JS Bin에서는 태그를 입력하고 tab키를 누르면 자동완성됨 -->
<ul>
<!-- ul>li*4 를 입력한 뒤 tab키를 누르면 ul 태그 하위에 각각의 li 태그 생성 -->
<li><a href="www.apple.com">사과</a></li>
<li>바나나</li>
<li>메론</li>
<li>귤</li>
</ul>
</div>
</body>
</html>
레이아웃 설계
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- 주요 레이아웃 구성은 HTML layouts 을 검색하면 확인해볼 수 있다 -->
<!-- https://www.w3schools.com/html/html_layout.asp
https://webstyleguide.com/wsg3/6-page-structure/3-site-design.html -->
<!-- header, footer, nav, aside 와 같은 시맨틱 태그는 HTML5에서 등장했으며
이보다는 브라우저 호환성을 고려해 div 태그에 class값을 부여하는 경우가 대부분이다 -->
<header>header</header>
<!-- 일반적으로 내부 본문 영역은 div로 한데 묶어 container나 wrap이라는 id값을 준다 -->
<div id="container">
<nav>
<ul>
<li>home</li>
<li>news</li>
<li>sports</li>
</ul>
</nav>
<aside>
<ul>
<li>로그아웃</li>
<li>오늘의날씨</li>
<li>운세</li>
</ul>
</aside>
</div>
<footer>footer</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML Structure Design</title>
</head>
<body>
<header>
<!-- 헤더 내부에 존재하는 타이틀 -->
<h1>Company Name</h1>
<img src="...." alt="logo">
</header>
<!-- 섹션은 네비게이션 바, 좌우 롤링이 되는 스와이핑 메뉴, 하단 디스크립션으로 구성 -->
<section>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>sitemap</li>
</ul>
</nav>
<section>
<button></button>
<!-- in JS Bin: (div>img)*3 Tab -->
<div><img src="...." alt=""></div>
<div><img src="...." alt=""></div>
<div><img src="...." alt=""></div>
<button></button>
</section>
<section>
<ul>
<li>
<h3>About Us</h3>
<div>~~~</div>
</li>
<li>
<h3>What We Do</h3>
<div>~~~</div>
</li>
<li>
<h3>What We Do</h3>
<div>~~~</div>
</li>
</ul>
</section>
</section>
<footer><span>Copyright @..</span></footer>
</body>
</html>
ID와 Class
ID
- Identifier의 약자이듯, 고유한 속성으로 한 HTML 문서에 하나만 사용 가능(=각각의 id는 고유한 id값을 지님)
- 사실은 하나 이상 써도 오류가 나지는 않지만 가독성을 위해서 하나만 써줘야 함
- 고유한 id값이 있으면 각각에 특별한 제어를 할 수 있음
Class
- 하나의 HTML 문서 안에 중복해서 사용 가능(=동일한 class 값을 부여해도 됨)
- 동일한 CSS style을 부여하여 일관성 있는 스타일을 적용
- 동일한 class 속성값을 가지는 모든 태그에 동일한 스타일을 적용하기 위해 필수적으로 사용됨
그러면 앞서 레이아웃 설계에서 작성했던 문서에 id값과 class값을 부여할 수 있다.
<!-- id 속성은 고유한 영역에, class 속성은 동일한 의도로 작성된 소스에 부여하는 것을 권장 -->
<section>
<nav id="nav-section">
<ul>
<li>home</li>
<li>about</li>
<li>sitemap</li>
</ul>
</nav>
<section id="swipe-section">
<button></button>
<div><img src="...." alt=""></div>
<div><img src="...." alt=""></div>
<div><img src="...." alt=""></div>
<button></button>
</section>
<section>
<ul>
<li class="our_description">
<h3>About Us</h3>
<div>~~~</div>
</li>
<li class="our_description">
<h3>What We Do</h3>
<div>~~~</div>
</li>
<li class="our_description">
<h3>What We Do</h3>
<div>~~~</div>
</li>
</ul>
</section>
</section>
참고
- 초보자를 위한 HTML & CSS 동작과 원리
- JS Bin
- 시맨틱 태그(Semantic Tag) VS 태그(non-semantic)
- 시맨틱하게 HTML을 짠다는 것.
- W3School HTML Layouts
- HTML Structure Design by Patrick J. Lynch and Sarah Horton
그냥 공부하는 W e B L o g
shoshosh.github.io