CSS (3) 썸네일형 리스트형 css 초보 실습 - 헤더에 있는 회원가입,로그인 버튼 정렬 실습 [목표] : 웹페이지의 기본인 헤더에 있는 회원가입, 로그인 등 버튼 정렬을 실습해보자 알아야할 개념은 다음과 같다. 1. position => relative, absolute 2. ul 실습1 ) relative와 absolute의 관계(1) absolute는 절대값이라고 보면 된다. 예를 들어 position:absolute; bottom:0px, right: 0px; 일 때 오른쪽 아래에 딱 붙어서 보여준다. 회원가입 로그인 장바구니 주문배송 고객센터 매장안내 Global 실습2 ) relative와 absolute의 관계(2) 그런데 부모요소가 relative라면 부모 기준으로 오른쪽 아래에 붙는다. 회원가입 로그인 장바구니 주문배송 고객센터 매장안내 Global 요약 ) 상단에 회원가입, 로그.. flex를 이용한 정렬(justify-content, align-items, align-content) [목표] : 기본적인 정렬 개념, 아이콘을 padding이 아닌 flex 속성을 이용하여 정중앙 정렬하기 우선 justify와 align에 축에 대해서 배웠다. 시각화 하니 확실히 이해가 빠르다. 실습 1) 헤더에 있는 버튼들 정렬해보기 (justify-content) HOME ITEM CUSTOM 실습2) 완전 정중앙에 정렬해보기 (align-items) HOME ITEM CUSTOM 저것이 만약 아이콘이라면 더 효과적으로 사용할 수 있다! 실습3) flex 박스 안에 요소들의 간격 넓히기 (align-content) HOME MYPAGE CUSTOM HOME MYPAGE CUSTOM HOME MYPAGE CUSTOM HOME MYPAGE CUSTOM HOME MYPAGE CUSTOM HOME MYPA.. flex를 이용한 간단한 반응형 [목표] : 너비 600px이 넘어가면 좌우로 나란히 배치한다. 600px 아래일 경우 위 아래로 배치한다. 방법1 ) HOME ITEM CUSTOM 너비가 600px일 경우 꼬챙이를 위아래로 꽃았던 것을 좌우로 꽃는 걸로 바꾼다. 방법 2) 기본으로는 flex 하지 않고 있다가 600px 아래로 내려갈 때는 flex 적용시킨다. HOME ITEM CUSTOM 이전 1 다음
