thal11 님의 블로그

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도 마찬가지.

https://codepen.io/EONJENOG/pen/LYKWXaW a태그...codepen.io[앵커태그 a태그]- 앵커 = 닻- 요소를 클릭하면 원하는 경로로 이동할 수 있게 해주는 태그- 그 요소가 url 주소이면 그것을 하이퍼링크라고 부른다.- 기본적으로 target이라는 속성이 있고 우리는 두가지를 사용한다.ㄴ _self(기본값) 내가 보고 있는 페이지가 바뀌면서 이동ㄴ _blank 새 탭이 추가되면서 페이지 이동- 기본 display는 inline- 텍스트를 요소로 사용하면 파란색 글자와 밑줄이 기본적으로 커스텀되어 있다.- nomarlize 처리 후 사용해야 한다.ㄴ a{color: inherit; text-decoration: none;}- 마우스를 올리면 말풍선을 표시할 수 있다.ㄴ ..