기억보다 기록

사실 이 글은 SCSS를 어떻게 사용하는 지보다 만약 SCSS를 처음 사용하는 것을 가정하고 SCSS가 무엇이고 어떻게 동작하기 때문에 어떤 것이 필요한지 적어보려고한다. 그리고 이 글은 이 블로그 를 보고 작성했다. Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다. heropy.blog SCSS란? Sass는?? 프로젝트나 서비스의 규모가 작을 때 CSS를 사용할 때는 문제점이 없지만 작업이 고도화되고, 방대해지고 복잡해 질 때 CSS의 단점이 드러난다. 하지만 웹에서는 표준 CSS 만 작동할 수 있기 때문에 다른 방법이 없다. 그..

Material UI(이하 MUI)의 스타일 솔루션을 사용하기 위해 공식문서를 보았다. MUI는 다른 스타일 솔루션들과 상호 운용이 잘되고, 이와 더불어 CSS-in-JS 솔루션이 MUI의 이전 버전의 한계들을 극복할 수 있고 다른 멋진 기능들을 제공한다고 했다. 그렇기때문에 굳이 자체적 스타일 솔루션을 사용할 필요가 없다고 했다. In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited. A CSS-in-JS solution overcomes many of those li..

기본적인 HTML과 CSS에 대해서 처음부터 친절하게 알려준 니꼴라스의 코코아톡 클론 코딩 과제를 들으며 지금 생각해보면 웃기지만 안좋은 생각도 솔직히 조금 들었다. 이런 기본적인걸 지금 듣는다는게 뭔가 내가 좀 한심하다는 생각도 들었다. 하지만 멍청한 생각이란게 들었고 들을수록 말그대로 정말 기본적이지만 필수적인 중요한걸 배웠다는 생각이 든다. CSS grid 같은 다른 다양한 방법도 많겠지만 어쨌든 웹페이지를 짤 때 기본적인 골격에 대해서 생각하게 되는 것, 전체적인 페이지에서 재사용할 수 있는 CSS가 있을지 생각하는것, 그리고 그 CSS로 실제로 재사용하는 것, 각 페이지에서 구역별로 나누어 CSS를 고민하는 것 등 이전에 프로젝트를 진행하며 정말 말그대로 주먹구구식으로 CSS를 작성하며 marg..

앞선 포스팅에서 말했듯, 이론 강의는 끝났기 때문에 클론 코딩을 진행하며 기록해두고 나중에 보면 좋을 만한 것들을 자질구레한것 까지, 메모장에 기록이 된 것이라면 모두 정리해 보았다. 1. reset.css 클론코딩을 시작하면서 가르쳐주신건데, 이름 그대로 웹사이트에 자동적으로 지정된 CSS를 reset한거다. 앞선 포스팅에서 와 같은 부분에 자동적으로 margin이 적용되어있다고 했는데 이와같은 부분을 모두 reset하는 CSS가 담겨있다. 구글에 검색하면 CSS파일이 있으며, 그냥 내 프로젝트 디렉토리에 넣어서 import해 쓰면 된다. 2. page ruler redux 클론 코딩을 진행하며 element의 width나 height, 혹은 각 element사이의 여백의 길이를 잴 때 계속 사용한 t..

마지막 이론강의가 되겠다. 강의 내용을 요약하는 포스팅은 여기서 마무리 될 것같다. 나머지는 클론 코딩을 진행하기 때문에 강의를 듣다가 필요한 부분이 있으면 모아서 포스팅 할 것 같다. Media Query 오직 CSS만을 이용해서 유저가 보고있는 웹사이트의 screen의 사이즈를 알 수있게 한다고 한다. 만일 누가 아이폰으로 혹은 아주 큰화면으로 본다면 혹은 가로모드로 본다면, 그때마다의 다른 사이즈를 오직 이 Media Query만으로 감지할 수 있다. 이것은 즉, 반응형 웹사이트를 만들 수 있다는 뜻이다. 사용 방법은 다음과 같이 쓸 수 있다. @media screen and (max-width:700px) { div { background-color : tomato; } } (max-width :..

현재 근무 중인 회사에서 데이터를 수정하거나 추가할때 서버와의 통신에서 콜백함수로 처리하는 부분이 상당히 많다. 옆자리의 사수이자 동료인 재훈님께서 물어볼때마다 친절하게 설명을 해주셨지만 정작 나는 볼때마다 정리가 다르게 되서 이번에 확실히 여쭈어보고 문서로 정리하기로 했다. 콜백 함수, Promise, async / await 등 비동기 처리 방식에 대한 정리는 나중에 자세하게 하고 우선 적어도 내가 오늘 본 코드에 안에서 콜백 함수란 것이 어떻게 작동하고 왜 작동하는지 나중에 잊지 않기 위해 적어볼 것이다. 회사 코드이기 때문에 그대로 가져다 쓰는 건 아닌 것 같아서, 비슷한 이름이지만 같은 로직으로 작성해보겠다. 내가 오늘 살펴본 코드는 제품의 정보를 수정하는 컴포넌트이다. 구조는 제품을 수정하는 ..

8일차-2 고오급 CSS에대해 공부했다. 예전엔 고급 기능의 CSS를 js로만 할수 있었는데 이제는 CSS로도 할수 있다. transistion 이전 state에서 다른 state로의 변화를 애니메이션으로 만드는 방법이다. 예를들어 :hover를 생각해보면, 커서를 갖다대는 순간 즉시 스타일이 적용된다. 이 state의 변화를 스타일하는 것을 애니메이션화 하여, 좀더 부드럽고 멋있게 보이게 하는 것이다. 사용법은 어떤 것을 변화할지, 얼마 동안 변화할지를 작성하는 것이다. 예를 들어 a{ transition : background-color 10s ease-in; } a:hover{ background-color : red; } 위와 같이 작성하였다면, a 태그에 커서를 갖다대었을 때, 원래대로였다면 단..

8일차 - 1 이전까지 스타일을 할 대상을 가리키는 여러 종류의 selector를 공부했고 마지막으로 state 에 관한 것을 배웠다. state state를 직역한 '상태'란 뜻 그대로 state를 이용하여 태그의 상태를 감지하여 스타일을 할 수 있다. 바로 이전 차수에서 공부했던 pseudo selector (pseudo-class) 가 바로 이 HTML element의 state를 감지하여 스타일을 바꾸는 것이다. 예를 들자면 :hover라는 것이 있다. 이건 해당 element에 커서를 갖다대게 되면 해당 스타일이 적용된다. :focus라는 것도 있는데, input과 같은 form 태그에 사용할 수 있으며 input 태그의 경우로 예를 들면 input field를 클릭했을 때 해당 스타일이 적용된..

7일차 역시 코딩 챌린지를 진행했다. 8일차 1. position position 이라는 property 의 타입은 크게 4가지 정도이며, static을 제외하고 top, right, left, bottom 과 같은 property들을 이용하여 최종 위치를 결정한다. 각 타입은 top, right, left, bottom 의 기준이 되는 위치를 지정하는데 차이가 있었다. 1-1. position : static default 값으로 element가 처음 위치한 곳에 위치해있다. top, right, left, bottom 과 같은 property들의 값에 영향을 받지 않는다. 1-2. position : fixed fixed라는 이름에서 유추할 수 있듯이 위치가 고정되어있다. 이 때 이 위치는 처음에 레..

4일차에는 이전까지 배웠던 것을 바탕으로 코딩 챌린지를 실시했다. label과 id를 사용하고, required 라는 attribute가 포함되고 password 타입의 input 태그에 최소 입력 글자수가 10개가 되개 해야하는 것이었다. 강의에있는 그대로 사용해서 어렵지 않게 작성할 수 있었다. 5일차 CSS 는 Cascading Style Sheet 이라는 뜻이다. 여기서 cascading이란 차례차례 쌓이는 것이라는 느낌으로 해석하면 된다. 이처럼 브라우저는 CSS를 읽을때 위에있는 코드부터 차례차례로 읽는다. 만일 두 CSS 가 하나의 태그를 가리키면? 두 코드중 어떤게 실제로 영향력이 클까? Cascading, 즉 위에서부터 아래로 차례로 적용되기때문에 결국 맨 마지막에 있는 코드가 적용된다...