[CSS] CSS 속성 2 - 에이블런 프론트엔드 부트캠프 2일차

1. float 

float 속성은 block 속성값을 가진 요소를 가로로 배치되도록 만들 수 있는 속성이다. 

속성명	속성값	설명
float	left	요소를 왼쪽에 배치
	right	요소를 오른쪽에 배치

 

float를 적용하지 않은 두 사각형

float를 적용하지 않은 block 속성의 두 사각형은 위와 같이 출력된다. 하지만 float를 넣는다면 아래와 같이 두 사각형이 가로로 나란히 출력되는 것을 볼 수 있다. 

float를 적용한 두 사각형

section {
    width: 1000px;
    margin: 50px auto;
    border: 10px solid black;
    box-sizing: content-box;
}

section article {
    width: 500px;
    height: 500px;
    float: left;
}

article:nth-of-type(1) {
    background-color: pink; 
}
article:nth-of-type(2) {
    background-color: skyblue; 
}

 

검은색 테두리가 두 사각형을 포함시키도록 만들기 위해서는 float를 해제시키는 코드인 clear: both 를 활용해야한다.

clear: both를 활용한 화면

section::after {
    content: " ";
    display: block;
    clear: both;
}

 

2. position 

position 속성을 활용해 요소를 자유자재로 배치할 수 있다.

속성명	속성값	설명
position	relative	적용된 요소의 현재 위칫값을 기준으로 상대 위치를 지정
	absolute	부모 요소의 특정 구간을 기준으로 절대 위치를 지정
	fixed	브라우저를 기준으로 절대 위치를 지정

 

position 속성값 중 absolute를 사용하기 위해서는 absolute를 적용할 HTML 요소의 부모 요소에게 relative 속상값을 주어야만 한다.

section article {
    width: 400px;
    height: 400px;
    float: left;
}

p {
    margin-top: -25px;
    margin-left: -25px;
    width: 50px; 
    height: 50px;
    background-color: red;
}

position을 할당하지 않은 빨간색 사각형

section article {
    width: 400px;
    height: 400px;
    float: left;
    position: relative;
}

p {
    /* 부모요소가 relative 속성값을 지녀야함 */
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px; 
    height: 50px;
    background-color: red;
}

position을 할당해 빨간색 사각형을 우측 하단으로 이동시킨 화면

 

 

3. object-fit

object-fit 속성은 콘텐츠를 특정 영역에 채울 수 있다. 속성값에 따라 채우는 방법이 다른 점에 주의해야한다.

속성명	속성값	설명
object-fit	fill	요소의 비율을 무시, 가득 채운다
	cover	요소의 비율 유지, 여백 없이 가득 채운다
	contain	요소의 비율 유지, 콘텐츠가 잘리지 않게 가득 채운다

 

object-fit의 속성값을 각각 순서대로 적용한 화면

위 사진을 보다시피 fill은 사진 비율과는 관계없이 요소의 크기에 맞춰서 사진이 조정되는 것을 볼 수 있다. cover는 사진의 비율을 유지하며 여백이 없도록 사진의 가로 또는 세로가 요소의 크기에 맞도록 조정된다. contain은 사진의 비율도 유지하고 잘리는 부분 없이 조정되는 것을 볼 수 있다. 

 

4. z-index

z-index 속성은 겹쳐 있는 요소의 Z축 순서를 지정할 수 있다.

속성명	속성값	설명
z-index	순섯값	요소에 z축의 순서를 지정, 값이 클 수록 위로 올라감

 

z-index의 값이 49 / 50 인 화면

article.pink {
    z-index: 49;

    width: 250px;
    height: 250px;
    background-color: pink;
}
article.blue {
    z-index: 50;

    top: 150px;
    left: 150px;
    width: 250px;
    height: 250px;
    background-color: blue;
}

 

5. opacity

opacity는 요소의 투명도 설정할 수 있다.

속성명	속성값	설명
opacity	0~1	요소의 투명도를 지정

파란색 도형에 opacity를 0.5 할당한 화면

article.blue {
    z-index: 50;
    opacity: 0.5;

    top: 150px;
    left: 150px;
    width: 250px;
    height: 250px;
    background-color: blue;
}

 

6. box-shadow / text-shadow

box-shadow, text-shadow는 요소의 그림자를 만들어준다.

속성명	속성값	설명
box-shadow	가로축 / 세로축 / 퍼짐 정도 / 색상	블록 요소의 그림자를 만든다
text-shadow	가로축 / 세로축 / 퍼짐 정도 / 색상	텍스트의 그림자를 만든다

분홍색 도형에 box-shadow를 할당한 사각형

article.pink {
    z-index: 51;
    box-shadow: 10px 10px 5px lightpink;

    width: 250px;
    height: 250px;
    background-color: pink;
}

 

7. border-radius

border-radius는 요소의 모서리를 둥글게 만든다.

속성명	속성값	설명
border-radius	px, %	테두리 모서리를 속성값만큼 둥글게 만든다

분홍색 도형에 border-radius를 할당한 화면

article.pink {
    z-index: 51;
    border-radius: 150px;
    background: radial-gradient(pink, red);

    width: 250px;
    height: 250px;
    background-color: pink;
}

 

8. linear-graident / radial-gradient

이 속성은 요소에 그라데이션 효과를 적용할 수 있다. linear, radial에 따라 모양이 다르다.

속성명	속성값	설명
background	linear-gradient(방향, 색상1, 색상2)	직선 모양의 그라데이션을 적용
	radial-gradient(색상1, 색상2)	타원 모양의 그라데이션을 적용

원형 도형엔 radial-gradient, 사각 도형엔 linear-gradient를 할당한 화면

article.pink {
    z-index: 51;
    border-radius: 150px;
    background: radial-gradient(pink, red);

    width: 250px;
    height: 250px;
    background-color: pink;
}

article.blue {
    z-index: 50;
    border-radius: 15px;
    background: linear-gradient(45deg, blue, skyblue);

    top: 150px;
    left: 150px;
    width: 250px;
    height: 250px;
    background-color: blue;
}