본문 바로가기

HTML&CSS/HTML545

<HTML5+CSS3>배경색과 배경이미지, 한번에 사용하기 background-color속성 – 배경색 지정하기-웹 문서 전체의 배경색을 지정하려면 body요소의 background-color속성을 조절하면 된다.( 이 역시 16진수나 rgb값 또는 색상 이름을 사용해 지정한다. )background-color는 상속되지 않는다.표같은 경우에 배경색을 넣을 때 따로 지정해주어서 넣어주면 된다. background-image 속성 – 웹 요소에 이미지 넣기 -배경요소에 이미지를 삽입할 때 사용하는 속성입니다.ex)background-image:url(파일경로) ; ->파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://부터 시작하는 절대 경로를 사용할 수 있다. 이때 파일 경로에 작은따옴표(또는 큰따옴표)를 붙여도 되고 안붙여도 된다... 2018. 10. 17.
<HTML5+CSS3> 색상과 관련된 스타일 색상과 관련된 스타일 color속성-글자색 바꾸기-ex) p { color : #RRGGBB } ->RRGGBB는 각각 빨간 초록 파란색의 양을 표시한다.16진수의 값으로 색상을 표현한다. rgb표기법-하나도 섞이지 않았을때는 0, 가득:255로 표시한다. #ff0000은 rgb로(255,0,0)이다.(레드,그린,블루)순 다음 예는 rgb표기법으로 초록색을 채운 것이다.ex) #b { background-color:rgb(0 200 0); } ->스타일 배경은 초록 계열 hsl표기법-차례로 hue(색상), saturation(채도) , lightness(밝기)를 각각 나타낸다. 색의 3요소 중 하나로 각도를 기준으로 색상을 표시한다. 아무것도 섞이지 않은 상태가 채도가 높은 상태 0%면 회색톤 100%면.. 2018. 10. 17.
<HTML5+CSS3>목록 스타일 list-style-type 속성 – 목록의 불릿과 번호 스타일 지정하기-이 속성은 순서 없는 목록의 불릿과 순서 목록의 번호 유형을 지정합니다. 이 속성에 서는 순서 없는 목록+순서있는 목록을 통틀어 지정합니다. 순서 없는 목록에서 사용하는 불릿 유형(1) disc :속이 찬 원(2) circle :속이 빈 원(3) square : 속이 찬 사각형 순서 있는 목록에서 사용하는 불릿 유형이다. % 순서없는 항목을 나열하면서 불릿은 표시하고 싶지 않을 때는 속성 값을 none으로 지정하면 된다 다음 예는 순서 없는 목록의 불릿을 circle로 바꾸도록 지정한 것이다ex) ul {list-style-type:circle;} list-style-position 속성 – 목록에 들여쓴는 효과 내기-이 속성은 불.. 2018. 10. 17.
<HTML5+CSS3> 텍스트 간격 조절 letter-spacing과 word-spacing속성-텍스트 간격 조절하기-강조하고 싶은 글자나 태그를 이용해 크게 표시한 글자들은 글자 사이의 간격을 조절해서 좀 더 여유 있게 표시하면 읽기 편합니다. letter-spacing : 낱글자와 낱글자 사이의 간격을 조절 (한글자 한글자사이)word-spacing : 단어와 단어 사이의 간격 조절 ex) .a { letter-spacing:3px; } line-height 속성 – 줄간격 조절하기-다음 예는 모두 줄간격 12pt, 글자크기는 10pt로 설정했습니다ex) p { font-size:10pt; line-height:1.2 ; } =>숫자사용 p { font-size:10pt; line-height:120% ; } =>백분율 사용 p { font.. 2018. 10. 16.
<HTML5+CSS3>텍스트 스타일 여기서 텍스트 스타일은 글자들과 단어들 그리고 문단에서 사용되는 스타일 입니다. direction 속성-텍스트의 쓰기 방향을 지정합니다. ex) direction : 속성 값 ;ex) h3 {direction : rtl ; } ->제목을 오른쪽에서 왼쪽으로 표시 속성 값(1) ltr :기본 값으로 왼쪽에서 오른쪽으로 텍스트 표시(2) rtl :오른쪽에서 온쪽으로 텍스트 표시 text-align속성 – 텍스트 정렬하기-문단의 텍스트 정렬 방법을 지정하는 속성이다. 속성 값은 left,right,center,justify(양쪽)에 맞춰 정렬하게 된다. 부모 요소의 값을 상속한다ex) text-align : 속성 값 ;다음 예는 memo라는 클래스 이름을 가진 요소의 텍스트를 가운데로 정렬하도록 지정한 것ex.. 2018. 10. 16.
<HTML5+CSS3>글꼴 관련 스타일 @font-face속성-웹 폰트 사용하기-사용자 시스템에 없는 글꼴을 보여주려면 모바일과 각 웹 브라우저에 알맞은 폰트 확장자를 설정해줘야한다PC- *.ttf : 컴퓨터에서 사용하는 글꼴은 트루타입 유형이다.모바일*.eot : 인터넷 익스플로어8 이하 버전 (Embedded Open Type)형태*.woff : 인터넷 익스플로어9이상 및 파이어폭스와 크롬 (Web Open Font Format) 트루타입 글꼴을 웹 폰트로 사용하려면 eot파일과 woff파일로 변환해야한다 %트루타입 글꼴이란 화면에 나타나는 글꼴과 인쇄했을 때의 글꼴이 일치하는 유형을 말함.% ttf->woff 변환사이트 : people.moziila.com/~jkew/woff/ 이용 ttf->eot변환 사이트 : eotfast.com 이.. 2018. 10. 16.

티스토리툴바