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)

반응형 레이아웃 만들기

  • 단위
    • vw(viewport width): 현재 브라우저 폭에 비례
    • vh
    • rem: 기본 폰트 사이즈(16px)에 비례
    • em: 내(해당 요소) 폰트 사이즈에 비례
  • 반응형 레이아웃
    • 작은 화면에서 font-size를 줄이기
    • media query 문법 사용. 여러 개 사용 가능. 큰 사이즈 ⟶ 작은 사이즈 순으로 작성
    • media query 문법은 항상 파일 맨 밑에 있어야 기능
      1
2
3
4
5

        @media screen and (max-width: 1200px){
      .font-test {
          font-size: 10px;
      }
  }
    • breakpoint는 1200px(태블릿), 992px, 768px(모바일), 576px 등

반응형 레이아웃 숙제 : 가로정렬 레이아웃

  • layout5.html
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

      <div class="category-menu">
    <div>
      <h4>Fast Shipping</h4>
      <p>lorem ipsum<br></p>
    </div>
    <div>
      <h4>Good Service</h4>
      <p>lorem ipsum</p>
    </div>
    <div>
      <h4>Free Coupons</h4>
      <p>lorem ipsum</p>
    </div>
    <div>
      <h4>New Products</h4>
      <p>lorem ipsum</p>
    </div>      
    <div style="float: none; clear: both;"></div>
  </div>
  • 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

      .category-menu {
      width: 80%;
      max-width: 600px;
      margin: auto;
      margin-top: 50px;
      margin-bottom: 50px;
  }

  .category-menu div {
      box-sizing: border-box;
      float: left;
      width: 25%;
      text-align: center;
      font-family: 'nanummyeongjo';
  }

  @media screen and (max-width: 1200px) {
      .category-menu div {
          width: 50%
      }
  }

  @media screen and (max-width: 768px) {
      .category-menu div {
          width: 100%
      }
  }

개발자도구 잘쓰기, 브라우저 호환성

  • 크롬 개발자 도구
    • 웹사이트 페이지 우클릭 > 검사 (윈도우 단축키 F12)
    • 스타일
      • 우선 적용 중인 스타일을 맨 위에 보여줌
      • user agent stylesheet: 브라우저 기본 CSS (수정할 수 없음)
  • Internet Explorer 호환성에 대해
    • 업데이트 자동이 아님
    • 웹사이트 페이지 우클릭 > 요소 검사 > 에뮬레이션에서 모드 미리보기 가능
    • IE를 위한 CSS 파일 생성, 조건부로 CSS 파일 첨부
      1
2
3

        <!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="css/ie8.css" />
  <![endif]-->

Font Awesome 아이콘 넣기

  • Font Awesome 라이브러리
    • 설치방법
      1. CDN: fontawesome 5 codnjs 검색, all.min.css 파일 head 태그 안에 첨부
      2. 직접 파일 다운: fontawesome 5 검색, 다운로드, all.min.css 파일 첨부
    • fontawesome 5 버전에서 icon 메뉴, 원하는 아이콘의 html 복붙, 스타일링은 글자처럼 가능
  • 아이콘 활용 메뉴
    • layout5.html
      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

        <div class="category-menu">
      <div>
          <i class="fa-solid fa-truck-fast fa-2x"></i>
          <h4>Fast Shipping</h4>
          <p>lorem ipsum<br></p>
      </div>
      <div>
          <i class="fa-solid fa-hand-holding-heart fa-2x"></i>
          <h4>Good Service</h4>
          <p>lorem ipsum</p>
      </div>
      <div>
          <i class="fa-solid fa-ticket fa-2x"></i>
          <h4>Free Coupons</h4>
          <p>lorem ipsum</p>
      </div>
      <div>
          <i class="fa-solid fa-jar fa-2x"></i>
          <h4>New Products</h4>
          <p>lorem ipsum</p>
      </div>      
      <div style="float: none;  clear: both;"></div>
  </div>
    • main.css
      1
2
3
4
5
6
7
8
9
10

        .category-menu i {
      background-color: rgb(216, 178, 140);
      width: 100px;
      height: 100px;
      padding-top: 33px;
      border-radius: 50px;
      box-sizing: border-box;
      color: white;
      margin-top: 10px;
  }

    • img

      1

Transition 속성으로 CSS 애니메이션 구현하기

  • 애니메이션
  • one-way 애니메이션 만드는 step
    1. 시작 스타일 만들기
    2. 최종 스타일 만들기
    3. 언제 최종스타일로 변하는지
    4. transition으로 애니메이션

레이아웃 애니메이션(숙제)

  • layout5.html
    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
31

      <div class="shop-bg">
    <div class="shop-container">
      <div class="shop-item">
        <div>
          <div class="overlay">
            <h2>$60</h2>
            <p>때껄룩다롱</p>
          </div>
          <img src="img/cat.png">
        </div>
      </div>
      <div class="shop-item">
        <div>
          <div class="overlay">
            <h2>$80</h2>
            <p>코딩애플</p>
          </div>
          <img src="img/apple.png">
        </div>
      </div>
      <div class="shop-item">
        <div>
          <div class="overlay">
            <h2>$77</h2>
            <p>SEOLMO</p>
          </div>
          <img src="img/cube.png">
        </div>
      </div>
    </div>
  </div>
  • 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

      .shop-bg {
      background-color: #eee;
      padding: 20px;
  }

  .shop-container {
      display: flex;
      max-width: 60%;
      margin: auto;
  }

  .shop-item {
      width: 33%;
      margin: 10px;
  }

  .shop-item img {
      width: 100%;
      height: 100%;
      display: block;
  }

  .shop-item>div {
      position: relative;
      overflow: hidden;
  }

  .overlay {
      position: absolute;
      width: 100%;
      height: 50%;
      background: rgba(0, 0, 0, 0.3);
      opacity: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;

      transform: translateY(100%);
      transition: all 1s;
  }

  .overlay h2, p {
      font-family: 'Ownglyph_ParkDaHyun';
      color: white;
      margin: 0;
      margin-left: 10px;
      align-items: center;
  }

  .shop-item:hover .overlay{
      opacity: 1;
      transform: translateY(0%);
  }

  • img

    2

Transition 숙제 : 상품진열 레이아웃과 애니메이션

  • 크롬 개발자 도구 > 점 세개 > 애니메이션: 애니메이션을 실행하면 기록이 되고, 어떤 스타일이 변화했는지 보여줌
Web, HTML/CSS
lecture
This post is licensed under CC BY 4.0 by the author.