Chrome 환경에서만 작업을 했었는데, Safari로 들어갔을 때, 적용이 안되는 폰트가 있다는 것을 알게 되었다. 첫번째 해결방법으로는 * { font-family: Hevetica(혹은 다른 서체), AppleSDGothic !important; } Hevetica를 최우선으로 표시하고 Hevetica가 표시될 수 없다면, AppleSDGothic를 강제로 적용하는 방법이 있다. 하지만 위 방식으로 적용될경우, 모든 텍스트가 서체 하나(AppleSDGothic)로 표시되어 웹사이트의 개성이 무시되고 가독성이 더 떨어질 수도 있다. 따라서 두번째 방법으로, 가독성이 떨어지는 일부 폰트만 Apple SD Gothic Neo로 바꿔 주기로 했다. * { @font-face { font-family: Ap..
CSS
react-slick라이브러리에서 dots를 바꾸기 위해서는 setting(props)값에 dotsClass를 추가해줘야 한다. default로 되어 있는 class 선택자 대신 dotsClass명으로 class 선택자명을 바꿔 커스텀이 가능하다. DOCS 버튼의 색깔과 크기, 버튼 양 옆 마진 값을 바꿔주고 싶었다. import React from 'react' import Slider from 'react-slick' import './slick.css' export default function ImgSlide({images}: any) { var settings = { dots: true, infinite: false, speed: 500, slidesToShow: 1, slidesToScroll..
div를 겹쳐놓은 상태에서 border를 주면 border가 겹쳐져서 겹쳐진 부분만 더 두꺼워 보인다. border부분만 합치고 싶다면 border-collapse속성을 이용하면 된다. ‘border-collapse’는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다. MDN ‘border-collapse’는 table 요소를 꾸미므로 div에서 사용하고 싶을 때는 요소를 테이블로 만들어줘야 한다. 부모 div(section)에 Display :table;자식 div에 display : table-cell;을 주어 table 속성으로 만들어준 뒤 부모 div에 border-collapse: collapse;를 추가해주면 테두리가 겹쳐진 div를 만들 수 있다. See..
어떤 요소에 적용된 CSS 스타일이 상충할때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택한다. 요소를 선택하는데는 여러 방법이 있다. 따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다. h1 {color:pink;} body h1 {color:blue;} 두 규칙은 모두 h1을 선택하지만, 지정하는 스타일은 서로 다르다. 그렇다면 h1은 어떻게 표현될까? h1에는 color : blue가 적용되는데 이는 구체성과 관련이 있다. 선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있다. 이 규칙을 '구체성'이라고 한다. 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성..
css 구문 h1 { color: yellow; font-size:10px; } 선택자(selector) - "h1" 속성(property) - "color" 값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 10px" 선언부(declaration block) - "{ color: yellow; font-size:10px; }" 규칙(rule set) - "h1 { color: yellow; font-size:10px; }" css 적용 inline 안녕하세요 inline은 해당 요소에 스타일 속성을 이용해 규칙을 선언하는 방법이다. 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않고, 선언부의 내용만 스타일의 속성 값으로 넣어준..
DefaultProps , Styled-Components의 Props넘겨주는법, Type지정해주는 법에 대해 알아보자. 초기 Props 값 DefaultBadge.defaultProps = { info: "날씨", color: "pink", }; defaultProps 프로퍼티를 할당함으로써 props의 초기값 정의가 가능하다! 공식문서 참고 Styled Component의 props & Type정의 DefaultBadge에서 받아온 color를 Badge의 props로 넘겨주고 type BadgeType = { color?: string; }; const Badge = styled.span` padding: 5px; margin: 10px; border-radius: 3px; background-co..
