본문 바로가기

프로그램 강좌

[html10]반복작업을 줄여주는 class 활용하기


안녕하세요.
저번시간에 실전코딩을 통해 얻으신게 좀 있나요?ㅎ

저번 실습 통해서 배너 만들때 텍스트 크기, 간격 등 약간만 변경하면 좀 더 그럴싸한 코딩이 완성된다는건 느끼셨을거예요.

하지만 손이 굉장히 바쁘시고 힘드셨을거예요.
매번 글을 쓸때마다 font-family 정하고 size 입력하고 간격입력하고 그래야하나


결론부터 미리 말씀 드리면 아니예요.

코딩은 생각보단 불편하면서도 편리한기능도 들어있어요.
오늘 강좌에서는 반복작업을 줄여줄 방법을 소개하려고해요.



CSS 클래스 만들기


1.글자 일괄변경하기

저번코딩을 한번 봐볼까요?
h2에서 썼던 비슷한 내용이 p태그에서도 쓰이고 있어요.
하지만 모두 개별적으로 쓰이고 있죠.

이걸 하나로 묶어줄수가 있어요.


예제를 한번 만들어볼게요.

폴더를 생성해줘야겠죠?
10번째 강의라 10번 폴더를 만들어줬습니다.

index.html 빈 파일을 만들었구요.
VS code는 이제 말씀 안드려도 실행할수 있죠? html:5

기본 파일을 생성했습니다.

저번처럼 텍스트를 적어줄게요.

<div>
    <h2>css class 만들어보기</h2>
    <p>실습입니다.</p>
    <a href="https://grahams.tistory.com/">grahams 블로그 가기</a>
</div>

저번과 마찬가지로 css를 입력해봅시다. style을 써줘야겠죠?

<div>
      <h2
        style="font-family:'나눔고딕','NanumGothic','맑은고딕','malgunGothic', dotum;font-size: 20px;"
      >
        css class 만들어보기
      </h2>
      <p
        style="font-family:'나눔고딕','NanumGothic','맑은고딕','malgunGothic', dotum;font-size: 16px;"
      >
        실습입니다.
      </p>
      <a href="https://grahams.tistory.com/" target="_blank"
        >grahams 블로그 가기</a
      >
</div>

다시 귀차니즘이 밀려오죠? 이래서 class라는게 필요한겁니다.

명령은 header에서 내립니다.

사이에 넣어주세요.
<header>
<style type="text/css">
      .basic-font{font-family:'나눔고딕','NanumGothic','맑은고딕','malgunGothic', dotum;}
    </style>
</header>
<body>
    <div>
      <h2 style="font-size: 25px;" class="basic-font">
        css class 만들어보기
      </h2>
      <p style="font-size: 16px;" class="basic-font">
        실습입니다.
      </p>
      <a href="https://grahams.tistory.com/" target="_blank"
        >grahams 블로그 가기</a
      >
   </div>
</body>

아까 써줬던거랑 분명히 달라졌는데 변화는 없네요. 그래도 소스를 보면 반복적으로 써주던 명령어가 확 줄었죠?
하지만 결과물만으론 아직 차이를 못느끼시겠다구요?

색상을 변화시켜볼까요? 
파란색으로 바꿔볼까요?

class를 잘 다룰줄 알면 작업속도가 훨씬 빨라집니다. 물론 style 방식(인라인)도 때에 따라서 쓰긴 합니다.

빠른 테스트용도로요. 그러니 둘다 잘 알아두셔야겠죠?


2.박스만들기

박스 디자인도 쉽게 일괄적으로 해줄수 있습니다.

<div class="box-a">A</div>
<div class="box-b">B</div>

마찬가지로 header에 이렇게 명령을 하겠습니다.

<style type="text/css">
    .box-a{background: red;}
    .box-b{background: blue;}
    </style>
    
    ***
    <div class="box-a">A</div>
    <div class="box-b">B</div>
    

색상이 각각 적용되었죠?


이번에는 box 형태도 만들어주겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>css class 만들어보기</title>
    <style type="text/css">
    .box{width:100px;height:100px;margin:20px;}
    .box-a{background: red;}
    .box-b{background: blue;}
    </style>
  </head>
  <body>
    <div class="box box-a">A</div>
    <div class="box box-b">B</div>
  </body>
</html>

일괄 작업이 훨씬 수월해졌나요? 수정도 편하겠죠?

도움이 되셨다면 좋아요 부탁드립니다. 다음 강의에서 뵙겠습니다. 감사합니다.



2019/08/16 - [프로그램 강좌] - [html09]실전미션#1: 텍스트 직접 코딩해서 꾸며보기

2019/08/15 - [프로그램 강좌] - [html08]여백의 미: margin, padding #2

2019/08/14 - [프로그램 강좌] - [html07]여백의 미:margin, padding #1

2019/07/26 - [프로그램 강좌] - [html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨)

2019/07/25 - [프로그램 강좌] - [html05]이미지로 코딩하기2

2019/07/24 - [프로그램 강좌] - [html04]이미지로 코딩하기!

2019/07/11 - [프로그램 강좌] - [html03]CSS가 뭔데? 텍스트 꾸며보기

2019/07/08 - [프로그램 강좌] - [html02]html = head + body

2019/06/22 - [프로그램 강좌] - [html01]코딩은 누구나 할 수 있다?



728x90