'style' 태그의 글 목록 (4 Page)

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>폰트연습</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');
        @font-face {
            font-family: '빙그레체';
            src: url(BinggraeSamanco.ttf);
        }
        
        .first {
            font-family: 'Nanum Brush Script', '빙그레체';
            font-size: 16px;
        }
        .second {
            font-family: 바탕;
            font-size: 1rem;    
            font-style: italic;
            font-weight: bold;
        }
        a {
            color: black;
            text-decoration: none;
        }
        p {
            text-align: center;
            background-color: blanchedalmond;
        }
        span{
            color: rgba(0, 0, 0 0.255);
            font-size: 60px;
            line-height: 2;
            text-shadow: 20px 20px 3px red;
            letter-spacing: 10px;
            text-align: center;  
            background-color: darkgoldenrod;  
        }
    </style>
</head>
<body>
    <p>
        <span>CSS3</span><br>
    </p>
    <a href="#">이동하기버튼</a>
    <p class="first">
        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 class="second">
        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>
</body>
</html>

728x90

저작자표시

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

CSS연습(자식선택자) (0)	2022.12.28
CSS연습 (0)	2022.12.28
form활용하기 (0)	2022.12.25
HTML 날짜입력 메뉴 만들기 (0)	2022.12.25
HTML간단한 입력칸 (0)	2022.12.25

728x90

<!DOCTYPE html>

<head>

<title>transition</title>

<style>

img {

width: 500px;

/* transition : 요소가 영향을 받는 선택자가 변경될 때 변경되는 CSS 속성에 대해 변화가 완료되기 까지 걸리는 시간과 방법에 대해 정의한다.*/

transition-duration: 5000ms;

/* transition-duration : transition이 완료되기 까지 걸리는 시간 지정. ms 혹은 s단위 사용.*/

transition-timing-function: ease;

/* transition-timing-function: 변화가 생긴 속성이 적용되는데 사용될 함수 지정.

ease-in : 시작은 느리게 끝은 빠르게

ease-out : 시작은 빠르게 끝은 느리게

ease-in-out : 시작과 끝은 느리게 중간이 빠르게

ease : ease-in-out이랑 비슷한데 시작이 좀 더 빠름

linear : 선형

cubic-bezier : 사용자 지정 입방체 베지어곡선에 따름 모든 함수는 시간대비(0~tran'-dur') 속성 변환 완료율(%)에 따른 2~3차 방정식을 풀이 될 수 있다.

*/

transition-property: ;

/* transition-property : 변화하는 속성을 제한한다. 속성을 콤마로 구분하여 여러개를 사용할 수 있음*/

/* transition 을 적용하는 모든 속성은 중간값이 있어야 한다.

가령, display나 position은 적용되지 않으며 width 나 height 같은 경우 또한 auto에서 리터럴로 적용할 수 없다.*/

}

img:hover {

filter: blur(10px) grayscale(100%);

}

</style>

</head>

<body>

</body>

</html>

728x90

저작자표시

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

배열 (0)	2022.12.25
for(반복문) (0)	2022.12.25
transform(요소의 형태나 위치를 변환) (1)	2022.12.24
padding(외부 여백) (0)	2022.12.24
position (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<title>transform</title>

<style>

/* transform : 요소의 형태나 위치를 변환시키기 위해 사용한다.*/

div {

top: 50%;

left: 50%;

width: 300px;

height: 300px;

background-color: rgb(1, 252, 252);

transform: translate(-50%, -50%) rotate(45deg) scale(50%);

/* transform 함수

- 띄우기로 구분하여 여러 함수 사용 가능

translate(x, y) : x 축으로 a만큼, y축으로 b만큼, a나 b에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.

translateX(a) : x축으로 a만큼. a에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.

translateY(b) : y축으로 b만큼. b에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.

rotate(x) : a도 만틈 회전함. 반드시 deg단위 사용

scale(a) : a비율 만틈 확대/축소한다. 기본 값 1(100%)

*/

position: absolute;

}

</style>

</head>

<body>

</body>

</html>

728x90

저작자표시

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

for(반복문) (0)	2022.12.25
transition(CSS속성 변환 시간제어) (0)	2022.12.24
padding(외부 여백) (0)	2022.12.24
position (0)	2022.12.24
opacity(투명도 설정) (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<title>padding</title>

<style>

span {

background-color: red;

padding: 15px;

/* padding : 외부 여백을 지정한다.*/

/* padding-top, matgin-right, padding-bottom 사용가능.*/

}

</style>

</head>

<body>

</body>

</html>

728x90

저작자표시

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

transition(CSS속성 변환 시간제어) (0)	2022.12.24
transform(요소의 형태나 위치를 변환) (1)	2022.12.24
position (0)	2022.12.24
opacity(투명도 설정) (0)	2022.12.24
margin(외부여백) (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<style>

body > div {

width: 200px;

height: 200px;

background-color: brown;

position: relative;

overflow: auto hidden;

/* overflow : x y */

/* overflow-x : a ; */

/* overflow-y : a ; */

/* auto : 안넘치면 아무것도 안함, 넘치면 스크롤*/

/* scroll : 안넘쳐도 스크롤바 보임*/

/* hidden : 넘치는 것은 안보이게 함*/

/* visible : 넘쳐도 그냥 보이게 함(기본 값)*/

}

body > div > div:nth-child(1) {

/* top: 25px; */

width: 100px;

height: 100px;

background-color: darkorange;

position: relative;

/*

position 속성 값

- static : 원래 있어야 하는 위치에 있게 된다.(기본값)

- relative : position 속성 값이 static 이었을때의 위치를 기준으로 움직인다.

- absolute : position 속성 값이 static 이 아닌 가장 가까운 부모/선조를 기준으로 움직인다. (없다면 문서 자체)

- fixed : 부모/선조 관계 없이 문서를 기준으로 하며 스크롤[ 영향을 받지 않고 그 자리에 떠있음.

이떄 absolute 및 fixed 는 다른요소의 흐름과 배치에 영향을 미치지 않는다.

*/

z-index: 1;

/* z-index : 화면에 표시될 순위. 기본값 0. 수치가 클수록 화면에 보이게 된다. 이 값이 같을 때에는 HTML상 보다 뒤에 명시된 요소가 우선 보이게 된다.*/

}

body > div > div:nth-child(2) {

top: 50px;

left: 200px;

width: 100px;

height: 100px;

background-color: green;

position: absolute;

z-index: 2;

}

body > div > div:nth-child(3) {

right: 25px;

bottom: 25px;

width: 100px;

height: 100px;

background-color: deeppink;

position: fixed;

}

span {

position: absolute;

}

</style>

</head>

<body>

<div>

</div>

aaaaaaaaaaaaaaaaaaaaaaaa<span>123123</span>aaaaaaaaaaaaaaaaaaaaaaaaaaa

</body>

</html>

728x90

저작자표시

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

transform(요소의 형태나 위치를 변환) (1)	2022.12.24
padding(외부 여백) (0)	2022.12.24
opacity(투명도 설정) (0)	2022.12.24
margin(외부여백) (0)	2022.12.24
font(폰트 설정과 외부 폰트 적용) (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<title>opacity</title>

<style>

div {

width: 200px;

height: 200px;

background-color: red;

color: black;

opacity: 50%;

/* opacity : 요소 자체의 투명도 설정 0~100% */

/* 단, 내용 전체도 같이 투명해짐으로 배경 투명 목적으로 상요하면 안됨.*/

}

</style>

</head>

<body>

<div>글씨글씨글씨글씨글씨글씨</div>

</body>

</html>

728x90

저작자표시

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

padding(외부 여백) (0)	2022.12.24
position (0)	2022.12.24
margin(외부여백) (0)	2022.12.24
font(폰트 설정과 외부 폰트 적용) (0)	2022.12.24
flex (0)	2022.12.24

[ 여기블로그 ]

style

linear그라데이션

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

CSS 연습

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

폰트연습

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

transition(CSS속성 변환 시간제어)

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

transform(요소의 형태나 위치를 변환)

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

padding(외부 여백)

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

position

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

opacity(투명도 설정)

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

+ Recent posts

티스토리툴바