728x90 🧱 언어 모음집160 [Next.js] 개념 정리 (1) SSR SSR의 경우 브라우저가 서버에서 데이터를 받아온 후 화면을 띄운다. 따라서 초기 로딩 속도가 빠르며, 검색 엔진 최적화에 유리하다. 그러나 화면 전환 시, CSR 보다 사용자가 화면을 보기까지의 시간이 오래 걸린다. CSR CSR의 경우 데이터를 받아올 때까지 기다리지 않고, 프론트에서 서버에 요청을 보낸 후 데이터가 없는 화면을 먼저 띄운다. 그 후 백엔드에서 요청한 데이터를 받아온 후, 데이터가 적용된 화면을 띄운다. 따라서 페이지 전환이 빠르다. 그러나 데이터를 가져오는 동안 첫 페이지를 로딩 페이지로 띄워 놓는다면, 검색 엔진이 데이터에 접근하지 못하기 때문에 그냥 나가버리는 경우가 생길 수도 있다. (어떤 검색 엔진이냐에 따라 다르다.) 따라서 보통 첫 페이지는 SSR을 .. 2022. 2. 6. [생활코딩] transition transition은 "전환"이라는 뜻을 가지고 있고, CSS의 여러가지 효과(속성)들에 값이 변경 되었을 때 그 전환을 부드럽게 하는 기능을 말합니다. 예를 들어 폰트가 10이었다가 마우스를 올렸을 때 폰트를 100으로 변경한다고 했을 때 10에서 100이 한번에 탁 변하는 것과 부드럽게 변하는 것 중 사용자들을 부드럽게 전환되는 것을 더 선호 합니다. 이때 이 전환을 transition을 통해 조작 할 수 있습니다. 첫번째 예제 더보기 Click transition-property => 장면 전환 효과를 어떤 엘리먼트에게 줄 것인가 transition-duration => 장면 전환 효과를 몇초 동안 지속 할 것인가 축약형 => transtion: propery duration; 복수 설정 시 => .. 2022. 2. 6. [생활코딩] transform transform은 어떠한 엘리먼트가 있을 때 그 엘리먼트의 크기, 엘리먼트의 어떤 회전 또는 비틀기 정도를 설정하는 속성입니다. 위와 같이 포토샵에서 진행하던 작업들을 CSS의 transform을 사용하여 구현 할 수 있습니다. transform에 사용 할 수 있는 속성은 매우 많고, 그에 따른 단위도 약간씩 다릅니다. 대표적으로 px, deg(각도를 설정하는 단위), rem/em 등등이 있습니다. 필요 할 때마다 아래의 CSS 명세서를 통해서 찾아보면 됩니다 transform - CSS: Cascading Style Sheets | MDN The transform CSS property lets you rotate, scale, skew, or translate an element. It modifi.. 2022. 2. 5. [생활코딩] blend filter는 하나의 이미지에 효과를 주는 방식이고, blend는 "혼합한다, 섞는다"는 뜻으로, 두 개 이상의 이미지를 혼합해서 여러가지의 임펙트를 만들어 내는 방식입니다. [ background-blend-mode ] background-color와 background-image를 혼합 할 때는 background-blend-mode를 사용합니다. background-blend-mode에 어떤 값을 부여 하냐에 따라 여러가지 효과를 줄 수 있습니다. 즉, 백그라운드 효과들 간에 블렌딩을 할 수 있는 속성입니다. 더보기 [ mix-blend-mode ] 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정 즉, 콘텐츠와 백그라운드 간에 블렌드를 할 수 있는 속성입니다. 더보기 Lo.. 2022. 2. 5. [생활코딩] filter filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테투리 렌더링을 조정 하는 데 사용됩니다. (+ 중첩으로 효과를 부여 할 수도 있습니다.) Mountain 2022. 2. 5. [생활코딩] background 특정 엘리먼트에 배경 이미지나 배경 컬러를 정의하는 것이 백그라운드라는 효과입니다. [ 대표적인 속성 ] background-color : red; → 백그라운드의 색상을 결정 해주는 속성 background-image : url(); → 백그라운드의 이미지를 삽입 해주는 속성 background-repeat : no-repeat (repeat, repeat-x, repeat-y) → 백그라운드 이미지의 반복 여부를 결정하는 속성 background-attachment : fixed (scroll) → 배경 이미지를 뷰포트 내에서 고정 할 지 아니면 자신의 컨테이닝 블록과 함께 스크롤 할 지 지정하는 속성 즉, 배경 이미지의 스크롤 여부를 정하는 속성 background-size : contain (co.. 2022. 2. 5. [생활코딩] float float는 사전에서 찾아보면 "붕 뜨다", "부유하다"라는 뜻을 지니고 있는 단어입니다. 글의 본문 안에서 이미지를 자연스럽게 삽입 할 때 사용하는 기법입니다. float를 많이 사용하는 곳 중 하나는 삽화 삽입 뿐만 아니라 레이아웃을 잡을 때도 사용합니다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro aperiam laboriosam cumque ipsam dolore facere commodi modi aliquid. Beatae obcaecati culpa id suscipit in praesentium, doloribus rem a, cupiditate eveniet necessitatibus quo autem velit duc.. 2022. 2. 4. [생활코딩] Media Query 여러 사용자들에게 어떤 정보를 매개 해주는 매체들을 미디어라고 합니다. 쿼리는 "미디어의 상태를 미디어에게 물어봐서 그 상태에 따라 다른 디자인을 할 수 있게 한다"라는 느낌입니다. 화면에 크기에 능동적으로 디자인이 반응해서 거기에 최적화된 모습을 보여주는 반응형 디자인을 만들 때 사용됩니다. ~500px : red; 501~600px : green; 601px~ : blue 생활코딩 html css javascript Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum q.. 2022. 2. 4. [생활코딩] Multi Column [ Multi Column이란? ] 신문과 같이 화면에 크기가 큰 매체에서 사용하는 레이아웃 기법입니다. 만약 저 많은 텍스트를 한 줄로 늘여 쓴다면 이 글을 읽는 것이 상당히 불편해집니다! 그래서 컬럼(열)을 나눠서, 조각조각으로 만들어서 읽기 편하도록 만드는 기법을 Multi Column이라고 합니다. 이렇게 많은글자가 한 줄로 나열되어 있다면 사용자가 읽기에 매우 불편합니다! [ Multi Column 속성 ] column-count => 화면을 분할해준다. text-align : justify => 글자 양옆을 가지런하게 해 준다. column-width => 칼럼의 폭을 지정 해준다. + 화면이 작아지거나 커지면 알아서 단을 줄이고, 늘려준다. column-gap => 컬럼의 간격을 설정해준다... 2022. 2. 4. 이전 1 ··· 7 8 9 10 11 12 13 ··· 18 다음 728x90
