[CSS] CSS3 속성

728x90

01 박스 속성

- 웹 페이지의 레이아웃을 구성할 때 가장 중요

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

박스 크기와 여백

- width와 height 속성 : 글자를 감싸는 영역의 크기를 지정

- border : 테두리의 두께 지정

- margin : 테두리와 다른 태그의 간격을 지정

- padding : 테두리와 바깥쪽 여백을 지정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 속성</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;

            /*solid black : 실선, 검정색*/
            border:20px solid black;

            /*여백*/
            margin: 10px; /*바깥여백*/
            padding: 30px; /*안쪽여백*/
        }

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

태그 전체의 크기 구하기

* margin, border, padding 속성은 양쪽에 위치하므로 2를 곱함

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

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

* margin 속성과 padding 속성은 두 가지 방법으로 상하좌우를 각각 지정할 수 있음

1. 네 방향 속성 정하기 : 순서대로 크기 단위 띄어쓰기

2. 두 방향씩 속성 지정하기 : 네 방향을 2개씩 묶어 지정

박스 테두리

- border-width : 테두리 두께

- border-style : 테두리 형태

- border-color : 테두리 색상

- border

- border-width, border-style, border-color 속성을 한번에 입력 가능

<style>
	.box{
    	border: thick dashed black;
    }
</style>

- 상하좌우 속성을 각각 입력할 수 있음

1. 기본 테두리 만들기

<head>
    <title>CSS 속성</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>

2. 둥근 테두리 만들기

<style>
        .box{
            border-width: thick;
            border-style: dashed; /*실선*/
            border-color: black;
            border-radius: 20px;
        }
</style>

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

<style>
        .box{
            border-width: thick;
            border-style: dashed; /*실선*/
            border-color: black;
            /* border-radius: "왼쪽 위", "오른쪽 위", "오른쪽 아래", "왼쪽 아래" */
            border-radius: 50px 40px 20px 10px;
        }
</style>

02 가시 속성

가시 속성

- 태그가 화면에 보이는 방식을 지정

- display 속성

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

block 형식, inline 형식

- block 형식, inline-block 형식 : margin, padding 속성을 상하좌우 네 방향으로 지정할 수 있음

- inline 형식 : margin, padding 속성을 왼쪽과 오른쪽으로만 지정할 수 있음

<head>
    <style>
        #box{
            display: inline-block;
            background-color: brown;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <p>의미 없는 더미 객체</p>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
    <p>의미 없는 더미 객체</p>
</body>
</html>

<style>
        #box{
            display: inline-block;
            background-color: brown;
            width: 100px;
            height: 50px;
            margin: 10px;
        }
    </style>

- 차이가 별로 없어 보이는 것 같지만.. 어쨌든 여백이 조금더 늘어났음을 알 수 있다.

03 배경 속성

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

배경 이미지 삽입과 크기 지정

- background-image 속성

- 배경 이미지 지정

- URL 그레이디언트 입력

- background-size 속성

- 배경 이미지 크기

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

만약, background-size: 100%, 250px;로 지정한다면 뒤에 있는 그림인 BackgroundBack.png만 250px로 바뀐다

배경 이미지 반복과 부착 형태, 위치

- background-repeat 속성

- 배경 이미지의 반복 형태 지정

- repeat-x : X축 방향으로만 이미지 반복

- repeat-y : Y축 방향으로만 이미지 반복

- background-attachment 속성

- 배경 이미지를 화면에 고정

- background-position 속성

- 배경 이미지의 배치 위치 지정

- background-position: 키워드;

- background-position: X축 위치;

- background-position: X축 위치 Y축 위치;

<style>
        body{
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat; /*반복 안함*/
            background-attachment: fixed; /*화면 고정*/
            /*background-attachment: scroll;*/ /*그림도 같이 이동*/
            /*background-position: bottom;*/ /*맨 아래에 위치*/
            background-position: 50px 50%; /*가로축, 수직방향(퍼센트비율, px) */
        }
</style>

배경 속성 정리

04 글자 속성

- font-size 속성: 글자 크기

- font-family 속성: 글꼴

- generic-family : 다국적 사용자 대상용 글꼴

<head>
    <title>글꼴 속성</title>
    <style>
        .a{font-size: 32px;}
        .b{font-size: 2em;}
        .c{font-size: large;}
        .d{font-size: small;}

        /*글꼴체 적용*/
        .font_arial{font-family: 궁서체, 굴림체;} /*궁서체가 지원되지 않는다면 굴림체를 사용*/
        .font_roman{font-family: 'Time new Roman';}
    </style>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p class="a">Lorem ipsum</p>
    <p class="b">Lorem ipsum</p>
    <p class="c">Lorem ipsum</p>
    <p class="d">Lorem ipsum</p>
    <p>Lorem ipsum</p>

    <p class="font_arial">Lorem ipsum</p>
    <p class="font_roman">Lorem ipsum</p>
</body>

글자의 스타일과 두께

- font-style 속성: 글자 스타일

- font-weight 속성: 글자 두께

.a{font-size: 32px;
            font-style: italic;
            font-weight: bold;}

글자 정렬

- text-align 속성: 글자 정렬

<head>
    <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 amet</p>
    <p class="font-bold font-right">2021.10.19</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium autem nesciunt ratione soluta possimus, nam, dignissimos corrupti nulla placeat rerum eveniet natus molestias laborum nemo accusamus fuga odit ad nisi!</p>
</body>

<head>
    <style>
        .font-center{text-align: center;}
    </style>
</head>
<body>
    <span class="font-center">Lorem ipsum dolor amet</span>
    <p class="font-center">Lorme ipsum dolor amet</p>
</body>

span 태그는 인라인 형식이라 이미 자신의 공간만큼 다 차지하고 있는 것이다

p 태그는 블록 형식이라 한 블록의 공간을 자신이 차지하고 있는 것이다

글자를 수직 중앙 정렬

- 글자 높이 지정하는 line-height 속성을 사용한 글자 수직 중앙 정렬

<head>
    <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: orange;
            border: 10px solid #ffffff;
            border-radius: 30px;
            box-shadow: 5px 5px 5px #a9a9a9; /*그림자처리*/
        }

        .button > a { 
            display: block; /*자식태그*/
            line-height: 70px;
        }
    </style>
</head>
<body>
    <div class="button">
        <a href="#" class="font-big font-italic font-bold font-center">Click</a>
    </div>
</body>

링크 글자의 밑줄

- text-decoration - <a>태그에 href 속성 지정하면 적용되는 밑줄 제거

<head>
    <style>
        a{text-decoration: none;}
    </style>
</head>
<body>
    <h1>
        <a href="#">Lorem ipsum dolor amet</a>
    </h1>
</body>

05 위치 속성

요소의 고정 위치와 상대 위치 지정

- position: 요소의 위치 지정 형식 설정

- 절대 위치 좌표: absolute, fixed

- 상대 위치 좌표: relative, static

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

<head>
    <style>
        .box{
            width: 100px;
            height: 100px;
            position: absolute; /*겹쳐 있음*/
        }
        .box:nth-child(1) {
            background-color: teal;
            left: 10px;
            top: 10px;
            z-index: 100;
        }
        .box:nth-child(2) {
            background-color:thistle;
            left: 50px;
            top: 50px;
            z-index: 10;}
        .box:nth-child(3) {
            background-color:steelblue;
            left: 90px;
            top:  90px;
            z-index: 1; /*겹쳤을 때 순서 변경, 값 중 제일 큰 값 먼저*/}
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

내용이 요소 크기를 벗어날 때 처리

overflow

- 내용이 요소 크기를 벗어나 모두 보여주기 힘들 때 어떻게 보여줄지 지정

- float 속성과 함께 자주 사용

hidden	영역을 벗어나는 부분 감춤
scroll	영억을 벗어나는 부분을 스크롤로 만듦

overflow-x, overflow-y 속성: 특정한 방향으로만 스크롤 생성

<head>
    <style>
        .box{
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: teal;
            left: 10px;
            top: 10px;
            z-index: 100;
        }
        .box:nth-child(2) {
            background-color:thistle;
            left: 50px;
            top: 50px;
            z-index: 10;}
        .box:nth-child(3) {
            background-color:steelblue;
            left: 90px;
            top:  90px;
            z-index: 1;}
        body > div {
            width: 400px;
            height: 100px;
            border: 3px solid black;
            position: relative;
            overflow-y: scroll;
        }
   </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>

06 유동 속성

float 속성

- 웹 페이지의 레이아웃을 잡을 때 많이 사용

- 웹 브라우저 크기에 상관없이 공지 등을 일정한 위치에 고정할 때 적합

left	태그를 왼쪽에 붙임
right	태그를 오른쪽에 붙임

<head>
    <style>
        img{
            float: left;
        }
   </style>
</head>
<body>
    <img src="daum.png" alt="다음 로고 그림">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, saepe consequatur tempore id porro modi. Id tempore hic provident commodi autem nihil aliquid optio reprehenderit cum, sequi laudantium eius aut!</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, non? Eius sunt tenetur odio fugiat doloremque consectetur rem commodi enim qui facere. Obcaecati reiciendis ad suscipit eveniet ut exercitationem facilis.</p>
</body>

<head>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            margin: 10px;
            padding: 10px;
            float: left; /*왼쪽으로 붙임*/
        }
   </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>

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

그림자 속성

<head
    <style>
        div{
            border: 3px solid black;
            box-shadow: 10px 10px 30px grey;
            text-shadow: 5px 5px 5px black; /*오른쪽, 아래쪽, 흐림정도, 색깔*/
        }
   </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div>
</body>
</html>

선형 그레이디언트 분석

- linear-gradient() : 선형 그레이디언트가 진행될 각도와 색상 블록을 차례로 입력

- radient-gradient() : 원형 그레이디언트

<head>
    <style>
        div{
            border: 3px solid black;
            box-shadow: 10px 10px 30px grey;
            text-shadow: 5px 5px 5px black; /*오른쪽, 아래쪽, 흐림정도, 색깔*/
        
        background: linear-gradient(45deg,  #bfd255 0%,#8eb92a 22%,#bfd255 39%,#bfd255 39%,#bfd255 42%,#72aa00 63%,#72aa00 74%,#72aa00 79%,#9ecb2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        }
   </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div>
</body>
</html>

https://www.colorzilla.com/gradient-editor/ <<여기에서 그라데이션을 만들어서 style의 div에 적용한 것!

728x90

'HTML' 카테고리의 다른 글

[CSS] 반응형 웹 (0)	2021.11.04
[CSS] 레이아웃 구성 (0)	2021.10.28
[CSS] CSS3 기초 : 선택자와 단위 (0)	2021.10.10
[HTML] 입력 양식 태그와 구조화 태그 (0)	2021.10.10
[HTML] HTML5 기본 태그 (0)	2021.10.09

ClouD

[CSS] CSS3 속성

'HTML' 카테고리의 다른 글

티스토리툴바

[CSS] CSS3 속성

'HTML' 카테고리의 다른 글

'HTML' Related Articles

티스토리툴바