개발자노트

1. Flexbox 속성으로 반응형 레이아웃(어떠게 배치하고 정렬) 준비하기(1) flex-wrap: 요소를 줄바꿈하기flex-wrap은 Flex Item이 한 줄에 모두 배치될지, 아니면 여러 줄로 나뉠지를 결정합니다. 반응형 디자인에서 화면이 작아질 때 요소가 자동으로 줄바꿈되도록 설정하는 데 유용합니다.nowrap: 한 줄에 모두 배치 (기본값).wrap: 공간이 부족하면 줄바꿈.wrap-reverse: 줄바꿈하되, 줄 순서가 반대.예제 1: flex-wrap으로 반응형 줄바꿈 1 2 3 4 5 설명:flex-wrap: wrap;을 설정해 컨테이너의 너비를 초과하면 Flex Item이 자동으로 아래 줄로 넘어갑니다.화면을 ..

CSS 레이아웃은 웹 페이지에서 요소들을 어떻게 배치하고 정렬할지를 결정하는 기술입니다. 쉽게 말해, 웹 페이지라는 캔버스 위에 버튼, 이미지, 텍스트 같은 요소들을 원하는 위치에 예쁘게 배치하는 방법을 말합니다.Flexbox는 CSS3에서 도입된 레이아웃 모델로, 요소를 수평이나 수직으로 정렬하고 공간을 분배하는 데 매우 유용합니다. 과거에는 테이블 레이아웃이나 float 속성을 사용했지만, Flexbox를 사용하면 훨씬 더 직관적이고 강력하게 레이아웃을 구성할 수 있어요.1. Flexbox의 기본 개념 이해하기Flexbox를 잘 사용하려면 몇 가지 기본 개념을 먼저 이해해야 합니다.(1) Flex Container와 Flex ItemFlex Container (플렉스 컨테이너): Flexbox를 적용..

CSS의 float 속성은 웹 페이지에서 요소를 왼쪽이나 오른쪽으로 "띄워서" 배치하는 데 사용됩니다. 주로 이미지나 박스를 텍스트 옆에 배치할 때 유용하죠. 하지만 float를 사용하면 다른 요소의 배치에 영향을 줄 수 있어서, 이를 정리하기 위해 clear 속성도 함께 사용합니다.1. CSS Float 속성 이해하기float 속성은 요소를 문서의 일반 흐름에서 벗어나게 해서 왼쪽이나 오른쪽으로 띄우는 역할을 합니다. 주로 이미지와 텍스트를 함께 배치하거나, 박스를 나란히 배치할 때 사용됩니다.(1) Float 속성 값float 속성은 다음과 같은 값을 가질 수 있습니다:none: 요소를 띄우지 않음 (기본값).left: 요소를 왼쪽으로 띄움.right: 요소를 오른쪽으로 띄움.실습 예제 1Float로..

CSS의 transition 속성은 웹 요소의 스타일 변화를 부드럽게 만들어주는 강력한 도구입니다. 예를 들어, 버튼에 마우스를 올렸을 때 색상이 서서히 변하거나, 크기가 자연스럽게 커지는 효과를 줄 수 있습니다.1. CSS Transition의 기본 구조transition 속성은 요소의 스타일 변화를 부드럽게 전환(transition)하도록 설정합니다. 이 속성은 다음과 같은 4가지 주요 속성으로 구성됩니다:transition-property: 어떤 CSS 속성을 전환할지 지정합니다. (예: width, opacity, background-color 등)transition-duration: 전환 효과가 얼마나 오래 지속될지 시간을 지정합니다. (예: 2s = 2초)transition-timing-fun..

문서 흐름(Document Flow)이란?HTML 요소는 기본적으로 문서 흐름에 따라 배치됩니다. 이는 다음과 같은 규칙을 따릅니다:블록 요소(Block Elements): 한 줄을 모두 차지하며, 수직으로 쌓입니다(예: , , ).인라인 요소(Inline Elements): 한 줄에 나란히 배치되며, 줄 바꿈 없이 옆으로 이어집니다(예: , , ).기본 흐름: 요소는 HTML에 작성된 순서대로 위에서 아래로(블록 요소) 또는 왼쪽에서 오른쪽으로(인라인 요소) 배치됩니다. 문서 흐름 이해하기 1. 블록 요소 (수직으로 쌓임) 블록 요소 1 블록 요소 2 블록 요소 3 2. 인라인 요소 (수평으로 나란히) 인라인 요소 1 인라인 요소 2 인라인 요소 3 position (위치 지정)설명..

1.1. Font 속성이란?CSS의 font 속성은 텍스트의 모양을 정의하는 데 사용됩니다. 텍스트는 웹 페이지에서 가장 중요한 요소 중 하나로, 적절한 스타일링은 가독성과 디자인에 큰 영향을 미칩니다. 주요 font 관련 속성을 하나씩 살펴보겠습니다.font-family: 글꼴(폰트)을 지정합니다.예: "Arial", sans-serif (Arial이 없으면 sans-serif로 대체)웹 안전 폰트(Web Safe Fonts)와 구글 폰트(Google Fonts)를 사용할 수 있습니다.font-size: 텍스트의 크기를 지정합니다.단위: px, em, rem, % 등예: 16px, 1.5emfont-weight: 텍스트의 두께(굵기)를 지정합니다.값: normal, bold, 100~900 (100은 ..

1.1 Display 속성이란?CSS의 display 속성은 HTML 요소가 화면에 어떻게 표시될지를 결정합니다. 요소의 배치 방식과 동작을 제어하는 핵심 속성입니다.block: 요소가 한 줄을 모두 차지하며, 새로운 줄에서 시작합니다. (예: , , )inline: 요소가 한 줄 안에서 다른 요소와 나란히 배치됩니다. (예: , )inline-block: inline처럼 한 줄에 나란히 배치되지만, block처럼 width, height, margin, padding을 설정할 수 있습니다.span { display: inline; width: 100px; /* 무시됨 */ height: 50px; /* 무시됨 */ padding: 10px; /* 좌우는 적용, 상하는 제한적 */ margin:..

1. background 프로퍼티란?background 프로퍼티는 요소의 배경을 설정하는 데 사용됩니다. 배경 색상, 이미지, 반복 방식, 위치, 크기 등을 한 번에 정의할 수 있는 단축 속성(shorthand property)입니다. 개별 속성으로도 설정 가능하며, 단축 속성을 사용하면 코드를 간결하게 작성할 수 있습니다.주요 개별 속성background-color: 배경 색상을 지정합니다.background-image: 배경 이미지를 지정합니다.background-repeat: 배경 이미지의 반복 방식을 설정합니다.background-position: 배경 이미지의 위치를 설정합니다.background-size: 배경 이미지의 크기를 설정합니다.background-attachment: 배경 이미지의 ..

CSS 박스 모델은 HTML 요소를 네모난 상자로 구분하여 표현하는 모델입니다. 위 그림 처럼 HTML 요소를 "상자"로 보는 방식이에요. 이 상자는 네 개의 층으로 이루어져 있어요.Content(내용): 상자 안의 실제 내용물(텍스트, 이미지 등).Padding(패딩): 내용과 테두리 사이의 내부 공간.Border(테두리): 패딩을 감싸는 경계선.Margin(마진): 테두리 밖의 외부 공간.박스 모델을 이해하면 웹페이지에서 요소의 크기와 간격을 정확히 조정할 수 있어요. 이걸 모르면 버튼이 겹치거나 텍스트가 너무 붙어서 보기 불편한 문제가 생길 수 있습니다.실습 코드 1 - 박스 모델에 개념박스모델에 대한 기본적인 속성에 이해 div 태그 1 박스 모델 div 태그 2 ..

속성 선택자란?속성 선택자는 HTML 요소의 속성(Attribute)이나 그 속성의 값(Value)을 기준으로 요소를 선택하는 CSS 선택자예요. 태그 이름이나 클래스, ID 대신 요소가 가진 속성(예: type, href, class)을 보고 스타일을 적용합니다.대괄호([])를 사용하며, 속성 이름만 쓰거나 특정 값과 매칭시켜서 선택할 수 있어요.예를 들어, 처럼 type 속성이 "text"인 요소만 골라낼 수 있습니다.속성 선택자는 마치 사람을 "특징"으로 찾는 것과 같아요. "안경 쓴 사람"이나 "파란 셔츠 입은 사람"을 고르는 식으로, 속성을 기준으로 요소를 골라내는 거죠.[href] { color: blue;}주요 속성 선택자 종류선택자 설명 예시 코드 적용 예시 (HTML)결과[속성]특정..