Amazing Story

안녕하세요 오늘은 무료로 사용할 수 있는 우아한 형제들 배민 폰트를 CSS에서 사용하는 방법을 알려드리려고 합니다. 지난번 포스팅처럼 PPT, 포토샵 등에서 사용할 때는 로컬에 내려받아서 사용하면 되는데요, 웹사이트 CSS에 적용하고 싶다면 어떻게 할까요? 구글 폰트를 이용하면 쉽게 해결됩니다! (아, 물론 내장폰트로 사용하면 되긴 합니다만.. 오늘 말씀드리는 건 웹폰트에요^^) 1. 구글 폰트에 들어갑니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. Search - Languages - Korean 을 선택합니다. ..

오늘은 책을 한 권 소개할까 합니다. HTML, CSS 포스팅을 하면서 정말 많이 참고한 책이에요~제가 배운 학원에서 교재로 썼던 책이기도 하구요^^ 제목은모던 웹 디자인을 위한 HTML5 + CSS3 입문 입니다. (클릭하면 알라딘 서점으로 이동합니다^^) 많은 분들이 HTML, CSS 입문자들에게 정말 많이 추천하는 책이죵~제가 본 책은 2015년도 개정판이에요. 이 책 외에도 관련된 도서로 모던 웹을 위한 JavaScript + jQuery 입문,모던 웹을 위한 Node.js 프로그래밍,모던 웹을 위한 HTML5 프로그래밍 등이 있어요. 로드맵으로도 제공 하고 있네용~ 책 내용을 좀 살펴보면HTML과 CSS 태그, 속성 위주로 정리되어 있는 Cheat Sheet도 있구요. 마크업이나, 개념적인 부분..

■ 이미지 스프라이트(Image Sprite)란?- 배경이미지를 적용할 경우 각각의 요소에 들어가는 배경이미지를 낱개로 만들지 않고 비슷한 성격의 배경 이미지를 하나의 파일로 제작 후에 background-position을 이용하여 배경이미지를 배치하는 방법- 이미지가 많은 웹 페이지는 여러 서버 요청을 로드하고 생성하는 데 시간이 오래 걸릴 수 있습니다. 이미지 스프라이트를 사용하면 서버 요청 수가 감소하고 대역폭이 절약됩니다. 네이버의 경우에 메인화면에서 다음과 같은 Image Sprite를 사용하고 있고, 다음의 경우에는 다음과 같은 Image Sprite를 사용하고 있답니다. (여러개로 쪼개져 있는데 그 중 하나에요^^) 전 메뉴바를 이미지 스프라이트를 이용해서 만들어 보겠습니다. 기본 상태와 마..

일반적으로 사용되는 웹사이트의 기본 레이아웃에 대해 알아보겠습니다. 아래 그림과 같은 형태입니다. 왼쪽 또는 오른쪽 content 부분은 생략할 수도 있지만,헤더, 메뉴바(내비게이션), 메인 콘텐츠, 푸터보통은 이러한 형태를 갖고 있죠.이때 주의할 점은, body는 모든 요소를 그룹화하고 있으나 body아래 전체 요소를 그룹짓는 요소를 생성하는 것이 좋습니다. HTML5의 시멘틱 태그를 사용해서같은 형태로도 사용할 수 있고, 아래처럼 div에 id나 class를 선언해서 사용할 수도 있습니다. 어떤 형태로 쓰셔도 상관없지만, 중요한 건!!각각 그룹을 지어 사용한다는 점만 주의하시면 될 것 같아요. ■ 예시1 123456789101112131415161718192021222324252627282930313..

지난번에 이어 아래 소스로 드롭다운 메뉴바를 만들겠습니다. 버튼에 마우스를 올리면 아래로 메뉴가 촤르륵 뜨는 형태입니다. ■ HTML 소스 12345678910111213141516 Dropdown Link 1 Link 2 Link 3 ■ 스타일 소스※ 아래 소스를 복사해서 HTML 소스의 스타일 태그 안에 넣어주세요. 여기에 넣어주세요. 1234567891011121314151617181920212223242526272829303132333435.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer;}.dropdown { position: relative;..

오늘은 4개의 카테고리를 가진 세로 메뉴바 / 가로 메뉴바를 만들어보겠습니다. w3school에 있는 예제를 참고했구요, html 소스는 다음과 같습니다. ■ HTML 소스 1234567891011121314 Home News Contact About 1. 세로 메뉴바 ■ 스타일 소스1※ 아래 소스를 복사해서 HTML 소스의 스타일 태그 안에 넣어주세요. 여기에 넣어주세요. 123456789101112131415161718192021ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1;}li a { display: block; color: #000; padding: 8px 16px; text-de..

1. 퍼센트(%) 사용하기- body에 height 100%, 직계 자식요소의 width, height 값 100% 적용하기 ■ 예시1123456789101112131415161718레이아웃2 *{margin:0; padding: 0;} html, body{height: 100%;} .box{width: 100%; height: 100%; background-color: #00f;} .box1{width: 100%; height: 100%; background-color: #0f0;;} ■ 실행결과1※ 스크롤을 내려 확인해보세요. 각각의 div상자가 페이지 전체를 차지하고 있는 형태입니다. 2. 포지션(position) 사용하기 ■ 예시2 1234567891011121314레이아웃2 *{margin:0;..

1. 좌우 가운데 정렬 - 계층구조에서 부모요소에게 width값을 선언, height 값은 자식요소인 콘텐츠의 내용으로 사용. - 부모요소에 height를 고정값으로 넣지 말것!- width 값을 필수로 입력하고, 좌우 마진값을 auto로 설정한다. margin:0 auto; ■ 예시1 12345678910111213141516레이아웃 *{margin:0; padding:0;} .center{width: 200px; height: 100px; background-color: #ccc; margin:0 auto;} 블록요소의 가운데 정렬 ■ 실행결과1 2. 화면 가운데 배치하기- 화면 정가운데 배치는 position을 사용- left:50%; top:50%; margin-left: -(width의 1/2)..

14. 테이블 스타일※ 테이블에 스타일을 적용할 때, 자주 사용하는 속성을 알려드릴께요표의 선에는 border-spacing: 0; border-collapse:collapse; 를,제목을 나타내는 caption에는 display: none; 을 자주 사용합니다.(표제목은 웹접근성을 감안하여 꼭 작성해야 하지만, 디자인상 없애는 경우가 많습니다.) ■ 예시1 12345678910111213141516171819202122232425262728293031323334테이블 스타일 *{margin:0; padding: 0;} .aa{border: 5px solid #000; border-spacing: 0; border-collapse:collapse; } .aa *{margin:0; padding: 0;} ..

13. 애니메이션- 요소에 적용되는 CSS 스타일을 다른 스타일로 부드럽게 전환할 수 있다.- 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키 프레임들로 이루어짐. ■ 속성- animation-name: 호출할 애니메이션 이름작성- animation-duration: 애니메이션시간- animation-delay: 딜레이시간- animation-direction: 애니메이션 진행방향(alternate, normal)- animation-iteration-count:반복횟수(숫자 또는 infinite(무한반복)) ■ keyframe 사용한 애니메이션 룰 작성법- keyframe 룰을 이용하여 애니메이션 패턴을 지정하고 요소에서 애니메이션 패턴을 호출 @keyframes..