아싸지만 1일1글 하고싶어

목차 오늘 원래 setTimeout 포스팅하려 했는데, line-height로 질문이 많이 들어왔는데 설명이 잘 된 김에, 포스트도 이걸로 하려 한다. line-height line-height는 직역하자면 줄의 높이로써, 글의 한줄한줄의 길이를 뜻한다. 사진에서 알 수 있듯이, line-height는 글자크기와 같지 않다. 상상해보자 두줄이 있는데 줄 사이 간격이 0이라면 보기만 해도 답답하다. 그렇기에, line-height를 생각할 때는 글자크기 + 줄 사이 간격이라 생각하면 된다. flex vs line-height line-height는 중앙 정렬을 위해 자주 쓴다. 물론... 더 편한 float가 있지만... 호환성에서 line-height가 살짝 호환성이 높기 때문에, 알아두는 것도 괜찮긴 ..

목차 그림자의 효과 그림자는 웹디자인에서 입체감 / 깊이를 주는 아주 좋은 요소이다. (내가 정말정말정말 좋아하는 요소이다!!) 그림자 함수 box-shadow div{ box-shadow: 10px 5px 5px #aa96da; width: 100px; height: 100px; background : #a8d8ea; border-radius: 10px; } box-shadow 구조 div{ box-shadow: 200px 200px 10px 50px #aa96da; width: 100px; height: 100px; background : #a8d8ea; border-radius: 10px; } 가로 / 세로위치 첫번째 두번째 인자는 가로 / 세로위치를 뜻하며, 기본적 그림자 크기는 대상의 크기와 같..

목차 html 줄 생성하기 줄 꾸미기 여기서 style을 곁들이면 이쁘게 꾸밀 수 있는데 가로길이 정하기 hr { width: 100px; }​ 세로길이 정하기 height로 높이를 지정할 수 있다. hr { height: 10px; width: 100px; }​ 주의사항 여기서 알아둬야 할게 hr(horizontal rule)은 이름 그대로 자로 선을 긋는 거라 가로 / 세로를 지정 할 경우 내부 면적은 비어 있다. 이를 이용해서 사각형을 그릴 수 있지만 공간 안에 콘텐츠를 담는 것은 제한되어 있고, 무엇보다 접근성에서 불편하니 사각형 용으로 쓰지는 말자. 사각형을 그리고 싶다면 svg나 canvas를 사용하여 그리는 것이 좋다. 심화내용 여기서부턴 심화 내용 hr에 style을 넣는다면 저 정도쯤 일..

목차 배경이미지 넣기 배경 이미지를 넣어준다 section { /* 배경 */ background: url("../image/rose.jpg"); height: 800px; width: 1200px; background-repeat: no-repeat; } 그라데이션 넣기 그라데이션 넣기 section { background: linear-gradient( to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100% ), url("../image/rose.jpg"); /* linear-gradient