웹디자인 (HTML,JS)43 구글 무료 한글폰트 간단 사용방법 홈페이지나 블로그를 만들 때 한글 폰트를 무료로 아주 간단하게 적용할 수 있다. 상업적인 사이트에서도 폰트를 무료로 이용이 가능하다. 1. Browse Fonts - Google Fonts 홈페이지 접속 https://fonts.google.com/ 2. Korean(한글) 선택 3. 한글폰트 26개 중 원하는 폰트 선택 4. 원하는 사이즈 (보통 400) 우측 "+ Select this style" 클릭 5. 우측 "Selected family" Review 박스 하단 태그를 복사해서 홈페이지 태그 안에 붙여넣기 6. 폰트를 적용하고자 하는 CSS에 위 font-family 복사해서 붙여넣기 7. 텍스트를 작성할 때 직접 HTML 태그 style로 적용해도 가능함 구글 노토산스 한글폰트 폰트를 하나씩 .. 2021. 1. 13. 홈페이지 레이아웃 구조를 구성하고 배치하기 홈페이지나 블로그를 원하는 레이아웃 구조로 구성하고 적절하게 배치하는데 사용되는 CSS 속성을 정리합니다. 다양한 형태의 레이아웃이 있는데 아래 CSS 속성을 이용하여 모든 구조의 박스 구성이 가능하다. 선택자와 가상선택자 CSS로 특정 요소를 선택하는 방법 CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다. blog.pages.kr CSS로 특정 요소를 선택하는 방법 가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스, ::(콜론두개)을 붙인 가상 요소로 요소의 특정 부분을 선택합니다. blog.pages.kr 박스 요소 표시 display - 요소를 표시하는 방법을 .. 2021. 1. 10. CSS로 특정 요소를 선택하는 방법 <가상선택자> CSS로 특정 요소를 선택하는 방법 CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다. blog.pages.kr HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다. 가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스, ::(콜론두개)을 붙인 가상 요소로 요소의 특정 부분을 선택합니다. 구조 선택자 :empty로 내용이 비어있는 HTML 요소들을 선택한다. p:empty { color: red; } 태그 요소 중 내용(공백포함)이 전혀 없는 요소의 스타일을 빨간색으로 적용한다. :first-child로 첫번째 형제 요소(단일).. 2021. 1. 10. CSS로 특정 요소를 선택하는 방법 <선택자> CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다. 참고로, jQuery에서는 $('요소')와 같은 방식으로 특정 HTML 태그를 선택할 수 있다. 자바스크립트에서는 getElementById('요소')의 방식으로 많이 사용된다. 함수의미는 get(가져오다) Element(요소) By(부터) Id(Identity:식별값) 정도로 해석할 수 있다. CSS에서 선택자를 활용하기 위해 부모·자식, 형제 관계를 알아야 한다. 부모 형 제 부모·자식은 어떤 태그 안에 다른 태그가 있는 관계로 는 부모이고 와 는 자식이다. 형제는 같은 부모를 둔 태그로 바로 다음에 오는 형제는 이다. 전.. 2021. 1. 9. 반응형 웹을 위한 레이아웃 설계 방법 지난 아티클을 통해 반응형 웹의 정의와 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들에 대해 살펴보았습니다. 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들 반응형 웹(Responsive Web) 개발은 이미 일상이 되었습니다. 다만, 최근 몇 가지 프로젝트를 진행하며 알게 된 사실은 대부분의 개발자들이 반응형 웹에 대한 개념은 이해하지만 막상 어떻게 개발해 blog.pages.kr 이번 아티클에서는 ‘반응형 웹을 어떻게 만들 것인가’에 대한 실질적 내용인 “반응형 레이아웃”에 대해서 알아보고 간단한 실습 예제를 진행하겠습니다. 1. CSS3와 미디어 쿼리 일반적으로 레이아웃은 ‘사물을 공간에 잘 배치하는 것’을 이야기합니다. “Lay something out”이 “~을 잘 사용할 수 있도록 보기 .. 2021. 1. 8. 이전 1 2 3 4 5 6 7 8 9 다음
