thal11 님의 블로그

한화생명 다이렉트 홈페이지 한화생명 다이렉트한화생명 다이렉트 공식 홈페이지! 암, 건강, 정기, 치아, 어린이, 연금, 저축 등 다양한 보험상품과 대출상품을 온라인에서 쉽고 간편하게 만나보세요.direct.hanwhalife.com  [상단바]fw-700fs-18fc-272B2F , FA6600 lh-1.5[2차 메뉴]fw-300 fs-16, 20, 30   fc-fff, 7E7C7A   상단바 구현드라이브0단계 - 세팅하기https://codepen.io/EONJENOG/pen/dyBgwEN 1단계 - 레이아웃https://codepen.io/EONJENOG/pen/LYKgqVx 2단계 - 로고https://codepen.io/EONJENOG/pen/poXxGgX 3단계 - 1차메뉴https://cod..

Youtube: 몰입코딩 아카이브수업페이지 바로가기 몰입코딩 바로가기코드몽키 바로가기 지디웹: 웹디자인사이트 모음 [선택자]https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io *: 태그 구분없이 자식이기만 하면 된다. 즉, 전체선택자공백: 후손선택자, 자식선택자. 바로 자식이건 후손이건 section안에 있는 것들 모두.>: section의 자식만.~: 동생선택자.+: 인접동생선택자. only-childㄴ 형제 없는 엘리먼트  div:nth-of-type(1)   // div type 중에서 첫번째div:nth-child(1)   // div type 이면서..

[피코그램구현]드라이브이동  [가상 요소를 활용하여 중앙정렬하기] https://codepen.io/EONJENOG/pen/poXdgGQ?editors=1100 가상요소...codepen.io - 가상요소를 menu-2에 적용한다.- 가상요소는 자식요소로 작동하기 때문이다.- 요소를 작성하지 않아도 content: ""; 는 꼭 작성해주어야 한다. - menu-2의 앞과 뒤에 로고박스와 유저박스의 너비를 준다. (274px) - 이 때 가상요소는 inline 요소이기 때문에 아주 작게 나온다.- 어차피 menu-2-box 와 정렬해 주어야 하기 때문에 flex-item으로 만들어 준다.- menu-2에 패딩값을 적용해도 유연하게 뚫려있기 때문에 오른쪽 패딩값은 바깥으로 튀어 나간다.  ㄴ box-sizi..

https://codepen.io/EONJENOG/pen/zYVEJbY absolute 부모역할태그...codepen.io[absolute]- 상위태그가 전부 static 상태일 경우 body태그가 부모 역할을 한다.- 가장 가까운 상위태그를 찾아 자식으로 활동한다.- display를 사용할 수 없는 상태가 되고 부모역할은 할 수 있다. [relative]- display를 유지하면서 부모역할을 할 수 있다. [부모역할]- 위치속성 기준선- 너비높이 상속 기준 https://codepen.io/EONJENOG/pen/poXWOmY?editors=1100 hover...codepen.iohttps://codepen.io/EONJENOG/pen/mdZBGZB 마우스를 올리면 형태가 변화하는 absolute...

Position 코드펜이동z-index 코드펜이동 - z-index를 많이 사용하지 않도록 한다.- 만약 10번을 넘어간다면 그 때부터 뭔가 잘못된 것...  ㄴ 처음부터 다시 짜는 게 나음...

https://codepen.io/EONJENOG/pen/LYKjbMJ 영문폰트와 한글폰트 같이 적용하기...codepen.io  +) 400 --> 본문기본 폰트

눈누 폰트 적용하기 코드펜

[플로우차트]폰트사이즈 16 트리구조  [ul, li 주의사항]- ul과 li는 항상 꼭 같이 사용해야한다.- ul태그 자식으로 li태그만 사용할 수 있다.- ul태그는 기본적으로 margin, padding 값을 가지고 있다.- li태그는 기본적으로 list-style 값을 가지고 있다.

G마켓 1차 상단바 구현 코드펜이동          - 글자 커스텀>> 찾아바꾸기 ctrl+H +) span도 마찬가지 Global 우측 아이콘        - 아이콘은 폰트보다 작기 때문에 폰트 사이즈를 생각해서는 안된다.- 최소 두배 - 오른쪽의 여백을 줄이는 방법- 상자의 크기를 제한해도 된다. (over-flow: hidden;)

- 웹표준에 맞게, 접근성에 맞게 퍼블리싱 할 것- 화면이 작은 사용자를 위해 그리드에 맞게  - 시험칠 때 주석으로 표시해주기. css도 마찬가지.