CSS 문법 정리
CSS 문법에 대한 정리문서로 각 문법은 아래 포스팅 참고하면 된다.
[CSS] CSS란
CSS란 CSS(Cascading Style Sheet) 는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, 주로 HTML에 쓰이며 XML에서도 사용할 수 있다. 즉, HTML 문서를 스타일링(디자인)하는 언어이다. 기본구조 선택
ypangtrouble.tistory.com
[CSS] 선택자
CSS Selector(선택자) CSS 선택자 란 HTML을 꾸미기 위해 문서의 요소(대상)을 선택하기 위한 수단을 말한다. 전체 선택자 전체 선택자는 문서의 모든 요소를 선택하고자 할 때 사용하며 * 를 사용한다.
ypangtrouble.tistory.com
[CSS] 박스(Box) 모델
Box 모델 모든 HTML 요소들은 Box 형태의 영역(컨텐츠가 자리하는 영역)을 가지고 있으며 폭, 여백, 테두리 등의 속성들을 지정할 수 있다. Content : 요소의 텍스트나 이미지 등 실제 내용이 위치하는
ypangtrouble.tistory.com
[CSS] Display
Display 브라우저가 요소를 화면에 나타내는 방법을 제어하는 속성으로 layout 정의에 자주 사용되는 속성이다. block : block 특성을 가지는 요소 inline : inline 특성을 가지는 요소 inline-block : inline-block
ypangtrouble.tistory.com
[CSS] Visibility / Opacity
Visibility 요소를 보이게 할지 보이지 않게 할지, 요소의 렌더링 여부를 결정하는 속성이다. visible : 요소를 보이게 한다. hidden : 요소를 보이지 않게 한다.(공간은 남아 있다.) collapse : table 요소에
ypangtrouble.tistory.com
[CSS] 상속과 캐스케이딩
상속 상속이란 상위 요소에 적용된 속성을 하위 요소가 물려 받는 것을 의미한다. 속성 중에는 상속되지 않는 것과 상속되는 것이 있다. 속성 상속여부 width/height no margin no padding no border no box-sizi
ypangtrouble.tistory.com
[CSS] Background
Background 요소의 배경의 색상, 이미지, 위칰, 반복 등의 설정을 위한 속성이다. 속성 설명 기본값 background-color 배경색을 설정 transparent background-image 요소의 배경 이미지 설정 none background-repeat 배경
ypangtrouble.tistory.com
[CSS] Font
Font 글자 모양, 크기, 굵기, 기울임 등의 설정을 위한 속성이다. 속성 설명 font-family 글자 종류 설정 font-size 글자 크기 설정 font-weight 글자 굵기를 설정 font-style 글자 스타일(이텔릭체)을 설정 font-f
ypangtrouble.tistory.com
[CSS] Text
Text 행간, 자간, 어간, 정렬 등의 텍스트 간격 및 레이아웃의 설정을 위한 속성이다. line-height line-height 속성은 한 줄에 대한, 즉 텍스트의 높이 값(행간)을 지정한다. 절대단위(px, %, em)를 사용하며
ypangtrouble.tistory.com
[CSS] 타이포그래피
타이포그래피 글자(Font)와 문단(Text)의 속성을 제어한다. 2022.03.05 - [CSS] - [CSS] Font [CSS] Font Font 글자 모양, 크기, 굵기, 기울임 등의 설정을 위한 속성이다. 속성 설명 font-family 글자 종류 설정 font-si
ypangtrouble.tistory.com
[CSS] z-index / overflow
z-index z-index 속성은 어느 요소가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정하는 속성이다. static을 제외한 position 속성이 적용된 요소에서만 작동한다. 미적용 시 가장 마지막에 작성한 요소
ypangtrouble.tistory.com
[CSS] Position
position HTML 문서 상에서 요소가 배치되는 방식을 결정하는 속성이다. static static 은 position 속성의 기본값으로 부모 요소 내에 자식 요소로 존재할 경우 부모 요소의 위치를 기준으로 배치된다. 좌
ypangtrouble.tistory.com
[CSS] Float
float float 속성은 레이아웃을 구성할 때 요소들을 정렬하기 위해서 사용하는 속성이다. "떠 있다"라는 의미로써 해 당 요소를 다음 요소 위에 떠 있게 하는, 다른 요소들이 float 속성을 지는 태그
ypangtrouble.tistory.com
[CSS] Gradient
Gradient gradient 속성은 2가지 이상의 색상을 혼합하여 색감의 배경을 생성하는 속성이다. gradient에는 2가지 종류가 있다. Lineal-gradient(선형) Radial-gradient(원형) linear-gradient linear-gradient 속성은 선형
ypangtrouble.tistory.com
[CSS] Transition
transition transition 속성은 CSS 속성이 변화할 때 서서히 변화시키는 속성이다. 속성 설명 기본값 transition-property transition이 적용될 속성 지정 all transition-duration transition이 일어나는 지속시간(초, 밀
ypangtrouble.tistory.com
[CSS] Transform
transform transform 속성은 이동, 회전, 축소 등의 효과를 지정하는 속성이다. 속성 설명 단위 translate(x,y) X축으로 x, Y축으로 y 이동 px, %, em translateX(x) X축으로 x 이동 px, %, em translateY(y) Y축으로 y 이동 p
ypangtrouble.tistory.com
[CSS] Flexbox(1)
flexbox flexbox 속성은 flexible의 줄임말로 세련된 레이아웃을 위한 속성이다. 이를 활용하면 기존에 레이아웃을 만들기 위해서 사용하던 table 태그나 float 속성의 복잡함 대신 손쉽게 구현할 수 있다
ypangtrouble.tistory.com
[CSS] Flexbox(2)
flexbox flexbox 속성은 flexible의 줄임말로 세련된 레이아웃을 위한 속성이다. 이를 활용하면 기존에 레이아웃을 만들기 위해서 사용하던 table 태그나 float 속성의 복잡함 대신 손쉽게 구현할 수 있다
ypangtrouble.tistory.com
[CSS] Grid(1)
grid grid 속성은 2차원(행과 열)의 레아이웃 시스템을 제공하는 속성이다. flex 속성은 1차원 레이아웃을 위하는 속성이며, grid는 2차원으로써 좀 더 편한 레이아웃을 구성할 수 있도록 도와준다. gri
ypangtrouble.tistory.com
[CSS] Grid(2)
grid grid 속성은 2차원(행과 열)의 레아이웃 시스템을 제공하는 속성이다. flex 속성은 1차원 레이아웃을 위하는 속성이며, grid는 2차원으로써 좀 더 편한 레이아웃을 구성할 수 있도록 도와준다. gri
ypangtrouble.tistory.com
[CSS] 애니메이션(Animation)
애니메이션(animation) 애니메이션 효과는 CSS 스타일을 다른 CSS 스타일로부터 자연스럽고 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타
ypangtrouble.tistory.com
'CSS' 카테고리의 다른 글
| [CSS] 애니메이션(Animation) (52) | 2022.03.18 |
|---|---|
| [CSS] Grid(2) (39) | 2022.03.17 |
| [CSS] Grid(1) (76) | 2022.03.16 |
| [CSS] Flexbox(2) (61) | 2022.03.15 |
| [CSS] Flexbox(1) (81) | 2022.03.14 |
댓글