개인 공부용 블로그

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. 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)과 같이 더하기( + ), 빼기( - ) 연산자의 경우 앞뒤 공백이 ..

만들어볼 체크박스 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..

1. 메뉴바 See the Pen 1007_flex header 만들기 by limhaneul2244 (@limhaneul2244) on CodePen. 많이 사용하는 header부분의 메뉴바. flex를 알기전이라면 float을 통해 왼쪽으로 붙여서 해야하는 불편함(?)이 있었겠지만 flex의 기본개념을 알고 있다면 간단하게 만들 수 있다. 여기에서 주의사항은 자식요소를 정렬한 뒤 100%로 늘리기 위해 flex-grow를 사용하면 IE에서 작동이 되지 않는다. (caniuse 사이트에서도 flex-grow 검색 시 부분지원 또는 불가가 많이 나온다) 그렇기 때문에 flex-grow보다는 width로 너비를 잡아주는 것이 안전하다. 2. 검색창 See the Pen 1007_flex search bar..

See the Pen by limhaneul2244 (@limhaneul2244) on CodePen. **table 내부에 속성을 지정해주었으나, W3C에서 오류가 나므로 아래처럼 변경해야 한다. 기존 변경 cellpadding td의 padding cellspacing border-spacing border border: 1px solid #000; 먼저 표를 만들면서 표 안에는 tr, td만 넣어야 한다는 고정관념을 깨버려따. 표 내부의 선을 없애고 두번째 행에 가로로된 dot solid를 삽입해야 하거나 다른 선을 넣어야 한다면 1. 우선 border-collapse: collapse 를 통해 td 간의 간격을 모두 없앤다. table { width: 60%; border-collapse: col..

대략적인 구조는 아래와 같다. 상위 부모에 높이를 주지 않고 패딩을 통해 밀어내는 것. 또한 하위 자식에게는 w, h 에 100%를 통해 반응형일 경우 자동으로 늘어나고 줄게 한다. -------------------------------------- 2:1 : padding-top: 50% 1:2 : padding-top: 200% 4:3 : padding-top: 75% 16:9 : padding-top: 56.25% -------------------------------------- 내부 박스 .boxWrapper { position: relative; height: 0; padding-bottom: 56.25%; } .box { position: absolute; width: 100%; heig..

테이블 태그를 만들면서 여러가지 애로사항이 많았다. 평소에 만들어보지 않았던 다양한 구조가 나오면서 애를 먹었음. table에 대한 구조에 대해 다시한번 이해할 수 있었다. table 표 삽입 thead 표 머리 생성(제목 쓸때 / 보통 진하게 표시됨) tbody 표 본문 tfoot 표 꼬리 부분 (요즘은 사용하지 않기도 하며, 끝에 넣지 않아도 자동으로 마지막에 넣어진다) th 표의 제목 요소 tr 표의 행 td 표 일반 요소(칸) caption 표 제목 (table 태그 바로 아래 사용한다) colspan 세로 줄 병합 rowspan 가로 줄 병합 cellpadding td 안의 text와 td 간의 padding cellspacing td간의 간격 table 태그 만들어보기 추가 글 보러가기 cel..

justify : 메인축을 기준으로 정렬 align: 수직축을 기준으로 정렬 justify-content : 주축 방향 정렬 플렉스 아이템(자식)은 플렉서블 박스(부모) 주축의 시작점부터 배치된다. 주축 방향으로 박스를 배치하고 싶다면 아래 속성값을 사용하자. 속성명 속성값 적용 요소 justify-content flex-start(기본값) flex-end center space-between space-around space-evenly 플렉서블 박스(부모) See the Pen justify-content by limhaneul2244 (@limhaneul2244) on CodePen. 속성값 명 속성값 설명 비고 flex-start(기본값) 기본 값 flex-end 자식 박스를 부모 박스 주축의 끝..

flex-direction 플렉스아이템(자식 박스)들이 배치되는 축의 방향을 결정하는 속성 속성명 속성값 적용요소 flex-direction row(기본) row-reverse column column-reverse 플렉서블 박스(부모) See the Pen flex-direction by limhaneul2244 (@limhaneul2244) on CodePen. 속성값명 속성값 설명 row 박스를 좌->우로 배치. 해당 속성값 설정시 주축은 가로가 되고 교차축은 세로가 된다. row-reverse 박스를 가로로 배치하되 역방향 배치. 우->좌로 배치한다. 해당 속성값 설정시 주축은 가로가 되고, 교차축은 세로가 된다. column 박스를 위->아래로 배치 해당속성 설정 시 주축은 세로가 되고, 교차축..