HTML 구조설계
구조화 설계는 마치 문서를 쓴다고 생각하면 쉽습니다.
현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML개발을 시작합니다.
즉 어떠한 화면을 보면서 그대로 구현하는 것이죠.
그 화면을 보면서 구조를 분석해야 합니다.
먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리합니다.
그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적입니다.
각 영역 안의 내용 역시 여러 가지 형태일 겁니다.
목록을 나타내거나, 이미지를 나타내거나, 문단을 나타낼 수 있습니다.
이때마다 적절한 태그를 쓰면 됩니다.
그러면서 영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 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>
<section>
<nav><ul><li>home</li>
<li>home</li>
<li>about</li>
<li>map</li></ul></nav>
<section>
<button>-></button>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
</section>
<section><ul>
<li><h4>about us</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda obcaecati, velit aut labore veritatis tempore sequi nam laboriosam cumque architecto, rem fugit fuga facere sint laborum voluptates dolores? Tempora, veritatis.</div>
</li>
<li><h3>what we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda obcaecati, velit aut labore veritatis tempore sequi nam laboriosam cumque architecto, rem fugit fuga facere sint laborum voluptates dolores? Tempora, veritatis.</div>
</li>
</ul></section>
</section>
<footer><span>Copytight@haesong</span></footer>
</body>
</html>오홍 헤더 푸터 나누고
섹션 나누고
그안에서 또 목록이나 버튼 이런거 표현
Class와 id의 사용
class의 용도에 따라 css스타일을 부여할 수 있음
ex : newssa
하나의 클래스에 스타일을 만들어두고, 같은 class이름을 부여
ID
- 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
- 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다.
Class
- 하나의 HTML문서 안에 중복해서 사용 가능합니다.
- 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
- 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.
이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 합니다.
예를 들어 ID사용을 금하는 곳도 있습니다.
class로만 사용하는 곳도 있습니다.
그건 팀이 결정하기 나름입니다.
하지만 반대의 경우 즉 모든 것을 id만으로 사용하는 것은 없겠죠?
실습코드
강의에서 진행한 실습 코드입니다.
<!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>
생각해보기
- 좋은 class 이름을 짓는 규칙은 무엇일까요? id를 다른 웹사이트들에서는 어떻게 실제로 사용할까요? 어디에 id속성을 부여했는지 한번 찾아보세요.
- 요즘에는 data속성이라는 것도 자주 사용합니다. tag에 추가적인 데이터 정보를 표현하기 위함입니다. 이 부분도 같이 살펴보면 좋습니다.
'✍2021,2022 > WEB' 카테고리의 다른 글
| 네이버 부스트코스 (6) (0) | 2022.02.13 |
|---|---|
| 네이버 부스트코스 풀스택 (4) (0) | 2022.02.09 |
| 네이버 부스트코스 백엔드 (0) | 2022.02.08 |
| 네이버 부스트코스 풀스택 학습일지(2) (0) | 2022.02.06 |
| 네이버 부스트코스 풀스택 학습일지 (1) (0) | 2022.02.06 |
HTML 구조설계
구조화 설계는 마치 문서를 쓴다고 생각하면 쉽습니다.
현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML개발을 시작합니다.
즉 어떠한 화면을 보면서 그대로 구현하는 것이죠.
그 화면을 보면서 구조를 분석해야 합니다.
먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리합니다.
그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적입니다.
각 영역 안의 내용 역시 여러 가지 형태일 겁니다.
목록을 나타내거나, 이미지를 나타내거나, 문단을 나타낼 수 있습니다.
이때마다 적절한 태그를 쓰면 됩니다.
그러면서 영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 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>
<section>
<nav><ul><li>home</li>
<li>home</li>
<li>about</li>
<li>map</li></ul></nav>
<section>
<button>-></button>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
</section>
<section><ul>
<li><h4>about us</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda obcaecati, velit aut labore veritatis tempore sequi nam laboriosam cumque architecto, rem fugit fuga facere sint laborum voluptates dolores? Tempora, veritatis.</div>
</li>
<li><h3>what we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda obcaecati, velit aut labore veritatis tempore sequi nam laboriosam cumque architecto, rem fugit fuga facere sint laborum voluptates dolores? Tempora, veritatis.</div>
</li>
</ul></section>
</section>
<footer><span>Copytight@haesong</span></footer>
</body>
</html>오홍 헤더 푸터 나누고
섹션 나누고
그안에서 또 목록이나 버튼 이런거 표현
Class와 id의 사용
class의 용도에 따라 css스타일을 부여할 수 있음
ex : newssa
하나의 클래스에 스타일을 만들어두고, 같은 class이름을 부여
ID
- 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
- 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다.
Class
- 하나의 HTML문서 안에 중복해서 사용 가능합니다.
- 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
- 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.
이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 합니다.
예를 들어 ID사용을 금하는 곳도 있습니다.
class로만 사용하는 곳도 있습니다.
그건 팀이 결정하기 나름입니다.
하지만 반대의 경우 즉 모든 것을 id만으로 사용하는 것은 없겠죠?
실습코드
강의에서 진행한 실습 코드입니다.
<!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>
생각해보기
- 좋은 class 이름을 짓는 규칙은 무엇일까요? id를 다른 웹사이트들에서는 어떻게 실제로 사용할까요? 어디에 id속성을 부여했는지 한번 찾아보세요.
- 요즘에는 data속성이라는 것도 자주 사용합니다. tag에 추가적인 데이터 정보를 표현하기 위함입니다. 이 부분도 같이 살펴보면 좋습니다.
'✍2021,2022 > WEB' 카테고리의 다른 글
| 네이버 부스트코스 (6) (0) | 2022.02.13 |
|---|---|
| 네이버 부스트코스 풀스택 (4) (0) | 2022.02.09 |
| 네이버 부스트코스 백엔드 (0) | 2022.02.08 |
| 네이버 부스트코스 풀스택 학습일지(2) (0) | 2022.02.06 |
| 네이버 부스트코스 풀스택 학습일지 (1) (0) | 2022.02.06 |
