diff --git a/index.html b/index.html index 75c8da0..9ed6239 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + 맥도날드 @@ -11,3 +12,4 @@ + diff --git a/src/styles/fonts/fonts.css b/src/styles/fonts/fonts.css index 01d45a6..d37ec18 100644 --- a/src/styles/fonts/fonts.css +++ b/src/styles/fonts/fonts.css @@ -1,79 +1,59 @@ @font-face { - font-family: "Apple SD Gothic Neo"; + font-family: 'Apple SD Gothic Neo'; font-weight: 900; font-style: normal; - src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.woff2") - format("woff2"), - url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.ttf") - format("truetype"); + src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.woff2') + format('woff2'), + url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.ttf') + format('truetype'); } @font-face { - font-family: "Apple SD Gothic Neo"; - font-weight: 800; - font-style: normal; - src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraBold.woff2") - format("woff2"), - url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraBold.ttf") - format("truetype"); -} - -@font-face { - font-family: "Apple SD Gothic Neo"; - font-weight: 700; - font-style: normal; - src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Bold.woff2") - format("woff2"), - url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Bold.ttf") - format("truetype"); -} - -@font-face { - font-family: "Apple SD Gothic Neo"; + font-family: 'Apple SD Gothic Neo'; font-weight: 600; font-style: normal; - src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.woff2") - format("woff2"), - url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.ttf") - format("truetype"); + src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.woff2') + format('woff2'), + url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.ttf') + format('truetype'); } @font-face { - font-family: "Apple SD Gothic Neo"; + font-family: 'Apple SD Gothic Neo'; font-weight: 500; font-style: normal; - src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.woff2") - format("woff2"), - url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.ttf") - format("truetype"); + src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.woff2') + format('woff2'), + url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.ttf') + format('truetype'); } @font-face { - font-family: "Apple SD Gothic Neo"; + font-family: 'Apple SD Gothic Neo'; font-weight: 400; font-style: normal; - src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.woff2") - format("woff2"), - url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.ttf") - format("truetype"); + src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.woff2') + format('woff2'), + url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.ttf') + format('truetype'); } @font-face { - font-family: "Apple SD Gothic Neo"; + font-family: 'Apple SD Gothic Neo'; font-weight: 300; font-style: normal; - src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.woff2") - format("woff2"), - url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.ttf") - format("truetype"); + src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.woff2') + format('woff2'), + url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.ttf') + format('truetype'); } @font-face { - font-family: "Apple SD Gothic Neo"; + font-family: 'Apple SD Gothic Neo'; font-weight: 200; font-style: normal; - src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.woff2") - format("woff2"), - url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.ttf") - format("truetype"); + src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.woff2') + format('woff2'), + url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.ttf') + format('truetype'); } diff --git a/src/styles/global.ts b/src/styles/global.ts index 606c593..c5359ff 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -1,9 +1,8 @@ -import { css } from "@emotion/react"; +import { css, Theme } from "@emotion/react"; import Reset from "./reset"; -import theme from "./theme"; -const GlobalStyle = css` +const GlobalStyle = (theme: Theme) => css` ${Reset} * { diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 407ac4c..e0983d2 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -32,63 +32,64 @@ const theme = { fontSize: '44px', fontWeight: 900, lineHeight: 'normal', - letterSpacing: 'normal', + letterSpacing: '0', }, headline02: { fontFamily: 'Apple SD Gothic Neo', fontSize: '38px', fontWeight: 900, lineHeight: '1.4px', - letterSpacing: '-1%', + letterSpacing: '0', }, + title01: { fontFamily: 'Apple SD Gothic Neo', fontSize: '36px', - fontWeight: 800, + fontWeight: 400, lineHeight: 'normal', - letterSpacing: '-4%', + letterSpacing: '-1.44px', }, title02: { fontFamily: 'Apple SD Gothic Neo', fontSize: '30px', fontWeight: 900, lineHeight: 'normal', - letterSpacing: '0%', + letterSpacing: '0', }, title03: { fontFamily: 'Apple SD Gothic Neo', fontSize: '26px', - fontWeight: 800, + fontWeight: 400, lineHeight: 'normal', - letterSpacing: '-2%', + letterSpacing: '-0.52px', }, title04: { fontFamily: 'Apple SD Gothic Neo', fontSize: '22px', - fontWeight: 700, + fontWeight: 400, lineHeight: 'normal', - letterSpacing: '-2%', + letterSpacing: '-0.44px', }, title05: { fontFamily: 'Apple SD Gothic Neo', fontSize: '22px', fontWeight: 600, lineHeight: 'normal', - letterSpacing: '-4%', + letterSpacing: '-0.88px', }, title06: { fontFamily: 'Apple SD Gothic Neo', fontSize: '14px', - fontWeight: 800, + fontWeight: 400, lineHeight: '160%', - letterSpacing: '1%', + letterSpacing: '0.14px', }, title07: { fontFamily: 'Apple SD Gothic Neo', fontSize: '14px', - fontWeight: 700, + fontWeight: 400, lineHeight: 'normal', - letterSpacing: '0%', + letterSpacing: '0', }, body01: { @@ -96,77 +97,77 @@ const theme = { fontSize: '16px', fontWeight: 900, lineHeight: 'normal', - letterSpacing: '0%', + letterSpacing: '0', }, body02: { fontFamily: 'Apple SD Gothic Neo', fontSize: '16px', - fontWeight: 700, + fontWeight: 400, lineHeight: 'normal', - letterSpacing: '0%', + letterSpacing: '0', }, body03: { fontFamily: 'Apple SD Gothic Neo', fontSize: '16px', fontWeight: 600, lineHeight: 'normal', - letterSpacing: '-6%', + letterSpacing: '-0.96px', }, body04: { fontFamily: 'Apple SD Gothic Neo', fontSize: '16px', fontWeight: 400, lineHeight: 'normal', - letterSpacing: '-4%', + letterSpacing: '-0.64px', }, body05: { fontFamily: 'Apple SD Gothic Neo', fontSize: '15px', - fontWeight: 700, + fontWeight: 400, lineHeight: '170%', - letterSpacing: '0%', + letterSpacing: '0', }, body06: { fontFamily: 'Apple SD Gothic Neo', fontSize: '15px', fontWeight: 600, - lineHeight: '160%', - letterSpacing: '-2%', + lineHeight: 'normal', + letterSpacing: '-0.3px', }, body07: { fontFamily: 'Apple SD Gothic Neo', - fontSize: '15px', + fontSize: '14px', fontWeight: 300, lineHeight: 'normal', - letterSpacing: '-4%', + letterSpacing: '-0.56px', }, body08: { fontFamily: 'Apple SD Gothic Neo', fontSize: '14px', fontWeight: 200, lineHeight: 'normal', - letterSpacing: '0%', + letterSpacing: '0', }, body09: { fontFamily: 'Apple SD Gothic Neo', fontSize: '14px', fontWeight: 500, lineHeight: 'normal', - letterSpacing: '0%', + letterSpacing: '0', }, body10: { fontFamily: 'Apple SD Gothic Neo', fontSize: '13px', fontWeight: 600, lineHeight: 'normal', - letterSpacing: '-4%', + letterSpacing: '-0.52px', }, body11: { fontFamily: 'Apple SD Gothic Neo', fontSize: '11px', fontWeight: 200, lineHeight: 'normal', - letterSpacing: '0%', + letterSpacing: '0', }, caption01: { @@ -174,14 +175,14 @@ const theme = { fontSize: '12px', fontWeight: 600, lineHeight: 'normal', - letterSpacing: '-4%', + letterSpacing: '-0.48px', }, caption02: { fontFamily: 'Apple SD Gothic Neo', fontSize: '10px', fontWeight: 600, lineHeight: 'normal', - letterSpacing: '-4%', + letterSpacing: '-0.4px', }, }, };