[CSS] 자주 사용하는 속성

웹 개발/기초

[CSS] 자주 사용하는 속성

파송송계란빡 ㅣ 2022. 3. 6. 02:19

margin

요소의 네 방향 바깥 여백 영역을 설정

한 개의 값

- 모든 네 면의 여백을 설정합니다.

두 개의 값

- 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다.

세 개의 값

- 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다.

네 개의 값

- 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)

/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;

/* 세로방향 | 가로방향 */
margin: 5% auto;

/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

padding

네 방향 안쪽 여백 영역을 설정

한 개의 값

- 모든 네 면의 여백을 설정

두 개의 값

- 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정

세 개의 값

- 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정

네 개의 값

- 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)

/* 네 면 모두 적용 */
padding: 1em;

/* 세로방향 | 가로방향 */
padding: 5% 10%;

/* 위 | 가로방향 | 아래 */
padding: 1em 2em 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;

border

요소의 테두리를 설정

/* 스타일 */
border: solid;

/* 너비 | 스타일 */
border: 2px dotted;

/* 스타일 | 색 */
border: outset #f33;

/* 너비 | 스타일 | 색 */
border: medium dashed green;

border-radius

테두리 경계의 꼭짓점을 둥글게 만든다

border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

box-sizing

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성

width와 height는 엘리먼트의 컨텐츠의 크기를 지정

box-sizing: content-box;

- 지정한 CSS width 및 height를 컨텐츠 영역에만 적용

- border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있음

box-sizing: border-box;

- 지정한 CSS width 및 height를 전체 영역에 적용

- border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있음

display

요소를 어떻게 보여줄지 지정함

display: none;

- 보이지 않음

display: block;

- 블록 박스

display: inline;

- 인라인 박스

display: inline-block;

- block과 inline의 중간 형태

/*기본값으로, 요소를 inline 요소처럼 표시합니다.
따라서 앞뒤로 줄바꿈 되지 않습니다.*/
display: inline;  


/*요소를 block 요소처럼 표시합니다.
따라서 요소 앞 뒤로 줄바꿈 됩니다*/
display: block;  


/*박스가 생성되지 않습니다.
따라서 공간을 차지하지도 않습니다.*/
display: none; 


/*요소는 inline인데 내부는 block 처럼 표시함.
즉, 박스 모양이 inline 처럼 옆으로 늘어섬.*/
display: inline-block;

display: flex;

- flex 구조로 변경 가능

visibility

태그의 가시성을 결정

visibility: visible

- 보임

visibility: hidden

- 숨김 (자신의 영역은 계속 차지)

visibility: collapse

- 겹치도록 지정(테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석)

visibility: inherit

- 부모 요소의 값을 상속

/*기본값으로 요소가 그대로 보입니다.*/
/visibility: visible;  


/*요소가 보이지 않지만, 여전히 그 공간을 차지하며 투명하게 남습니다.*/
visibility: hidden;

※ display와 visibility 속성의 차이점

- 기존의 영역을 빈공간으로 차지하고 사라지느냐 아니면 빈공간까지 모두 사라지게 하느냐의 차이점

float

- 요소를 정렬하기 위해 사용되는 속성

- 예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬

- 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있음

/*띄우지 않음 (기본값)*/
float: none; 

/*왼쪽에 띄움*/
float: left; 

/*오른쪽에 띄움*/
float: right;

position

요소를 어떻게 위치시킬지 정의

position: static
- default값, normal flow로 다른 태그와의 관계에 의해 자동으로 배치됨.

- 임의로 설정 불가

- top, left, right, bottm 사용 불가능

position: relative
- 원래 있던 위치를 기준(static 상태)으로 좌표를 지정한다.

- top, left, right, bottm 사용하여 위치 조정 많이 사용

.box{
    position: relative;

    top: 20px
    left: 10px
}

position: absolute
- 절대 좌표와 함께 위치를 지정해 줄 수 있다.

- 조상중에서 position : static 아닌 요소를 찾아 기준점으로 삼는다.

- 보통 조상에 position: relative;를 주고 많이 사용한다.

.parent{
    position: relative;

    top: 20px
    left: 10px
}

/*.parent의 position이 static이 아니므로 .parnet가 기준이 되어 위치 절대이동*/
.child{
    position: absolute;

    top: 50px
    left: 50px
}

position: fixed;
- 스크롤과 상관없이 항상 문서 최 좌측 상단을 기준(뷰포트)으로 좌표를 고정

- 스크롤 있어도 붕 떠있는것 같이 구현 가능하여, 백탑버튼 등 만들때, 네비게이션 매뉴 바 등에서 사용한다.

position: inherit;
부모 태그를 상속받음.

absolute 옵션은 부모 태그의 position 속성값이 static이 아니면 부모의 엘리먼트에서 위치가 이동

position 속성을 static을 제외한 값을 주면 top , left , bottom , right 속성을 사용하여 원하는 곳에 요소를 배치 시킬 수 있다.

position: sticky;

- 필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정

- sitcky로 설정된 영역은 설정된 위치(예 top: 0px)에 도달하기 전까지는 static 속성처럼 행동하다가 설정된 위치에 다다르면 fixed 속성처럼 행동하는 속성

- 스크롤 되는 조상의 바로 뒤의 자식에 설정해야 작동

overflow

요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정

overflow: visible;

- 기본 값

- 넘칠 경우 컨텐츠가 상자 밖으로 보여짐

overflow: hidden;

- 넘치는 부분은 잘려서 보여지지 않음

overflow: scroll;

- 스크롤바가 추가되어 스크롤 가능

overflow: auto;

- 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정

- 필요에 따라 가로, 세로 별도로 추가 가능

Z-index

더 큰 z-index값을 가진 요소가 작은 값의 요소 위를 덮음

.box1 {
	z-index: -1;
}

/*.box2가 더 크므로 box1을 덮는다.*/
.box2 {
	z-index: 999;
}

background

태그의 배경을 지정하는 속성

background-color: tomato;
- 배경색 지정

background-image: url("../../img/text.png");
- 배경이미지를 설정하며 , 이미지 경로를 지정

- color와 image가 동시에 있느면 image가 더 앞으로 뜬다(z-index가 image가 더 큼)

background-repeat: repeat;

- 배경 이미지 반복 여부 설정

background-repeat: no-repeat; --> 반복안함
background-repeat: repeat-x; --> x축으로 반복
background-repeat: repeat-y; --> y축으로 반복
background-repeat: repeat; --> 모든 방향으로 반복

background-position: left;

- 배경이미지 위치 지정

background-position: 300px 450px; --> x좌표, y좌표
background-position: left;
background-position: top;
background-position: center;
background-position: bottom;
background-position: right;
background-position: top left; --> 위쪽, 왼쪽 지정

background-size: auto;

- 배경 이미지의 크기를 설정

background-size: contain; --> 이미지가 잘리거나 찌그러지지 않는 한도내에서 제일 크게 설정
background-size: cover; --> contain + 빈공간 생기지 않도록 설정
background-size: auto; --> 배경 이미지 크기 유지
background-size: 300px 450px; --> 원본 크키의 너비/높이 늘리거나 줄임

transform

요소에 회전, 크기조절, 기울이기, 이동효과 부여

/* 키워드 값 */
transform: none;

/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);

transform: rotate(0.5turn); --> 반바퀴 회전
transform: rotate(45deg); --> 45도 회전
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);

transform: translate(12px, 50%); --> x축, y축위치 이동
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);

transform: scale(2, 0.5);  --> x축, y축 만큼 늘리기, 줄이기
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);

transform: skew(30deg, 20deg);  --> x축, y축 기울이기
transform: skewX(30deg); --> x축 방향으로 기울이키
transform: skewY(1.07rad);

/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;

transition

초기(원본) 상태에서 변화된 상태로 시간적인 변화 시킨다.

/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;

/* property name | duration | delay */
transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-left 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

transition-delay

- 얼마 뒤에 실행시킬지(트리거 시점을 지정)
- transition-delay : time | initial | inherit

- 기본값은 0s 이다.
- 시간 단위는 초(s) 또는 1/1000(ms)를 사용한다.
- initial : 기본값으로 설정함
- inherit : 부모 요소 상속

transition-duration
- 얼마만큼 시간 안에 바꿀지(전환효과 총 시간을 설정)

transition-property

- 요소에 추가할 전환효과를 설정
- transition-property : none | all | property | initial | inherit
- none : 모든 속성에 적용하지 않음
- all : 모든 속성에 적용
- property : 속성을 정한다. 여러개 속성을 지정할 경우 쉼표로 구분한다.
- initial : 기본값으로 설정함
- inherit : 부모 요소 상속

transition-timing-function

- A에서 B시점으로 변경될 때 그 중간 과정의 시간을 조절

/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

transform + transition

@media

반응형 디자인 할때 사용

/* 최상위 코드 레벨 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

세로 모드: Portrait(포트레이트) 모드
가로 모드: Landscape(랜드스케이프) 모드

@media (orientation: portrait) {
	/* Portrait 모드일 때 적용할 CSS */
}

@media (orientation: landscape) {
	/* Landscape 모드일 때 적용할 CSS */
}

웹페이지 가로 모드/세로 모드 인식하기 참고

https://studiomeal.com/archives/1068

'웹 개발 > 기초' 카테고리의 다른 글

[css] 반응형 레이아웃 만들기 (0)	2022.03.10
[CSS] flex box, grid (0)	2022.03.07
[CSS] 단위(em, rem, vw, vh, vmax, vmin) (0)	2022.03.04
[CSS] 선택자 (0)	2022.03.03
HTML 태그 : form (0)	2022.03.02

[CSS] 자주 사용하는 속성

파송송의 코딩테스트 공부