카테고리 없음

웹프로그래밍 - (2)

du-da 2020. 7. 31. 16:42

HTML5의 레이아웃 태그는 위와 같이 구성됨

 

<div> : 섹션 정의

<p> : 문단 정의

<li> : 왼쪽 들여쓰기

<head> : 문서의 메타데이터, 정보 포함하는 부분

<body> : 문서의 본문 정의

<footer> : 바닥부분 정의

 

예제

<!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="http://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>
  <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> 
<!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_description">
          <h3>What we do</h3>
          <div>찬란하게 빛나던 시간이었다고 
            <br>맑은 여름비처럼 고마웠었다고.</div>
        <li class="our_description">
          <h3>What we do</h3>
          <div>한 줄기 빗물처럼 너무 아름다웠던
          <br>투명한 우리들의 이야기</div>
        </li class="our_description">
      </ul>
    </section>
  </section>
  
  <footer><span>Copyright @codesquad</span></footer>
</body>
</html>

ID : 고유한 속성. 한 문서에 한개만 존재

 

Class : 한 문서에 여러 개 존재할 수 있음. 같은 클래스를 가진 부분은 같은 속성을 공유

 

CSS 선언방법

 

internel

externel

 

우선순위가 다름