1. flexbox란? flexbox는 CSS 레이아웃 모델 중 하나로, 복잡한 레이아웃을 보다 쉽게 만들 수 있도록 도와주는 기능을 제공합니다. flexbox를 통해 사용자는 컨테이너 내의 아이템들이 공간을 어떻게 채울지, 어떻게 정렬할지 등을 효율적으로 제어할 수 있습니다. flexbox는 중심축(main axis)와 교차축(cross axis)을 기준으로 아이템을 배치합니다. 2. flexbox 속성 2-1. flex-direction flex-driection 속성을 사용하여 주축의 방향을 결정할 수 있습니다. 기본값은 row로 아이템들이 가로로 정렬됩니다. row-reverse는 반대 방향으로 정렬되고, column은 세로 정렬, column-reverse는 세로 반대 방향 정렬입니다. See ..
css를 사용한 레이아웃 기법에는 여러가지가 있습니다. 그리고 사용하다보면 생각보다 헷갈리고 원하는 결과물이 나오지 않는 경우가 많아 css 레이아웃 기법에 대한 정리를 하고자 합니다. 1. block과 inline HTML 요소는 기본적으로 block 레벨 요소와 inline 레벨 요소 두 가지로 나뉩니다. 이들은 요소가 웹 페이지에서 어떻게 배치되고, 주변 요소와 어떤 방식으로 상호작용하는지를 결정합니다. 1-1. block block 레벨 요소는 기본적으로 한 줄에 하나씩 나오고 너비와 높이, margin과 padding을 줄 수가 있습니다. 예시로 , , , 등이 있습니다. 1-2. Inline inline 레벨 요소는 한 줄에 공간이 많으면 여러 개가 동시에 나올 수 있으며, 요소의 너비는 내용..
CSS의 :root는 스타일 시트에서 사용자의 정의 변수를 정의하는 데 사용되며, 이러한 변수는 스타일을 추상화하고 재사용 가능한 디자인 요소를 만드는 데 도움이 됩니다. 1. :root란? :root는 CSS의 루트 요소를 가리키는 의사 클래스입니다. 루트 요소는 HTML 문서에서 가장 상위에 있는 요소를 가리키면, 일반적으로 요소를 말합니다. 이렇게 :root를 사용하면 전체 스타일 시트에서 사용할 수 있는 전역 범위의 사용자 정의 변수를 설정할 수 있습니다. 2. :root 활용 방법 :root { --primary-color: #007bff; --secondary-color: #ff9900; } :root를 활용한 사용자 정의 변수는 위와 같은 형식으로 작성할 수 있습니다. .button { ba..
■ Grid 레이아웃 Grid 레이아웃이란? .grid-container { display: grid; } CSS Grid Layout은 웹페이지의 레이아웃을 구성하는 방법 중 하나입니다. CSS Grid Layout을 사용하면 행과 열의 구조로 구성된 그리드(Grid)를 만들 수 있으며, 그리드 안에 있는 아이템들의 배치를 제어할 수 있습니다. Grid 레이아웃 만들기 .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 100px 100px; grid-gap: 10px; } .grid-container div { border: 1px solid black; } 더보기 1. 부모 div에 di..
■ Video video 태그 에 src 속성을 바로 사용해도 되지만 를 사용하는 것이 호환성에 더 도움이 됩니다. 도 와 같은 방식으로 사용 가능 video 태그의 속성 controls 속성(재생버튼 생성), autolplay 속성(자동재생), loop 속성(무한반복), poster 속성(썸네일), preload(영상 먼저 다운받을지 여부) 등 ■ transform transform 이란? .box { transform : rotate(10deg); // 회전 transform : translate(10px, 20px); // 좌표이동 transform : scale(2); // 확대 축소 transform : skew(30deg); // 비틀기 } 원하는 요소를 움직이고 싶을 때 사용하는 속성입니다...
■ Sass 셋팅 설치 VS Code기준 extension에서 Live Sass Compiler 를 설치하면 됩니다. 실행 하단의 Watch Sass를 클릭하면 Sass 파일을 CSS 파일로 변환해줍니다. (Sass 파일 자체를 읽지는 못하기 때문에 CSS 변환이 필요) Sass 파일의 확장자는 sass 와 scss입니다. sass에서는 중괄호가 생략이 가능하다는 특징이 있지만 보통 scss 씁니다. ■ Sass 문법 변수 만들기 $main-color: #2a4cb2; $sub-color: #eeeeee; $basic-size: 20px; .background { background-color: $main-color; font-size: $basic-size; } .box { color: $main-co..
■ Pseudo-element Pseudo-element 기본 .text::first-line { color: red; } .text::after { content: '마지막에 추가'; color: blue; } .text::before { content: '처음에 추가'; color: blue; } 특정 HTML 요소의 안쪽 일부에 스타일을 줄 수 있음 Pseudo-element 응용 .box::after { content : ''; display : block; clear : both; } float 속성을 사용한 후에는 마지막에 clear : both 속성을 가진 div 박스를 추가해야 합니다. 참고) 2023.04.25 - [Html] - 2. HTML/CSS(div를 이용한 레이아웃 만들기) 이..
■ CSS 덮어쓰는 법 하단에 작성 .box { background : red; } .box { background : blue; } 같은 class일 경우 하단에 작성된 클래스가 더 우선적으로 적용됩니다. css 파일을 첨부했을 때에도 main1의 class 보다 main2의 css 클래스들이 우선 적용됩니다. 우선 순위 높이기 tag (1점) < class (10점) < id (100점) < style (1000점) < !important (10000점) 위의 순서대로 우선 순위가 높은 방식으로 스타일을 수정하는 방법도 있습니다. !important는 속성 뒤에 쓸 경우 최우선적으로 스타일이 적용됩니다. 다만, 수정이 거듭되면 점점 높은 방식의 스타일을 사용하며 수정해야하기 때문에 추천하지 않는 방식..
■ transion transition 이란? .box { opacity : 0; transition : all 1s; } opacity는 투명도 조절, transition은 모든 스타일이 변할 때 1초에 걸쳐 서서히 변하라는 코드입니다. transition에도 다양한 효과를 주는 방법이 있습니다. .box { transition-delay: 1s; /* 시작 전 딜레이 */ transition-duration: 0.5s; /* transition 작동 속도 */ transition-property: opacity; /* 어떤 속성에 transition 입힐건지 */ transition-timing-function: ease-in; /* 동작 속도 그래프조정 */ } transition을 활용한 애니메이..
■ media query 웹에서 쓰는 단위 정리 .box { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */ } media query 사용하기 태그 안에 태그를 먼저 넣어줘야 합니다. @media screen and (max-width : 1200px) { .box { font-size : 40px; } } @media screen and (max-width : 768px) { ..
