반응형웹

빔캠프 종찬님 특강 - .wrapper는 어디에 쓰는고?

이렇게 생긴 웹의 레이아웃을 짠다고 하면, 우리는 크게 위의 사진영역 하나, 그리고 아래의 메인 컨테이너 영역 하나 이렇게 나누게 된다는 것은 어렵지 않게 예상해 볼 수 있다. 아래와 같이, 위 헤더영역 아래 컨텐츠영역으로 나눈 다음, 차례차례 윗영역을 작업하고, 아래 영역을 작업하는 것이다. 그런데 종찬님은 여기서 하나의 큰 레이아웃을 더 보셨다. 바로 윗영역이나 아래영역이나 공통적으로 존재하는, 중간 컨텐츠 영역이다. 종찬님은 이 컨텐츠들을 한번에 묶어 클래스명 .wrapper로 하나의 요소 안에 넣어주시곤 하는데, 이를 하는 이유는 직관적이고 명시적으로 우리가 작업할 공간이 정해진다. 공통된 위치를 정해줌으로써, 우리는 윗영역과 아랫영역의 레이아웃을 한번에 짤 수 있고 나중에 유지보수도 편해진다. ..

배운 flex로 있어보이는 반응형 Nav 바 만들어보기

안녕! 배운건 직접 써먹어봐야 내 머릿속에 남습니다. 오늘은 있어보이는 반응형 Nav 바를 만들어볼거에요. 기본재료 준비 header 태그 안에 로고 이미지 ul 태그(3개의 네비게이션 링크들이 담긴) a태그(버튼이 담긴) 로 구성하고 아주 기본적인 스타일링을 해줄게요. >HTML Services Projexts About Contact >CSS * { box-sizing: border-box; margin: 0; padding: 0; background-color: #24252a; } li, a, button { font-family: "Montserrat"; font-weight: 500; font-size: 16px; color: #edf0f1; text-decoration: none; } .nav..

Flex 별 거 아냐 - 자식요소편

Flex 별 거 아냐 - 부모요소 편 이번에는 자식에게 할 수 있는 속성들에 대해 알아보겠다. 전제조건은 부모요소에 display:flex 속성이 적용되어있어야 한다. order 우리는 각각의 자식들에게 order속성, 즉 순서를 줌으로써 쉽게 위치를 바꿀 수 있다. 여기서 3번 박스를 가장 첫번째로 배치하려면 어떻게 해야 할 까? 정답은 3번 박스 스타일에 order: -1; 속성을 주면 된다. .three { width: 100px; height: 100px; background-color: blanchedalmond; order: -1; } 왜 1이 아닌 -1인가? 그 이유는 기본적으로 모든 박스의 order 속성이 ‘0’이기 때문이다. 때문에 원하는 박스를 맨 앞으로 보내주고 싶으면 -1, 맨 뒤..