먼저 구글 폰트에 들어가서, 마음에 드는 폰트를 선택한 후에 링크 방식이나 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에만 적용이 되고..

애니메이션 개요 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..

크로스 브라우징이란? 웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오게 하는 작업을 말한다. html5, css3, javascript 작성시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저로 접속하던 어느 기기로 접속하던 사이트가 의도한 대로 보여지고 작동되는 기법이다. 크로스 브라우징을 고려하지 않는다면 html, css, js등 코드가 원하는대로 적용이 안될 수 있으며 그러한 이유로 브라우저마다 렌더링 엔진이 다르기에 전부 적용이 되게끔 설정해둬야 한다. 렌더링 엔진이란? 페이지를 렌더할 때 실질적으로 페이지를 작업해주는 브라우저의 엔진들을 의미한다. 엔진의 종류로는 트라이던트, 게코, 웹킷, 프레스토, 블링크, 듀얼 엔진 등 다양하다. 각 엔진은 사용되는 브라우..

지난 한 달간 제로베이스와 함께하면서 좋았던 점 대답을 하기전에 일단 어느덧 한달이 지났다는 사실에 놀라며... 지난 한 달을 생각해보니 진짜 정신없이 시간이 흘렀다는 것을 알 수 있었다. 일단 3월 자체가 너무 바쁜 시기인데 제로베이스를 함께 시작하며 더더욱 정신없는 한 달을 보냈다. 제로베이스와 함께해서 좋은점은 처음 생각과 동일하게 to-do-list를 제공해준다는 점이다. 혼자 공부하면서 어떻게 어떤 커리큘럼을 따라서 공부를 해야할지 막연했었고, 제대로 된 계획이 없다보니 조금만 힘들면 쉬게되고, 공부를 건너뛰는 날들이 많았는데, 제로베이스는 to-do-list를 제공해주니 공부를 건너뛰거나 쉬는 일이 줄어들게 되었다. 또한 조별스크럼을 진행하여서 나태지옥에 빠질것 같은 날들에도 힘을 낼 수 있고..

메타데이터의 역할 head의 내용은 페이지에 표시되지 않음. 대신에 head의 내용이 하는 일은 페이지에 대한 metadata를 포함함 데이터를 위한 데이터 데이터를 설명하는 정보 html문서를 설명하는 정보 title title태그 사이에 text로 문서를 설명하는 제목을 넣어주면 됨 title 태그 사이에 텍스트는 무시가 됨 하나의 html엔 하나의 title만 있어야함 페이지 제목은 SEO에 큰 영향을 줌 명사로만 이루어진 제목은 피하는게 좋음. 광고로 인식을 하는 경우가 많음 meta-문서 정보 빈요소기 때문에 정보가 없음 속성에다가 정보를 나열하게 됨 name이라는 속성은 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공 할 수 있음 application-name은 웹..