[Front-end] #2.5 CSS 속성

1. CSS 속성 1

1-1. CSS 단위

px : pixel
% : 원래 크기가 100%
em : 원래 크기가 1 em

 /* 이미지 밖에 wrap이 있으면 wrap 크기 기준으로 결정됨 */
 <style>
     .wrap {
     	width: 800px;
        height: 500px;
     }
     img {
         width: 100%; /* 800px */
         height: 50%; /* 250px */
     }
 </style>

<div class="wrap">
    <img src="url">
</div>

1-2. url()

url을 속성으로 줄 수 있음.

background-image: url("이미지 url")

1-3. display

1. block

자동 줄바꿈이 되는 태그들.

div, section, ...

2. inline

옆으로 붙는 태그들. 높이 X -> 상하 margin이 주어지지 않음.

span

body div:nth-child(5) {
            display: inline;
            margin: 10px 10px 10px 10px; 
            /* inline은 height나 상하 margin은 주어지지 않는다. 높이 없음. */
        }

3. inline-block

옆으로 붙지만, 높이도 가지는 속성.

4. none

화면에서 사라져버림. 어떤 요소가 사라졌다 나타났다 할 때 이용.

1-4. visibility

화면 상에 보이는지 안보이는지

display: none - 원래 태그가 가지는 공간까지도 없어짐.
visibility: hidden - 원래 태그가 가지는 공간은 남아 있으나 안보임.

1-5. opacity

투명도 0~1 사이의 값을 가짐.

2. CSS 속성 2

2-1. margin / padding

margin : 바깥쪽 여백 (background-color 적용 X)
padding : 안쪽이 늘어남 (background-color 적용)

2-2. box-sizing

border : 원래 content 바깥쪽으로 테두리 형성. 원래 size보다 커짐.

box-sizing: border-box; /* border 가 box 안쪽으로 형성 */
content-box /* box 바깥쪽으로 형성 */
box-sizing: 200px; /* box의 전체 크기가 200*200 으로 맞춰짐 */

2-3. border

border: 5px solid blue; 
border-radius: 10px;

2-4. background-image

background-image: url();
background-size: 50%; /* 원래 길이의 반으로 돼서 면적은 4배 줄어듬 -> 같은 사이즈에 4개 나옴  */
background-repeat: repeat, no-repeat, repeat-x, repeat-y, round, space; 
/* repeat, 하나만 나오게, x축만 repeat, y축만, 이미지 잘리지 않게 이미지 크기 변화를 줘서 간격 없이 꽉차게 반복, 이미지 크기 유지 - 간격을 두고 반복. */
background-attachment: fixed; /* 브라우저의 시작점부터 이미지가 나열됨. 왼쪽이 잘려 보임. (원래는 이미지 사이즈부터 시작 */

3. CSS 속성 3

3-1. font-family, font-size

font-family: 'font-name1' 'font-name2' 'font-name3' /* 다른 PC에서 열 때, 해당 폰트가 없으면 2순위 3순위로 열어라 */
font-size: 2.0em;

3-2. font-style, font-weight, line-height

font-style: italic;
font-weight: bold, 700, lighter ...;
line-height: 50px; /* 세로 축에 대한 center를 주고 싶을 때 사용하기도 함. */
/* 바깥 사이즈와 line-height 값을 일치시키면 세로 가운데로 감. */

3-3. text-align, text-decoration

text-align: center;
text-decoration: none, underline, ...;

3-4. position

position: absolute; /* 절대적인 위치 (기준 : 해당 content를 감싸고 있는 태그) */
top: 100px;
left: 50px; /* 이런식으로 절대적인 값을 주면 됨. */

position: fixed; /* 고정된 위치 : 화면이 움직여도 항상 그 위치에 있음 like floating button */
position: static; /* 기본값. */

position: relative; /* 같은 레벨에 있는 요소로부터 상대적인 위치 */
z-index: 20; /* 더 큰 값을 가지면 해당 content 가 더 앞으로 옴 (파워포인트 앞으로 보내기 처럼) */

이해가 너무 안가서 차근차근 살펴보려고 위와 같이 코딩을 해 보았다. 오른쪽 x축 아래쪽 y축 으로 본다. 화면 왼쪽 상단 모서리 좌표를 기준으로 설명하겠다.

• red : 아무 값도 주지 않았기 때문에, 화면 최상단에서 시작. 절대좌표 (0,0)
• yellow : relative 100 100 으로 줘서, red 구역을 가로로 삭~ 날리고 절대좌표 (0,100) 을 (0,0)으로 보고 거기서부터 (100, 100) 떨어진 (100, 200) 에서 시작
• green : relative 0 0 이라서 yellow 시작 지점을 (0,0)으로 본다. 역시 (100, 200)
• blue : 아무 값도 주지 않아서, yellow 안에서 div가 block 구조로 그냥 쌓임. (100, 300)
• violet : absolute 300 100 으로 줘서, 노란색 시작점인 (100, 200) 부터 (100, 300) 떨어진 (200, 400)

결론적으로 어떤 태그 안에서 다른 태그들이 부모 태그로부터 상대적인 위치를 가지게 하려면 부모는 relative로, 자식은 absolute로

4. CSS 속성 4

4-1. float

요소의 위치를 설정하기 위한 설정.

float: left, right; /* 왼쪽부터 정렬, 오른쪽부터 정렬 */
/* 원래 밑으로 내려가야 하는걸 둥둥 뜨게해서 left 로 붙인다.
float를 쓴 태그를 감싼 태그에는 overflow: hidden; 주기!!! */

4-2. gradient

2가지 이상의 색을 사용. 그라데이션.

gardient generator 이런 사이트를 이용해서 색을 만들어서 코드로 복붙하자. 여러 브라우저에 맞는 코드를 다 만들어줌!!!

출처

인프런 강좌