sandbox

2021년 10월 26일 기준으로 작성된 글입니다 필요에 의해서 svg 파일을 fetch로 가져오는 일이 생겼는데, S3에서 CORS 설정을 해뒀는데도 403 에러가 떨어지는게 문제였습니다 도대체 왜! S3 의 CORS 설정 우선 S3의 CORS를 먼저 설정해줬습니다 CORS 설정 관련 내용은 해당 링크에 자세히 설명되어 있습니다 이렇게 설정한 다음, curl을 이용해 아래와 같이 테스트를 해봤습니다 뭔가 길다란 응답이 내려왔는데, 403 응답이고 클라우드 프론트에서 내려왔다고 적혀있었습니다 클라우드 프론트 설정으로! 클라우드 프론트 CORS 설정 동작 탭에서, 기본값을 선택하고 편집을 눌러주신 다음 아래쪽으로 스크롤 하시면 아래 사진 처럼 설정들이 나옵니다 이 다음 테스트 해보시면, CURL으로 요청을..

문득 폰트사이즈의 %와 em의 차이를 묻는 내용을 듣게 되어 궁금증에 찾아보게 되었습니다 %, 퍼센트 값 부모 요소의 font-size 값에 비례해 계산됩니다(font-size에서의 경우입니다. 다른 속성의 경우 달라질 수 있습니다) em 값 현재 요소의 계산된 font-size 값입니다 기본적으로 font-size는 상속됩니다 따라서 font-size: 1.5em 으로 해둔다면 부모의 폰트사이즈를 상속받고, 해당 폰트사이즈를 기준으로 150%만큼(1.5em이니까)으로 계산됩니다 따라서 최종적으로는 %와 em 둘 다 동일하게 부모의 폰트사이즈를 기준으로 계산합니다. Ref em 스펙 내용 - https://www.w3.org/TR/css-values/#em percentage 스펙 내용 - https:/..

매번 헷갈려서 하나만 사용하다 문득 다른게 있나 싶어 찾아보게 되었습니다. 다행히 복잡한 내용이 아니기도 하고 많은 사람들이 비슷한 궁금증을 가졌던지라 레퍼런스가 많았습니다. : 는 가상 클래스 선택자, 특정 상태를 가상의 클래스로 선택합니다 :link, :hover, :active, :focus :: 가상 요소 선택자 - CSS3 버전에서 추가됐습니다 가상의 요소를 선택합니다(가상의 요소이기 때문에 js로 선택할 수 없습니다) ::before, ::placeholder, ::first-line 가장 큰 차이는 "상태"이냐 "요소"이냐 의 차이입니다 예외로 :before(또는 ::before) 같은것도 있는데, 다른 의미로 사용되는게 아닌 CSS1, CSS2버전에서 정의된 선택자입니다. 아시다시피 하위호..