본문 바로가기
반응형

css124

[html/css]background-attachment 속성(배경이미지 고정) [html/css]background-attachment 속성(배경이미지 고정) 차례 : background-image background-repeat background-attachment background-position background-size background 배경이미지를 넣을 때는 background-image 속성, 배경이미지 패턴을 선택할 때는 background-repeat 속성을 배웠습니다. (위에 링크 참조) 오늘은 배경 이미지를 어떻게 고정할지 결정하는 background-attachment 속성입니다. background-attachment 속성 : 배경 이미지 고정 방식 ▶속성값 scroll 기본값으로, 이미지가 요소에 상대적인 위치. fixed 이미지가 윈도우 창에 상대적.. 2014. 5. 23.
[html/css] background-repeat 속성(배경 이미지 패턴) [html/css] background-repeat 속성(배경 이미지 패턴) html 문서에 배경 이미지를 넣는 속성에 대해 배워 보고 있습니다. 어제는 background-image 속성으로 배경 이미지를 넣는 방법을 배웠습니다 글자색 color 속성, 배경색 background-color 속성 배우기 배경 이미지를 넣는 background-image 속성 오늘은 배경 이미지를 넣을 때 어떤 패턴으로 넣을지 선택하는 속성 background-repeat 입니다. 차례 : background-image background-repeat background-attachment background-position background-size background background-repeat 속성 backgr.. 2014. 5. 22.
[html/css]배경 이미지를 넣는 background-image 속성 [html/css] 배경 이미지를 넣는 background-image 속성 사용법 어제는 배경색을 넣을 때 background-color 속성을 사용한다고 배웠습니다. 글자색 color 속성, 배경색 background-color 속성 배우기 오늘부터 차례대로 배경 이미지와 관련된 속성을 배워보겠습니다. 차례 : background-image background-repeat background-attachment background-position background-size background background-image 속성 background-image는 배경 이미지를 넣을 때 쓰는 속성입니다. 어떤 요소에 배경 이미지를 넣으면 padding을 포함하여 배경을 채우게 됩니다. (margin은 제외.. 2014. 5. 21.
[html/css] 글자색 color 속성, 배경색 background-color 속성 배우기 [html/css] 글자색 color 속성, 배경색 background-color 속성 배우기 지난 주에 글꼴을 지정하는 font 속성을 배우면서, 글꼴 색상은 어떻게 하지? 궁금해하시는 분들 계실 것 같아요. 글꼴을 지정하는 font 속성 배우기 글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이) font-family 속성(serif, sans-serif차이) 오늘 배울 부분은 color 속성과 background-color 속성입니다. background-color은 배경색, color는 전경색(글자색 등)을 지정 합니다. 자세히 알아보겠습니다~ ▶background-color 속성 요소의 배경색을 지정하는 속성입니다. padding, border를 포함하여 색칠되고요. 단 .. 2014. 5. 20.
@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이) @font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이) 지난 시간엔 태그와 @import로 외부 자원으로 연결하거나 글꼴을 이용하는 방법을 배웠습니다. 외부 문서를 연결하는 link 태그 사용법 @import rule 사용법, link 태그와 차이 글꼴을 지정하는 font-family 속성(serif, sans-serif차이) 오늘은 @font-face 규칙을 이용하려 웹폰트를 이용하는 방법입니다. @font-face 사용법 @font-face는 글꼴 파일을 html에 속에 삽입하여 사용자 컴퓨터에 설치되지 않은 글꼴을 서버에서 내려받아 사용할 수 있는 방법입니다. 사용 예 ☞ *나눔고딕을 한글과 영문으로 적은 것은 영문이름을 인식하지 못하는 브라우저에 대비하여 *한글 글.. 2014. 5. 19.
@import rule 사용법, link 태그와 차이 @import rule 사용법, link 태그와 차이 어제는 외부 문서나 자원를 연결하는 태그에 대해 알아 보았습니다. 외부 문서를 연결하는 link 태그 사용법 복습하는 의미에서, link 태그는 주로 다음 기능을 하는데요 -외부 스타일 시트 연결(css나 javascript 파일 등) -사용자 컴퓨터에 없는 글꼴을 지원하는 웹 폰트로 연결 이러한 기능은 @import 규칙을 통해서도 똑같이 구현이 가능합니다. 사용 예 @import rule 사용법 1. 구문 @import url(' '); 또는 @import " "; * 인용부호는 쌍따옴표, 홑따옴표 모두 가능 * 인용부호 안에 주소를 입력합니다 2. @import 규칙은 css 파일 맨 처음 위치합니다. *티스토리의 경우 관리 화면 html/css.. 2014. 5. 16.
[html/css]외부 문서를 연결하는 link 태그 사용법 [html/css]외부 문서(css)를 연결하는 link 태그 사용법 며칠 전 font-family 속성을 다루면서 [html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이) 외부 스타일시트를 연결하는 태그에 배웠었죠. 오늘은 태그에 대해 상세히 알아보겠습니다. 태그 이름에서도 알 수 있듯이, 태그는 외부의 문서를 연결시키는 태그입니다. 주로 css파일 같은 스타일시트 파일을 연결하거나, 웹 폰트를 사용할 때 폰트가 있는 주소로 연결시킬 수도 있습니다. ▶ 태그 사용법 - 태그는 사이에 넣습니다. - 여러 태그를 삽입할 수 있습니다. - html에서 닫는 태그는 없지만, xhtml에서는 아래처럼 닫습니다. ▶link 태그와 함께 사용할 수 있는 속성 1. href.. 2014. 5. 14.
[html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이) [html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이) css에서는 원하는 글꼴을 지정할 때 font-family 속성을 사용합니다. 사용 예: p{ font-family; arial, 바탕체, "Times New Roman", Serif; } font-family 속성 font-family은 우리말로 번역하자면 글꼴 집합인데, 여러 개의 글꼴을 모아놓은 것이라고 보시면 됩니다. 만일 글꼴을 하나만 지정하면, 사용자의 컴퓨터에 그 글꼴이 없을 때는 기본값으로 표시가 됩니다. font-family은 다시 family-name과 generic family로 나누어집니다 family-name : 글꼴 이름 arial, verdana,나눔고딕, 궁서, 굴림 등 gen.. 2014. 5. 10.
[html/css]글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이) [html/css]글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이) css에서는 글꼴 크기를 지정할 때 font-size 속성을 사용합니다. 사용 예 p {font-size: 1em; } [html/css] 글꼴을 지정하는 font 속성 배우기 속성값은 다음과 같습니다. 절대값 : 고정된 크기. 장치에 따라 크기를 조절할 수 없음. px, pt, cm 등의 단위로 지정하거나 xx-small, x-small, small, medium, large, x-large, xx-large 중에서 선택 medium은 기본값으로 12pt=19px=13m=100% *구 IE 버전의 경우, small이 기본값이라 doctype을 선언해주어야 medium이 기본값으로 나옵니다 DOCTYPE 선언하.. 2014. 5. 9.
[html/css] font-variant 속성(normal, small-caps) [html/css] font-variant 속성(normal, small-caps) 지난 시간에 글꼴을 이탤릭체로 만드는 font-style 속성에 대해 배웠고요 글꼴을 지정하는 font 속성 배우기 font-style 속성 (normal, italic, oblique 차이) 오늘은 font-variant 속성을 자세히 알아보겠습니다 ^^ font-variant 속성 font-variant 속성은 소문자를 대문자로 만드는 역할을 합니다 속성값 ☞ normal : 기본값 small-caps : 소문자를 작은 대문자로 만듦 font-variant: normal 브라우저 기본값이며 설정하지 않는 것과 같습니다. font-variant: small-caps 소문자를 대문자로 만드는데, 일반 대문자 크기에 비해 .. 2014. 5. 8.
반응형

티스토리툴바