CSS - 속성

CSS 속성

텍스트 속성
배경 색상 / 이미지 관련 속성
테두리 속성
여백 속성
display 속성 : inline / block / inline-block
float 속성
목록 관련 속성
위치 관련 속성
겹침 (레이어)
overflow
visibility / opacity
그림자

텍스트 속성

font-family : "굴림", "맑은 고딕"; /* 1순위 2순위, ... */
font-size : 40px;
color : blue; /* 글자색 */
font-style : italic;
font-weight : bold; /* 굵게 */
text-decoration : underline;
letter-spacing : 3px; /* 글자 사이 간격 */
word-spacing : 5px; /” 단어 사이 간격 */
line-height:10px; /* 줄 간격 */
text-align : center;
text-shadow : 2px 2px 2px black; /*(가로 세로 크기 색상) */

배경 속성

배경색

background-color : #00ff00;
background-color : #333;
background-color : rgb(0,255,0);
background-color : green;

배경 이미지 / 반복

background-image : url(back.png);
background-repeat : repeat;
background-repeat : no-repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;

테두리 유형 / 굵기 / 색상 지정

border:solid 1px red;
border-style : solid;
border-width : 3px; /* thin medium thick */
border-left : dotted;
border-right : double;
border-bottom : dashed;
border-top : solid;
border-color : red:;
border-radius : 10px; /* 모서리 둥글게 */
border-bottom-right-radius : 50px;

여백 속성 (paddig / margin)

inline과 block

display에서 inline과 block의 차이
block
- 행으로 배치
- 옆으로 나란히 배치 안됨
- 여백 있음

inline
- 옆으로 나란히 배치
- 여백 없이 내용물 만큼만 공간 차지

inline-block
- 인라인, 블록 성격 모두 포함
- 옆으로 나란히 배치되면서, 여백도 있음

inlineBlock.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block 예제</title>
    <style type="text/css">
        /* display 속성이 없으면 block이 default : 행으로 배치 / 여백 있음 */
        .greenBox {
            display: block;
            width: 150px;
            height: 75px;
            margin: 10px;
            border: solid 3px #73AD21;
        }
        .yellowBox {
            display: inline; /* 내용 만큼만 공간 차지 */
            width: 150px;
            height: 75px;
            margin: 10px;
            border: solid 3px yellow;
        }
        .blueBox {
            display: inline-block; /* 옆으로 배치되고 여백 있음 */
            width: 150px;
            height: 75px;
            margin: 10px;
            border: solid 3px blue;
        }
    </style>
</head>
<body>
    <h2>display 속성(block / inline / inline-block)</h2>

    <h5>block</h5>
    <div class="greenBox">박스1</div>
    <div class="greenBox">박스2</div>
    <div class="greenBox">박스3</div>
    <div class="greenBox">박스4</div>

    <br>
    <h5>inline</h5>
    <div class="yellowBox">박스1</div>
    <div class="yellowBox">박스2</div>
    <div class="yellowBox">박스3</div>
    <div class="yellowBox">박스4</div>

    <br>
    <h5>inline-block</h5>
    <div class="blueBox">박스1</div>
    <div class="blueBox">박스2</div>
    <div class="blueBox">박스3</div>
    <div class="blueBox">박스4</div>
</body>
</html>

float 속성

해당 요소를 떠있게 만든 속성
즉, 기본 레이아웃 흐름에서 벗어나 왼쪽이나 오른쪽으로 이동하는 것을 의미
left: 왼쪽에 배치
right: 오른쪽 배치

목록 관련 속성

위치 관련 속성 (position)

static
- default 값
- 다른 요소와 겹치지 않게 배치
relative
- static의 원래 위치를 기준으로 위치 계산

absolute
- 가장 가까운 상위 요소(부모)를 기준으로 배치
- 상위 요소가 static인 경우에는 브라우저 화면이 기준

fixed
- 브라우저 화면 기준으로 고정 위치에 배치

position.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position 속성</title>
    <style type="text/css">
        #parent {
            width: 200px;
            height: 300px;
            border: solid 5px #000000;
            margin: 50px 0 0 50px;
        }
        #boxA, #boxB, #boxC{
            width: 80px;
            height:80px;
        }
        #boxA {background-color:#ff0000;}
        #boxB {background-color:#00ff00;}
        #boxC {background-color:#ffff00;}

        #boxB{
            position:relative; /* relative 위치 지정: static에 해당되는 원래 위치를 기준으로 20, 30 이동해서 배치 */
            top:20px;
            left:30px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="boxA">A</div>
        <div id="boxB">B</div>
        <div id="boxC">C</div>
    </div>
</body>
</html>

absolute

가장 가까운 상위 요소(부모)를 기준으로 배치
상위 요소가 static인 경우에는 브라우저 화면(body)를 기준으로 배치
현재 parent가 안에 들어있지만 parent의 position을 설정하지 않았기 때문에 parent가 static 이므로 브라우저 화면을 기준으로 배치되었음

parent 박스 안에서 배치되게 하려면?

parent의 position 설정
div를 parent 내에 위치 시키기 위해서는 먼저 parent의 position 설정(absolute 또는 relative 상관 없음)
absolute와 relative 차이점은 약간의 여백인데 문서 전체에서 margin으로 설정하면 여백 없어짐
body {margin: 0} 또는 * {margin:0;}

fixed

지정된 위치에 고정 배치
스크롤 시에도 고정되어 있음

fixed.html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style type="text/css">
        #fixedBox {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: blue;
            top: 50px;
            left: 50px;

        }
    </style>
</head>
<body>
    <div id="fixedBox"></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    문서 끝
</body>
</html>

겹침(레이어) 표현 속성

z-index 속성

요소들이 겹칠 때 순서 지정
나중에 배치하는 것이 위에 놓임
z-index 값이 클수록 위에 놓임

z-index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index 속성</title>
    <style type="text/css">
        #outBox {
            margin:0 auto;
            width: 1020px;
            position: relative;
        }

        #box1 {
            position: absolute;
            left: 25px;
            top: 181px;
            z-index:1;
        }
        #box2 {
            position: absolute;
            left: 187px;
            top: 155px;
            z-index:2;
        }
        #box3 {
            position: absolute;
            left: 369px;
            top: 129px;
            z-index:3;
        }
        #box4 {
            position: absolute;
            left: 603px;
            top: 155px;
            z-index:4;
        }
        #box5 {
            position: absolute;
            left: 795px;
            top: 181px;
            z-index:5;
        }
    </style>
</head>
<body>
    <div id="outBox">
        <div id="box1"><img src="image/img1.png"></div>
        <div id="box2"><img src="image/img2.png"></div>
        <div id="box3"><img src="image/img3.png"></div>
        <div id="box4"><img src="image/img4.png"></div>
        <div id="box5"><img src="image/img5.png"></div>
    </div>
</body>
</html>

자식 선택자

> 부호 사용
선택자 > 자식 선택자
선택자 A > 선택자 B
#header > h1

자손(후손)선택자

띄어쓰기 (스페이스)
선택자 자손선택자
선택자A 선택자B
#header h1
#pageNav ul li a:hover

first-child 선택자

첫 번째 자손 선택 -> .wrap div:first-child
두 번째 자손 선택 -> .wrap div:fist-child + div
nth-child(숫자)
- .wrap div:nth-child(1)
- .wrap div:nth-child(2)
- .wrap div:nth-child(3)

first-child.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first-child 태그</title>
    <link rel="stylesheet" href="css/first-child.css">
</head>
<body>
    <div id="content">
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
    </div>
</body>
</html>

visibility.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>투명도 / 가시성</title>
    <link rel="stylesheet" href="css/visibility.css">
</head>
<body>
  <img id="f1" src="image/fashion1.png">
  <img id="f2" src="image/fashion2.png">
</body>
</html>

visibility.css

#f1:hover{opacity:0.5;}
#f1:active{opacity:1;}
#f2:active{visibility:hidden;}

그림자 효과: box-shadow

그림자 표시
none | x-position y-position blur spread color | inset
none: 그림자 효과 없음
x-position : 가로 위치에 그림자 표시. 양수(오른쪽), 음수(왼쪽)
position: 세로 위치에 그림자 표시. 양수(아래쪽), 음수(위쪽)
blur: 흐릿하게 표시. 값이 클수록 더 흐림
color: 그림자 색상
inset: 그림자를 요소의 안쪽에 표시

boxShadow.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-shadow</title>
    <link rel="stylesheet" href="css/boxShadow.css">
</head>
<body>
    <div class="polaroid">
        <img src="image/pic1.jpg">
        <div class="container">
            <p>카드 놀이 하는 사람들</p>
        </div>
    </div>

    <div class="polaroid">
        <img src="image/pic2.jpg">
        <div class="container">
            <p>길가의 집</p>
        </div>
    </div>
</body>
</html>

boxShadow.css

div.polaroid{
    width: 300px;
    height: 300px;
    background-color:white;
    box-shadow:10px 4px 8px 0 rgba(0,0,0,0.3);
    margin-bottom:15px;
}

div.container {
    text-align:center;
    padding: 5px 5px;
}

img{
    width: 100%;
    height: 230px;
}

저작자표시 비영리 동일조건

'Front > CSS' 카테고리의 다른 글

Bootstrap - 주요 기능 (0)	2021.12.07
Bootstrap (0)	2021.12.06
CSS - 반응형 웹 (0)	2021.12.06
CSS 연습문제 (0)	2021.12.06
CSS - 정의, 선택자 (0)	2021.12.05

여행하는 개발자

CSS - 속성

CSS 속성

텍스트 속성

배경 속성

배경색

배경 이미지 / 반복

테두리 유형 / 굵기 / 색상 지정

여백 속성 (paddig / margin)

inline과 block

inlineBlock.html

float 속성

목록 관련 속성

위치 관련 속성 (position)

position.html

absolute

parent 박스 안에서 배치되게 하려면?

fixed

fixed.html

겹침(레이어) 표현 속성

z-index 속성

z-index.html

자식 선택자

자손(후손)선택자

first-child 선택자

first-child.html

visibility.html

visibility.css

그림자 효과: box-shadow

boxShadow.html

boxShadow.css

'Front > CSS' 카테고리의 다른 글

티스토리툴바

CSS - 속성

CSS 속성

텍스트 속성

배경 속성

배경색

배경 이미지 / 반복

테두리 유형 / 굵기 / 색상 지정

여백 속성 (paddig / margin)

inline과 block

inlineBlock.html

float 속성

목록 관련 속성

위치 관련 속성 (position)

position.html

absolute

parent 박스 안에서 배치되게 하려면?

fixed

fixed.html

겹침(레이어) 표현 속성

z-index 속성

z-index.html

자식 선택자

자손(후손)선택자

first-child 선택자

first-child.html

visibility.html

visibility.css

그림자 효과: box-shadow

boxShadow.html

boxShadow.css

'Front > CSS' 카테고리의 다른 글

관련글

티스토리툴바