nomad-programmer

SVG(Scalable Vector Graphics)는 벡터 그래픽을 표현할 때 사용하는 형식이다. 원래 SVG 태그는 인터넷 익스플로러 8 버전 이후의 인터넷 익스플로러에서만 지원하는 기능이었다. 하지만 HTML5부터는 SVG 태그가 표준으로 제정되어 모든 웹 브라우저에서 사용할 수 있게 되었다. 기존의 플래시가 벡터 이미지를 사용했으므로 SVG 태그를 사용하면 플래시 콘텐츠를 쉽게 HTML5로 변환할 수 있다. 기본적인 사용 방법 다음과 같이 HTML 페이지를 구성하고 body 태그안에 sav 태그를 입력한다. svg 태그는 width 속성과 height 속성을 반드시 사용해야 한다. svg 태그 내부에는 SVG 관련 태그를 입력한다. fill 속성을 사용해 색을 칠한다. 선은 stroke 속성을 사..

Sass & SCSS 란 무엇인가? CSS 전처리기 (CSS pre-processor)라 불리는 Sass(Syntactically Awesome StyleSheet)는 CSS의 단점을 보완한 CSS의 확장형이다. CSS 전처리기 종류에는 대표적으로 Sass(SCSS), Less, Stylus 등이 있다. Sass는 2006년부터 시작하여 가장 오래된 CSS 확장 언어이다. 그 만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌륭하다. SCSS는 Sass의 3버전에서 새롭게 등장하였다. SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위 집합(Superset)이다. 한마디로 SCSS는 Sass를 더 편리하고 CSS답게 수정한 버전이다...

스타일시트를 더 쉽게 사용하고자 다양한 스타일시트 엔진들이 등장했다. 스타일시트 엔진은 특정한 형태의 스타일시트를 CSS 스타일시트로 변경해주는 변환 엔진(컴파일러) 이다. 일반적으로 많은 사용하는 스타일시트 엔진으로는 Sass 스타일시트 엔진과 Less 스타일시트 엔진등이 있다. 공식 홈페이지 lesscss.org/ Getting started | Less.js Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that..

주석 스타일 속성 이름 설명 /* 주석 */ 부가 설명 폰트 관련 속성 스타일 속성 이름 설명 font 폰트 font-family 폰트 종류 font-size 폰트 크기 font-style 폰트 형태 font-variant 폰트 변형 font-weight 폰트 두깨 변환 관련 속성 스타일 속성 이름 설명 transform 변환 transform-origin 변환 중심 transform-style 변환 형태 perspective 투시 수치 perspective-origin 투시 중심 backface-visibility 후면 가시성 애니메이션 관련 속성 스타일 속성 이름 설명 animation 애니메이션 animation-name 애니메이션 이름 animation-duration 애니메이션 진행 시간 ani..

주석 태그 이름 표시 형태 설명 부가 설명 HTML 구조 태그 태그 이름 표시 형태 설명 block 문서 형태 none 문서 자체 none 문서 머리 none 문서 제목 none 문서 추가 정보 block 문서 본문 파일 태그 태그 이름 표시 형태 설명 none 외부 파일을 추가한다. none 스타일시트 none 스크립트 공간 태그 태그 이름 표시 형태 설명 block block 형식의 공간 inline inline 형식의 공간 시멘틱 구조 태그 태그 이름 표시 형태 설명 block 본문 block 수직 목록 block 네비게이션 목록 block 구역 block 머리 block 꼬리 시멘틱 요소 태그 태그 이름 표시 형태 설명 block 그림 block 그림 제목 block 세부 설명 block 요약 i..

미디어 쿼리는 다음과 같은 쿼리를 사용해 장치를 구분하는 것은 물론 장치의 크기나 비율을 구분할 수도 있다. 속성 설명 width 화면의 너비 height 화면의 높이 device-width 장치의 너비 device-height 장치의 높이 orientation 장치의 방향 device-aspect-ratio 화면의 비율 color 장치의 색상 비트 color-index 장치에서 표현 가능한 최대 색상 개수 monochrome 흑백 장치의 픽셀당 비트 수 resolution 장치의 해상도 orientation 속성을 제외한 모든 속성은 min 접두사와 max 접두사를 사용할 수 있다. 그리고 이를 사용하면 방응형 웹을 만들 수 있다. /* 화면 너비 0pixcel ~ 767pixcel */ @media ..

모든 HTML 페이지의 첫 번째 스타일시트는 초기화 코드로 시작한다. 초기화 코드는 모든 웹 브라우저에서 동일한 출력 결과를 만드는데 사용한다. 다음은 전 세계적으로 많이 사용하는 초기화 코드이다. Eric Meyer's Reset CSS meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this w..

위치 관련 position 속성 * 자손의 position 속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용해야 한다. * 자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에는 relative 키워드를 적용해야 한다. float 속성 * 자손에 float 속성을 적용하면 부모의 overflow 속성에는 hidden 키워드를 적용해야 한다. 위의 예를 보듯이 자식이 float속성을 지녔을 때 부모는 overflow 속성의 hidden을 가지고 있어야 제대로 나오는 것을 확인할 수 있다. 1 2 clear 속성에 both 키워드를 적용해도 마찬가지 기능을 수행한다. 하지만 현대에는 overflow 속성을 더 많이 사용한다. 레이아웃을 구성할 ..

Lorem ipsum lorem ipsum dolor sit amet, consectetur adipiscing elit. 체크박스를 체크해보세요 lorem ipsum lorem ipsum dolor sit amet, consectetur adipiscing elit.

더미 이미지가 필요하다면? 웹 페이지를 디자인하다보면 이미지를 아직 완성하지 못해 넣을 수 없는 경우가 있다. 이미지 크기는 아는데 아직 이미지가 없을 때 사용할 수 있는 사이트는 소개한다. https://placeholder.com/ Placeholder.com: Placeholder.com – The Free Image Placeholder Service Favoured By Designers What Is Placeholder.com? Placeholder.com generates custom placeholder images on the fly, like these examples:- How To Use Our Placeholders Just specify the image size after o..

트랜지션 속성은 한 스타일에서 다른 스타일로 바뀔 때 진행 시간을 지정해서 부드럽게 변화하도록 한 것이다. 따라서 트랜지션을 잘 활용해도 부드러운 애니메이션 효과를 만들 수 있다. 하지만 animation 속성을 이용하면 트랜지션보다 애니메이션을 더 쉽게 만들 수 있다. animation 속성과 transition 속성 animation 속성과 transition 속성은 비슷한 점이 많다. 시작 스타일과 끝나는 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가하여 전체적으로 부드럽게 변화하는 애니메이션 효과를 만들어낸다. animation 속성은 애니메이션에 소요되는 시간이나 지연 시간 등을 지정하는 것은 transition 속성과 같지만, 애니메이션의 시작에서부터 끝날 때까지 어느 지점이든 @k..

최신 브라우저라 하더라도 HTML5 스펙의 기능들이 어떤 브라우저에서는 되고, 어떤 브라우저에서는 안되는 것을 브라우저 파편화(browser fragmentation)이라고 한다. 이런 파편화를 줄이고 비슷하게라도 같은 결과를 만들기 위해 여러 가지 방법들을 동원하는데 이런 방법들을 통틀어 "심(shim)"이라고 부르며, "폴백(fallback)"이라 부르기도 한다. html5shim.js도 shim의 일종이다. https://github.com/aFarkas/html5shiv aFarkas/html5shiv This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer. - aFark..