📦 CSS/CSS

Float 자식이 부모로부터 떠오르다. 즉! margin을 없애다. 📘 The Code Magazine Blog Challenges Flexbox CSS Grid .main-header { background-color: #f2f4f3; /* padding: 20px; padding-left: 40px; padding-right: 40px; */ padding: 20px 40px; margin-bottom: 60px; /*height: 80px;*/ } /* SMALLER ELEMENTS */ h1 { color: #dc0073; font-size: 26px; text-transform: uppercase; font-style: italic; } 아직 float 속성을 입력하기 전 화면이다. float ..

Layout 레이아웃은 텍스트, 이미지 및 기타 콘텐츠에 배치되고 웹페이지에 정리되는 방식이다. 레이아웃은 페이지에 시각적 구조를 배치하여 콘텐츠를 배치한다. 레이아웃을 만든다는 것은 페이지 요소를 단순히 배치하는 대신 시각적 구조로 구성하는 것을 의미한다. 페이지 레이아웃(page layout) 과 구성 요소 레이아웃(component layout) 웹 페이지 내부의 큰 콘텐츠, 웹사이트는 요소를 배치하는 시점까지이다. 더 확대한 그림은 구성 요소 자체가 더 작은 콘텐츠로 구성 요소 레이아웃으로 되어 있다. CSS 빌드하는 3가지 방법 Float Layouts 레이아웃을 구푹하는 오래된 방법, float css를 사용 flexbox, CSS Grid같은 최신 기술로 대체되고 있다. 오래된 웹사이트에서는..

responmsive design(반응형 디자인) 사용하는 기기의 화면 크기에 따라 반응하는 웹사이트를 만드는 것이다. media queries(미디어 쿼리) media queries를 통해서 이 작업을 할 수 있다. media queries는 CSS와 style sheet에서 작성할 수 있다. 스타일을 변경하고 매개변수에 따라 새로운 스타일을 넣을 수 있다. 보통 화면 너비나 기기 종류에 맞춰 움직이는 방향을 통해 스타일을 조정한다. 매우 작은 화면이면 내비게이션 바를 접어서 공간을 넓힌다. 브라우저 속성에 맞추는데 뷰포트 너비나 높이 화면 방향같은 속성이 있다. 다양한 특징 및 매개변수가 다양하다. 미디어 쿼리는 @media로 시작한다. 괄호안에 미디어 기능을 다양하게 넣을 수 있다. width를 클..

flex sizing properties 공간이 있을때/없을때 어떻게 늘어나고 줄어드는 지 알 수 있다. body { font-family: 'Merriweather', serif; } h1 { text-align: center; } #container { background-color: #6c757d; width: 90%; /* height: 500px; */ margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } #container div { width: 200px; height: 200px; text-align: center; } fle..

align-content 행이나 열이 여러개일 때 교차축을 기준으로 정렬하는 것이다. 즉 열(행) 사이를 조정한다. align-content: space-between align-content: flex-start align-content: flex-end align-content: center 줄바꿈없이 단일 행/단일 열이라면 align-content는 아무것도 바뀌지 않는다. align-self align-self는 align-item과 비슷하지만 단일 요소에 사용하거나 플렉스 컨테이너에서 두 개 요소에 개별로 사용한다. 플렉스 컨테이너 자체에는 쓰이지 않는 특성으로 개벼 요소에 적용할 때 사용한다. 교차축을 기준으로 배열된 단일 요소의 위치를 바꿀 수 있다. align-self: space-betw..

align-items align-items는 교차축을 따라 아이템을 배열합니다. (justify-content는 메인 축을 따른다.) align-items: flext-start; 교차축의 시작점을 기준으로 한다. #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; } #container div { width: 200px; height: 200px; text-align: center; } align-item: ..

flex-wrap flex-wrap은 메인 축이 수평일 때 새로운 행을 만들어 요소를 정렬하고 메인 축이 수직일 때 새로운 열을 만들어 요소를 정렬하는 속성이다. flex-wrap: wrap #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: column; justify-content: space-evenly; flex-wrap: wrap; } 각각 위에서 아래로 정렬되었다. justify-conten:flex-start;로 설정하면 요소들 전부가 위로 촥! 붙는다. 왜냐하면 주축이 상에서 하 방향으로 한 ..

justify-content 메인축을 기준으로 요소와 콘텐츠를 어떻게 배치할지 결정하는 속성이다. 디폴트는 flex-start로 입력되어있다. flex-start는 속성의 이름이다. 항상 왼쪽으로 정렬되는건 아니다. 그러나 메인 축이 왼쪽에서 오른쪽 방향이면 요소도 왼쪽에서 오른쪽정렬이다. body { font-family: 'Merriweather', serif; } h1 { text-align: center; } #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: row; } #container div ..

Let's Play With Flexbox 컨테이너 개념을 포함하는 평범하고 전형적인 섹션이다. body { font-family: 'Merriweather', serif; } h1 { text-align: center; } #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; } display 속성 #container div { width: 200px; height: 200px; } 각각의 는 블록 레벨 요소로서 하나의 섹션안에 존재한다. 이 컨테이너의 diplay를 flex로 설정하면 어떻게 될까? #container { background-color: #6c..

Flexbox flexbox는 items을 금 긋기(열, 행을 긋기) 위한 표면적인 레이아웃 방법이다. 페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 사용된다. 페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 사용된다. flexbox는 1차원 레이아웃을 만드는데 사용할 수 있는 CSS 속성의 집합 flexbox의 주요 아이디어는 conatiner 요소 내부의 빈 공간이 자식 요소에 의해 자동으로 나눔 flexbox를 사용하면 부모 container 내부에서 수평 및 수직으로 항목을 자동으로 정렬 가능 flexbox는 수직 정렬 및 동일한 높이의 열 생성과 같은 일반적인 문제를 해결한 flexbox는 floats를 바꾸는데 완벽하고, 더 적은 코드와 HTML과 CSS를 깔끔하게 작성 float에 대해서 ..