[ 10강 ] CSS 폰트 / 문자(열) / 배경 이미지

【CSS】♣ cascading style sheet 의 약자로 HTML을 꾸미기 위해 사용되는 스타일 쉬트 언어이다.  { 작성 방식 }1.  html 태그의 속성 값으로 적용하는 방법2.  <style> 태그에 설정하여 적용   - 태그명 이용 방식   - 그룹을 형성하여 그룹 이름으로 적용하는 방식 { 속성들 살펴보기 } 1. 폰트 설정(1) font-size : px or pt 또는 가변적인 스타일을 위해  em(상대적 배수), %(상대적 배수) 등을 사용할 수도 있다.                        기본은 16px ,  em과 %는 상위 레벨이 없는 경우 16px에서의 배수를 의미한다.(2) color : 색상(3) font-family : 서체(글꼴)(4) font-style   : 기울기 ;  normal : 기울기 없음 ; italic : 이탤릭체 ;(5) font-weight : 굵기정도 ; normal : 굵기 없음 ; bold : 굵음 표기 ;  100 ~ 900 -> 100 단위      - normal 또는 400 ; 기본적인 굵기 입니다.     - lighter 또는 400 이하 ; 기본적인 굵기보다 더 얇은 굵기를 표현합니다.     - bold 또는 700 ; 굵은 글씨를 표현합니다.     - bolder 또는 700 이상 ; bold 보다도 더 굵은 글씨로 표현합니다. (거의 티가 안남)     - inherit : 상위 요소의 값을 상속 받습니다. <hr data-ke-style="style7">                        { html 태그에 직접 적용하기 } (예제1) font-sizeaaa aaa 16px aaa 200% aaa 8px  aaa 2em      aaa 12px aaa  50px  (예제2) font-weightaaafont-weight:bold"> aaa bold font-weight:900"> aaa 900    (예제3) 혼합<p style="font-size:15px;color:pink;font-weight:bold;font-style:italic;">aaa (예제4) span 태그<span style="font-size:20px;font-style:italic;">범위 안에서 스타일 지정 (예제5) body 태그에 css를 적용하여 본다.<body style="font-size:12px;color:#555555;font-family:맑은 고딕;"> <hr data-ke-style="style7">                       { style 태그 생성하여 적용 } ( style 태그의 속성 값으로 적용 )Times New Roman : 서체(글꼴) 사이에 공백이 있는 경우는 쌍따옴표(") 또는 홑따옴표(') 를 붙인다. --> (1) body 설정<style>body {   font-size:12px;   color:#555555;   font-family: 돋움, dotum, 굴림, gulim, arial,'Times New Roman';   font-weight : italic;}</style><body>학습과목  - JavaScript  - Html  </body> (2) td 설정 <style>td {    font-size:12px;   color:#555555;   font-family:arial, 맑은 고딕;     /*서체 */   font-style:italic;                                       font-weight:bold;            /* 굵게표시;  수치표현 가능 : 100~900  */   line-height:1.6;              /* 줄간격;  다른 표현 : 160% or 30pt*/  }</style> <table border="1">   <tr>      <td>  하이미디어  구리센터  </td>   </tr></table> <hr data-ke-style="style7"> 2. 문자(열) 스타일 (0) line-height : 줄간격   - 단위 : px이나 % 등의 단위들이 사용가능 하며, 단위 없이 '1.5'와 같은 숫자만 입력할 경우 em과 동일하게 인식 (1) text-decoration   - 문자(열)에 밑줄, 취소선 등을 넣을 수 있는 속성이다.    - none : 아무런효과없음, underline : 밑줄, overline:윗줄, line-through:취소선 (예제1)<h2> 텍스트에 선 그려주기 </h2> 선을 그려주지 않습니다 <p style="text-decoration: underline"> 텍스트 밑에 선을 그려줍니다 텍스트 가운데 취소선을 그려줍니다 텍스트 위에 선을 그려줍니다 텍스트에 밑과 위 모두 선을 그려줍니다  (2) text-align   - 문자들의 좌우 정렬 : left,right,center,justify    - justify : 문자들을 정렬합니다. 줄 바꿈이 일어날 때, 해당 줄의 문자를 양 끝에 맞추어 정렬합니다.   - 위의 속성 값 중에 justify는 양쪽 정렬을 하여, 콘텐츠의 전체적인 형태가 단정해 보이게 만들어 줍니다. 이는 대부분의 신문, 잡지 등에서 주로 사용하는 정렬 방식 입니다.  left와 비슷 , 글자들이 여러줄에 걸쳐 있을 때 테스트 한다. (3) text-transform : 대소문자 변환 (대소문자 변환은 영문에만 적용된다.)    - none : 변환없음    - upperrcase : 모두 대문자로 변환    - lowercase : 모두 소문자로 변환    - capitalize : 띄어쓰기 할 때 첫 글자를 대문자로 변환 (4) letter-spacing : 글자들간의 간격   - 글자 크기와 같이 px이나 em 등의 단위가 들어갈 수 있습니다. 0을 기준으로 음으로 갈 수록 간격이 줄어들며, 반대로 양수로 수가,  커질수록 간격이 넓어집니다.     p {  letter-spacing : -1px; } (5) vertical-align : 수직정렬   - top / middle / bottom   ex)   <table border="1">       <tr>             <td height="200" style="vertical-align:top;">  aa  </td>       </tr>    </table> (6) white-space     - 줄바꿈에 대한 설정     - normal : 기본속성, 자연스런 줄바꿈     - nowrap : 줄 바꿈을 하지 않는다.    (예제1)       <table border="1">             <tr>                  <td width="200" style="white-space:nowrap;">                     특정 넓이의 공간에 긴 문자열을 어떻게처리할 지를  정의합니다.                     특정 넓이의 공간에 긴 문자열을 어떻게처리할 지를  정의합니다.                 </td>              </tr>        </table>  3. 배경 이미지 설정 (0) scroll  - default로 쓰나 안쓰나 같음; 이미지 반복; 문자열이 길 경우 스크롤 생김      - background:URL("../images/bg1.jpg") scroll;(1) fixed - 이미지는 정지 ; 스크롤만 움직임    - background:URL("../images/bg1.jpg") fixed;(2) no-repeat  : 배경 이미지를 한번만 표시한다.    - background:URL("../images/bg1.jpg") no-repeat;    - 속성 값으로 좌우 정열(right,center,left);위아래 정열(top,center,bottom)을 설정할 수 있다.(3) repeat-x    - background:URL("../images/bg1.jpg") repeat-x;(4) repeat-y    - background:URL("../images/bg1.jpg") repeat-y;  (예제)  <style>   body {      --background: URL("images/bg1.jpg");      --background: URL("images/bg1.jpg") fixed;      background: URL("images/bg1.jpg") right top no-repeat;  }</style><body>        - 많은 내용 필요 - a a a </body>  4.  클래스 속성을 이용한 설정- CSS 모음 및 이름을 미리 설정하여 필요한 곳에서 class 속성 값으로 호출하여 적용한다. (예제)<html><head><title>test</title></head><style>.java {           color : pink;          font-size:15px; }.script {           color : skyblue;          font-size:10px; } </style> <body bgcolor="black" text="white" ><h3>css의 클래스 정의를 이용한 예제입니다</h3><span class="java">태그에 상관없이<span class="script">class 속성으로 태그이름을 설정할 수 있습니다<span class="java">태그에 상관없이<span class="script">원하는 부분에 스타일을 적용합니다</body></html>  5.  id 속성을 이용한 설정- CSS 모음 및 이름을 미리 설정하여 필요한 곳에서 id 속성 값으로 호출하여 적용한다. <html><head><style>   #aa { color : pink }   #bb { color : skyblue }</style></head> <body bgcolor="blue" text="white" ><h4 id="aa">태그에 상관없이</h4><h4 id="bb">class속성으로 태그이름을 설정할 수 있습니다</h4><h2 id="aa">태그에 상관없이</h2><h2 id="bb">원하는 부분에 스타일을 적용합니다</h2></body></html>  6.  LINK 걸어서 사용<link rel=stylesheet type=text/css href=style.css> 7. 범위 안의 스타일 지정 <html><head>   <title>test</title></head><style>div.color { color:tomato;font-size:12px; }.italicStyle { font-style:italic;font-size:20px; }</style> <body><div> 삼성전자 </div><div class="color">  전체 범위 안에서 색 지정 </div> 범위 안에서 이탤릭으로 지정 범위 안에서 이탤릭으로 지정 </body></html>