728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            box-shadow: 10px 5px 20px #ccc;
        
        }

        .grad1 {
            background: radial-gradient(circle at 20% 20%, white, blue);
        }

        .grad2, .grad3{
            width: 500px;
            border: 1px solid #222;
            border-radius: 10px;

        }

        .grad2 {
            background: repeating-linear-gradient(yellow, red 100px);
            background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
        }
        .grad3 {
            background: repeating-radial-gradient(circle, white, #CCC 10%);
        }


    </style>
</head>
<body>
        <div class="grad1"></div>
        <div class="grad2"></div>
        <div class="grad3"></div>
</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

가상선택자2  (0) 2022.12.29
가상 선택자  (0) 2022.12.29
radial그라데이션  (0) 2022.12.29
linear그라데이션  (0) 2022.12.29
CSS 연습  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
0<0html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         div{
            width: 500px;
            height: 300px;
            border-radius: 10px;
        }
        .grad1 {
            /* 
                circle : 정원
                ellipse : 기본값, 타원
            */
            /* 원형으로, 중앙에서 부터 흰색, 보란색, 빨간색으로 퍼=져나가는 그라데이션 */
            background: radial-gradient(circle, white, yellow, red);
        }
        .grad2 {
            /* 그라데이션 중심에서 가장 가까운 측면에 닿을 때 까지 가로 30%, 세로 40%위치에 그라데이션을 만드세여 */
            background: radial-gradient(circle closest-side at 30% 40%, white, yellow, green);
        }



    </style>
<0000/head>

<body>
    <div class="grad1"></div>
    <div class="grad2"></div>
</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

가상 선택자  (0) 2022.12.29
그라데이션 응용  (0) 2022.12.29
linear그라데이션  (0) 2022.12.29
CSS 연습  (0) 2022.12.29
background예제 2  (0) 2022.12.28
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border-radius: 10px;

        }

        .grad1{
            background-color: chartreuse;
            /* to : 목적지 */
            /* 오른쪽 아래 방향으로 초록에서 흰색으로 그라데이션 넣기 */
            background: linear-gradient(to right bottom, chartreuse, white);
        }
        .grad2{
            background-color: rgb(95, 182, 7);
            /* 45도 (오른쪽 위) 방향으로, 초록에서 흰색으로 그래디언트만들어주세여 */
            background: linear-gradient(45deg, rgb(95, 182, 7), white );
            
        
        }
        .grad3{
            background-color: rgb(38, 71, 5);
            /* 위에서 부터 아래방향으로 그래디언트 만드는데, 30%위치에는 하얀색으로 색상 중지점을 설정해주세여 */
            background: linear-gradient(to bottom, rgb(38, 71, 5), white 30%, rgb(38, 71, 5));
        }



    </style>
</head>
<body>
    <div class="grad1"></div>
    <div class="grad2"></div>
    <div class="grad3"></div>
</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

그라데이션 응용  (0) 2022.12.29
radial그라데이션  (0) 2022.12.29
CSS 연습  (0) 2022.12.29
background예제 2  (0) 2022.12.28
background와 vw,vh  (2) 2022.12.28
728x90
반응형

연습1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
            width: 500px;
            margin: 50px auto;
            
        }
        .container{
            
        }
        img{
            width: 500px;
        }
        h1{
            background-color: black;
            color: white;
        }
        h2{
            text-align: center;
            font-size: 20px;
        }
        .blu_1{
            color: blue;
            text-align: center;
            
        }
        .red_1 {
            color: red;
        }
        
    </style>
</head>
<body>
    <div id="container">
        <img src="../Resource/apple.jpg" alt="사과">

        <p class="po">가정용 꿀사과
            <div>흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다.<br>
            질좋은 사과를 저렴하게 즐겨보세요</div>
        </p>

        <h1>확인하세요</h1>

        <h2><span class="red_1">주문 및 배송</span>
            <p><span class="blu_1">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
            2시 이후 주문건은 다음날 발송합니다(주말제외)</p>
        </h2>

        <h2><span class="red_1">교환 및 환불</span>
            <p>불만족식 <span class="blu_1">100% 환불</span>해 드립니다.<br>
            고객센터로 전화주세요.</p>
        </h2>

        <hr>

        <h2><span class="red_1">고객센터</span>
            <p>0000-0000<br>
            상담지산 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</p>
        </h2>
    </div>

</body>
</html>

 

 

 

 

 

연습2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
            width: 650px;
            margin: 0 auto;
            padding: 0;
            border: 1px solid black;
        }

        h1 {
            font-size: 2em;
            color: white;
            background-color: black;
        }

        h2{
            color: red;
            font-size: 1.5em;
            text-align: center;
        }
        .info_text{
            color: blue;
        }

        #background {
            width: 100%;
            height: 400px;
            background-image: url(../Resource/apple.jpg);
            background-size: cover;
            background-position: center;
            overflow: hidden;
            position: relative;
        }

        #title{
            width: 100%;
            text-align: left;
            background-color: #000000AA;
            color: orange;
            padding-left: 30px;
            position: absolute;
            bottom: 0;

        }

        #title_name{
            line-height: 2em;
            color: white;
            font-size: 1.5em;
        }

        p{
            font-weight: bold;
            font-size: 1.2em;
            text-align: center;
            line-height: 2em;
        }
        
    </style>
</head>
<body>
    <div id="container">


        <div id="background">
            
            <p id="title">
                <span id="title_name">가정용 꿀사과</span><br>
                흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다.<br>
                질좋은 사과를 저렴하게 즐겨보세요
            </p>
        </div>


        
        <h1>확인하세요</h1>
        <h2>주문 및 배송</h2>
        <p>
            <span class="info_text">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
            2시 이후 주문건은 다음날 발송합니다(주말제외)<br>
        </p>

        <h2>교환 및 환불</h2>
        <p>
            불만족시 <span class="info_text">100% 환불해</span> 드립니다.<br>
            고객센터로 전환주세요<br>
        </p>

        <hr>

        <h2>고객센터</h2>
        <p>
            0000-0000<br>
            상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴뮤)<br>
        </p>

    </div>


</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

radial그라데이션  (0) 2022.12.29
linear그라데이션  (0) 2022.12.29
background예제 2  (0) 2022.12.28
background와 vw,vh  (2) 2022.12.28
Position예제2  (0) 2022.12.28
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            width: 800px;
            box-shadow: 5px 5px 30px 2px black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 10px solid #ccc;
        }
    </style>
</head>
<body>
    <img src="../Resource/bear.jpg" alt="곰">
</body>
</html>

 

728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

linear그라데이션  (0) 2022.12.29
CSS 연습  (0) 2022.12.29
background와 vw,vh  (2) 2022.12.28
Position예제2  (0) 2022.12.28
Position예제  (0) 2022.12.28
728x90
반응형

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
            vw : viewport width (클라이언트 표시 영역 가로 크기의 백분율)전체 크기의 백분율
            vh : viewport height (클라이언트 표시 영역 가로 크기의 백분율)전체 크기의 백분율
            > 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 결정함
            > 100vh, 100vw 는 전체 화면의 기준으로, 꽉 채우는 것을 의미함
            > 만약 스크린 크기가 height=1000, width=800 이라면 1vh = 10px, 1vw = 8px
            %랑 차이점? 
            > %는 창의 중심이 아닌, 부모 요소의 길이에 맞게 비율을 따짐
            > %는 전체 창을 기준으로하는 것이 아니기 때문에 크기 계산 당시의 부모 요소에 맞게 됨
            > vh, vw는 열려있는 전체 창을 기준으로 하기 떄문에 스크롤을 포함해서 전체 창 길이에 맞춰 계산
            vmin, vmax > viewport의 길이 중 더 짧은 혹은 긴 길이를 기준으로 설정해줌
            
            */
        
        body{
            margin: 0;
            padding: 0;    
        }

        /* div{
            width: 10vmin;
            height: 10vmax;
            background-color: cadetblue;
        }         */

        ul {
            list-style-type: none; /* 불릿 제거*/
            margin: 30px;
        }
        li{
            background-image: url(../Resource/book_image.png);
            background-size: 30px;
            background-repeat: no-repeat;
            background-position: left center;
            padding-left: 40px;
            line-height: 40px;
        }

    </style>
</head>
<body>
    <!-- <div></div> -->
    <h1>회사회사</h1>
    <ul>
        <li>회사소개</li>
        <li>도서</li>
        <li>자료실</li>
        <li>문의사항</li>
    </ul>
</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

CSS 연습  (0) 2022.12.29
background예제 2  (0) 2022.12.28
Position예제2  (0) 2022.12.28
Position예제  (0) 2022.12.28
float예제2  (0) 2022.12.28
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
            postion : static > postion을 지정하지 않았을때 기본값. top, right, lefr, bottom을 무시
            postion : relative > postion이 static이었을때 위치를 기준으로 움직임
            postion : abolute > postion이 static이 아닌 가장 가까운 부모/선조를 기준으로 움직인다.
            postion : fixed > 스크롤에 구애받지 않고 위치를 사수한다.
        */
        body > div {
            width: 31.25px;
            height: 30.25px;
            background-color: darkcyan;
        }
        body > div > div {
            position: relative;
            width: 30px;
            height: 30px;
            background-color: cornflowerblue;
        }
        #div1 {
            position: absolute;
            left: 30px;
            top: 30px;
            width: 50%;
            height: 50%;
            background-color: darkseagreen;
        }
        #div2 {
            position: relative;
            right: 10px;
            bottom: 10px;
            border-radius: 50%;
            width: 50%;
            height: 50%;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div id="div1"></div>
            <div id="div2"></div>
        </div>
    </div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

background예제 2  (0) 2022.12.28
background와 vw,vh  (2) 2022.12.28
Position예제  (0) 2022.12.28
float예제2  (0) 2022.12.28
float예제1  (0) 2022.12.28
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        p {
            width: 300px;
            box-sizing: border-box;
            border: 3px solid #ccc;
        }
        #pos1{
            /* absolute : 부모기준으로 이동 */
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: white;
        }
        #pos2{
            /* absolute : 부모기준으로 이동 */
            position: absolute;
            top: 50px;
            right: 50px;
            background-color: white;
        }
        #pos3{
            position: absolute;
            bottom: 0;
        }
        
    </style>
</head>
<body>
    <p id="pos1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p id="pos2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <p id="pos3">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

background와 vw,vh  (2) 2022.12.28
Position예제2  (0) 2022.12.28
float예제2  (0) 2022.12.28
float예제1  (0) 2022.12.28
3단 레이아웃  (0) 2022.12.28

+ Recent posts

728x90
반응형
">