CSS3 속성

HTML 2023. 10. 6. 17:37

박스 속성

margin 속성	테두리와 다른 태그 사이의 테두리 바깥쪽 여백
border 속성	테두리
padding 속성	테두리와 글자 사이의 테두리 안쪽 여백, 배경색은 padding 영역까지만 적용
width 속성	글자를 감싸는 영역의 가로 크기
height 속성	글자를 감싸는 영역의 세로 크기

전체 너비 = width+ 2x(margin+border+padding)

전체 높이 = height+ 2x(margin+border+padding)

<!DOCTYPE html>
<html>
<head>
    <title>CSS Preperty Basic</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

width, height 적용

<!DOCTYPE html>
<html>
<head>
    <title>CSS Preperty Basic</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;

            border: 20px solid black;
            margin: 10px; padding: 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

margin, padding 속성 적용

흰 margin 검 border 빨 padding

<!DOCTYPE html>
<html>
<head>
    <title>CSS Preperty Basic</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
            
            /* margin: 위쪽 오른쪽 아래쪽 왼쪽 */
            /* padding: 위쪽 오른쪽 아래쪽 왼쪽 */
            margin: 0 30px 0 30px;
            padding: 0 30px 0 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

네 방향 속성 지정

<!DOCTYPE html>
<html>
<head>
    <title>CSS Preperty Basic</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
            
            /* margin: <위아래> <왼쪽오른쪽> */
            /* padding: <위아래> <왼쪽오른쪽 */
            margin: 0 30px;
            padding: 0 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

두 방향씩 속성 지정

<!DOCTYPE html>
<html>
<head>
    <title>CSS Preperty Basic</title>
    <style>
        .box {
            border-width: thick;
            border-style: dashed;
            border-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div>
</body>
</html>

기본 테두리 만들기

둥근 테두리

border-radius: 20px 추가

<!DOCTYPE html>
<html>
<head>
    <title>CSS Preperty Basic</title>
    <style>
        .box {
            border-width: thick;
            border-style: dashed;
            border-color: black;
            /* border-radius: "왼쪽 위" "오른쪽 위" "오른쪽 아래" "왼쪽 아래" */
            border-radius: 50px 40px 20px 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div>
</body>
</html>

모서리마다 둥글기를 다르게 적용하기

가시 속성

태그가 화면에 보이는 방식, 대표적으로 display 속성

키워드	설명
none	화면에 보이지 않음
block	블록 박스 형식으로 지정
inline	인라인 박스 형식으로 지정
inline-block	블록과 인라인의 중간 형태로 지정

<!DOCTYPE html>
<html>
<head>
    <title>CSS Preperty Basic</title>
    <style>
        #box {
            display: none;
        }
    </style>
</head>
<body>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
</body>
</html>

    <style>
        #box {
            display: block;
        }
    </style>

    <style>
        #box {
            display: inline;
        }
    </style>

    <style>
        #box {
            display: inline-block;
        }
    </style>

인라인과 인라인-블록 형식이 차이 없어 보이지만 width 속성, height 속성, margin 속성을 이용하면 차이 확인 가능

<!DOCTYPE html>
<html>
<head>
    <title>CSS Display Property</title>
    <style>
        #box {
            display: inline;
            background-color: red;
            width: 100px; height: 50px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <p>의미 없는 더미 객체</p>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
    <p>의미 없는 더미 객체</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>CSS Display Property</title>
    <style>
        #box {
            display: inline-block;
            background-color: red;
            width: 100px; height: 50px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <p>의미 없는 더미 객체</p>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
    <p>의미 없는 더미 객체</p>
</body>
</html>

배경 속성

속성	설명
background-image	배경 이미지 삽입
background-size	배경 이미지의 크기 지정
background-repeat	배경 이미지의 반복 형태 지정
background-attachment	배경 이미지의 부착 형태 지정
background-position	배경 이미지의 위치 지정
background	한 번에 모든 배경 속성 입력

<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Property</title>
    <style>
        body {
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
        }
    </style>
</head>
<body>

</body>
</html>

두 사진을 삽입했을 때 먼저 입력한 이미지(front)가 앞쪽 위치

코드 입력했을 때 결과 값

    <style>
        body {
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100% 250px;
        }
    </style>

background size에 100%, 250px(높이) 추가

background size 넣을 때 유의할 점

    <style>
        body {
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            /* 첫 번째 이미지의 너비: 100%
               두 번째 이미지의 너비: 250px */
            background-size: 100%, 250px;
        }
    </style>

공백 대신 쉼표를 넣으면 각 배경에 서로 다른 크기를 입력하는 것으로 인식해 이런 출력 값이 나올 수 있음

반복 없애기

<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Property</title>
    <style>
        body {
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

</body>
</html>

    <style>
        body {
            background-color: #E7E7E8;
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>

배경 이미지 고정하려면 scroll에서 fixed로 바꿔 주면 됨

background-position: 0px 50%;

글자 속성

글꼴 지정

<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Property</title>
    <style>
        .font_arial { font-family: Arial;}
        .font_roman { font-family: '없는 글꼴', 'Times New Roman';}
    </style>
</head>
<body>
    <h1 class="font_arial">Lorem ipsum dolor sit amet</h1>
    <p class="font_roman">Lorem ipsum</p>
</body>
</html>

웹 페이지를 사용할 사용자 컴퓨터에 없을 때를 대비해 font-family 속성을 여러 개 입력

웹 브라우저 고유 글꼴 san-serif, serif

font-style 속성	글자 스타일 > italic(기울임) 같은 것들
font-weight 속성	글자 굵기
text-align 속성	글자 정렬

<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Property</title>
    <style>
        .font_big {font-size: 2em;}
        .font_italic {font-style: italic;}
        .font_bold {font-weight: bold;}
        .font_center {text-align: center;}
        .font_right {text-align: right;}
    </style>
</head>
<body>
    <p class="font_big font_italic font_bold font_center">Lorem ipsum dolor sit amet</p>
    <p class="font_bold font_right">2023.07.30</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipscing elit.</p>
</body>
</html>

글자 수직 중앙 정렬

<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Property</title>
    <style>
        .font_big {font-size: 2em;}
        .font_italic {font-style: italic;}
        .font_bold {font-weight: bold;}
        .font_center {text-align: center;}

        .button {
            width: 150px;
            height: 70px;
            background-color: #FF6A00;
            border: 10px solid #FFFFFF;
            border-radius: 30px;
            box-shadow: 5px 5px 5px #A9A9A9;
        }

        .button > a {
            display: block;
        }
    </style>
</head>
<body>
    <div class="button">
        <a href="#" class="font_big font_italic font_bold font_center">Click</a>
    </div>
</body>
</html>

click 글씨가 수평으로는 중앙 정렬되지만 수직으로는 중앙 정렬되지 않음

해결법

        .button {
            width: 150px;
            line-height: 70px;
            background-color: #FF6A00;
            border: 10px solid #FFFFFF;
            border-radius: 30px;
            box-shadow: 5px 5px 5px #A9A9A9;
            }

height > line-height로 바꿔 주면 수직으로 중앙 정렬됨

링크 글자의 밑줄은 text-decoration 속성을 이용해 지울 수 있음

{text-decoration: none;}

위치 속성

position 속성과 키워드

키워드	설명
absolute	절대 위치 좌표 설정
fixed	화면을 기준으로 절대 위치 좌표 설정
relative	초기 위치에서 상하좌우로 위치 이동
static	위쪽에서 아래쪽으로 순서대로 배치

<!DOCTYPE html>
<html>
<head>
    <title>CSS Position Property</title>
    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .box:nth-child(1) { background-color: red; }
        .box:nth-child(2) { background-color: green; }
        .box:nth-child(3) { background-color: blue; }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

absolute 키워드 적용

파란색이 보이지만 실제로 red - green - blue로 쌓여서 chrome으로 실행했을 때 blue가 보임

left 속성과 top 속성 적용

    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
        left: 10px; top: 10px;
    }
        .box:nth-child(2) {
            background-color: green;
        left: 50px; top: 50px;
    }
        .box:nth-child(3) {
            background-color: blue;
        left: 90px; top: 90px;
    }
    </style>

z-index 속성 적용

    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
        left: 10px; top: 10px;
        z-index: 100;
    }
        .box:nth-child(2) {
            background-color: green;
        left: 50px; top: 50px;
        z-index: 10;
    }
        .box:nth-child(3) {
            background-color: blue;
        left: 90px; top: 90px;
        z-index: 1;
    }
    </style>

z-index로 도형 순서 변경, 숫자가 클수록 앞에 위치

위치 속성 공식

아래 예제는 공식 적용 x

<!DOCTYPE html>
<html>
<head>
    <title>CSS Position Property</title>
    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
        left: 10px; top: 10px;
        z-index: 100;
    }
        .box:nth-child(2) {
            background-color: green;
        left: 50px; top: 50px;
        z-index: 10;
    }
        .box:nth-child(3) {
            background-color: blue;
        left: 90px; top: 90px;
        z-index: 1;
    }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor amet</h1>
    <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h1>Lorem ipsum dolor amet</h1>
</body>
</html>

발생한 문제

1. h1 태그가 붙어 있음

2. 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않음

position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않음

자손의 position 속성에 absolute 키워드를 적용할 때는 부모 태그에 몇 가지 처리가 필요

1번 해결

        body > div {
            width: 400px; height: 100px;
            border: 3px solid black;
        }

2번 해결

        body > div {
            width: 400px; height: 100px;
            border: 3px solid black;
            position: relative;
        }

내용이 요소 크기를 벗어날 때 > overflow 속성

키워드	설명
hidden	영역을 벗어나는 부분 감춤
scroll	영역을 벗어나는 부분을 스크롤로 만듦

hidden 적용

        body > div {
            width: 400px; height: 100px;
            border: 3px solid black;
            position: relative;
            overflow: hidden;
        }

왼쪽 사진은 잘린 부분은 그냥 숨겨지고 오른쪽 사진은 스크롤을 내려 아래에 있는 부분도 볼 수 있음

overflow 속성에 scroll 키워드를 적용하면 무조건 모든 축에 스크롤이 생성되는데, 특정 방향으로만 스크롤 생성하고 싶을 때

> overflow-x 속성, overflow-y 속성 사용

        body > div {
            width: 400px; height: 100px;
            border: 3px solid black;
            position: relative;
            overflow-y: scroll;
        }

예제 스페셜 드레스 샵

<!DOCTYPE html>
<html>
<head>
    <title>스페셜 드레스 샵</title>
    <style>
        body {
            color: #fcd303;
            background-color: #0a0c4d;
            width: 600px;
            display: inline;
        }

        img {
            margin-left: auto;
            margin-right: auto;
            display: block;
            float: inline-end;        
        }

        .li {text-align: left; margin-left: 170px;}
        .font_big {font-size: 1.5em;}
        .font_bold {font-weight: bold;}
        .font_center {text-align: center;}
        .font_sizeup {font-size: 120%;}

        .button {
            width: 300px;
            line-height: 70px;
            background-color: #fcd303;
            margin-right: auto;
            margin-left: auto;
        }

        .button > a {
            display: block;
            text-decoration: none;
            color: black;
        }
        #explain {
            color: whitesmoke;
        }
    </style>
</head>
<body>
    <h1 class="font_center">스페셜 드레스 샵</h1>
    <p class="font_sizeup font_center">Special Dress Shop</p>
    <p id="explain" class="font_center">생일, 결혼기념일, 만난 기념일 등 특별한 날에 스페셜 드레스를 입고 포토존에서 멋진 추억의 사진을 남겨보세요.</p><br>
    <img src="C:\Users\mit012\Desktop\HTML STUDY\Dress.jpg" width="300"><br>
    <ul>
        <li class="li"> 기간: 매주 토/일요일
        <div>13:00 ~ 마감시간 전까지</div></li>
        <li class="li">· 장소: 기념품 판매점 옆 스페셜 드레스
        <div>※ 키즈, 커플 드레스도 입고 되었어요!</div></li><br>
    </ul>
    <div class="button">
        <a href="#" class="font_big font_bold font_center">이용요금 및 이용방법</a>
    </div>
</body>
</html>

유동 속성

float 속성으로 레이아웃 잡기

태그를 오른쪽, 왼쪽에 붙일 수 있음

img 태그에 적용하면 이미지와 글이 어우러진 형태로 출력

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Float Property</title>
    <style>
        .box {
            width: 100px; height: 100px;
            background-color: red;
            margin: 10px; padding: 10px;
            /* 태그를 왼쪽으로 붙입니다. */
            float: left;
        }

    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Float Property</title>
    <style>
        .box {
            width: 100px; height: 100px;
            background-color: red;
            margin: 10px; padding: 10px;
            /* 태그를 오른쪽으로 붙입니다. */
            float: right;
        }

    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>
</html>

div 태그 구분하는 숫자를 보면 첫 번째 div 태그가 오른쪽에 붙고, 두 번째 div 태그는 그 옆에 붙음

여러 태그의 float 속성에 right 키워드 적용할 시 순서에 주의할 것

그림자와 그레이디언트 속성

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box {
            border: 3px solid black;
            box-shadow: 10px 10px 10px black, 10px 10px 20px orange, 10px 10px 30px red;
            text-shadow: 10px 10px 10px black, 10px 10px 20px orange, 10px 10px 30px red;
        }

    </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div> 
</body>
</html>

http://css3generator.com

CSS3Generator by @RandyJensen

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 sur

css3generator.com

Text Shadow Generator 또는 Box Shadow에서 생성

    <title>CSS3 Property Basic</title>
    <style>
        .box {
            background: linear-gradient(to bottom, #f2f9fe 0%,#cbe3ef 100%);
        }

    </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div> 
</body>
</html>

css 코드 외우지 않고 위 사이트에서 복사 - 붙여넣기, 타이핑 X

    <style>
        .box {
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }

    </style>

+ 추가 연습

border color

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        p.green {
            border-style: solid;
            border-color: green;
        }

    </style>
</head>
<body>
    <p class="green">경계선의 색상: green</p>
</body>
</html>

border image

<!DOCTYPE html>
<html>
<head>
    <title>Border Image</title>
    <style>
        div {
            border: 30px solid transparent;
            width: 300px; height: 50px;
            border-image: url(border.png) 50 50 round; /* chrome */
        }

    </style>
</head>
<body>
    <div>경계 이미지가 반복되면서 그려진다.</div>
</body>
</html>

반복은 명령어 안 넣어 적용 x

transparent - 투명도

border shadow

<!DOCTYPE html>
<html>
<head>
    <title>Border Image</title>
    <style>
        div {
            width: 300px; height: 50px;
            background-color: green;
            box-shadow: 20px 10px 5px #666666;
        }

    </style>
</head>
<body>
    <div></div>
</body>
</html>

    <style>
        div {
            width: 300px; height: 50px;
            background-color: green;
            box-shadow: 20px 10px 10px inset #666666;
        }

    </style>

border style

<body>
<p style="border-style: none">none</p>
<p style="border-style: dotted">dotted</p>
<p style="border-style: dashed">dashed</p>
<p style="border-style: solid">solid</p>
<p style="border-style: double">double</p>
<p style="border-style: groove">groove</p>
<p style="border-style: ridge">ridge</p>
<p style="border-style: inset">inset</p>
<p style="border-style: outset">outset</p>
</body>

CSS-resize

<!DOCTYPE html>
<html>
<head>
    <title>CSS-resize</title>
    <style>
        div {
            border: 1px solid red;
            background-color: yellow;
            width: 100px; height: auto;
            resize: both;
            overflow: auto;
        }
    </style>
</head>
<body>
<div>박스의 크기를 조절하여 보세요!</div>
</body>
</html>

테이블 스타일

border 테이블의 경계선

border-collapse 이웃한 셀의 경계선을 합칠 것인지 여부

width 테이블의 가로 길이

height 테이블의 세로 길이

border-spacing 셀 사이의 거리

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        table, td, th { border: 1px solid blue; }
        table { width: 100%; }
        td { text-align: center; }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>이름</th>
            <th>이메일</th>
        </tr>
        <tr>
            <td>김철수</td>
            <td>chul@google.com</td>
        </tr>
        <tr>
            <td>김영희</td>
            <td>young@google.com</td>
        </tr>
    </table>
</body>
</html>

<head>
    <title>Document</title>
    <style>
        table, td, th { border: 1px solid blue; }
        td { height: 40px;
        vertical-align: bottom; }
    </style>
</head>

<head>
    <title>Document</title>
    <style>
        #list {
            font-family: 'Trebuchet MS', sans-serif;
            width: 100%;
        }
        #list td, #list th {
            border: 1px dotted gray;
            text-align: center;
        }
        #list th {
            color: white;
            background-color: blue;
        }
        #list tr.alt td {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table id="list">
        <tr>
            <th>이름</th>
            <th>이메일</th>
        </tr>
        <tr>
            <td>김철수</td>
            <td>chul@google.com</td>
        </tr>
        <tr class="alt">
            <td>김영희</td>
            <td>young@google.com</td>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>hong@google.com</td>
        </tr>
        <tr class="alt">
            <td>김수진</td>
            <td>sujin@google.com</td>
        </tr>
    </table>
</body>

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        caption {caption-side: bottom;}
    </style>
</head>
<body>
    <table border="1">
        <caption>VIP 고객 리스트</caption>
        <tr>
            <th>이름</th>
            <th>이메일</th>
        </tr>
        <tr>
            <td>김철수</td>
            <td>chul@google.com</td>
        </tr>
        <tr>
            <td>김영희</td>
            <td>young@google.com</td>
        </tr>
    </table>
</body>
</html>

왼쪽 caption-side: bottom; / 오른쪽 style 지정 안 했을 시 caption 출력 위치

caption-side 지정 안 했을 시 자동으로 top으로 출력됨

/* 1번 사진 collapse */
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid blue;
        }
    </style>
    
/* 2번 사진 separate */
    <style>
        table {
            border-collapse: separate;
        }
        table, th, td {
            border: 1px solid blue;
        }
    </style>

    <style>
        table, th, td {
            border: 1px solid green;
        }
        th {
            background-color: green;
            color: white;
        }
    </style>

<head>
    <title>Document</title>
    <style>
        table {
            border-collapse: separate;
            empty-cells: hide;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>이름</th>
            <th>이메일</th>
        </tr>
        <tr>
            <td>김철수</td>
            <td>chul@google.com</td>
        </tr>
        <tr>
            <td>김영희</td>
        </tr>
    </table>
</body>

<head>
    <title>Document</title>
    <style>
        #target1 {
            width: 100px; height: 50px;
            background-color: yellow;
            color: tomato;
        }
        #target2 {
            width: 100px; height: 50px;
            background-color: lightgreen;
            color: whitesmoke;
        }
    </style>
</head>
<body>
    <p id="target1">이것은 p요소입니다.</p>
    <div id="target2">이것은 div요소입니다.</div>
</body>

<head>
    <title>Document</title>
    <style>
        a:link {color: red;}
        a:visited {color: green;}
        a:hover {color: blue;}
        a:active {color: yellow;}
    </style>
</head>
<body>
    <p><a href="" target="_blank">여기가 링크입니다.</a></p>
</body>

리스트 스타일

속성	설명
list-style	리스트에 대한 속성을 한 줄로 설정
list-style-image	리스트 항목 마커를 이미지로 지정
list-style-position	리스트 마커의 위치를 안쪽인지 바깥쪽인지 지정
list-style-type	리스트 마커의 타입 지

<head>
    <title>Document</title>
    <style>
        ul { list-style: none;
            text-align: center;
            border-top: 1px solid red; border-bottom: 1px solid red;
            padding:10px 0;
        }
        ul li { display: inline;
            text-transform: uppercase;
            padding: 0 10px; letter-spacing: 10px;
        }
        ul li a {text-decoration:none; color:black;}
        ul li a:hover {text-decoration: underline;}
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>

<head>
    <title>Document</title>
    <style>
        p, h1 { border: dotted 3px red; }
    </style>
</head>
<body>
    <p style="margin-left: auto; margin-right: auto; width: 50%">
    My Text
</p>
</body>

<head>
    <title>Document</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        p {
            margin: 0px;
            padding: 0px;
            background-color: yellow; border: 1px solid red;
        }
        #target {
            margin: 10px;
            padding: 20px;
            background-color: lightgreen; border: 1px solid red;
        }
    </style>
</head>
<body>
    <p>margin: 0px, padding: 0px인 단락입니다.</p>
    <P id="target">margin: 10px, padding: 20px인 단락입니다.</P>
</body>

<head>
    <title>Document</title>
    <style>
        div {
            width: 100px; height: 100px;
            background: yellow;
            border: 1px solid red;
            transition: width 2s;
        }
        div:hover {
            width: 300px;
        }
    </style>
</head>
<body>
    <div>마우스를 올리면 박스가 늘어납니다.</div>
</body>

마우스를 떼면 원래 사이즈인 100px로 돌아감

<head>
    <title>Document</title>
    <style>
        div {
            margin:50px;
            width: 100px; height: 100px;
            background: yellow;
            border: 1px solid red;
            transition: width 3s, height 3s, border 3s,
transform 3s;
        }
        div:hover {
            width: 200px; height: 200px;
            border: 3px solid blue;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div>마우스를 올리면 박스가 회전하면서 커집니다.
    </div>
</body>

'HTML' 카테고리의 다른 글

요소 배치 (0)	2023.10.19
수평, 중앙, One True 정렬 레이아웃 (0)	2023.10.19
CSS3 기초: 선택자와 단위 (0)	2023.10.05
HTML 입력 양식 태그, 구조화 (0)	2023.10.05
HTML5 기본 (0)	2023.09.21

ABOUT ME

개발자 어쩌구 개발자 어쩌구

'HTML' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'HTML' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바