728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        #container {
            text-align: center;
        }

        table, tr, td{
            border: 1px solid black;
        }

        table{
            width: 200px;
            margin: 0 auto;
            border-collapse: collapse;

        }
        /* table 안에 있는 tr 전부 중 2n+1 번째 (-> 홀수 번쨰 ) 요소만 적용해 주세요*/
        table tr:nth-of-type(2n + 1){
            background-color: gray;
        }

        h1::after {
            display: block;
            color: red;
            content: '여기는 테이블 입니다.';
        }



    </style>
</head>
<body>
    <div id="container">
        <h1>웹개발</h1>

        <table>
            <tr><td>HTML</td></tr>
            <tr><td>java</td></tr>
            <tr><td>CSS</td></tr>
            <tr><td>Node</td></tr>
            <tr><td>python</td></tr>
        </table>


    </div>
</body>
</html>
728x90
반응형
저작자표시

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

teansform기본  (2) 2022.12.29
가상선택자3  (0) 2022.12.29
가상 선택자  (0) 2022.12.29
그라데이션 응용  (0) 2022.12.29
radial그라데이션  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* div {
            background-color: cadetblue;
            
        } */
        
        /* div:hover {
            background-color: aqua;
        } */
        
        body > div > a:nth-child(odd) {
            /* 
                odd : 홀수번째 모두 선택
                even : 짝수번째 모두 선택 
            */
            color: gold;
        }
        body > label:hover {
            color: cornflowerblue;
        }
        /* body 자식 태그 중, agree 라는 클래스를 가지는 요소의 자식 중 input 테그인데, type속성이 checkbox 인거 그리고 그 체크박스가 체크가 되어있을 때, 그 인접 선택자 중 warning 이라는 클래스 속성을 가지는 요소에 적용해라 */
        body > .agree > input[type=checkbox]:checked ~ .warning {
            /* 
                display : none 과 다름
                눈에만 안보이게 하고 공간은 여전히 차지하게 하세요. 
            */
            visibility: hidden;
        }


        /* body 안에 div의 자식에서 a테그 중, 첫번째 자식 요소(첫번째 a태그) 를 선택 */
        body > div > a:first-child {
            color: cadetblue;
        }
        /* body 안에 div의 자식에서 a테그 중, 세번째 자식 요소(두번째 a태그 > br도 포함해야됨) 를 선택 */
        body > div > a:nth-child(3) {
            color: dodgerblue;
        }

        body > div > a:last-child {
            color: red;
        }

        /* div의 자식 중, 홀수 번째 요소중에서 첫번째와 마지막 요소를 제외한 요소에 적용시켜주세요. */
        body > div > a:nth-child(odd):not(:first-child):not(:last-child):hover{
            color: lightpink;
            font-size: 40px;
            text-decoration: dashed;
        }

    </style>
</head>
<body>
    <label class="agree">
        <input type="checkbox">
        <span>위 약관을 읽어보았고 동의합니다.</span><br>
        <span class="warning">위 약관을 읽고 동의해 주세요.</span>
    </label>
    <div>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a>
    </div>
</body>
</html>
728x90
반응형
저작자표시

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

가상선택자3  (0) 2022.12.29
가상선택자2  (0) 2022.12.29
그라데이션 응용  (0) 2022.12.29
radial그라데이션  (0) 2022.12.29
linear그라데이션  (0) 2022.12.29
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

+ Recent posts

728x90
반응형
">

티스토리툴바