웹 개발자 도전기

1. 반응형 웹 디자인반응형 웹 디자인은 다양한 기기와 화면 크기에 맞춰 웹사이트의 레이아웃과 콘텐츠를 자동으로 조정하는 접근방식입니다. 이를 통해 사용자는 PC,태블릿,스마트폰 등 어떤 기기에서도 최적화된 경험을 할 수 있습니다. 주요 특징 :유연한 그리드 레이아웃유동적인 이미지와 미디어CSS 미디어 쿼리를 통한 스타일 조정 2. 뷰포트 (Viewport)뷰포트는 웹 페이지가 표시되는 기기의 화면 영역을 의미합니다. 반응형 웹 디자인에서 뷰포트 설정은 매우 중요합니다. 뷰포트 단위 :vw (viewport width) : 뷰포트 너비의 1% vh (viewport height) : 뷰포트 높이의 1%   3. 미디어 쿼리 (Media Queries)미디어 쿼리는 CSS에서 특정 조건에 따라 스타일을 적..

CSS 레이아웃은 HTML 요소들의 배치를 의미합니다. 웹 페이지에서 요소를 어떻게 배치할 것인지 결정하는 방법으로 주요한 레이아웃 기법으로는 float , position , flexbox , grid 가 있습니다.  Float 속성을 이용한 레이아웃float 속성을 사용하여 요소를 좌측이나 우측에 배치할 수 있습니다.left 로 설정하면 요소가 왼쪽에서 순서대로 배치되고 right 로 설정하면 오른쪽에서 순서대로 배치됩니다. Position 속성을 이용한 레이아웃position 속성을 사용하면 요소를 기본적인 흐름에서 벗어나 원하는 위치에 배치할 수 있습니다.static : 기본값. 원래 위치에 배치됨relative : 원래 위치에서 이동. 원래 자리 차지.absolute : 가장 가까운 포지셔닝 조..

박스 모델은 HTML 요소가 사각형 박스 형태로 구성되어 있는 개념으로 요소를 배치하는 데 기본이 됩니다. 구성 요소 :내용 (Content) : 요소 내부의 텍스트나 이미지패딩 (Padding) : 내용과 테두리 사이의 내부 여백테두리 (Border) : 패딩과 마진 사이의 경계선마진 (Margin) : 요소의 외부 여백 블록 요소와 인라인 요소블록 요소 :한 줄을 독립적으로 차지하며 수직으로 쌓입니다.너비와 높이를 지정할 수 있습니다.예 : ` , , ` 인라인 요소 :내용에 맞춰 공간을 차지하며 수평으로 배치됩니다.너비와 높이를 지정할 수 없으며 수평 여백만 적용됩니다.예 : ` , , ` 박스 모델 구성 요소크기 설정 : width , height 속성으로 콘텐츠 영역의 크기를 지정합니다.속성..

1. CSS의 특징 캐스케이딩(Cascading)'캐스케이딩'은 CSS의 핵심 개념으로 스타일 규칙이 계단식으로 적용되고 상속된다는 의미입니다.스타일 충돌 방지를 위한 우선순위 적용부모 요소의 스타일이 자식 요소에 상속됨  CSS 스타일 우선순위CSS에서는 여러 스타일이 충돌할때 어떤 스타일을 적용할지 결정하는 우선순위가 있습니다.!important인라인 스타일아이디 스타일클래스 스타일태그 스타일같은 우선순위일 경우 나중에 작성된 스타일이 적용됩니다. 스타일 상속대부분의 스타일은 부모 요소에서 자식 요소로 상속됩니다. 단, 배경색,배경 이미지,border 등은 상속되지 않습니다.  2. CSS 단위CSS에서는 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. 절대 단위px (픽셀)pt (포인트)cm ..

CSS의 핵심 개념 중 하나는 선택자입니다. 선택자를 통해 스타일을 적용할 HTML 요소를 정확하게 지정할 수 있습니다. 1. 기본 선택자전체 선택자 (*)전체 선택자는 웹 페이지의 모든 요소에 스타일을 적용합니다. 태그 선택자태그 선택자는 특정 HTML 태그를 사용한 모든 요소에 동일한 스타일을 적용합니다. 아이디 선택자 (#)아이디 선택자는 특정 id 속성을 가진 요소하나에 스타일을 적용합니다. 클래스 선택자 (.)클래스 선택자는 특정 class 속성을 가진 모든 요소에 스타일을 적용합니다. 2. 그룹 선택자여러 선택자에 동일한 스타일을 적용하고 싶을 때 사용합니다. 3. 조합 선택자자식 선택자 (>)부모 요소의 직접적인 자식 요소에만 스타일을 적용합니다. 자손(하위) 선택자 (공백)특정 요소의 모든..

CSS란 ?웹 페이지의 스타일을 정의하는 W3C 표준 스타일 언어 입니다. 웹 페이지의 구조를 담당하는 HTML과는 달리 색상, 폰트 , 레이아웃 등 디자인 요소를 제어합니다. HTML은 건물 구조를 만드는 역할을 하고 CSS는 그 건물의 인테리어를 담당하는 것 입니다. CSS의 필요성초창기 HTML에서는 스타일을 태그에 직접 정의하는 인라인 스타일 방식이 사용되었습니다. 그러나 이 방식은 HTML 구조와 스타일이 혼합되어 유지보수 및 확장성이 떨어지는 문제를 야기했습니다. 이러한 문제를 해결하기 위해 W3C는 CSS를 도입하여 웹 페이지의 구조와 디자인을 분리했습니다. 이제 CSS를 수정하는 것만으로도 웹사이트의 전체적인 디자인을 바꿀 수 있게 되었습니다. CSS의 장점유지보수 용이성 : CSS를 사용..