Front-End Developer
웹 접근성(Accessible HTML) - 큰 깨달음..!!!
flex에 한참 빠져있던 나. 팀원과 토의 중 아래와 같은 문제에 봉착했다. flex를 이용해서 뷰포트의 정 중앙에 로고이미지가 있고 같은 수평선 라인 오른쪽 끝에 버튼 하나 는 어떻게 구현할 수 있을까? 음... justify-content 속성을 center로 주고 버튼만 밀어낼 수는 없다. 왜냐면 로고가 아닌 저 두 컨텐츠의 사이가 center가 되니까. justify-end속성을 주고 마진을 이용해 로고이미지를 마진으로 밀어내는방법? 하지만 마진계산을 어떻게 하느냐에 따라 반응형 웹 구현에 방해받을 수 있다. 같은 수평선 안에서 로고나 텍스트를 정렬해야하는 상황은 항상 있고 그 때마다 난관에 봉착하지만 또 어찌어찌 하다보면 되서 되는대로 넘어가게 되는 이런 악순환을 끊기 위해 멘토님께 질문을 드렸..
가운데정렬의 난 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를 모두 ..
배운 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, 맨 뒤..
니가 누구던지 센터로 가버려 - CSS 중앙정렬 4가지 방법
CSS에서의 가운데정렬이란 초심자에게 가장 헷갈리는 컨셉 중 하나이다. 인라인요소/블럭라인 요소에 따라 다르고, 또 같은 속성이라 하더라도 상황에 따라 되는게 있고 안되는게 있다(?) 오늘은 딱, 깔끔하게, 거의 모든 상황에서 먹히는 4가지 중앙정렬 방법을 정리해보려 한다. 이 중에 상황에 따라+선호에 따라 맞춰 사용하면 되겠다. 전제조건 부모 div class="container" 안에 자식 div="box-1"을 만들었다. 정확한 결과를 위해, 적용된 마진 패딩값을 0으로 설정하고, box-sizing: border-box;를 준다. 뷰포트 안 어디라도 이동이 가능하기 위해 부모 cotainer div의 height를 100vh로 설정했다. * { margin: 0; padding: 0; box-si..
Flex 별 거 아냐 - 부모요소 편
들어가기 이전에 부모 div안에 자식div 세 개를 만들어 보자. 시각적 힌트를 위해 색깔과 높이/너비를 주고, 부모 div에 border값을 주겠다. 박스들은 오른쪽 옆 공간을 끝까지 다 자치하기때문에, 우리가 보는 눈으로는 오른쪽 빈 공간이 충분해보임에도 불구하고 다음 행으로 넘어가게 된다. 자 이제 우리가 flex를 사용해서 무엇을 할 수 있는 지 알아보자. 부모에 display:flex를 주자 .parents { display: flex; } 기본값인 가로 메인축을 기준으로 item들이 정렬된 것을 볼 수 있다. Main axis(가로축)와 Cross axis(세로축)는 상대적인 개념이다. justify-content 속성을 통해 *main 축의 item 정렬을 어떻게 해줄 지 정할 수 있다. 속..