1.2 HTML

tag의 종류

스타일을 바꾸는건 CSS로 표현해주는게 좋다.

<ul> unodered list

li*4-><li></li>들이 쫙 나온다.

a 누르고 tab. 하이퍼 링크..

<!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="www.apple.com"></a>사과</li>
        <li>바나나</li>
        <li>메론</li>
        <li>귤</li>
      </ul>
    </div>  
        
          
</body>
</html>

https://www.w3schools.com/tags/ref_byfunc.asp

HTML Reference

www.w3schools.com

html tag 참고 사이트

레이아웃을 위한 태그

header
section
nav
footer
aside

모바일에서는 footer쓸 수 있음.

nav= 네비게이션.

section=검색부분을 section으로 해서 영역을 지정함.

div 태그를 사용하여 사이트의 레이아웃을 만든다. div를 활용해 레이아웃 배치를 많이 한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>header</header>
  <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>

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>
    </ul>
    </nav>
  
    <section>
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <button></button>
    </section>
  
    <section>
      <ul>
        <li>AboutUs</li>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate exercitationem repellendus repellat labore possimus culpa, atque unde ducimus nisi odit commodi, est corporis. Corporis fugiat perferendis soluta ipsam repudiandae ullam.</div>
        </li>
        <li></li>
      </ul>
    </section>
  </section>
  
  <footer><span>Copyright @</span></footer>
</body>
</html>

생각해보기

여러분들이 자주 사용하는 웹사이트의 일부 영역의 HTML 코드를 한번 살펴보세요.
다 보는 것보다 상단영역이나 하단영역 위주로 살펴보면서 어떤 HTML 코드를 사용했는지 살펴보면 좋습니다.
그리고 여러분만의 하단영역(footer)을 정의해보고 HTML 코드를 한번 만들어보세요.

id란? 고유한 속성. 하나만 써야함. 오류가 나진 않지만. 하나를 쓰려고 노력해야함. 제어할 때 쉽게 찾기 위해서..

클래스는 동일한 CSS스타일을 부여할 수 잇음. 비슷한 스타일을 여기저기에 같이 표현하기 위해서임.

e다 수정하고 싶을때->클래스만 수정->다 바뀐다.

calss 필요한 스타일에 입힌다. 하나밖에 없는 고유한 애다 =>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>
    </ul>
    </nav>
  
    <section id="roll-section">
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <button></button> 
    </section>
  
    <section>
      <ul>
        <li class="our_description">AboutUs</li class="our_description">
        <li class="our_description">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate exercitationem repellendus repellat labore possimus culpa, atque unde ducimus nisi odit commodi, est corporis. Corporis fugiat perferendis soluta ipsam repudiandae ullam.</div>
        </li class="our_description">
        <li></li>
      </ul>
    </section>
  </section>
  
  <footer><span>Copyright @</span></footer>
</body>
</html>

생각해보기

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

개발자로 살아남기

1.2 HTML - FE

댓글

티스토리툴바