본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

Languages/CSS3

 (5)
[CSS] 마우스 hover 시에 붕 뜨는 효과 넣기 (JS 사용X) CSS에서 많이 사용되는 효과 중에 마우스 hover하면 붕 뜨는 효과를 어떻게 넣는지 알아보자! 1. 우선 붕 뜨게 할 아이콘을 만들어준다. 필자는 파란색 박스를 만들었다. (CSS 탭을 누르면 CSS 코드를 확인할 수 있습니다.) See the Pen Untitled by Git ini (@hwanghaein) on CodePen. 2. .box에 transition: transform 0.5s ease; 속성을 추가하고 .box:hover에 transform: translateY(-20px); 속성을 추가한다. transition과 transform에 관련된 구체적인 설명은 아래의 mdn 문서를 참고하자! https://developer.mozilla.org/ko/docs/Web/CSS/transi..
[CSS] grid 정복기 목차 1. grid 2. 행과 열의 개념 3. 2행 3열을 grid로 어떻게 표현하는지 알아보기 4. 위의 코드와 같은 표현법 알아보기 (2행 3열) 5. 각 셀의 영역을 지정하는 법 6. grid를 이용해서 시안대로 배치하기 7. grid-template-areas (아주 직관적인 방법) grid grid를 알면 flex나 position보다 훨씬 쉽게 배치가 가능해진다 grid도 파고들면 복잡하긴 하지만... 복잡한 건 싫으니까 최대한 쉽게쉽게 알아보자. 행과 열의 개념 행(가로) row 행거는 가로로 걸고 → → 열(세로) column 열은 세로줄에 맞춘다 ↓ ↓ ↓ 2행 3열을 grid로 어떻게 표현하는지 알아보기 HTML 1 2 3 4 5 6 CSS .container { width: 600px..
[CSS] position 정복기 목차 1. position 2. position: static 3. position: relative 4. position: absolute 5. position: fixed 6. position: sticky 7. position을 사용해서 장바구니 예제 만들기 position 문서 상에 요소를 배치하는 방법을 지정한다. 값에는 static, relative, absolute, fixed, sticky가 있다. position: static 기본값이며, 요소를 일반적인 문서 흐름에 따라 배치한다. top, right, left, bottom, z-index 속성이 아무런 영향도 주지 않는다. position: relative static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 ..
[CSS] flex 정복기 목차 1. flex 2. flex box의 구성 3. flex로 box 배치하는 법 flex flex 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다. flex box의 구성 flex box는 복수의..
[CSS] box-sizing (박스 사이징) 목차 1. box-sizing 2. content-box 3. border-box box-sizing box-sizing은 요소의 전체 너비와 높이를 계산하는 방법을 설정한다. box-sizing 속성의 값은 여러가지가 있지만, 대표적인 것은 content-box와 border-box 2가지이다. content-box CSS 표준에서 지정한 초기값으로, box-sizing 속성을 굳이 안써도 콘텐츠에 width나 height를 지정한다면 box-sizing: content-box 를 한 것과 동일하게 적용된다. 요소의 크기= 콘텐츠의 너비 및 높이 (border, padding, 여백은 포함되지않음) 따라서 padding이나 border를 추가할수록 본래의 콘텐츠 크기에 덧대지기 때문에 전체요소의 크기는..

티스토리툴바