전체 글
가운데정렬의 난 case 1 - 이미지와 텍스트 수직정렬하기
문제점 저 weniv 로고이미지와 '로그인'텍스트를 수직정렬하고싶다. 제발. HTML 로그인 CSS .login a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 해결시도 1. .login에 flex속성으로 중앙정렬 시도 .login { display: flex; justify-content: center; align-items: center; } 결과 먹긴 하나 안됨. 지멋대로 센터 해결시도 2. .login flex 다른속성으로 시도 .login { display: flex; justify-content: center; align-items: flex-end; } 결과 div에게 부여된 height를 모두 ..
8주차 회고 - 차분히 전진하기
이제 이것저것 배운건 마구 쌓여가는데, 아직 큰그림을 그릴 수 있는 시야가 아예 없다시피 하다보니 막상 무엇을 하나 만드려면 뭘 어디서부터 해야하는지 모르겠는 상황에 부딪힌다. >어떤 개념을 배웠을 때, 그것이 어디에 적용될 수 있는지 찾아보고 그걸 직접 구현해보면서 배운걸 적용하는 방식으로 복습하자. 모르는 개념을 이해하기 위해서 영상을 보고 있노라면, 거기서 또 모르는개념이 나와 영상을 이해하기 위한 또다른 영상들이 가지를 치며 생겨난다. >내가 처음에 이해하고싶었던 그 개념을 먼저 "끝내는 데"에 초첨을 맞춰 공부하자. 정확하게 중요도의 무게를 배분해야 내 머릿속에 남는게 있다. 나는 잠이 정말 중요한 사람이다. 2주간 조금 무리하며 공부를 했더니 바로 몸에서 반응이 온다. 오늘 열이 올라서 약을 ..
배운 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, 맨 뒤..
