👩🏻‍💻

Google Fonts 사용법 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 1. 폰트 선택 Google Fonts에 접속한 후 검색, 정렬을 이용하여 사용할 폰트를 선택합니다. 2. 원하는 스타일 선택 제공되는 다양한 스타일 중에서 원하는 스타일을 왼쪽 Select this style을 클릭하여 추가합니다. 3. 코드 복사 및 적용 왼쪽에 팝업창이 뜨면 Embed를 클릭한 후 아래쪽의 코드를 복사합니다. 팝업창이 뜨지 않을 경우 오른쪽 위 About 옆의 아이콘을 클릭하면 창이 나타납니다. HTML의 head영역에 복사한 코..

웹페이지에서 우클릭 후 검사를 클릭하면 개발자 도구가 열립니다. 개발자 도구 상단의 두번째 아이콘인 'Toggle device toolbar'를 클릭하면 위와 같이 모바일, pc 등 다양한 기기, 다양한 크기의 화면에서 웹페이지가 어떻게 보이는지 확인해볼 수 있습니다. 미디어 쿼리를 이용하면 위 예시와 같이 뷰포트(화면 상의 표시 영역)의 넓이가 500px 이상일 때, 이하일 때 등 특정 조건을 만족했을 때의 웹페이지의 디자인을 다르게 설정할 수 있습니다. 미디어 쿼리의 기본 형태 @media mediatype and (expressions) { CSS-Code; } mediatype은 웹 페이지가 보여지는 장치를 의미합니다. expressions의 조건들이 모두 참이면 css-code의 내용을 웹 페이..

caniuse라는 HTML, CSS, Javascript의 기술들을 웹브라우저들이 얼마나 채택하고 있는지에 대한 통계를 볼 수 있는 사이트에 따르면, CSS의 Grid Layout은 거의 모든 웹브라우저에 적용시킬 수 있고, 전 세계 95.27%의 사용자들이 이 기술을 적용한 사이트를 이용할 수 있다는 것을 알 수 있습니다. 이처럼 Grid Layout은 웹페이지에 레이아웃을 구현하기 위한 아주 유용한 기술입니다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web tech..

웹페이지에서 오른쪽 마우스를 클릭한 후 검사를 클릭하면 위와 같은 개발자 도구가 열립니다. 코드에서 원하는 부분을 선택하고 오른쪽 박스에 마우스를 가져다 대면 해당하는 부분이 같은 색깔로 웹페이지에 표시되고, 이를 통해 원하는 부분의 여백이 어떤 값의 영향을 받고 있는지 분석해볼 수 있습니다. margin, border, padding 따라서 margin, border, padding, 파란색 부분인 content를 조정하면 원하는 레이아웃을 만들 수 있습니다. 1. margin : border 바깥의 공간으로, 다른 태그와의 거리를 나타냄 2. border : 테두리 3. padding : content와 border 사이의 공간으로, 글자와 테두리 사이의 간격을 설정 블록 레벨 요소와 인라인 레벨 요..