개인 공부용 블로그

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. See the Pen hover nav effect by limhaneul2244 (@limhaneul2244) on CodePen. front와 back을 겹치게 놓아야 하므로 .item에 position: relative지정. front와 back에position: absolute 지정 absolute지정시 content 크기 만큼 줄어들게 되므로 width값을 정의해주고, front가 앞으로 나와야 하기 때문에 z-index값을 준다. transition을 통해 부드럽게 위, 아래로 움직이게 하기 위해 hover가 아닌 front와 back에 transition을 지정한다. hover가 되었을 때에는 위치값으로 박스를..

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. See the Pen hover tool Tip by limhaneul2244 (@limhaneul2244) on CodePen. .icon안에 img와 span의 형제구조로 만듦 position: absolute를 통해 icon의 화살표 방향에 모두 위치하도록 한 뒤 여기서 잠깐 잊지말것! 어떠한 요소든지간에 position: absolute를 지정할 경우 inline-block이 된다. inline요소도 inline-block으로 변경된다. 즉, 컨텐츠 만큼의 너비만 가지게 된다. span을 .icon의 정중앙에 위치시켜주기 위해 transform: translatex(-50%); 를 지정해 icon의 width가 변형..

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. 구조는 아래와 같다. 보통 쇼핑몰에서 상품리스트에 마우스 hover 했을 때 상품의 상세설명이 나오는 경우가 많다. See the Pen hover dimmed by limhaneul2244 (@limhaneul2244) on CodePen. 1번 이미지와 2번 caption이 겹쳐지게 만들자. 맨처음에는 상세설명란이 보이지 않아야 하므로 opacity값이 0이었다가 hover가 되면 1이 되어야 하므로 caption의 opacity는 0 지정. 배경색에 알파값을 지정해 약간 투명해보이게 해준다.

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. See the Pen hover drop down navigation by limhaneul2244 (@limhaneul2244) on CodePen. 중요한 사항 a태그는 body태그를 따르지 않기 때문에 color와 text-decoration등을 별도로 지정해주어야 한다. body { color: #333; line-height: 1.5; } a{ color: #333; text-decoration: none; } /*a태그는 body태그를 따르지 않는다. 따로 색상, 언더라인을 지정해주어야 한다.*/ 뭔가 무심코 지나갔던 것들을 다시한번 재정리하는 느낌이다.

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. 1. 도형 로딩 애니메이션 예제 See the Pen keyframe animation_01 by limhaneul2244 (@limhaneul2244) on CodePen. 빨간 border안에서 박스가 회전되게 하려면 @keyframes SquareLoading { 0% { top: 0; left: 0; /*시작 방향이 left였다면 그 다음에는 right가 될 수 없다. right로 지정할 경우 다시 되돌아 오지 않는다.*/ } 25% { top: 0; /*right: 0; */ /*right로 지정할 경우 다시 되돌아 오지 않는다.*/ /*left: 100%; */ left: calc(100% - 20px); bac..

1. calc란 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다. 2. 사용방법 See the Pen calc by limhaneul2244 (@limhaneul2244) on CodePen. width, height, margin, padding 값을 사칙연산자를 이용해 표현할 수 있다. width값을 %로 나눌때 33.3333%나오거나 딱 떨어지지 않을때가 있는데 이럴때 사용하면 좋다. 3. 사용시 유용한 팁 계산은 좌에서 우로 진행됨 사칙연산과 마찬가지로 곱하기, 나누기가 제일 먼저 연산된다. 예를 들어 calc(50% - 10px) 과 같이 연산시 다른 단위값들을 사용할 수 있다. calc(100% - 20px)과 같이 더하기( + ), 빼기( - ) 연산자의 경우 앞뒤 공백이 ..

파비콘 생성 사이트 https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org favoritest icon의 합성어 파일 구조상 index.html과 동일하게 넣을 것. 16*16 or 32*32 사이즈 (PC 적용가능) 확장자명: .ico 파비콘 link 예시

무심코 써왔던 font-weight과 font-family에 대해 다시 짚고 넘어가야 할 것 같다. 작업을 하다가 font-weight: normal은 뭐고 숫자로 지정하는건 뭔지 감이 안섰기 때문이다. 우선 검색을 해보니 많은 정보가 나왔고 정리하면 아래와 같다. font-weigth: normal; font-weight: bold; font-weight: bolder; font-weight: lighter; font-weight: initial; font-weight: inherit; font-weight: 100; [CSS]폰트&텍스트 알아보기

기존의 셀렉트 박스 대신 border를 없애고 화살표모양을 삽입해 커스텀하기 셀렉트 커스텀하기 선택1 선택2 선택3 1. select_form 의 width, height 지정해주고 border 색상도 지정한다. .select_form { position: relative; width: 198px; height: 40px; border: 1px solid #666; line-height: 38px; } 2. .select_form 안의 select를 100%로 지정하고 기존에 있던 border 를 없애 .select_form이 box인 것으로 만들어준다. .select_form select { width: 100%; height: 100%; border: 0 none; padding: 0 0 0 10px..

만들어볼 체크박스 1. 가상선택자, 인접선택자를 이용해 checkbox 버튼 움직이게 하기 선택1 선택2 1-1. label을 background-color로 덮어주기. .check_form label { position: relative; display: inline-block; overflow: hidden; width: 36px; height: 21px; border-radius: 10px; background-color: #666; color: transparent; } label에 삽입한 글씨는 transparent 를 통해 투명처리를 해준다. 1-2. :before 가상선택자를 사용해 원형 버튼 만들기 .check_form label:before { position: absolute; left..