풀스택 개발자 과정 52일차

너구·2026년 7월 22일

풀스택 성장과정

목록 보기

55/79

CSS position 속성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS position 속성</title>
    <style>
        * {
            box-sizing:border-box;
            margin: 0;
            padding: 0;
        }

        #contents {
            background:url(../Day03/images/bg.jpg) no-repeat ;
            background-size: cover;
            width: 800px;
            height: 500px;
            margin: 0 auto;
            position: relative;
        }

        h1 {
            color: #fff;
            font-size: 120px;
            text-shadow: 2px 3px 0 #000;
            position: absolute;
            right: 100px;
            bottom: 100px;
        }
    </style>
</head>
<body>
    <div id="contents">
        <h1>CSS3</h1>
    </div>

</body>
</html>

상품 소개 페이지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상품 소개 페이지</title>
    <style>
        .desc {
            border: 5px dotted #222;
            background-color: #ffd9a0;
            width: 350px;
            padding: 20px;
            margin-right: 20px;
            float: left;
        }

        #clip-border {
            background-clip: border-box;
        }

        #clip-padding {
            background-clip: padding-box;
        }

        #clip-content {
            background-clip: content-box;
        }
    </style>
</head>
<body>
  <div>
    <div class="desc" id="clip-border">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>
        일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>
    <div class="desc" id="clip-padding">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>
        일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>
    <div class="desc" id="clip-content">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>
        일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>        
  </div>
</body>
</html>

배경 이미지 가져오기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경 이미지</title>
    <style>
        body {
            background-image: url('../Day03/images/bg1.jpg');
        }
    </style>
</head>
<body>
    
</body>
</html>

배경 이미지 위치 맞추기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        li {
            background-image: url('images/book-icon.png');
            /* 배경 이미지 파일 */
            background-repeat: no-repeat;
            /* 배경 이미지 반복 안 함 */
            background-position: left center;
            /* 배경 이미지 위치 */
            padding-left: 50px;
            /* 왼쪽 패딩 (박스모델) */
            line-height: 40px;
            /* 줄 간격 */
        }
    </style>
</head>
<body>
    <h1>이지스퍼블리싱</h1>
    <ul>
        <li>회사 소개</li>
        <li>도서</li>
        <li>자료실</li>
        <li>질문답변</li>
        <li>동영상 강의</li>
    </ul>
</body>
</html>

배경 이미지 위치 맞추기 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경 이미지</title>
    <style>
        body {
            background-image: url('images/bg2.png');
            /* 문서 전체 배경 이미지 */
            background-repeat: no-repeat;
            /* 배경 이미지 반복 안 함 */
            background-position: right top;
            /* 배경 이미지를 오른쪽 상단에 위치시킴 */
            background-attachment: fixed;
            /* 배경 이미지 고정 */
        }

        div {
            width: 400px;
            height: 250px;
            padding: 20px;
            border: 20 rgba(204, 204, 204, 0.493);
            margin-top: 20px;
            overflow: auto;
            /* visible / hidden / scroll / auto */
            background-image: url('images/bg3.png');
            /* 텍스트 상자의 배경 이미지 */
            background-repeat: no-repeat;
            /* 배경 이미지 반복 안 함 */
            background-position: right top;
            /* 배경 이미지를 오른쪽 상단에 위치시킴 */
        }

        #bg1 {
            background-origin: padding-box;
            /* 패딩까지 배경 이미지 표시 */
        }

        #bg2 {
            background-origin: border-box;
            /* 테두리까지 배경 이미지 표시 */
        }

        #bg3 {
            background-origin: content-box;
            /* 내용 영역만 배경 이미지 표시 */
        }
    </style>
</head>
<body>
    <div id="bg1">
        <h2>바빠 시리즈</h2>
        <h3>-바쁜 학생을 위한 빠른 학습법</h3>
        <p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어있는
            바빠 연습법과 '손이 기억하는 훈련 프로그램'인 바빠 영어시리즈가 있다.</p>
    </div>
    <div id="bg2">
        <h2>바빠 시리즈</h2>
        <h3>-바쁜 학생을 위한 빠른 학습법</h3>
        <p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어있는
            바빠 연습법과 '손이 기억하는 훈련 프로그램'인 바빠 영어시리즈가 있다.</p>
    </div>
    <div id="bg3">
        <h2>바빠 시리즈</h2>
        <h3>-바쁜 학생을 위한 빠른 학습법</h3>
        <p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어있는
            바빠 연습법과 '손이 기억하는 훈련 프로그램'인 바빠 영어시리즈가 있다.</p>
    </div>
</body>
</html>

배경 이미지 크기 조절

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경 이미지</title>
    <style>
        #container {
            width: 1100px;
            margin: 50px auto;
        }

        .box {
            float: left;
            border: 1px solid #222;
            width: 300px;
            height: 200px; 
            margin: 20px;
            background: url('images/bg4.jpg') no-repeat left top;
        }

        #bg1 {
            background-size: auto;
        }

        /* 원래 배경 이미지 크기로 표시 */
        #bg2 {
            background-size: 200px;
        }

        /* 너비는 200px, 높이는 자동 계산 */
        #bg3 {
            background-size: 50%;
        }

        /* 배경 이미지 너비는 요소 너비의 50%, 높이는 자동 계산 */
        #bg4 {
            background-size: 100% 100%;
        }

        /* 배경 이미지 너비와 높이는 요소 너비의 100%, 요소 높이의 100% */
        #bg5 {
            background-size: contain;
        }

        /* 요소 안에 배경 이미지가 다 보이도록 표시 */
        #bg6 {
            background-size: cover;
        }

        /* 요소를 완전히 덮도록 배경 이미지 표시 */
    </style>
</head>
<body>
    <div id="container">
        <div class="box" id="bg1"></div>
        <div class="box" id="bg2"></div>
        <div class="box" id="bg3"></div>
        <div class="box" id="bg4"></div>
        <div class="box" id="bg5"></div>
        <div class="box" id="bg6"></div>
    </div>
</body>
</html>

선형 그라데이션

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선형 그라데이션</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            border-radius: 10px;
        }

        .grad {
            background: blue;
            background: linear-gradient(to right bottom, blue , red);
            /* 왼쪽 위에서 오른쪽 아래 방향으로, 파랑에서 흰색으로 */
        }
    </style>
</head>
<body>
    <div class="grad"></div>
</body>
</html>

선형 그라데이션 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선형 그라데이션</title>
    <style>
        div {
            width: 500px;
            height: 300px;
        }

        .grad {
            background: #06f;
            /* css3를 지원하지 않는 브라우저용 */
            background: linear-gradient(to bottom, red, white 30%, blue);
            /* 위에서부터 30% 위치에 색상 중지점 지정 */
        }
    </style>
</head>
<body>
    <div class="grad"></div>
</body>
</html>

원형 그라데이션

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>원형 그라데이션</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            margin: 10px;
        }

        /* 타원형 그라데이션 */
        .grad1 {
            background: red;
            background: radial-gradient(pink, yellow, red);
            /* 타원형으로 흰색, 노란색, 빨간색으로 바뀌는 그라데이션 */
        }

        /* dnjsgud rmfkepdltus */
        .grad2 {
            background: red;
            background: repeating-radial-gradient(circle, white, yellow, red);
            /* 원형으로 흰색, 노란색, 빨간색으로 바뀌는 그라데이션 */
        }
    </style>
</head>
<body>
    <div class="grad1"></div>
    <div class="grad2"></div>
</body>
</html>

원형 그라데이션 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>원형 그라데이션</title>
    <style>
        li {
            display: inline-block;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 10px;
        }

        #div1 {
            background: darkgreen;
            background: radial-gradient(circle closest-side at 30% 40%, white, yellow, green);
        }

        #div2 {
            background: darkgreen;
            background: radial-gradient(circle closest-corner at 30% 40%, white, yellow, green);
        }

        #div3 {
            background: darkgreen;
            background: radial-gradient(circle farthest-side at 30% 40%, white, yellow, green);
        }

        #div4 {
            background: darkgreen;
            background: radial-gradient(circle farthest-corner at 30% 40%, white, yellow, green);
        }
    </style>
</head>
<body>
    <ul>
        <li id="div1"></li>
        <li id="div2"></li>
        <li id="div3"></li>
        <li id="div4"></li>
    </ul>
</body>
</html>

원형 그라데이션 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>원형 그라데이션</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            box-shadow: 10px 5px 10px #ccc;
        }

        .grad {
            background: blue;
            /* css3를 지원하지 않는 브라우저용 */
            background: radial-gradient(circle at 20% 20%, white, blue);
            /* 20% 20%에서 시작해서 흰색에서 파란색으로 바뀌는 원형 그라데이션 */
        }
    </style>
</head>
<body>
    <div class="grad"></div>
</body>
</html>

원형 그라데이션 4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>원형 그라데이션</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            margin: 10px;
        }

        .grad1 {
            background: skyblue;
            /* css3를 지원하지 않는 브라우저용 */
            background: radial-gradient(yellow, white, orange);
            /* 노란색에서 흰색을 거쳐 주황색으로 바뀌는 타원형 그라데이션 */
        }

        .grad2 {
            background: skyblue;
            /* css3를 지원하지 않는 브라우저용 */
            background: radial-gradient(yellow, white 10%, orange 60%);
            /* 노란색에서 10% 위치의 흰색, 60% 위치의 주황색으로 바뀌는 타원형 그라데이션 */
        }
    </style>
</head>
<body>
    <div class="grad1"></div>
    <div class="grad2"></div>
</body>
</html>

그라데이션 반복

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그라데이션 반복</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            border: 1px solid #222;
        }

        .gard1 {
            background: red;
            background: repeating-linear-gradient(yellow, red 20px);
        }

        .gard2 {
            background: #ccc;
            background: repeating-radial-gradient(circle, white, #ccc 20%);
        }
    </style>
</head>
<body>
    <div class="gard1"></div>
    <div class="gard2"></div>
</body>
</html>

그라데이션 반복 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>원형 그라데이션 반복</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            border: 1px solid #222;
            border-radius: 10px;
            margin-bottom: 30px;
        }

        .grad1 {
            background: red;
            background: repeating-linear-gradient(yellow, yellow 20px, blue 20px, blue 40px);
        }
        
        .grad2 {
            background: #ccc;
            background: repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%);
        }
    </style>
</head>
<body>
    <div class="grad1"></div>
    <div class="grad2"></div>
</body>
</html>

Q1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q1</title>
    <style>
        body {
            background: url(images/bg5.jpg) left top no-repeat fixed;
            background-size: cover;
        }

        h1 {
            margin-top: 150px;
            font-size: 90px;
            text-align: center;
            color: white;
            text-shadow: 2px, 2px, #000;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Do it!</h1>
</body>
</html>

Q2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q2</title>
    <style>
        body {
            color: white;
            background: url('../Day04/images/bg1.jpg') repeat-x left bottom fixed;
            background-color: gray;
        }

        h1 {
            margin-top: 50px;
            font-size: 20px;
            color: white;
        }

        p {
            font-size: 16px;
            line-height: 25px;
        }

    </style>
</head>

<body>
    <h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
    <p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하느 시대는 지났다.
        이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을
        알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다.</p>
    <div class="bg1"></div>
    <div class="bg2"></div>
</body>

</html>

Q3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q3</title>
    <style>
        .container {
            width: 500px;
            border: 1px solid #ccc;
            background-color: black;
            color: white;
            padding: 10px;
        }

        h1 {
            font-size: 17px;
        }

        p {
            font-size: 16px;
            line-height: 25px;
        }

    </style>
</head>
<body>
    <div class="container">
        <h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
        그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하sms 시대는 지났다.
        이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을
        알아야 한다. 바로 <span>코딩을 이용한 웹 디자인</span>이다.</div>
</body>
</html>

Q4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q4</title>
    <style>
        body {
            background-color: #02233b;
        }

        #container {
            margin: 0 auto;
            width: 600px;
            height: 700px;
            border: 1px dotted gray;
            padding: 20px;
            background: #fff url('images/mic.png') no-repeat right bottom;
        }

        img {
            margin: 30px 10px 30px 180px;
        }

        h1 {
            background-color: #004344;
            color: white;
            text-align: center;
            padding: 20px;
        }

        h2 {
            text-align: center;
            font-style: italic;
            margin-bottom: 50px;
        }

        h3 {
            color: #cf3b00;
        }

        ul {
            margin: 20px;
            list-style-type: none;
        }

        li {
            line-height: 30px;
        }

    </style>
</head>
<body>
    <div id="container">
        <h1>대학 언론사 수습기자 모집</h1>
        <h2>신입생 여러분들을 기다립니다</h2>
        <h3>모집 분야</h3>
        <ul>
            <li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
            <li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
            <li>엔지니어(0명) : 라디오 방송 녹음 및 편집</li>
        </ul>
        <h3>혜택</h3>
        <ul>
            <li>수습기자 활동 중 소정의 활동비 지급</li>
            <li>정기자로 진급하면 장학금 지급</li>
        </ul>
    </div>
</body>
</html>

고급 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>고급 선택자</title>
    <style>
        body {
            background-color: #eee;
        }

        section {
            width: 600px;
            margin: 20px auto;
        }

        p {
            width: 500px;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            line-height: 2;
        }

        /* section > p 자식만 적용 모든 하위 x */
        section p {
            /* section 요소의 모든 하위 p 요소에 적용 */
            color: blue;
            /* 글자색을 파란색으로 */
        }

        h1 + p {
            color: red;
        }
    </style>
</head>
<body>
    <section>
        <h1>예약 방법 & 사용 요금</h1>
        <p>아직 온라인 예약 신청이 준비되어 있지 않습니다.</p>
        <div>
            <p>가족실(2~4인): 60,000원/일</p>
            <p>도미토리(4인 공용): 25,000원/일</p>
        </div>
    </section>
</body>
</html>

속성 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        ul {
            list-style: none;
        }

        li {
            width: 120px;
            display: inline-block;
            margin: 10px;
        }

        li a {
            padding: 5px 20px;
            font-size: 14px;
            text-decoration: none;
            font-weight: bold;
        }

        a[href] {
            background: yellow;
            border: 1px solid #ccc;
            font-weight: normal;
        }

        a[target="_blank"] {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li><a>메인 메뉴: </a></li>
        <li><a href="#" target="_blank">메뉴</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
        <li><a href="#">메뉴4</a></li>
    </ul>
</body>
</html>

속성 선택자 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        ul { list-style: none;}
        li {
            display: inline-block;
            margin: 10px;
        }
        li a {
            padding: 5px 20px;
            font-size: 14px;
            color: blue;
            text-decoration: none;
        }
        .flat {
            background: #eee;
            border: 1px solid #222;
        }
        /* class가 확실하게 button 단어가 떨어져야 한다 */
        a[class~="button"] {
            box-shadow: rgba(0, 0, 0, 0.5) 4px 4px; 
            border-radius: 5px;
            border: 1px solid #222;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#" class="flat">메뉴 1</a></li>
        <li><a href="#" class="flat">메뉴 2</a></li>
        <li><a href="#" class="button">메뉴 3</a></li>
        <li><a href="#" class="flat button">메뉴 4</a></li>
    </ul>
</body>
</html>

속성 선택자 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        ul {
            list-style: none;
        }

        li {
            display: inline-block;
            margin: 10px;
        }

        li a {
            padding: 5px 20px;
            font-size: 14px;
            color: blue;
            text-decoration: none;
        }

        a[title |="us"] {
            /* 속성값이 "us"이거나 "us-"로 시작하는 요소를 찾는 선택자 */
            background: url(images/us.png) no-repeat left center;
        }

        a[title ^="jap"] {
            /* 속성값이 "jap-"으로 시작하는 요소를 찾는 선택자 */
            background: url(images/jp.png) no-repeat left center;
        }

        a[title *="chn"] {
            /* 속성값이 "chn"이거나 "chn-"로 시작하는 요소를 찾는 선택자 */
            background: url(images/ch.png) no-repeat left center;
        }
    </style>
</head>
<body>
    <ul>
        <li>외국어 서비스: </li>
        <li><a href="#" title="us-english">영어</a></li>
        <li><a href="#" title="japanese">일본어</a></li>
        <li><a href="#" title="achna">중국어</a></li>
    </ul>
</body>
</html>

마무리

오늘은 CSS를 배웠다. 며칠 내내 CSS만 하고 있는데 중요한 내용들이 꽤 존재해서 하나씩 짚고 넘어가시는 거라고 하셨다.
뚝딱뚝딱 치면 뿅 나오는 게 재밌고 신기하다.

너구

이전 포스트

풀스택 개발자 과정 51일차

다음 포스트

풀스택 개발자 과정 52일차

풀스택 성장과정

CSS position 속성

상품 소개 페이지

배경 이미지 가져오기

배경 이미지 위치 맞추기

배경 이미지 위치 맞추기 2

배경 이미지 크기 조절

선형 그라데이션

선형 그라데이션 2

원형 그라데이션

원형 그라데이션 2

원형 그라데이션 3

원형 그라데이션 4

그라데이션 반복

그라데이션 반복 2

Q1

Q2

Q3

Q4

고급 선택자

속성 선택자

속성 선택자 2

속성 선택자 3

마무리

풀스택 개발자 과정 51일차

풀스택 개발자 과정 53일차

0개의 댓글