목차1. CSS Grid Layout2. Grid Container 설정하기 2-1. 하나하나 입력해서 배치하기 2-2. 함수 사용해서 자동 배치하기3. Grid Item 설정하기4. 영역(Area) 지정과 이름 붙이기1. CSS Grid LayoutCSS Grid Layout은 2차원(행과 열) 기반의 레이아웃 시스템이다.Flexbox가 1차원 레이아웃에 특화된 반면, Grid는 행과 열을 동시에 제어한다. Grid 용어용어설명Grid Containerdisplay: grid 또는 inlin-grid가 적용된 부모 요소Grid ItemGrid Container의 자식 요소Grid Line행과 열을 구분하는 선 (번호를 가짐)Grid Track두 개의 Grid Line 사이의 공간 (= 행/열..

목차1. Flexbox란?2. Flex Container3. Flex Item1. Flexbox란?CSS Flexbox는 레이아웃을 효율적으로 배치하기 위한 레이아웃 모델이다.주로 행/열 단위로 아이템을 정렬할 때 사용한다. ⭐ 핵심 개념용어설명Flex ContainerFlexbox 레이아웃을 적용하는 부모 요소 (display: flex)Flex ItemFlex Container의 자식 요소들Main Axis아이템이 배치되는 주 축 (기본값 : 가로)Cross Axis주 축에 수직인 축 (기본값 : 세로)Directionflex-direction에 따라 축의 방향을 결정 ⭐ Flex Container 속성전체적인 정렬과 흐름은 flex container에 정의한다.속성값 예시설명*displayflex,..

목차1. position 속성2. static (기본값)3. relative (상대 위치)4. absolute (절대 위치)5. fixed (뷰포트 고정 위치)6. sticky (스크롤 고정 위치)1. position 속성posicion은 요소의 위치를 직접 지정하는 속성이다.요소를 문서 흐름(inlin)에서 벗어나서 특정 요소를 기준으로 원하는 위치에 배치할 수 있다. position의 속성값은 아래 5가지가 있다.값설명static (기본값)HTML에 작성된 순서대로 배치됨relative요소의 원래 위치를 기준으로 배치absolute가장 가까운 relative, absolute, fixed 조상 요소 기준으로 배치fixed뷰포트 기준으로 배치sticky스크롤 위치 기준으로 배치 2. static (기본..

목차1. CSS Cascade란?2. 003. 001. CSS Cascade란?캐스케이드란 '계단식'이라는 뜻으로, 여러 규칙이 적용될 때 우선 순위를 단계별로 나누어 최종 스타일을 결정하는 과정이다.하나의 요소에 여러 규칙이 적용되어 충돌할 때, 브라우저는 정해진 기준에 따라 실제 적용되는 스타일을 정한다. 2. 캐스케이드 우선순위 결정 기준1. 스타일 시트의 출처와 종류인라인 스타일 (Inline Style): HTML 요소에 직접 작성된 style 속성의 스타일이 가장 높은 우선순위를 가진다.외부 및 내부 스타일 시트 (External/Internal Stylesheet): 태그 내부 및 .css 파일에 작성된 스타일이 다음 순위를 가진다.브라우저 기본 스타일 (User Agent Styleshe..

목차1. CSS 선택자(CSS Selector) 1-1. 선택자 종류 1-2. 속성 선택자 1-3. 여러 선택자에 같은 규칙 적용하기 1-4. 여러 조건을 만족하는 요소 선택하기2. 자식 결합자 (Child Combinator)3. 자손 결합자 (Descendant Combinator)4. 가상 클래스 (Pseudo-class)5. 선택자 잘 사용하기 1. CSS 선택자 (CSS Selector)CSS 규칙에서 맨 앞에 적어주는 것으로, 작성하는 규칙을 어떤 요소에 적용할 지 선택한다.선택자 { 속성: 값; 속성: 값;} 1. 선택자 종류선택자를 작성하는 방식은 크게 4가지가 있다.전체 선택자 : 페이지의 모든 요소에 스타일 지정 (브라우저 기본 스타일 초기화할 때 많이 사용..

목차1. display 속성2. display 속성값 - 기본 박스 유형3. display 속성값 - 레이아웃 컨테이너 유형4. float 속성1. display 속성display 속성은 HTML 요소가 웹 페이지에서 어떻게 배치되고, 공간을 차지할지 결정하는 속성이다.각 요소의 기본적인 박스 유형과 내부 배치 방식을 제어합니다.요소의 박스 유형 지정 (display, inline 등)요소의 레이아웃 컨텍스트 설정 (flex, grid 등)요소를 숨기거나 제거 (none) block블록 박스. 줄 바꿈이 생기고, 너비는 기본적으로 부모에 맞춤. (div, section 등)inline인라인 박스. 줄 바꿈 없이 내용만큼만 차지. (span, a, strong 등)inline-block인라인처럼 흐르지만,..

목차1. 박스 모델(Box Model)이란?2. padding, margin3. border4. content1. 박스 모델(Box Model)이란?박스 모델(Box Model)은 HTML 요소가 브라우저에서 어떻게 레이아웃되고 공간을 차지하는지를 설명하는 개념이다.웹 페이지에서 거의 모든 요소는 사각형 박스 형태로 구성되며, 이 박스는 다음 네 가지 영역으로 구성된다.Margin박스 바깥쪽 여백 요소 간 간격 조정용으로, 배경색이 적용되지 않음Border컨텐츠를 둘러싼 테두리 border-width, border-style, border-color 등으로 설정Padding내용과 테두리 사이의 내부 여백 배경색이 적용됨Content텍스트, 이미지 등 실제 내용 이 들어가는 공간width, heigh..

목차1. color : 글자색2. font-size : 글자 크기3. font-family : 글꼴4. fon-weight : 글자 굵기5. line-height : 줄 높이6. text-decoration : 텍스트 꾸미기1. color : 글자색글자색을 지정하는 속성이다. text, font 같은 거 안붙이고 단순히 color만 사용한다.여러 색상 단위로 속성값을 지정한다..red-text { color: red;}.blue-text { color: #0000ff;}.green-text { color: rgb(0,255,0);}2. font-size : 글자 크기글자 크기를 지정하는 속성이다.지정된 키워드 혹은 크기 단위로 속성값을 지정한다.#large-text { font-size: large..

목차1. CSS에서의 단위들2. 색상 단위 (Color Units)3. 크기 단위 (Length Units)4. 시간 단위5. 각도 단위6. 해상도 단위(미디어 쿼리 사용)7. 문자의 크기 기반 단위1. CSS에서의 단위들CSS에서는 다양한 단위를 사용해 스타일을 지정한다.가장 많이 쓰이는 단위로는 색상 단위, 크기 단위가 있고,애니메이션이나 반응형 디자인에서 사용하는 시간, 각도, 비율 단위도 있다. 2. 색상 단위 (Color Units)CSS에서 색상을 표현하는 방식이다. 1. 색상 이름 (Color Names)기본적인 색상은 CSS에 정의된 영문 이름으로 사용할 수 있다.표현할 수 있는 색상의 한계가 있어서 자주 사용하지는 않는다.color: red;background-color: green; 2..

positionCSS에서 position 속성은 요소를 화면에 어떻게 배치할 지를 결정한다.기본값 : static변경값 : relative, absolute, fixedposition으로 속성 요소를 위치시키는 방법을 지정하고,포지셔닝 관련 속성인 top, left, bottom, right 등을 사용하여 요소의 offset을 지정할 수 있다. absolute의 특징부모 요소에 속박되지 않음요소를 화면상 원하는 위치에 자유롭게 배치시킬 수 있음상위 요소가 relative라면, 해당 요소의 내부에서 동작함 parent child 1 child 2 child 3 .parent{..

목차1. CSS란?2. CSS 작성 방법3. 선택자4. 상속5. 접근성1. CSS란?Cascading Style Sheets의 약자로, 웹페이지의 스타일을 정의하는 언어이다.HTML로 구조/내용을 작성하고, CSS로 디자인(색상, 폰트, 레이아웃 등)을 작성한다. CSS의 핵심 개념Cascading : 여러 스타일이 겹칠 때, 우선 순위 규칙에 따라 적용Selector : 어떤 HTML 요소에 스타일을 적용할 지 지정하는 문법Property & Value : 스타일의 속성과 속성값 CSS 사용 방식인라인 : html 문서에서 코드 내에 직접 작성하는 방식이다.내부 스타일 : html 문서에서 외부 스타일 시트 : .css 파일로 분리하여 작성하고, html 문서에는 로 연결한다.2. CSS 작성 방법위에..