728x90
반응형
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  (1) 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  (1) 2022.12.28
Position예제2  (0) 2022.12.28
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p > span {
            background-color: rgb(0, 0, 189);
            line-height: 2;
            font-size: 30px;
            color: white;
            font-weight: bold;
        }

        .a1 {
            color: red;
            font-weight: bold;

        }

        .a2 {
            font-weight: bold;
        }

        div > sup {
            font-style: italic;
        }


    </style>
</head>
<body>
    <fieldset>
        <p>
            <span>탐라국 입춘굿<span>            
        </p>
            
        <div>
            제주도의 문화축제 중에서 유일하게 <span class="a1">탐라 시대부터 내려온 축제</span>이다
        </div>
        </br>

        <div>
            제주에서 입춘은 <span class="a2">새철</span><sup>(제주어, 샛절)</sup> 드는 날이라 한다.
        </div>

        <div>
            하늘의 1만 8,000 신이 지상으로 내려와 새해 일들을 시작하는 때다.
        </div>
    </fieldset>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

표 스타일2  (0) 2022.12.28
표 스타일  (0) 2022.12.28
font연습  (0) 2022.12.28
CSS형제선택자 연습  (0) 2022.12.28
CSS연습(자식선택자)  (0) 2022.12.28
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>형제 연습</title>
    <style>
        /* 현제 선택자: {선택자1} ~ {선택자2} : 선택자 1에 의해 선택된 요소 뒤에 붙어나오는 서택자2에 해당하는 요소를 선택한다. 떨어져 있어도 된다. 같은 부모 내에서! */
        ul > span ~ li {
            color: blue;
        }
        /* 인접형태 선택자: {선택자1} + {선택자2} 선택자1에 의해 선택된 요소 바로 뒤에 있는 선택자2를 선택한다. 떨어져 있으면 안되고, 해당하는 모든 형제를 선택을 한다. 같은 부모 내에서! */
        ul > li + li {
            color: greenyellow;
        }

        input[type='text']{
            width: 10px;
        }
        

    </style>
</head>
<body>
    <ul>
        <span>시작</span>
        <li>목록1</li>
        <a href="https://www.naver.com">링크</a>
        <input type="text" value="test">
        <input type="button" value="bt">
        <input type="radio" value="ra">
        <li>목록2</li>
        <span>변절자</span>
        <li>목록3</li>
        <li>목록4</li>
    </ul>
    <ul>
        <li>목록5</li>
        <li>목록6</li>
    </ul>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

font연습2  (0) 2022.12.28
font연습  (0) 2022.12.28
CSS연습(자식선택자)  (0) 2022.12.28
CSS연습  (0) 2022.12.28
폰트연습  (1) 2022.12.25
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자식선택자</title>

    <style>
        span{
            color: red;
        }

        /* 후손 선택자: {부모선택자} {자식선택자} -> 부모 안에 있는 자식을 전부 선택함 */
        body span {
            font-style: italic;
        }
        /* 자식 선택자: {부모 선택자} > {자식 선택자} -> 부모 요소 바로 아래에있느 자식 요소를 선택 */
        body > span {
            color: chartreuse;
        }
        /*  */
        test, div {
            color: chartreuse!important;
        }

    </style>

</head>

<body>
    <span>ONE</span>
    <span>ONE BY ONE</span>
    <div>
        <span>TWO</span>
        <div>
            <test>TEST</test>
            <span>Three</span>
            <span class="f">Four</span>
            <span id="five">Five</span>
        </div>
    </div>    
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

font연습  (0) 2022.12.28
CSS형제선택자 연습  (0) 2022.12.28
CSS연습  (0) 2022.12.28
폰트연습  (1) 2022.12.25
form활용하기  (0) 2022.12.25
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CSS연습</title>

    <style>
        /* 
            요소 선택자(Element Selector): 태그 이름으로 선택
            클래스 선택자(Class Selector): 태그의 class 속성(Attribute)로 선택한다 <- 가장 많이 사용
            아이디 선택자(ID Selector): 태그의 id 속성으로 선택한다. (#을 붙임)
        
        */
        
        a {
            color: #FFFFFF;
            color: green;
        }

        .color-blue {
            color: blue;
        }
        .text-big{
            font-size: 50px;
        }

        #a-id {
            color: chartreuse;
        }
        


    </style>

</head>
<body>
    <a href="#" style="color: red; text-decoration: none;">I'm Red</a>
    <br><a href="#">JUST A</a>
    <br><a href="#" class="color-blue text-big">I'm big</a>
    <br><a href="#" id="a-id">I'm ID</a>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

CSS형제선택자 연습  (0) 2022.12.28
CSS연습(자식선택자)  (0) 2022.12.28
폰트연습  (1) 2022.12.25
form활용하기  (0) 2022.12.25
HTML 날짜입력 메뉴 만들기  (0) 2022.12.25

+ Recent posts

728x90
반응형
">

티스토리툴바