Front-End Developer/CSS

알아두면 너무 유용한 네거티브 마진

네거티브 마진 쉽게 사용하면, 마이너스 값으로 마진을 설정하는거다. 어떨 때 사용할 수 있나? 우리가 생각하는 마진은 요소와 요소 사이의 공간을 줄 때 사용한다. 이걸 반대로 동작하게 하는게 네거티브 마진인데, 공간이 마이너스로 중첩되어버린다! 그럼 어떻게 될까? 지붕을 뚫고 나간다! 아래 사진을 예시로 보자. 감자튀김 이미지에 margin-top을 줌으로써 이미지를 담고있는 부모div와 공간을 넣어주도록 하겠다. .box img { width: 500px; height: auto; margin-top: 30px; } 위와같이 margin-top 공간이 생긴 것을 알 수 있다. 그렇다면 여기서 negative margin을 적용하여 이미지가 부모 div인 지붕을 뚫고 나가게 해보자! .box img { ..

그냥 꾸미면 되는게 아냐..? - input 체크박스 꾸미기

input 속성의 타입을 checkbox로 만들어주면, 위와 같은 모양의 체크박스가 default로 유지된다. 버튼처럼 그냥 보더를 없애고 예쁘게 꾸미면 되는 줄 알았는데... 그게 아니다? 사실 체크박스는 기본 모양을 다르게 꾸며서 (버튼 꾸미는 것 처럼) 스타일링을 하는 것이 아니고, 기본 모양을 아예 보이지 않게 처리 한 뒤, 그 공간에 원하는 형태의 박스 이미지를 넣어줌으로써(이미지였다니!!) 변경하는 것이다. 체크 했을 때의 변경 된 모습은, 가상선택자 :checked를 사용하여 체크시 변경된 모습의 이미지를 하나 더 넣어주는 것이다.(속았다!) 체크박스 구현해보기 HTML 로그인 상태 유지 위의 체크박스를 만들어주겠다. 1. 일단 기본 체크박스를 안보이게 만들자. input[id="chkbox..

약방의 감초같은 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, 맨 뒤..