[HTML/CSS] CSS란? (h1태그, p태그 꾸미기, class 중요성(.), span 태그(#), 시멘틱 태그

Hyejin Beck·2026년 1월 4일

컴퓨터공학 기초

목록 보기
3/20

h1태그 중요성

<!-- 파일명 : CSS란.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- meta 태그 잘 써야 한다.  -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS </title>

</head>
<body>
    <p>보통 h1태그는 인터넷검색에 걸리기에 중요합니다.</p>
    <p>검색했을때 나오는 검색어 = 특정 키워드는 h1태그로 적을 것<p>
    <p>그리고 위에 HEAD 칸에서 META 태그를 써야한다. meta태그를 잘 써야 한다. </p>
    <h1>CSS란?</h1>
    <h3>선택자에 대해 배워봅니다. </h3>
    <p>어디를 어떻게 꾸밀지 설명합니다. </p>
</body>
</html>

p태그 꾸미기

<style>
    /*이제 여기에 디자인을 하면 된다.*/
    p{ /* 아래 p태그의 모든 텍스트(content) 에 적용 */
        color: red; 
    }
</style>

p태그 색깔 넣기

특정 id 지정

<style>
    /*이제 여기에 디자인을 하면 된다.*/
    #info{
        color:red;
    }
</style>
<!-- 파일명 : CSS란.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- meta 태그 잘 써야 한다.  -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS </title>

    <style>
        /*이제 여기에 디자인을 하면 된다.*/
        #info{
            color:red;
        }
    </style>

</head>
<body>
    <p>보통 h1태그는 인터넷검색에 걸리기에 중요합니다.</p>
    <p>검색했을때 나오는 검색어 = 특정 키워드는 h1태그로 적을 것<p>
    <p>그리고 위에 HEAD 칸에서 META 태그를 써야한다. meta태그를 잘 써야 한다. </p>
    <h1>CSS란?</h1>
    <h3>id 선택자 </h3>
    <p>특정 p태그의 텍스트 색상을 지정해서 바꿔줍니다. </p>
    <p>p태그 안에 id="명칭" 을 추가 합니다. </p>
    <p id="info">그러곤 코드 입력시 head칸 안에 #명칭{ color: 컬러값} 해주면 됩니다.</p>

</body>
</html>

개발자 도구로 이미지 src

Ctrl + Shift + A 눌러서 개발자 도구

또는 쩜쩜점 > 도구 더보기 > 개발자 도구 

<!-- 파일명 : CSS클래스.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS2</title>
</head>
<body>
    <h3>클래스 선택자란? </h3>
    <p>같은 이름으로 한 번에 꾸미는 방법</p>

    <!-- src에 이미지주소 복사 (온라인사이트에서 수집시 개발자 도구) -->
    <h1>[니뽕내뽕] 크뽕 (크림짬뽕)</h1>
    <!-- <img src="" alt=""> -->
    <img src="https://product-image.kurly.com/hdims/resize/%5E%3E720x%3E936/cropcenter/720x936/quality/85/src/product/image/738cd5df-5b62-43e3-b761-7f73aa6f9b76.jpg"  alt="">
    <p>고소하고 꾸덕한 크림 짬뽕</p>

</body>
</html>

그룹별 지정 class

<!-- 파일명: CSS클래스.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS2</title>
</head>
<body>
    <h3>클래스 선택자란?</h3>
    <p>같은 이름으로 한 번에 꾸미는 방법</p>
    <p>여러개의 태그에 똑같은 디자인을 주고싶을때</p>
    <p>그룹!</p>

    <div class="group">
        <img src="https://product-image.kurly.com/hdims/resize/%5E%3E360x%3E468/cropcenter/360x468/quality/85/src/product/image/ceb28690-e349-4e79-ad68-768a498403ff.jpg"/>
        <p>[KS365] 풍성한 거품이 나는 수세미 5종(택1)</p>
    </div>   
    
    <div class="group">
        <img src="https://3p-image.kurly.com/hdims/resize/%5E%3E360x%3E468/cropcenter/360x468/quality/85/src/files/02cf449a-7e7b-4a83-9742-15f954604f3a/dcba6ddf-e53e-4907-9146-07fe8ff6b889.jpg">
        <p>[클래파] NEW AI 흡입 BLDC 무선 청소기 + 자동 충전 거치대</p>
    </div>


</body>
</html>

낱개로 그룹 묶어 지정

<style>
    .group img{
        width: 100px;
        height: 100px;
    }
</style>
<!-- 파일명: CSS클래스.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS2</title>
    <style>
        .group img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h3>클래스 선택자란?</h3>
    <p>같은 이름으로 한 번에 꾸미는 방법</p>
    <p>여러개의 태그에 똑같은 디자인을 주고싶을때</p>
    <p>그룹!</p>

    <div class="group">
        <img src="https://product-image.kurly.com/hdims/resize/%5E%3E360x%3E468/cropcenter/360x468/quality/85/src/product/image/ceb28690-e349-4e79-ad68-768a498403ff.jpg"/>
        <p>[KS365] 풍성한 거품이 나는 수세미 5종(택1)</p>
    </div>   
    
    <div class="group">
        <img src="https://3p-image.kurly.com/hdims/resize/%5E%3E360x%3E468/cropcenter/360x468/quality/85/src/files/02cf449a-7e7b-4a83-9742-15f954604f3a/dcba6ddf-e53e-4907-9146-07fe8ff6b889.jpg">
        <p>[클래파] NEW AI 흡입 BLDC 무선 청소기 + 자동 충전 거치대</p>
    </div>


</body>
</html>

class 중요성 (.이용)

<!-- 파일명: CSS클래스.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS2</title>
    <style>

        .group img{
            width: 100px;
            height: 100px;
        }
        .list{
            color: blue;
        }
    </style>
</head>
<body>
    <h3>클래스 선택자란?</h3>
    <p>같은 이름으로 한 번에 꾸미는 방법</p>
    <p>여러개의 태그에 똑같은 디자인을 주고싶을때</p>
    <p>그룹!</p>

    <div class="group">
        <img src="https://product-image.kurly.com/hdims/resize/%5E%3E360x%3E468/cropcenter/360x468/quality/85/src/product/image/ceb28690-e349-4e79-ad68-768a498403ff.jpg"/>
        <p>[KS365] 풍성한 거품이 나는 수세미 5종(택1)</p>
    </div>   
    
    <div class="group">
        <img src="https://3p-image.kurly.com/hdims/resize/%5E%3E360x%3E468/cropcenter/360x468/quality/85/src/files/02cf449a-7e7b-4a83-9742-15f954604f3a/dcba6ddf-e53e-4907-9146-07fe8ff6b889.jpg">
        <p>[클래파] NEW AI 흡입 BLDC 무선 청소기 + 자동 충전 거치대</p>
    </div>

    <h3>실시간 검색 순위</h3>
    <ul>
        <li class="list">1.수세미</li>
        <li>2.청소기</li>
        <li class="list">3.땅콩</li>
        <li>4.떡국</li>
    </ul>

    <p>실무에서는 클래스를 많이 사용하는 이유는 재사용!</p>
    <p>여러개에 같은 스타일기능을 적용하기 위해서!</p>

</body>
</html>

class 디자인 (.이용)

<!-- CSS실습.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            background-color: rgb(10, 30, 182);
            /*글씨 가운데 정렬*/
            text-align: center;
            color:white;
        }
    </style>
</head>
<body>
    <h3>마켓컬리 똑같은 디자인 만들기</h3>
    <p>주말특가, 15%쿠폰, 4000원 쿠폰 그룹별 만들어보기</p>

    <div class="box">
        주말특가
    </div><br><br>
    <div class="box">
        15%쿠폰
    </div><br><br>
    <div class="box">
        4000원쿠폰
    </div>

</body>
</html>

border-radius

글자박스칸 모서리도 살짞 굴려봅니다.

클릭시 팝업뜨는 버튼

font awesome

금액을 내는 유료 사이트
여기에도 아이콘 등 이쁜 게 많습니다.

부트스트랩

무료인 부트스트랩 아이콘 등을 통해서 이미 잘 만들어진 버튼 디자인 따올 수 있음.
https://icons.getbootstrap.com/ 

<button>담기</button>

여기에서 svg 태그로 되어있는거 복사 

<button>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
    </svg>
    담기
</button>

실습1

참조

실습2

이디야 BEST 버튼 만들기

참고로 저기 코드 clas 라고 오타 났네요. class로 수정합니다.

실습3

오늘의집에 나오는 NEW 버튼 만들기

시작
(아래 캡쳐는 빈칸임)

결과

우선 이렇게 까지 했는데 별로다.
오늘의집 사이트에서 개발자 도구를 통해 베낀다.

button과 div 차이

div로 했을 때

button 으로 했을 때에는 테두리가 생긴다.

테두리 없앨려면 border:none;

각각 글자 색 지정하기

일단 Google 글자 각각 색깔 지정해봅니다.

어떻게 글자를 각각 지정할 수 있을까요?

span 태그(#이용)

문장 전체가 아니라 글자 하나하나 쪼개서 지정하고 싶을땐, span 태그를 이용합니다.

색상을 가져옵니다. 개발자도구~~

각자 색상별 클래스를 부여해줍니다.
1개인건 id=
여러개인건 class =

id 불러올떈 #
class 불러올땐 .

잘 나옵니다.

시멘틱 태그

보다보면 div 지옥인 경우가 있습니다.
이렇게 너무 많으면 가독성도 안좋습니다.

이런 사이트의 개발자들에게 "div 너무 많은거 아닌가요? 수정해주세요" 라고 하면
개발자들이 "오~ 얘 좀 안다"

그걸 대체하는게 시멘틱 태그 입니다.

시멘틱 태그에 대해선 수업 후반부에 알려주신다고 합니다.
그냥 이런게 있따~ 정도만 알고 계십시오.

검색창 만들기

마켓컬리 상단에 있는 검색창을 만들어 봅니다.
마우스 휠을 내려 하단페이지로 옮겨가도 , 맨 상단에 고정되어 있습니다.

우선 아이콘 svg 수집

그리고 div 를 통해 만들어 줍니다.

결과

해당 class에 색상을 줘봅니다.

테두리 없애줍니다.

여기서 잠깐!
마우스로 클릭하면 테두리가 생기네요?

outline

마우스로 클릭했을때 테두리(outline) 이 생기는 건 자연스러운 현상입니다.

그래서 outline : none;
해야합니다.

이제 클릭해도 테두리 안생깁니다.

profile
Hyejin Beck
데이터기반 스토리텔링을 통해 인사이트를 얻습니다.
이전 포스트

[HTML/CSS] 기초2 : style태그로 html 내용물 변경 할 수 있다.

다음 포스트

[HTML/CSS] CSS디자인 실습

0개의 댓글