최원종의 개발 블로그

웹 페이지의 모든 HTML 요소는 사각형 박스이다텍스트, 이미지, 버튼, 심지어 줄바꿈 태그까지 모두 박스 모양을 가지고 있다 실습 코드 나의 첫 박스 모델 이 글자도 박스 안에 살고 있어요. 클릭 버튼 더보기 핵심 개념: 웹 페이지를 디자인할 때, 화면을 "예쁜 그림"으로 보지 말고 "박스의 조합"으로 봐야 한다 큰 박스 → 작은 박스 분해 (Top-Down)웹 페이지를 만들 때는 큰 구조부터 작은 구조로 분해합니다.이를 Top-Down 방식이라고함 Top-Down방식 이유작은 것부터 만들면 나중에 배치할 때 문제가 생깁니다.큰 틀을 먼저 잡으면, 작은 요소들은 자연스럽게 자리를 찾습니다.마치 서랍장을 먼저 사고, 그 안에 물건을 정리하는 것과 같습..

1. Flexbox 속성으로 반응형 레이아웃(어떻게 배치하고 정렬) 준비하기(1) flex-wrap: 요소를 줄 바꿈 하기flex-wrap은 Flex Item이 한 줄에 모두 배치될지, 아니면 여러 줄로 나뉠지를 결정합니다.반응형 디자인에서 화면이 작아질 때 요소가 자동으로 줄바꿈되도록 설정하는 데 유용합니다.- nowrap: 한 줄에 모두 배치 (기본값).- wrap: 공간이 부족하면 줄바꿈.- wrap-reverse: 줄바꿈하되, 줄 순서가 반대.예제 코드 1 flex-wrap으로 반응형 줄바꿈 1 2 3 4 5 더보기(2) flex-flow: flex-direction과 flex-wrap 단축 속성flex-flow는 flex-dir..

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

문서 흐름(Document Flow)HTML 요소는 기본적으로 문서 흐름에 따라 배치됨 규칙- **블록 요소(Block Elements):** 한 줄을 모두 차지하며, 수직으로 쌓임(예: , , ).- **인라인 요소(Inline Elements):** 한 줄에 나란히 배치되며, 줄 바꿈 없이 옆으로 이어짐(예: , , ).- **기본 흐름:** 요소는 HTML에 작성된 순서대로 위에서 아래로(블록 요소) 또는 왼쪽에서 오른쪽으로(인라인 요소) 배치됨.예제코드 문서 흐름 이해하기 1. 블럭 요소(수직으로 쌓임) 블럭요소 1 블럭요소 2 블럭요소 3 2. 인라인 요소(수평으로 쌓임) 인라인 요소 1 인라인 요소 2 인라인 요소 3더보기position (위치 지정)- **설명:**..

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

속성 선택자속성 선택자는 HTML 요소의 속성(Attribute)이나 그 속성의 값(Value)을 기준으로 요소를 선택하는 CSS 선택자.태그 이름이나 클래스,ID 대신 요소가 가진 속성(예: type, href, class)을 보고 스타일을 적용대괄호([])를 사용하며, 속성 이름만 쓰거나 특정 값과 매칭시켜서 선택가능ex)>처럼 type 속성이 "text"인 요소만 골라낼 수 있다[href] { color: blue;}주요 속성 선택자 종류선택자설명예시 코드적용 예시 (HTML)결과[속성]특정 속성을 가진 모든 요소 선택[href] { color: blue; }링크href가 있는 모든 링크가 파란색[속성=값]속성 값이 정확히 일치하는 요소 선택[type="text"] { border: 1px s..

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

결합 선택자결합 선택자는 CSS에서 여러 선택자를 조합해서 HTML 요소 간의 관계를 기반으로 더 구체적으로 대상을 선택하는 방법기본 선택자(태그, 클래스, ID 등)만으로는 단순히 "무엇"을 선택할지 정할 뿐이지만,결합 선택자는 "어떤 위치"나 "어떤 관계"에 있는 요소를 골라낼 수 있게 함즉, 결합 선택자는 두 개 이상의 선택자를 "기호"로 연결해서 사용함.이 기호가 요소 간의 관계를 정의예: div p 는 " 안에 있는 "라는 뜻이고,div > p 는 "의 직계 자식인 "라는 뜻결합 선택자의 종류 자손 선택자 ( ): 부모 안의 모든 자손(자식, 손자 등)을 선택.자식 선택자 ( > ): 부모의 직계 자식만 선택.인접 형제 선택자 ( + ): 바로 다음에 오는 형제 하나만 선택.일반 형제 선택자 ..

CSS(Cascading Style Sheets) 개념CSS는 웹 페이지의 스타일을 정의하는 언어CSS3는 2005년 정의되었으며, 참고로 CSS2는 1998년, CSS1은 1996년에 제정됨 CSS의 역할TML로 구조화된 콘텐츠를 예쁘게 브라우저 상에 렌더링 처리HTML은 구조와 의미(Semantic Web)를 담당.CSS는 이를 통해 화면에 보이는 부분의 스타일을 정의JavaScript는 사용자 인터페이스 등을 조정 핵심 개념웹페이지는 HTML, CSS, JavaScript로 표현됨HTML: 구조CSS: 스타일JavaScript: 동적 기능Selector (선택자) CSS Selector란HTML 문서의 특정 부분에 대해 렌더링 방법을 정의하기 위해서는 특정 부분을 선택할 수 있어야 함CSS Sele..

시멘틱 웹(Semantic Web)시멘틱 웹은 월드 와이드 웹 컨소시엄(W3C)이 주도한 개념으로,웹 데이터를 단순히 표시하는 것을 넘어 데이터가 의미를 가지도록 만드는 기술과 철학을 의미기존 웹은 사람이 읽고 이해하기 쉽게 설계되었지만, 기계(컴퓨터, 검색 엔진 등)는 데이터의 의미를 이해하기 어려움시멘틱 웹은 데이터를 구조화하고 메타데이터를 추가해 기계가 데이터를 이해하고 처리할 수 있게 함 시멘틱 태그(Semantic Tag)HTML5에서 도입된 태그로, 콘텐츠의 의미와 구조를 명확히 정의하는 태그.기존 태그는 단순히 레이아웃을 나누는 용도였지만,시멘틱 태그는 콘텐츠의 역할과 의미를 부여해 코드의 가독성과 접근성을 높임. 주요 특징의미 전달: 태그 이름 자체가 콘텐츠의 역할을 나타냄 (예: ..