Post

[HTML/CSS] 기초모듈(2)

[HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지] codingapple.com

Posted Updated
By Cheong seolmo
5 min read
[HTML/CSS] 기초모듈(2)

웹레이아웃의 기초 : div를 이용한 네모네모 박스 디자인

  • <div>본문</div> tag: division의 약자. 박스를 만들고 싶을 때 사용하는 태그
    • display: block; 속성이 기본적으로 내장되어 있음(div, p, h1, li태그 등 전부) ⟶ 한 행을 전부 차지
  • 일부 스타일은 자동으로 inherit(상속): 부모 태그의 속성들은 자식 태그의 속성으로 inherit
  • main.css
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

      .box {
      width: 400px;
      height: 400px;
      background-color: rgb(108, 137, 137);
      margin: 100px;
      padding: 30px;
      border: 3px solid rgb(0, 0, 0);
      border-radius: 50px;
        
      margin-left: auto;
      margin-right: auto;

      font-size: 20px;
  }

박스에 shadow 구현(숙제)

  • box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

레이아웃 만들기 1 : 호환성 좋은 float

  • float 이용한 레이아웃 만들기
    1. wrapper(container) 박스: 레이아웃들을 감싸는 박스
    2. header: 로고 등 들어가는 상단 박스
    3. content: 메뉴, 내용 등등
      • 박스를 가로 배치할 땐 float: left; 요소를 붕 띄워서 왼쪽 정렬
      • %단위는 부모 태그의 속성 값 기준
    4. footer: 사이트 최하단.
      • clear: both;: float 다음 요소에 부여하여 처리
  • layout1.html
    1
2
3
4
5
6
7
8
9
10

      <body>

      <div class="container">
          <div class="header"></div>
          <div class="left-menu"></div>
          <div class="right"></div>
          <div class="footer"></div>
      </div>

  </body>
  • main.css
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

      .container {
      width:800px;
  }

  .header {
      width: 100%;
      height: 100px;
      background: aquamarine;
  }

  .left-menu {
      width: 20%;
      height: 400px;
      background-color: cornflowerblue;
      float: left;
  }

  .right {
      width: 80%;
      height: 400px;
      background: coral;
      float: left;
  }

  .footer {
      width: 100%;
      height: 100px;
      background-color: grey;
      clear: both;
  }

레이아웃 만들기 2 : 귀찮은 inline-block

  • inline-block 사용해서 가로로 배치
    • diplay: block;: 한 행을 전부 차지
    • display: inline-block; 박스의 크기만큼 차지 (html 상에서 박스사이 공백을 제거해야 함)
      • html 상에서 박스사이 공백을 제거해야 함
        1. 박스사이 주석기호 활용
        2. 부모태그에 font-size: 0px; (부모로부터 inherit 되는 속성은 중요도가 가장 낮음)
      • inline-block 박스 안에 글을 쓰고 싶다면 해당 박스에 vertical-align: top;
        • html에서는 글에 자동으로 baseline 생성. baseline이 생길 경우 inlin-block 요소들이 baseline 위에 오려고 함 vertical-align 속성은 상하정렬. 박스의 제자리를 찾아주는 역할.
  • main.css
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

      .left-menu {
      width: 20%;
      height: 400px;
      background-color: cornflowerblue;
      display: inline-block;
      vertical-align: top;
  }

  .right {
      width: 80%;
      height: 400px;
      background: coral;
      display: inline-block;
  }
  • layout1.html
    1
2
3
4
5
6
7
8
9

      <body>

      <div class="container">
          <div class="header"></div>
          <div class="left-menu"></div><div class="right"><p>안녕하세요</p></div>
          <div class="footer"></div>
      </div>

  </body>

Blog 글목록 만들기(숙제)

  • layout2.html
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

      <body>

      <div class="container">
          <div class="left-content">
              <div>
                  <img src="img/winter.png" class="profile">
                  <div>
                      <h4 style="margin: 0px">청설모</h4>
                      <p style="margin: 0px">1분 전</p>    
                  </div>
              </div>
              <div class="bottom-content">
                  <h2>귀여운 다롱</h2>
                  <p>고양이 다롱...</p>
              </div>
          </div>

          <div class="right-image">
              <img src="img/darong.jpg" style="width: 100%;">
          </div>
      </div>

  </body>
  • main.css
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

      .container {
      width:800px;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }

  .left-content {
      width: 75%;
      height: 200px;
      float: left;
  }

  .profile {
      width: 50px;
      margin: 0px 10px 0px 0px;
      float: left;
  }

  .bottom-content {
      margin-left: 10px;
  }

  .right-image {
      width: 25%;
      height: 200px;
      background-color: coral;
      float: left;
  }

  • img

    1

셀렉터를 이용해 CSS 코드 양 줄이기

  • float된 요소들로 인해 margin의 영향을 제대로 받지 않을 때, float 준 요소 다음 clear: both;를 넣은 의미 없는 <div>박스를 추가 해보자
  • <nav>, <section>, <footer> 등: 기능은 div와 같지만 요소의 역할을 알아보기 쉽게 하기 위함
  • selector 문법
    • ’ (공백)’: ~ 안에 있는 모든 자식
    • ’>’: ~ 안에 있는 직계 자식
    • layout2.html
      1
2
3
4
5
6
7
8

        <nav>
      <ul class="navbar">
          <li><a href="#">음악</a></li>
          <li><a href="#">게임</a></li>
          <li><a href="#">영화</a></li>
          <li><a href="#">전시</a></li>
      </ul>
  </nav>
    • main.css
      1
2
3
4
5
6
7
8

        .navbar li {
      display: inline-block;
  }

  .navbar a {
      font-size: 16px;
      text-decoration: none;
  }

    • img

      2

    • selector를 연달아 여러 개 붙여쓰는 것 보단 하나의 새로운 클래스를 만들어 쓰는 것이 좋다
      • 나쁜 예시: .container div div>p>span
      • 좋은 예시: .headline>span
  • 띄어쓰기를 통해 태그에 class 2개 이상 부여 ex) <ul class="navbar content">
Web, HTML/CSS
lecture
This post is licensed under CC BY 4.0 by the author.