함수 비슷한 코드가 반복해서 사용될 때 사용한다. 1) 함수 선언식 function 함수이름(매개변수 = 기본값) { // 코드 } 2) 함수 표현식 const 함수이름 = function(매개변수) { // 코드 } let a = 2; const makeNumber = function (value = 10000) { // 초기값 // 숫자가 아니거나 0보다 작으면 0으로 return, 넘겨진 value를 숫자형으로 만들어서 return if (value < 0) return 0; // early return let a = 1; // console.log(a); // 지역변수가 전역변수를 가림 const newValue = Number(value); return isNaN(newValue) ? 0 : n..

1. 미디어 쿼리 화면(screen), 티비(tv), 프린터(printer)와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다. 미디어쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다. 미디어 쿼리는 1) link요소에 media 속성으로 적용하는 방법 2) 스타일 시트 내에서 @media를 사용하는 방법 @media screen and (max-width: 768px) { body { background-color: lightgreen; } } 미디어 타입은 스크린이고 화..

animation 사용시에 css 최적화 하는 방법 1. css핵 (translate Z or translate 3D)사용하기 하드웨어 가속을 활성화하여 대상이 되는 엘리먼트를 빠르게 렌더링 처리하는 방법 하드웨어 가속은 중앙처리장치(CPU)가 하는 일은 그래픽 처리 장치(GPU)가 분담하여 처리해서 컴퓨터의 성능을 최대한 끌어올리고 브라우저 렌더링을 빠르게 할 수 있게 한다. 일반적인 css animation, trnasform, traslation 속성에는 하드웨어 가속이 적용되지 않기 때문에 브라우저를 속여서 강제로 3D 처리를 하도록 브라우저에 지시해 하드웨어를 가속하는 방법 transform: translate3d(0,0,0); transform: translateZ(0) 하지만 이러한 방법은 ..

HTML/CSS과제를 끝내며 과제별로 하나하나 정리를 하면서 회고를 해볼까 생각을 하다가 아직 과제가 채점중이고 해설강의도 올라오지 않아서 혼자 다시 정리를 해봐야 똑같을 것 같다는 생각에 그냥 과제를 하면서, 그리고 끝내면서 느낀 생각들을 정리하려고 한다. 과제를 시작 하기전에 나는 강의도 충분히 들었다고 생각을 해서 HTML/CSS는 어려울게 없을것 같다고 생각을 했다. 하지만 내가 들은 강의들은 기초에 불과했고.... 그것들은 다 합쳐서 과제를 하려니 내 생각대로 되지 않는 것이 많았다. 유효성 검사에서부터 걸리기 시작하였다. 브라우저에는 정상적으로 보여서 문제가 없는 것 같았는데 유효성 검사에서 ERROR가 뜨기도 하고, 안될것 같았던데 되기도 하면서 의아한 부분이 있었다. 내가 제일 오랜 시간을..

먼저 구글 폰트에 들어가서, 마음에 드는 폰트를 선택한 후에 링크 방식이나 import 방식 중에 선택하여 사용하면 된다. 로컬폰트는 @font-face를 사용해서 이용하는 것으로, @font-face { font-family: ; src: [,]*; [font-weight: ]; // font 굵기 값 [font-style: ]; // font 스타일 값 } 에는 폰트명으로 지정될 이름을 설정하면 된다. 에는 원격 폰트 파일의 위치를 나타내는 url 값을 지정하거나 사용자 컴퓨터에 설치되어 있는, 즉 로컬 환경에 있는 폰트명을 local("Font Name") 형식으로 지정하면 된다. 만약 로컬 환경에 있는 폰트를 지정하려면 src: local('Font Name') 과 같은 형식으로 폰트를 지정해 주..

HTML/CSS 공부를 하면서 느낀점 사실 HTML/CSS를 처음배운것은 아니지만, 새롭게 공부했던 지난 시간이었다. 늘 기초가 탄탄해야 뭐든 할 수 있다고 생각하며 살아온탓인지, 남들은 다 쉽다고 하는 HMTL/CSS를 나는 어렵게 공부하며 시간을 보냈었다. 기초지만 부실하게 배워서는 안되고, 그 안에서 지켜줘야 할 것들이 꽤 많기에 그 rule을 지키는게 어려웠지만, 이제 나름 머릿속에서 정리가 되어가는것같다. 하지만 조금 정리가 안된 부분들은 강의를 추후에 또 들으며 보충해서 기초를 탄탄하게 쌓을 수 있게 해야겠다. HTML/CSS 공부하면서 어려웠던 개념과 그 이유 CSS의 flex box나 grid 에서 Container에 적용되는 속성과 item에 적용되는 속성, 그리고 div에만 적용이 되고..