flex

웹 접근성(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 별 거 아냐 - 자식요소편

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

Flex 별 거 아냐 - 부모요소 편

들어가기 이전에 부모 div안에 자식div 세 개를 만들어 보자. 시각적 힌트를 위해 색깔과 높이/너비를 주고, 부모 div에 border값을 주겠다. 박스들은 오른쪽 옆 공간을 끝까지 다 자치하기때문에, 우리가 보는 눈으로는 오른쪽 빈 공간이 충분해보임에도 불구하고 다음 행으로 넘어가게 된다. 자 이제 우리가 flex를 사용해서 무엇을 할 수 있는 지 알아보자. 부모에 display:flex를 주자 .parents { display: flex; } 기본값인 가로 메인축을 기준으로 item들이 정렬된 것을 볼 수 있다. Main axis(가로축)와 Cross axis(세로축)는 상대적인 개념이다. justify-content 속성을 통해 *main 축의 item 정렬을 어떻게 해줄 지 정할 수 있다. 속..