CSS22 [CSS] CSS 문법 정리 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 모델 모.. 2023. 12. 13. [CSS] 애니메이션(Animation) 애니메이션(animation) 애니메이션 효과는 CSS 스타일을 다른 CSS 스타일로부터 자연스럽고 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어져 있다. @keyframes @keyframes 속성은 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정한다. @keyframes name { 0% { ... } n% { ... } 100% { ... } } @keyframes name { from { ... } to { ... } } animation See the Pen abzxrYz by 양상길 (@omfazpiq) on CodePen. animation animation 속성은 애니메이션에 이름, .. 2022. 3. 18. [CSS] Grid(2) grid grid 속성은 2차원(행과 열)의 레아이웃 시스템을 제공하는 속성이다. flex 속성은 1차원 레이아웃을 위하는 속성이며, grid는 2차원으로써 좀 더 편한 레이아웃을 구성할 수 있도록 도와준다. grid item이라는 자식 요소와 grid container라는 부모 요소가 있으며 grid container에 대한 정보는 아래 글 참고. [CSS] Grid(1) grid grid 속성은 2차원(행과 열)의 레아이웃 시스템을 제공하는 속성이다. flex 속성은 1차원 레이아웃을 위하는 속성이며, grid 는 2차원으로써 좀 더 편한 레이아웃을 구성할 수 있도록 도와준다. gr ypangtrouble.tistory.com grid item grid 레이아웃 중 부모 요소에 해당하며 grid it.. 2022. 3. 17. [CSS] Grid(1) grid grid 속성은 2차원(행과 열)의 레아이웃 시스템을 제공하는 속성이다. flex 속성은 1차원 레이아웃을 위하는 속성이며, grid는 2차원으로써 좀 더 편한 레이아웃을 구성할 수 있도록 도와준다. grid 레이아웃은 grid item이라는 자식 요소와 gird container라는 부모 요소 외에 track, line, cell, area와 같은 구성요소를 가지고 있다. 출처 : https://armadillo-dev.github.io/css/understanding-grid-layout/ grid container : 전체 그리드 레이아웃을 의미한다. grid item : conatiner에 속해 있는 자식 요소들을 의미한다. grid track : 행 또는 열을 의미한다. grid lin.. 2022. 3. 16. [CSS] Flexbox(2) flexbox flexbox 속성은 flexible의 줄임말로 세련된 레이아웃을 위한 속성이다. 이를 활용하면 기존에 레이아웃을 만들기 위해서 사용하던 table 태그나 float 속성의 복잡함 대신 손쉽게 구현할 수 있다. 또한, 요소의 사이즈가 불명확하거나 동적일 때에도 쉽게 구현할 수 있다. flexbox 레이아웃은 flex item이라는 자식 요소와 flex container라는 부모 요소로 구성되며 flex container 요소 정보는 아래 포스팅 참고. [CSS] Flexbox(1) flexbox flexbox 속성은 flexible의 줄임말로 세련된 레이아웃을 위한 속성이다. 이를 활용하면 기존에 레이아웃을 만들기 위해서 사용하던 table 태그나 float 속성의 복잡함 대신 손쉽게 구현.. 2022. 3. 15. [CSS] Flexbox(1) flexbox flexbox 속성은 flexible의 줄임말로 세련된 레이아웃을 위한 속성이다. 이를 활용하면 기존에 레이아웃을 만들기 위해서 사용하던 table 태그나 float 속성의 복잡함 대신 손쉽게 구현할 수 있다. 또한, 요소의 사이즈가 불명확하거나 동적일 때에도 쉽게 구현할 수 있다. flexbox 레이아웃은 flex item이라는 자식 요소와 flex container라는 부모 요소로 구성된다. flex container flex 레이아웃 중 부모 요소에 해당하며 flex item이라는 복수의 자식 요소들을 포함하고 있다. 속성 설명 display Flex Container를 정의 flex-direction item의 주 축(수평, 수직)을 설정 flex-wrap item의 여러 줄 묶음(.. 2022. 3. 14. 이전 1 2 3 4 다음 728x90