daniel7481의 개발일지

[웹 프로그래밍(풀스택)]HTML-FE 본문

Naver Boostcourse

[웹 프로그래밍(풀스택)]HTML-FE

daniel7481 2021. 12. 8. 23:17
반응형

1) HTML Tags

tag의 종류

태그는 그 의미에 맞춰서(semantic) 사용해야 한다.

- 링크

- 이미지

- 목록

- 제목

2)레이아웃을 위한 태그

HTML 화면을 구성하는 기본적인 모습. 상단의 header, 하단의 footer, 본문 이렇게 있다. 대개는 div 안 id에다가 head, footer등을 넣어준다고 한다.

[출처: https://hzoou.tistory.com/21]

3) HTML 구조 설계

HTML 설계의 예

[출처:https://webstyleguide.com/wsg3/6-page-structure/3-site-design.html]

웹사이트를 header, 본문, footer 등으로 나누고 그 안에 또 여러 가지 기능에 따른 UI 등으로 표현 할 수 있다.

실습:

<!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="a" alt="dd"></div>
      <div><img src="a" alt="d"></div>
      <div><img src="a" alt="d"></div>
      <button></button>
    </section>
    <section>
      <ul>
        <li>About us</li>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nihil corporis velit tempore suscipit ratione impedit, quos error ipsum dolorum aliquid expedita, reprehenderit praesentium veniam doloremque provident dolore nulla adipisci.</div>
        </li>
      </ul>
    </section>
  </section>
  <footer><span>Copyright @codesquad</span></footer>
</body>
</html>

4) class와 id 속성

id는 identifier의 약자로 아주 고유한 속성이고, class는 하나의 HTML 안에 중복해서 여러 군데에 같이 사용할 수 있다(한 군데만 사용해도 된다). id를 하나 이상 써도 오류가 나오진 않는다, 그러나 하나만 쓰려고 의도적으로 노력해야 한다. id를 사용하는 이유는 이름 정보로 찾을 때 찾기 쉽게 하기 위함이다. class는 여러 개를 써서 CSS 스타일을 입힐 수 있다. 비슷한 스타일을 여기 저기에 같이 표현하기 위해 CSS Class를 선언하고 그 이름을 부여함으로 같은 class 이름을 가진 것들이 같은 스타일을 같게 한다. 

반응형

'Naver Boostcourse' 카테고리의 다른 글

[웹 프로그래밍(풀스택)] CSS-FE(2)  (0) 2021.12.09
[웹 프로그래밍(풀스택)]CSS-FE  (0) 2021.12.09
[웹 프로그래밍(풀스택)]Web 개발의 이해(Summary)  (0) 2021.12.08
[웹 프로그래밍(풀스택)]Web 개발의 이해- FE/BE(4)  (0) 2021.12.08
[웹 프로그래밍(풀스택)] Web 개발의 이해- FE/BE(3)  (0) 2021.12.07
'Naver Boostcourse' Related Articles more