VS code - html/css class,id

최성현·2023년 7월 13일

&&.class Space class css링크 div figcaption figure!id selector w3schools

HTML

목록 보기

4/6

class

여러 태그 재사용 가능
겹치기 가능

<head>부분
<style> 안
태그.클래스이름{
해당 클래스만 적용
}

<body>안
<태그 class="클래스명">으로 클래스 지정

.class이름

해당 클래스명을 가진 태그에 모두 스타일 지정

원문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">">
    
    <title>Css Class</title>

    <!-- class 화 - 태그.클래스명/<태그 class="클래스명"> 으로 연동  -->

    <style>
        p{
            font-family: 'Cute Font';
            font-size: 25px;
            width: 800px;
        }

        /* class . 으로 구분 */
        p.txt1{

            background-color: bisque;
            /* 내부전체 공간 주는 것 */
            padding: 20px;
        }

        p.txt2{
            background-color: aquamarine;
            /* top부터 내부에 시계방향으로 공간 */
            padding: 10px 20px 30px 40px;
        }
        
        p.txt3{
            background-color: cadetblue;
            /* 바깥 공간 전부 공간 */
            margin: 40px;
            /* 글 정렬 */
            text-align: center;
        }

        p.txt4{
            background-color: brown;

        }

        
    </style>
</head>
<body>
    <h1>반려동물</h1>
    <h2>반려동물: 우린 왜 고양이를 까칠하다고 생각할까?</h2>
        <p class="txt1">
            개들은 속마음을 생물학적으로 거의 숨기지 못하는 존재처럼 보인다. 땅을 헤집고 킁킁거리고 꼬리를 흔드는 행동을 통해 만족감, 초조함 또는 순수하고도 꾸밈없는 기쁨 등을 표현한다.
        </p>
    <h2>"이건 기사에 쓰지 말라" 반려동물 판매업자 뜻밖의 제안 [현장에서]</h2>
        <p class="txt2">
            지난 2일 경찰과 동물보호단체가 들이닥친 전북 진안의 ‘강아지공장’과 지난 13일 찾은 충남 금산의 A 반려견 농장은 극과 극의 환경이었다. 역한 냄새 때문에 숨을 쉬기 어려울 정도였던 강아지공장에선 강제 임신에 사용하는 도구와 강아지 사체를 태운 흔적 등이 발견됐다. 반면 A농장에선 막 태어난 새끼들이 보송하게 빨아놓은 이불 위에서 어미젖과 이유식을 먹으며 새 가족을 기다리고 있었다. A농장의 주인 윤모씨는 유기된 시츄 한 마리를 구해온 게 사업 시작의 계기였다고 했다. “잠도 못 잘 정도로 강아지가 예뻐서” 펫숍을 차렸고, 7년 뒤 몰티즈만 키우는 농장을 꾸린 것이다. 윤씨는 “양심이 있어야 할 수 있는 직업”이라고 말했다.
        </p>
    <h2>반려동물 관리사 꿈을 향해 '변신'</h2>
        <p class="txt3">
            [대전시교육청 교육기부 공동캠페인]
            우송정보대 '나는 반려동물 관리사다' 프로그램
            훈련 커리큘럼·미용 실습 등 진로체험 기회 제공
        </p>

    <h2>"넓은 바닷가 시원한 파도소리"... 반려견과 떠나는 강릉 해변</h2>
        <p class="txt4">
            마음이 답답해 힐링이 절실한 날, 보기만 해도 행복해지는 반려견과 함께 동해바다로 훌쩍 떠나보는 건 어떨까?
            최근 반려동물과 함께 여행하는 반려인들이 늘어나 강원도 강릉의 청량한 바다가 큰 인기를 끌고 있으며, 바닷가 근처에 반려동물 동반 입장이 가능한 식당과 카페도 눈에 띄게 많아졌다.
        </p>
</body>
</html>

css 링크

css 링크방법

<link rel="stylesheet" href="../css/style1.css">

figure

figure 그림 아래 글씨를 넣게 해준다
그래서 figure 안에 img와 figcaption
figcaption은 figure 안에서만 사용 가능

	<figure>
         <img src="../Food/8.jpg" width="150">
         <figcaption><b>클럽샌드위치</b></figcaption>
    </figure>

div

안에 여러 이미지를 넣고 스타일을 한 번에 줄 수 있음

	<div>
        <figure>
            <img src="../Food/7.jpg" width="150">
            <figcaption><b>연근조림</b></figcaption>
        </figure>
    </div>

selector >표시

태그이름>태그이름>태그이름
첫태그 바로 아래 태그이름 바로 아래 태그이름에 스타일지정

selector space 표시

태그이름 태그이름
첫 태그이름 아래 태그에 바로 스타일 지정

css원문

div.a{
    font-size: 1.5em;
    font-family: 'Cute Font';
}
/* > div.b 바로 아래 */
div.b>figure{   /* figure태그 전체 */
    float: left; /* float은 해제하지 않는 한 가로 정렬 */
}

/* div.b 밑에 figure 밑에 img와 figcaption을 가르킴 */
div.b>figure>img{
    border: 3px solid green;
    /* 왼쪽 상단 모서리부터 시계 방향으로 동그래짐 */
    border-radius: 30px 60px 100px 20px;
}

/* div.b 밑에 figure 밑에 figcaption밑에 b태크를 가르킴 */
div.b>figure>figcaption>b{
    font-size: 25px;
    margin-left: 20px;
    font-family: 'Nanum Brush Script';
}

h3.c{
    /* float:left 속성을 해제하고 싶다 */
    clear: both;
}

div.d{
    display: flex;
    /* flex안에 속성 row:가로방향(왼쪽정렬) row-reverse:거꾸로출력(우측정렬)
    column: 세로방향으로 정렬 */
    flex-direction: row-reverse;
}

/* >없이 한칸 띄우면 그 태그 하위 태그 */
div.d img{
    border: 2px solid green;
    box-shadow: 15px 15px 15px gray;
    border-radius: 20px;
    width: 100px;
    height: 100px;
}

div.d b{
    margin-left: 40px;
    font-family: 'Cute Font';
    color: brown;
}

html원문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    
    <!-- css링크 하면 head안에 style해놓은 것처럼 똑같이 작동함 -->
    <link rel="stylesheet" href="../css/style1.css"
    <title>Document</title>

    <!-- style 전부 잘라내서 style1.css에 붙여놓음 -->
    
    
</head>
<body>
    <!-- hspace 옆으로 공간 띄우는것 -->
    <img src="../Food/1.jpg" width="200" border="1" align="left" hspace="20">
    <div class="a">java <br>oracle<br>html<br>ajax</div>

    <hr>

    <div class="b">
        <!-- figure 그림 아래 글씨를 넣게 해준다 -->
        <!-- 그래서 figure 안에 img와 figcaption -->
        <!-- figcaption은 figure 안에서만 사용 가능 -->
        <figure>
            <img src="../Food/8.jpg" width="150">
            <figcaption><b>클럽샌드위치</b></figcaption>
        </figure>

        <figure>
            <img src="../Food/1.jpg" width="150">
            <figcaption><b>클럽샌드위치</b></figcaption>
        </figure>

        <figure>
            <img src="../Food/2.jpg" width="150">
            <figcaption><b>클럽샌드위치</b></figcaption>
        </figure>

        <!-- float 해제하려고 클래스 부여 -->
        <!-- hr로도 해제 가능 -->
        <h3 class="c">안녕?</h3>
    </div>

    <!-- div 안에 여러 이미지를 넣고 스타일을 한 번에 줄 수 있음 -->
    <div class="d">
        <figure>
            <img src="../Food/7.jpg" width="150">
            <figcaption><b>연근조림</b></figcaption>
        </figure>

        <figure>
            <img src="../Food/9.jpg" width="150">
            <figcaption><b>연근조림</b></figcaption>
        </figure>

        <figure>
            <img src="../Food/11.jpg" width="150">
            <figcaption><b>빙수</b></figcaption>
        </figure>
    </div>
</body>
</html>

css링크 문제

만들어진 스타일 활용

https://www.w3schools.com/bootstrap/bootstrap_ver.asp
사이트 접속
b3 b4 b5 선택
필요한 코드 찾기
필요한 코드 밑 Try it yourself 들어가기
헤드에 있는 link href로 시작하고 rel이 들어있는 것 복사
스타일 활용할 html 헤드에 붙여넣기
스타일에 정확한 이름 기입
적용

css 원문

div.lottoball{
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border: 3px solid gold;
    background-color: gold;
    border-radius: 200px;
    margin: 50px;
    box-shadow: 10px 10px 10px gray;
    float: left;
}

html 원문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/style2.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="lottoball">5</div>
    <div class="lottoball">12</div>
    <div class="lottoball">9</div>
    <div class="lottoball">22</div>
    <div class="lottoball">32</div>
    <div class="lottoball">44</div>
    <hr style="clear: both;" color="orange" size="10">
    <img src="../Food/12.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> 
    <img src="../Food/1.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
    <img src="../Food/11.jpg" class="img-thumbnail" alt="Cinque Terre" width="250" height="250"> 
</body>
</html>

id/class

id

div에만 줄 수 있다
태그 2개 이상 같이 쓰면 겹치거나 오류가 난다

헤드/css에서
->#이름 으로 style 적용

body에서
->태그 id="이름" 으로 지정

원문

<!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>
        /* 클래스는 동시에 여러군데 사용가능(.으로 만든다)
        아이디는 #으로 만드는데 딱 한군데만 사용가능 */
        .newjeans{
            color: magenta;
        }

        div.iyou{
            color: green; font-size: 20pt; width: 200px; height: 50px;
            border: 1px solid purple;
        }

        /* id는 div에만 줄 수 있다 */
        /* 태그 2개 이상 같이 쓰면 겹치거나 오류가 난다 */
        #bts{
            /* position 주면 top left right bottom 지정 필수 absolute 고정 */
            position: absolute;
            top: 400px;
            left: 200px;
            width: 200px;
            height: 100px;
            font-size: 20pt;
            padding-left: 20px;
            padding-right: 30px;
            border:  3px dotted tomato;
        }
    </style>
</head>
<body>
    <div style="color: brown; font-size: 15pt;
    background-color: bisque; width: 200px; height: 150px;">
        안녕 오늘은 목요일이야
    </div>

    <div class="newjeans">Hello Hi~~~</div>
    <div class="iyou">내일도 비는 온다</div>
    <font class="newjeans">Have a Nice Day</font>
    <font class="iyou">Have a Nice Day</font>

    <div id="bts">여기는 쌍용 자바반 입니다</div>
</body>
</html>

class/id 활용 문제

css

#box1>ul{
    list-style: none;
    border: 3px groove brown;
    background-color: aquamarine;
    margin: auto;
    padding: 50px;
    text-align: center;
    border-radius: 10px 50px 70px 10px;
    box-shadow: 15px 15px 15px cadetblue;
}

#box1>h1{
    border: 3px solid black;
    margin-right: 750px;
    border-radius: 100px;
    background-color: blanchedalmond;
    box-shadow: 5px 5px 5px gray;
}

#box1>p{
    position: absolute;
    top: 300px;
    margin: auto;

    height: 20px;
    border: 3px dotted black;
    background-color: coral;
    box-shadow: 5px 5px 5px chocolate;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../css/style3.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <h1>div는 블럭요소입니다</h1>
        <p>
            주로 블럭요소로 그룹화 할 때 사용, 레이아웃(top,bottom,center,aside)
            을 구현할 때 요소입니다
        </p>
        <ul>
            <li>레이아웃구현</li>
            <li>다른 div도 포함될 수 있다</li>
            <li>블럭요소를 그룹화</li>
            <li>id는 유일한 값</li>
        </ul>
    </div>
</body>
</html>

최성현

백엔드 개발자로서 성장해 나가는 성현이의 블로그~

이전 포스트

VS code-html/css 글꼴

다음 포스트