웹 개발자 도전기

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

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

일반적으로 부트스트랩은 자동완성이 안된다. vs code 에서 설치후 쓰면 자동완성 가능. 1. 부트스트랩 소개부트스트랩은 웹사이트를 쉽게 개발할 수 있게 도와주는 CSS 오픈 소스 프레임워크 입니다.Front-end 개발자들이 반응형 웹 디자인을 쉽게 개발할 수 있도록 미리 정의된 CSS 속성들과 JavaScript 라이브러리를 제공합니다.하나의 CSS 선택자만으로 스마트폰 , 태블릿 , 노트북 , 데스크탑 까지 다양한 기기에서 동작하는 반응형 웹 페이지를 쉽게 만들 수 있습니다.사용자가 웹사이트를 쉽게 제작 , 유지 , 보수할 수 있도록 도와줍니다.부트스트랩의 역사2011년 : 트위터 개발자 Mark Otto가 트위터 앱의 UI 개발을 정형화하기 위해 아이디어 제안2013년 : Version 3 출시..

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

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