CSS

약방의 감초같은 image sprite기법으로 이모티콘 넣기

img 스프라이트 기법 여러 이미지들을 하나의 이미지로 만들어 background-position 속성으로 이미지 좌표 값을 이용하여 사용하는 기법 위의 로그인 리스트에서~ 구글, 페이스북, 네이버, 카카오 각각의 이미지들을 넣어준 게 아니라 1개의 이미지만 사용했다는 사실! 처음엔 컨셉이 헷갈릴 수 있으나, 아래 과정을 보면 생각보다 엄청 쉽다는 걸 알 수 있다. 왜 사용할까? 한장의 사진만으로 여러번 다른이미지들을 넣을 수 있으니까 당연히 소스절약 이는 로딩시간 단축으로 이어진다! (간단한 웹페이지는 별 차이 없겠지만, 네이버나 다음과 같은 한 페이지 안에 어마무시한 수의 이미지가 들어가는 사이트를 생각해보자..) 주의점 alt값이 들어가야 하는 의미가 있는 사진에는 적합하지 않다. 글의 악세사리처럼..

가운데정렬의 난 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 정렬을 어떻게 해줄 지 정할 수 있다. 속..