국비지원학원/HTML,JavaScript,jQ

69일차-CSS

초코맛 2019. 1. 30. 00:39
반응형
site의 page는 HTML(구조), CSS(디자인), JavaScript(동적인 화면변경, 유효성검증)로 이루어 짐

CSS(Cascading Style Sheet)
  • hakon wium lie가 1994년 제안
  • HTML의 통일성있는 디자인을 제공
  • 3가지 형태를 가짐
    • inline  : tag에 직접 정의하는 방식 (우선순위가 가장높다-어떤경우에도 가장먼저 적용, 코드의 재사용성은 가장 낮음(그때 그때계속만들어야 함))
    • embed : HTML안에 <style>태그에 정의하는 방식 (적절,적절)
    • external file(외부파일방식) : 확장자가 .css인 파일을 정의하고 필요한 곳에서<link>태그로 연결하여 사용하는 방식

          (우선순위가 가장 낮다. 코드의 재사용성이 가장 높다.)

  • 선택자(selector)를 사용하여 디자인을 적용할 태그를 선택하게 된다.
    • tag selector
    • multiple selector
    • id selector
    • class selector
    • behavior selector
    • 존재.
  •  문법)
    • selector {속성: 값;,,,,}                    <<콜론을 사용해서 속성에 값이 넣어지게 된다-inline일때는 얘만 적으면 ok>>
  • inline 방식)
    • <tag명 style="속성:값; 속성:값;,,,,">
  • embed 방식)
    • <html>
         <head>
              <style type="text/css">
                  selector {속성:값; 속성:값;,,,,}
              </style>
         </head>
      <body>
      style에 정의한 디자인이 바디안에 적용.
      </body>
      </html>
  • external file 방식)
    • 1.css 정의
      • a.css파일에 selector {속성:값; 속성:값; ,,,,} 을 정의하고
    • 2.필요한 HTML 에서 연결하여 사용한다.
      • <html>
           <head>
              <title>           </title>
              <link rel="styleshet" type="text/css" href="css url(http://localhost:8080/html_prj/common/a.css"
           </head>
           <body>
           여기에 적용
           </body>
           </html>
  • Error가 발생하지 않는다.<<컴파일하는 언어가 아니기 때문에 에러가 나지 않는다+계산의 기능이 없다..!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!>>>>>>
  • CSS3 표준(W3C 표준안 관리)
    • shadow(그림자)
    • radius(사각형의 모서리를 다듬는)
    • 또하나가
    • 들어감.
  • CSS->HTML Style
    • XSLT,XSL->XML Style sheet      <<스타일시트는 한가지가 아니고, xml스타일 시트도 존재한다.>>

<<window-preferences-web-cssfile-encoding-UTF-8로 변경해 준다.charset통일~!>>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inline 방식으로 CSS사용</title>
</head>
<body>
<!-- inline 방식 : tag에 디자인 코드를 직접 정의하는 방식.
                     적용 우선순의가 가장 높다.
                     동일 디자인이 여러번 사용될 때 동일한 코드를  여러번 작성해야한다.(단점) -->
<div style="font-family: 궁서체">
     오늘은 화요일 입니다.
</div>
<div style="font-family: 궁서체">
     내일은 수요일 입니다.
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">   <!-- charset은 다 동일해야 한다 DB도  css도 html도 jsp파일도~!~! -->
<title>embed 방식</title>
<style type="text/css">
/* 스타일태그 안에는 주석이 java와 같다.
     embed 방식 : 디자인 코드의 중복성을 줄요준다.
                     selector가 사용된다.
     selector {속성:값; ,,,,}   ★★★       
*/
     div{font-family: 궁서체}    /* selector에 따라 적용되는  범위가 달라진다?!-div는 div만 적용 */
     /* p{font-family: 궁서체} */
</style>
</head>
<body>
<div>오늘은 화요일 입니다.</div>
<div>내일은 수요일 입니다.</div>
<p>어제는 월요일 입니다.</p>
</body>
</html>
@charset "UTF-8";
/* HTML과 CSS의 charset은 일치해야 한다. 일치하지 않으면 한글을  적을때 안나옴 */
/* 외부파일 방식 : CSS파일을 생성하고, 공통디자인을 설정한 후,
                     필요한 HTML에서 사용.
                     
*/
div{font-family: "휴먼편지체"}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>external_file 방식(외부파일 방식)</title>
<!-- CSS와 HTML이 같은 폴더에 존재해 상대경로로 파일이름만 적음  -->
<!-- <link rel="stylesheet" type="text/css" href="test.css"/>  -->
<!-- 주의 : CSS파일을 외부링크로 사용할 때 해당 서버에 CSS파일이  없다면 HTML의 로딩지연시간이 발생한다! 엄청오래 걸린다! -->
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/css0129/test.css"/>
<!-- 문제는 css파일경로가 틀리면 로딩의 시간이 엄청나게 오래  걸린다. -->
</head>
<body>
<div>Pyton & Java 응용 SW실무 개발자 양성과정</div>
<p>Pyton & Java 응용 SW실무 개발자 양성과정</p>
<div>Pyton & Java 응용 SW실무 개발자 양성과정</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자(selector) 사용</title>
<style type="text/css">
/* tag selector : 태그하나만 정의하고,설정한 디자인을 정의한  모든태그가 적용받는다. */
/*
div {font-family: 휴먼편지체}
p {font-family: 궁서체}
input {font-family: 궁서체}
*/
/* multiple selector : 태그 여러개를 정의하고, 설정한 디자인을  정의한 여러태그가 적용받는다. */
div,a,p,input {font-family: 궁서체}
</style>
</head>
<body>
     <div>div 태그</div>
     <p>p 태그</p>
     <div>div 태그</div>
     <p>p 태그
           <div>P 안에 div</div>
     </p>
     <a href="http://sist.co.kr">sist이동</a>
     <div>div 태그</div>
     <input type="text"/><br/>
     <input type="text"/><br/>
     
</body>
</html>

*selector
  • 디자인을 적용받을 태그를 선정하는 것   <<JQuery에서도 사용되고 더많음>>
  • tag selector : 디자인을 모든 태그가 적용받는다.
    • 태그명 {속성:값; ,,,,}     <<몇개던 다~~적용>>
    • div {font-family : 궁서체}
  • multiple selector : tag selector인데, 여러개의 태그를 정의한 것.   <<태그를 여러개 써서 multiple>>
    • 태그명,,, {속성:값; ,,,,}
    • div, p, input {font-family : 궁서체}     <<부른태그만 적용>>
  • ID selector : HTML내에서 유일하게 사용하는 고유한 이름,유일한 디자인으로 한번 사용할 때
    • <<고유값으로 하나..!하나가 아니어도(여러개이어도) Error가 안나니 주의>>
    • #아이디 {속성: 값; ,,,}
    • #fnt {font-family : 궁서체}
      • <a id="fnt"> </a>    <<id가 같은 태그에 적용>>
      • <div></div>
  • class selector : HTML내에서 지정한 여러태그가 사용하는 이름. 동일한 디자인을 여러번 사용할 때.
    • 클래스명 {속성:값; ,,,,,}
    • .fnt {font-family : 궁서체}
      • <div class="fnt" ></div>
      • <p class="fnt"> </p>     <<.fnt면 클래스 명을 나타내는것으로 fnt클래스명을 가지면 다 적용>>
  • behavior selector : 사용자의 동작이 있을때 디자인을 적용하는 selector
    • 태그명:HOVER|hover(마우스가 올라왔을때) {속성:값; ,,,,}    <<link가 걸린 HTML에 마우스포인터가 올라가면 글자색이 변경되며 밑줄이 그어지는게 대표적인 예>>
    • a:hover {font-family : 궁서체}
      • <a href=" ">     </a>        <<a태그에 마우스가 올라갔을 때 다~~적용>>
      • <a href=" ">     </a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID selector와 class selector의 사용</title>
<style type="text/css">
/* ID selector: HTML body에서 유일한 디자인을 가져야할 때  사용한다.
     #id명 {속성:값; ,,,}
*/
#title{font-size: 25px; font-weight: bold; font-family: 궁서체}
/*  class selector: HTML에서 중복된 디자인을 원하는 태그만  가져야할 때 사용한다.
      .class명 {속성:값; ,,,}
*/
.content {font-family: 휴먼편지체; text-decoration: underline;}
/*   behavior selector : HTML에서 사용자가 마우스 포인터를  특정위치에 올린경우 디자인이 적용되야 할 때 사용한다.
      모든 selector:HOVER {속성:값; ,,,}
*/
a:HOVER {font-size:20px; color:#FF0000;}
</style>
</head>
<body>
<div id="title">CSS는 Hakon wium lie가 1994년에 웹디자이너를 위해  제안.</div>
<p class="content">
     CSS(Cascading Style Sheet)의 약어로 HTML에서 통일성있는  디자인을 제공할 수 있다.
</p>
<p>
     HTML은 구조를 가지고 있고 CSS는 디자인을 담당한다.
</p>
<p class="content">
     표준안은 W3C ( <a href ="http:w3c.org" target="_new">표준안  확인</a> )에서 제정,발표,관리 한다.
</p>
<div>CSS3에서는 그림자효과,테두리효과,애니메이션효과 등이  추가되었습니다.</div>
</body>
</html>

*속성 사용법
  • 글자 관련
    • 글꼴 변경: font-family : 글꼴,,,(여러개 가능)
      • font-family : 돋움,dotum(한글로된 돋움체가 없으면 영어로 된걸 찾아),애플고딕,SansSerif(거의모든컴이 갖고있기때문에 맨뒤에많이씀);
    • 진하게 : font-weight : bold,normal;
    • 크기 변경: font-size : 크기px,cm,em(px가장선호)
    • 글자 색: color:RGB|영어(RGB선호)
    • 밑줄 긋기: text-decoration : underline(밑줄)|Overline(윗줄)|line-through(취소선) ;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글꼴 관련 속성</title>
<style type="text/css">
     <!-- ID selector 사용 -->
     /* 글꼴 */
     #testa {font-family: 궁서체}
     #aaa{font-family: 궁서체}
     /* 크기 */
     #b {font-size:20px}
     /* 색 */
     #c {color:#0000FF}
     /* 여러개의 속성을 한번에 적용, ;으로 속성을 구분하여  여러개를 사용할 수 있다. */
     #d {font-family: 돋움,dotum,휴먼옛체,SansSerif;  color:#FF0099; font-size: 19px}
     /* 진하게 */
     #e {font-weight: bold}
     /* 밑줄,윗줄,취소선,선없음 :none */
     #f {text-decoration: underline;}
     #g {text-decoration: overline;}
     #h {text-decoration: line-through;}
     /* 링크가 걸려있는 모든 태그의 글자색을 #333으로 크기를  12px,글꼴을 돋움체로,밑줄을 없앤다.
           마우스가 올라가면 밑줄을 보여주고 글자색을 원하는 색으로  변경  */
     a {color:#333; font-size: 12px; font-family: 돋움,dotum;  text-decoration: none}
     a:hover{text-decoration: underline; color:#FF0099}/*  #333=#3f3f3f */
</style>
</head>
<body>
<div id="testa">글꼴 변경</div>
<div id="aaa">글꼴 변경</div>
<div id="b">크기 변경</div>
<div id="c">색 변경</div>
<div id="d">글꼴,색,크기 변경</div>
<div id="e">진하게</div>
<div> <span id="f">밑줄</span><span id="g">윗줄</span><span  id="h">취소선</span> </div>
<!-- 링크를 클릭했을 때 이동할 페이지가 없다면 비우는게 아니라  #void를 넣는다.#|#void -->
<a href="#void">링크</a>
<a href="#void">링크</a>
<a href="#void">링크</a>
<a href="#void">링크</a>
</body>
</html>
  • 효과
    • 태그 숨김 : display :none(숨김)|inline(보임)|block(보임)
    • 목록 태그 숨김 : list-style: none|inline;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 숨기기</title>
<style type="text/css">
     /* 태그를 숨길때에는 none, 보여질 때에는 inline|block */
     #test{display: block}
     /* 목록 없애기 */
     li{list-style: none}
     hr{display: none}
</style>
</head>
<body>
<div id="test"> <img src="../common/images/img.png"/></div>
<hr/>
<div>
     <ul type="square">
           <li>짜장면</li>
           <li>뼈다귀 해장국</li>
           <li>칼국수</li>
           <li>분식</li>
     </ul>
     <ol type="I">
           <li>Oracle</li>
           <li>JavaSE</li>
           <li>JDBC</li>
           <li>HTML</li>
     </ol>
</div>
</body>
</html>
  • 여백
    • <<밖과 안 2가지가 있다.
    • 기준선과의 거리
    • margin
      • 기준선 바깥쪽의 거리
      • margin : 수치; //왼쪽,오른쪽,위,아래 모두 입력한 수치상의 여백을 가진다.
      • div {margin : 10px}
      • 특정위치만 변경
        • margin-left: 수치;
        • margin-right: 수치;
        • margin-top: 수치;
        • margin-bottom: 수치;
    • padding
      • 기준선 내의 거리, 기준선의 전체크기가 변경된다.
      • padding : 수치; //왼쪽,오른쪽, 위,아래 모두 수치상의 여백을 가진다.
      • div {padding : 10px}
      • 특정위치만 변경
        • padding-left: 수치;
        • padding-right: 수치;
        • padding-top: 수치;
        • padding-bottom: 수치;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin,padding의 여백 설정</title>
<style type="text/css">
div{border : 1px solid #333; width : 400px}
/* margin으로 여백을 설정하면 전체 크기는 변경되지 않는다. */
/* 바깥쪽의 모든(왼쪽,오른쪽,위,아래) 여백 설정 */
.margin_a{margin:20px}
/* 특정 위치의 바깥쪽 여백 설정 */
.margin_b{margin-top: 50px;margin-left: 40px; margin-right:  100px; margin-bottom: 10px}
/* padding으로 여백을 설정하면 전체 크기가 변경된다. */
.padding_c{padding: 20px}
/* 특정 위치에 안쪽 여백 설정 */
.padding_d{padding-left: 10px; padding-top: 30px; padding-right:  50px; padding-bottom: 5px}
input{margin-left: 10px; padding-left: 5px; padding-top: 5px;  padding-right: 3px; padding-bottom: 2px}
table{margin-left: 10px; margin-top: 10px}
.in {padding-left: 4px; padding-right: 7px; padding-top: 5px;  padding-bottom: 10px; font-weight: bold;}
</style>
</head>
<body>
<strong>margin</strong>
<div class="margin_a">점심은 닭도리탕 아니겠습니까?</div>
<div class="margin_b">점심은 닭도리탕 아니겠습니까?</div>
<strong>padding</strong>
<div class="padding_c">점심은 닭도리탕 아니겠습니까?</div>
<div class="padding_d">점심은 닭도리탕 아니겠습니까?</div>
<label>이름</label><input type="text"/><br/>
<!-- table의 바깥쪽-왼쪽 여백을 10px, 위여백을 10px로 설정하고
      첫행의 운td와 두번째행의 의td 의 안쪽  여백-왼:4px,오:7px,위:5px,아래:10px로 설정 -->
<table border="1">
     <tr>
           <td>윤</td>
           <td class="in">운</td>
           <td>찬</td>
     </tr>      
     <tr>
           <td class="in">의</td>
           <td>하</td>
           <td>현</td>
     </tr>      
</table>
</body>
</html>

 

반응형
저작자표시

'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글

71일차-CSS,JavaScript  (0) 2019.02.01
70일차-CSS_정렬,디자인,배치  (0) 2019.01.31
68일차-HTML Form Control  (0) 2019.01.29
67일차-HTML_div tag  (0) 2019.01.27
67일차-HTML_table tag  (0) 2019.01.26

'국비지원학원/HTML,JavaScript,jQ'의 다른글

  • 현재글69일차-CSS

관련글

티스토리툴바