jennet1 님의 블로그

1. display: flex 개요display: flex는 CSS의 Flexbox 레이아웃 시스템으로, 컨테이너 내부의 아이템들을 효율적으로 배치하며다양한 화면 크기의 레이아을 쉽게 조정이 가능하다. 주요 속성1) Flex Container 속성flex-direction: 아이템들이 배치되는 방향을 설정합니다. 기본값은 row (가로 방향)입니다..container { display: flex; flex-direction: row; /* column, row-reverse, column-reverse 가능 */} justify-content: 아이템들이 주 축 을 따라 정렬되는 방식을 지정합니다 .container { justify-content: center; /* flex-start, flex..

Position 은 레이아웃 구성 요소 자유롭게 배치하기 위해 사용- 웹 사이트의 레이아웃은 사용자가 콘텐츠를 인식하고 탐색할지를 결정하는 중요한 요소이다.(모바일,테블릿,PC) 에서 접근하기 때문에 다양한 장치에 맞는 레이아웃을 설계하는 것이 필수적이며요소를 원하는 위치에 자유롭게 배치 해야 웹사이트의 품질을 높일 수 있다. 1. UX 향상 : 요소를 적절히 배치하여 사용자가 정보를 쉽게 탐색 하도록 한다.     ex) 메뉴바,버튼,이미지 2. 반응형 디자인 : 화면 기기와 해상도에 맞춰 레이아웃이 자동으로 조정될 수 있도록 설계한다. 3. 콘텐츠 강조 및 디자인 일관성 유지 : 중요도에 따라 요소 배치와 크기를 조정하여 시각적 위계를 부여가능하다.일관성 있는 배치를 통해 통일성과 전문성을 높일 수 ..

Box ModelCSS의 박스 모델은 HTML 요소를 테두리, 패딩, 마진, 그리고 콘텐츠 영역으로 나누어 설명합니다. 이 네 가지 요소는 함께 화면에서 해당 요소의 크기와 배치를 결정합니다.Content : 요소의 실제 내용이 들어가는 영역Padding : 콘텐츠와 테두리 사이의 공간border : 요소의 경계선margin : 요소와 다른 요소들 사이의 외부 공간파란색 영역은 Content 영역으로 내용의 영역이 들어간다.초록색 영역은  padding 영역으로 콘텐츠와 테두리 사이에 있는 공간을 의미한다.border는 padding 밖에 위치하며 해당 영역의 경계선이다.마지막 영역인 margin은 해당 태그의 외부 공간을 의미한다.div 와 span 의 차이점divd 와 span 은 HTML 에서 가장..

CSS 선택자란?CSS 선택자는 HTML 문서에서 특정 요소를 선택하고, 그 요소에 스타일을 적용할 수 있게 해주는 도구입니다. 선택자를 통해 HTML의 다양한 요소를 지정하고, 그 요소에 색상, 크기, 폰트 스타일 등의 CSS 규칙을 적용할 수 있습니다. CSS에서 선택자는 크게 기본 선택자와 고급 선택자로 나눌 수 있으며, 각각의 선택자는 특정 조건에 맞는 요소를 찾는 역할을 합니다. 선택자는 웹 페이지의 구조와 디자인을 연결하는 중요한 역할을 하기 때문에, 효율적인 CSS 코드 작성에 필수적입니다.  웹 개발에서 CSS가 중요한 이유 효율적인 스타일 적용 페이지 유지보수와 관리 용이성 재사용성 구조와 디자인 분리기본선택자 * : 기본, 모든 요소를 선택함 See the Pen Untitle..