박스모델-박스형태의 텍스트 단락-박스모델요소:태그를 사용한 텍스트는 단락 형태를 가진다 즉,텍스트 단락 앞뒤에 빈 줄이 생기면서 텍스트 단란이 하나의 박스 형태를 갖게 되는 것이다.박스 모델은 사진과 같은 구조를 가진다.콘텐츠 영역: 텍스트 or 이미지 나타나는 영역패딩 영역 : 박스와 콘텐츠 영역 사이의 여백테두리 : 박스의 테두리마진 : 여러 박스 모델간의 여백 width,height속성 – 박스 모델 크기 지정하기-박스 모델은 마진이나 패딩을 이용해 적절한 크기를 만들 수 있지만, 강제로 정해야 할 경우에는 너비를 지정하는 width속성과 높이인 height속성을 사용한다.이때 지정하는 값들은 박스 모델의 콘텐츠 영역에 대한 크기이다. 따라서 실제 콘텐츠의 크기는 width와height에서 지정한 ..
선형 그라데이션-수직 방향이나 수평 방향으로, 혹은 대각선 방향으로 색상이 일정하게 변하는 것.방향과 색상을 반드시 알려주어야 한다. 선형 그러데이션 구문ex)linear-gradient(각도or위치,color-stop,[color-stop,..]); %단, 접두사를 사용한 선형 그러데이션과 위치 값은 다를 수 있으므로 454pg참고 다음은 왼쪽 아래에서 오른쪽 위 방향으로 빨간색이 점점 흰색 배경으로 바뀌어 가도록 그러데이션을 각도 구문으로 적용한 것이다.ex)linear-gradient(45deg,#ff0000,#ffffff) ->45도 빨간색, 흰색 (2)위치 : 각도 대신 위치로 그러데이션 방향을 지정할 수도 있다. 이때 위치는 그러데이션이 끝나는 위치를 나타내므로 to top이나 to right..
background-color속성 – 배경색 지정하기-웹 문서 전체의 배경색을 지정하려면 body요소의 background-color속성을 조절하면 된다.( 이 역시 16진수나 rgb값 또는 색상 이름을 사용해 지정한다. )background-color는 상속되지 않는다.표같은 경우에 배경색을 넣을 때 따로 지정해주어서 넣어주면 된다. background-image 속성 – 웹 요소에 이미지 넣기 -배경요소에 이미지를 삽입할 때 사용하는 속성입니다.ex)background-image:url(파일경로) ; ->파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://부터 시작하는 절대 경로를 사용할 수 있다. 이때 파일 경로에 작은따옴표(또는 큰따옴표)를 붙여도 되고 안붙여도 된다...
색상과 관련된 스타일 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%면..
list-style-type 속성 – 목록의 불릿과 번호 스타일 지정하기-이 속성은 순서 없는 목록의 불릿과 순서 목록의 번호 유형을 지정합니다. 이 속성에 서는 순서 없는 목록+순서있는 목록을 통틀어 지정합니다. 순서 없는 목록에서 사용하는 불릿 유형(1) disc :속이 찬 원(2) circle :속이 빈 원(3) square : 속이 찬 사각형 순서 있는 목록에서 사용하는 불릿 유형이다. % 순서없는 항목을 나열하면서 불릿은 표시하고 싶지 않을 때는 속성 값을 none으로 지정하면 된다 다음 예는 순서 없는 목록의 불릿을 circle로 바꾸도록 지정한 것이다ex) ul {list-style-type:circle;} list-style-position 속성 – 목록에 들여쓴는 효과 내기-이 속성은 불..
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..
여기서 텍스트 스타일은 글자들과 단어들 그리고 문단에서 사용되는 스타일 입니다. direction 속성-텍스트의 쓰기 방향을 지정합니다. ex) direction : 속성 값 ;ex) h3 {direction : rtl ; } ->제목을 오른쪽에서 왼쪽으로 표시 속성 값(1) ltr :기본 값으로 왼쪽에서 오른쪽으로 텍스트 표시(2) rtl :오른쪽에서 온쪽으로 텍스트 표시 text-align속성 – 텍스트 정렬하기-문단의 텍스트 정렬 방법을 지정하는 속성이다. 속성 값은 left,right,center,justify(양쪽)에 맞춰 정렬하게 된다. 부모 요소의 값을 상속한다ex) text-align : 속성 값 ;다음 예는 memo라는 클래스 이름을 가진 요소의 텍스트를 가운데로 정렬하도록 지정한 것ex..
@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 이..