[CSS] 기본 구조, 문법 정리

width: 100px;
max-width
min-width

요소의 가로 너비

 

height: 100px;
max-height
min-height

요소의 세로 너비

 

margin-top: 20px;
margin-top
margin-bottom
margin-left	
margin-right

요소의 외부(바깥) 여백

 

padding-top: 20px;
padding-top
padding-bottom
padding-left
padding-right

요소의 내부(안쪽) 여백

 

border: 4px solid red;

요소의 테두리 선 (두께 4px / 종류 solid / 색상 red)

 

border-radius: 10px;

요소의 모서리 둥글게

* 이 때 50% 를 입력하면 원의 모양을 하게 된다.

 

box-shadow: 4px 4px 10px rgba(0,0,0,0.5);

요소의 그림자 (x축 / y축 / 흐림효과 / 색상)

 

font-size: 16px;

글꼴의 크기

보통 16px 사이즈의 폰트이다.

 

font-weight: 700;

글꼴의 두께 (100 ~ 900 사이의 아홉 가지의 값)

보통의 두께는 400, 볼드체는 700이 흔하게 쓰인다.

 

font-family: "나눔고딕", sans-serif;

글꼴의 이름 및 종류 지정

 

line-height: 1.4;

글꼴의 줄 높이

단위 없이 배수로 입력하게 되는데, 이는 font-size의 배수가 된다.

 

color: red;

문자(글자)의 색상

 

text-align: center;

문자 정렬

left, right 등을 통해 왼쪽 정렬 혹은 오른쪽 정렬도 가능하다.

 

text-decoration: underline;
text-decoration: none;

문자 꾸미기

밑줄 추가 / 밑줄 제거

 

word-break: keep-all;

한글에서 띄어쓰기로 단어 구분

영어는 자동으로 가능하지만, 한글은 안되던 부분(단어 중간에서 줄바꿈이 되어버리는 상황)을 해결

 

background-color: royalblue;

요소의 배경 색상

 

background-image: url("이미지_경로");

요소의 배경 이미지

 

background-size: 100px;

요소의 배경 이미지 크기

 

background-repeat: no-repeat;

요소의 배경 이미지 반복 없음

기본적으로 반복되던 배경 이미지를 하나만 출력되게 설정

 

background-position: top center;

요소의 배경 이미지 위치 (top, bottom, left, right, center)

 

display: flex;
justify-content: center;
align-items: center;

요소의 자식 요소들을 (수평) 정렬

정렬(Flex)된 요소들의 수평(justify-content) / 수직(align-items) 전체 정렬

부모 요소에다가 이 구문을 작성한다.

 

transform:
    translateX(10px)
    translateY(20px)
    scale(1.2)
    rotate(45deg);

요소의 변환 효과

x축 이동 / y축 이동 / 비율 크기 / 회전

 

transition: 1s;

요소의 전환 효과

변화되기 전 상태의 부분에 추가한다.

 

@media (max-width: 500px) {
    선택자 { 속성: 값; }
}

/* 사용자의 화면이 500px 이하일 때, 중괄호 안의 내용을 적용하겠다. */

미디어쿼리 (미디어 규칙)

브라우저 화면의 크기에 맞게 CSS를 새롭게 지정한다.

이렇게 만들어진 것을  반응형 웹 사이트  라고 한다.