개발자 노트 - oseungun311 story

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..

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

학습 목표CSS의 font 관련 속성(font-family, font-size, font-weight, font-style, line-height 등)을 이해하고 활용할 수 있다.텍스트 스타일을 자유롭게 조정하여 웹 페이지의 가독성과 디자인을 개선할 수 있다. 1.1. Font 속성이란?CSS의 font 속성은 텍스트의 모양을 정의하는 데 사용됩니다. 텍스트는 웹 페이지에서 가장 중요한 요소 중 하나로, 적절한 스타일링은 가독성과 디자인에 큰 영향을 미칩니다. 주요 font 관련 속성을 하나씩 살펴보겠습니다.font-family: 글꼴(폰트)을 지정합니다.예: "Arial", sans-serif (Arial이 없으면 sans-serif로 대체)웹 안전 폰트(Web Safe Fonts)와 구글 폰트(Goo..

학습 목표CSS의 display 속성(block, inline, inline-block, none)과 visibility 속성을 이해하고 활용할 수 있다.각 속성의 특징과 차이점을 실습을 통해 익히고, 실제 웹 레이아웃에 적용할 수 있다. 1.1 Display 속성이란?CSS의 display 속성은 HTML 요소가 화면에 어떻게 표시될지를 결정합니다. 요소의 배치 방식과 동작을 제어하는 핵심 속성입니다.block: 요소가 한 줄을 모두 차지하며, 새로운 줄에서 시작합니다. (예: , , )inline: 요소가 한 줄 안에서 다른 요소와 나란히 배치됩니다. (예: , )inline-block: inline처럼 한 줄에 나란히 배치되지만, block처럼 width, height, margin, padding..

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;} 주요 속성 선택자 종류 선택자 설명 예시 코드 적용 예..

가상 클래스란? 가상 클래스 선택자는 CSS에서 요소의 특정 상태나 위치를 기준으로 스타일을 적용하는 방법이에요. 일반 선택자(태그, 클래스, ID 등)가 "무엇"을 선택하느냐에 초점을 맞춘다면, 가상 클래스는 "어떤 상황"이나 "어떤 조건"에 있는 요소를 골라내는 데 사용됩니다.이름에 **"가상"**이 붙은 이유는 실제 HTML에 클래스가 추가된 게 아니라, CSS가 요소의 상태나 위치를 "가상으로" 판단해서 스타일을 입히기 때문이에요.기호는 콜론(:)으로 시작하며, 선택자 뒤에 붙습니다 ( 예: button:hover, li:first-child )주요 가상 클래스:hover: 마우스가 요소 위에 있을 때 스타일 적용:focus: 요소가 키보드나 클릭으로 포커스를 받았을 때 적용(주로 입력창에 사용)..