zerobase(54)
-
animation 최적화
animation 사용시에 css 최적화 하는 방법 1. css핵 (translate Z or translate 3D)사용하기 하드웨어 가속을 활성화하여 대상이 되는 엘리먼트를 빠르게 렌더링 처리하는 방법 하드웨어 가속은 중앙처리장치(CPU)가 하는 일은 그래픽 처리 장치(GPU)가 분담하여 처리해서 컴퓨터의 성능을 최대한 끌어올리고 브라우저 렌더링을 빠르게 할 수 있게 한다. 일반적인 css animation, trnasform, traslation 속성에는 하드웨어 가속이 적용되지 않기 때문에 브라우저를 속여서 강제로 3D 처리를 하도록 브라우저에 지시해 하드웨어를 가속하는 방법 transform: translate3d(0,0,0); transform: translateZ(0) 하지만 이러한 방법은 ..
2023.04.16 -
HTML/CSS과제 회고
HTML/CSS과제를 끝내며 과제별로 하나하나 정리를 하면서 회고를 해볼까 생각을 하다가 아직 과제가 채점중이고 해설강의도 올라오지 않아서 혼자 다시 정리를 해봐야 똑같을 것 같다는 생각에 그냥 과제를 하면서, 그리고 끝내면서 느낀 생각들을 정리하려고 한다. 과제를 시작 하기전에 나는 강의도 충분히 들었다고 생각을 해서 HTML/CSS는 어려울게 없을것 같다고 생각을 했다. 하지만 내가 들은 강의들은 기초에 불과했고.... 그것들은 다 합쳐서 과제를 하려니 내 생각대로 되지 않는 것이 많았다. 유효성 검사에서부터 걸리기 시작하였다. 브라우저에는 정상적으로 보여서 문제가 없는 것 같았는데 유효성 검사에서 ERROR가 뜨기도 하고, 안될것 같았던데 되기도 하면서 의아한 부분이 있었다. 내가 제일 오랜 시간을..
2023.04.14 -
폰트(로컬 폰트, 웹 폰트)
먼저 구글 폰트에 들어가서, 마음에 드는 폰트를 선택한 후에 링크 방식이나 import 방식 중에 선택하여 사용하면 된다. 로컬폰트는 @font-face를 사용해서 이용하는 것으로, @font-face { font-family: ; src: [,]*; [font-weight: ]; // font 굵기 값 [font-style: ]; // font 스타일 값 } 에는 폰트명으로 지정될 이름을 설정하면 된다. 에는 원격 폰트 파일의 위치를 나타내는 url 값을 지정하거나 사용자 컴퓨터에 설치되어 있는, 즉 로컬 환경에 있는 폰트명을 local("Font Name") 형식으로 지정하면 된다. 만약 로컬 환경에 있는 폰트를 지정하려면 src: local('Font Name') 과 같은 형식으로 폰트를 지정해 주..
2023.04.11 -
HTML/CSS강의를 끝내며
HTML/CSS 공부를 하면서 느낀점 사실 HTML/CSS를 처음배운것은 아니지만, 새롭게 공부했던 지난 시간이었다. 늘 기초가 탄탄해야 뭐든 할 수 있다고 생각하며 살아온탓인지, 남들은 다 쉽다고 하는 HMTL/CSS를 나는 어렵게 공부하며 시간을 보냈었다. 기초지만 부실하게 배워서는 안되고, 그 안에서 지켜줘야 할 것들이 꽤 많기에 그 rule을 지키는게 어려웠지만, 이제 나름 머릿속에서 정리가 되어가는것같다. 하지만 조금 정리가 안된 부분들은 강의를 추후에 또 들으며 보충해서 기초를 탄탄하게 쌓을 수 있게 해야겠다. HTML/CSS 공부하면서 어려웠던 개념과 그 이유 CSS의 flex box나 grid 에서 Container에 적용되는 속성과 item에 적용되는 속성, 그리고 div에만 적용이 되고..
2023.04.11 -
애니메이션
애니메이션 개요 transition과 비슷하지만 차이가 있음 transition은user의 action에 의해 효과가 나타나지만 animation은 요소가 계속 스타일이 변경될 수 있게 설정 가능함 transition은 a에서 b로만 전환되도록 설정 할 수 있지만 animation은 a에서 b,c,d등 다수의 스타일 전환을 할 수 있음 @keyframes 여러개의 스타일을 자동으로 작동하게 하는것이기 때문에 여러개의 스타일 시트를 정의해둘 수 있음 @keyframes slidein{ from{ margin-left: 100%; width: 300%;} to { margin-left: 0%; width: 100%; } } animation-name, animation-duration animation-na..
2023.04.06 -
Cross Browsing(크로스 브라우징)
크로스 브라우징이란? 웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오게 하는 작업을 말한다. html5, css3, javascript 작성시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저로 접속하던 어느 기기로 접속하던 사이트가 의도한 대로 보여지고 작동되는 기법이다. 크로스 브라우징을 고려하지 않는다면 html, css, js등 코드가 원하는대로 적용이 안될 수 있으며 그러한 이유로 브라우저마다 렌더링 엔진이 다르기에 전부 적용이 되게끔 설정해둬야 한다. 렌더링 엔진이란? 페이지를 렌더할 때 실질적으로 페이지를 작업해주는 브라우저의 엔진들을 의미한다. 엔진의 종류로는 트라이던트, 게코, 웹킷, 프레스토, 블링크, 듀얼 엔진 등 다양하다. 각 엔진은 사용되는 브라우..
2023.03.30