피리부는 사나이 (pied piper)

* { margin: 0; font-family: 'Noto Sans KR', sans-serif; box-sizing: border-box; } html { font-family: 'Noto Sans KR', sans-serif; // html에 본문 폰트 사이즈에 패밀리를 보통 준다. } body { font-family: 'Noto Sans KR', sans-serif; } h1 { margin: 0; } a { color: inherit; // anchor에 속해있는 것의 값을 상속받겠다는 이야기 // ex) p태그 (파란색) 안에 감싸져있으면 a도 파란색 text-decoration: none; } button, input, textarea, select { background-color: tr..

SVG 파일을 사용하는 대표적인 방식이 두 가지가 있다 1. 이미지 태그 'src' 속성에 넣어서 사용하기 2. css의 background-image에 넣어서 사용하는 방법 이 두 가지는 일반적으로 사용하는 방식이다. 그러나 이 두 가지 방법보다 더 유용하고 활용성이 좋은 방식이 있다. svg파일이 위대한 이유 => svg 코드를 그대로 복붙해서 태그처럼 사용할 수가 있다! **좋은점? svg 태그에 그대로 'attribute'값을 적용할 수 있다 ex) fill 속성을 이용해서 currentColor값을 적용해서 부모의 Color를 상속시키거나, aria-label을 그대로 부여할 수 있음 But, 항상 좋은 점만 있는 것이 아니다. 코드가 매우 길다는 것이다. 이 문제는 리액트에서는 1줄의 코드로 ..

#그리드 시스템의 개념 1. container : 그리드 시스템이 전체 적용되는 범위 2. column : 한 칸을 한 컬럼이라고 이야기함 3. gutter : 컬럼 양쪽에 여백을 주는 것 #부트스트랩 사용법 부트스트랩 그리드 기본 문법 (항상 row는 넣어줘야함, 한 줄을 뜻함) Contianer부터 Col까지 내려가는 자식은 반드시 지켜줘야하는 부트스트랩 문법 예시) 그런데 왜 아래로 떨어지는가? 1줄의 col의 최대값은 12인데 1 + 12 = 13이니까 col 12를 넘어서는 순간 자동으로 떨어짐 + 각각의 브레이크마다 컬럼을 달리줄 수 있다. 클래스를 주면 된다. col-12, col-sm-6, col-md-4 (... 더 큰 사이즈도 가능 lg, xl) => 모바일 사이즈일때는 col-12 =..

div를 넣으면 아래로 내려가는 것 이러한 현상을 normal flow라고 함 normal flow에서는 div를 옆에 둘 수 없다 해결방안 > float하고 position만 할 생각이다. (과거) 현대식 방안 > flex, grid flex랑 grid는 필요할 때만 써라? 옛날 방식을 이해하고 요즘 방식을 써야 유지보수 하는 것에 잘 할 수 있다. 아직은 float를 쓰는 옛 사이트들이 있기 때문이다. 이것을 안 쓰면 아예 못쓰게 됨 #플로트를 교정하는 방법 (bfc 재계산) float의 문제 자식이 집 나갔는데, 그 값을 부모가 모르니까 그것에 대한 재조정해서 그 자리를 갱신해줘야한다는 것? overlfow : hidden float:left inline-block text-align dispaly..

display의 속성 **Block vs Inline** ※Question : inline에 padding을 적용할 수 있을까? ■ Answer : 반은 맞고 반은 틀렸다. 좌우로는 패딩이 적용되나 싶은데, 상하로는 line-height 영역을 침범한다. (다른 줄의 base-line) 그렇다면 inline 요소의 성질을 유지한채로 block의 속성까지 갖을 수 있을까? (block은 width, height 값이 먹고, padding 값을 먹으니까) Inline-block이 해결해준다. 말 그대로 inline + block (하이브리드) inline-block 패딩을 통해서 상하로 밀수 있음 em상자의 높이는 어떻게 결정되는가? => content 영역의 크기는 font-size로 결정된다 line-h..

#Float -> Flexbox (플로트보다는 플렉스박스가 대세!) 문제는 플로트는 비효율적이라는 것이다. 'flex (or flexbox)가 탄생하고 부터..... #flex를 쓰자 (마법이다) :두 가지만 이해해도 큰 그림 이해 가능하다 Container => 안에 자식 요소로 item이 있음 속성값 존재 (박스에 지정하는 것) Display Flex-direction Flex-wrap justify-content align-items 등 아이템에 지정하는 요소 존재 Order Flex-grow Flex-shrink Flex align-self 등 고급 스킬, 알아두면 쓸데 있는 좋은 Higher Skills or Tips * Flex-wrap + width 33.3% : 카드 뉴스, 상품 리스트 만..

1. Flex 부모 요소에 display : flex를 주고 justify-content와 Align-items를 이용하면 99%는 중앙 정렬 시킬 수 있다. but inline 요소와 Img 요소가 혼재해 있을 때는 오히려 번거로울 수 있다. 그럴때는 두 번째 방법을 쓰는 것을 추천한다. 2. margin : auto margin auto는 블럭인 요소를 중앙 정렬 시킬 때 사용할 수 있다. 굳이 flex로 바꾸지 않아도 간단하게 중앙 정렬이 가능하다. ex) img 태그를 중앙 정렬하고 block으로 만들고 margin auto를 쓰면 한 줄에서 가운데를 차지한다. inline (span, heading, p)와 같은 문자 요소는 어떻게 중앙 정렬하는데? 3.text-align text-align을 ..