촬리의늘솔길

네이버 부스트코스 (5) 본문

✍~2022/WEB

네이버 부스트코스 (5)

리촬리 2022. 2. 11. 01:25

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>

 

 

생각해보기

  1. 좋은 class 이름을 짓는 규칙은 무엇일까요? id를 다른 웹사이트들에서는 어떻게 실제로 사용할까요? 어디에 id속성을 부여했는지 한번 찾아보세요.
  2. 요즘에는 data속성이라는 것도 자주 사용합니다. tag에 추가적인 데이터 정보를 표현하기 위함입니다. 이 부분도 같이 살펴보면 좋습니다. 
#class #id
공유하기
 좋아요 42
 
728x90

'✍~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
'✍~2022/WEB' Related Articles more