반응형 CSS15 구글 웹 폰트 다양한 웹 폰트를 제공하는 구글 사이트 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2022. 7. 25. [CSS] 텍스트를 표현하는 다양한 스타일 Preface 이번 장에선 CSS의 다양한 속성들을 공부했다. 알아야 할 속성들이 너무 많아서 머리가 아플 지경이다. 아, 그리고 HTML의 태그들 중 기억이 잘 나지 않는 태그들이 많아 이들을 따로 정리하려고 카테고리를 하나 만들었다. HTML, CSS, JS의 태그와 속성 들을 한 눈에 보기 좋게 정리해 놓고 필요할 때마다 볼 생각이다. 1. 글꼴 관련 스타일 - font-family 속성: 웹 문서에서 사용할 글꼴을 지정한다. 1) 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표를 넣어 구분한다. → 1번 째 설정한 글꼴을 가져올 수 없을 때(네트워크 상의 문제 등) 2번째 설정한 글꼴을 지정한다. 2) 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶어서 표현한다. font-famil.. 2022. 7. 23. [CSS] CSS의 기본 Preface 이번 장에선 CSS의 문법 구조를 간략히 공부했다. CSS도 문법 자체는 크게 어려운 부분이 없지만, HTML의 태그와 마찬가지로 스타일 속성 값의 종류가 다양한 것 같다. 무엇보다 파이썬, MySQL, HTML, CSS 등 여러가지 언어를 배우다보니 여러 언어의 문법이 뒤섞여 헷갈린다;;; 1. 웹 문서에 디자인 입히기 - 스타일(style): 문서의 겉모습을 결정짓는 것 - 스타일을 사용하는 이유 1) 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다. 2) 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. → 반응형 웹 디자인: 전자기기의 웹 브라우저 크기에 따라 화면 레이아웃을 자동으로 바꿔 주는 방법 2. 스타일과 스타일 시트 - CSS 스타일의 형식 선택자 { 속성1:.. 2022. 7. 21. CSS 소스 경량화 CSS 소스를 경량화해주는 웹 사이트 → 별도의 설치 필요 없음 https://www.toptal.com/developers/cssminifier CSS Minifier & Compressor | Toptal® Use our CSS Minifier & Compressor tool to reduce CSS code size and make your website load faster. Get started for free now. www.toptal.com 2022. 7. 21. 웹 개발 시작하기 Preface 오늘부터 웹 공부를 시작했다. 책에 30일 코스가 소개되어 있어 이에 맞춰 진도를 나가려고 한다. 다음 장은 '웹 개발 환경 만들기'로 vscode를 설치하고 설정하는 방법을 소개하는데, 나는 이미 해당 ide를 사용해왔으므로 블로그 글은 생략하겠다. 이번 장에선 웹 개발이란 무엇인지, 프런트엔드와 백엔드 영역에서 요구되는 기술엔 어떤 것들이 있는지 등을 알아봤다. 이미 여러 번 공부하고 언급했던 내용이므로 간략하게 정리만 하고 넘어간다. 1. 웹 개발 알아보기 - 웹 사이트의 종류 1) 정적(static) 사이트 2) 동적(dynamic) 사이트 - 서버(server): 인터넷에 연결된 컴퓨터 - 클라이언트(client): 사용자가 웹 사이트에 접근하려고 사용하는 전자기기 → 좁은 의미로.. 2022. 7. 14. 이전 1 2 다음
