• Home
  • About
    • Young's Github Pages photo

      一日不作一日不食

    • About
    • Github
  • Posts
    • All Posts
    • All Tags
  • Projects

CSS 정리 01

29 Jan 2019

Reading time ~4 minutes

CSS 정리 01 - CSS, selector, attribute(1)

CSS(Cascading Style Sheet)

  • 하콤 비움 리( Håkon Wium Lie)가 1994년 제안
  • HTML의 통일성 있는 디자인을 제공
  • W3C에서 제정
  • CSS3가 현재 표준
  • HTML처럼 compile이 없어 에러가 발생하지 않는다!
  • 3가지 형태로 사용
    • inline 방식
      • tag에 직접 정의하는 방식
      • 우선순위가 가장 높다.
      • 코드의 재사용성은 가장 낮다.
    • embed 방식
      • style tag에 정의하는 방식
    • external file 방식
      • 확장자가 .css인 파일을 정의하고 필요한 HTML에서 link tag로 연결하여 사용하는 방식
      • 우선순위가 가장 낮다.
      • 코드의 재사용성은 가장 높다.
  • 선택자(selector)를 사용하여 디자인을 적용할 태그를 선택한다.
    • tag selector, multiple selector, id selector, class selector, behavior selector가 존재
  • 문법
    • 값을 집어넣을 때 ’:’(colon)을 사용
    • CSS의 주석은 자바의 여러줄 주석(/* */)과 같다.
selector { 속성 : 값; ... }

inline 방식

<tag명 style="속성:값; 속성:값; ... " />
  • 디자인 코드를 tag에 직접 정의하는 방식
  • 적용 우선순위가 가장 빠름
  • 동일 디자인이 여러번 사용될 때 동일 코드를 여러번 작성해야 함
<div style="font-family:궁서체">
     오늘은 화요일입니다.
</div>
<div style="font-family:궁서체">
     내일은 수요일입니다.
</div>

01

embed 방식

<html>
<head>
    <style type="text/css">
        selector { 속성:값; ... }
        ...
    </style>
</head>
<body>
    ...
</body>
</html>
  • 디자인 코드의 중복성을 줄여준다.
  • selector가 사용된다.
  • embed방식의 css charset의 설정값은 HTML meta 태그값을 따라간다.
<html>
<head>
<meta charset="UTF-8">
<title>embed 방식</title>
<style type="text/css">
     div { font-family:궁서체; }
     p { font-family:굴림체 }
</style>
</head>
<body>
<div>
     오늘은 화요일입니다.
</div>
<div>
     내일은 수요일입니다.
</div>
<p>
     어제는 월요일입니다.
</p>
</body>
</html>

02

external file 방식

03

  1. CSS 정의
  2. 필요한 HTML에서 연결하여 사용
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css url"/>
    </head>
</html>
  • CSS파일을 생성하고 공통 디자인을 설정한 후 필요한 HTML에서 사용하는 방식
    • CSS파일을 외부링크로 사용할 때 해당 서버에 CSS파일이 없다면 HTML의 로딩지연시간이 발생한다.
@charset "UTF-8";
div {
     font-family:"휴먼편지체"
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>external file 방식</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
     <div>Python & Java 응용SW실무개발자 양성과정</div>
     <p>Python & Java 응용SW실무개발자 양성과정</p>
     <div>Python & Java 응용SW실무개발자 양성과정</div>
</body>
</html>

04

selector

  • = 선택자, 디자인을 적용받을 태그를 선정하는 것
  • tag selector
    • 디자인을 모든 태그가 적용받는다.
태그명 { 속성:값; ... }

div{ font-family:궁서체; }
  • multiple selector
    • tag selector인데 여러개의 태그를 정의하는 것
태그명,태그명,태그명 { 속성:값; ... }

div,p,input { font-family:궁서체; }
  • id selector
    • HTML내에서 유일하게 사용하는 이름
    • 유일한 디자인을 가져야 할 때 사용
#아이디명 { 속성:값; ... }

#fnt { font-family:궁서체; }

<a id="fnt"> </a>
  • class selector
    • HTML내에서 여러 태그가 사용하는 이름
    • 원하는 태그만 중복된 디자인을 가져야할 때 사용
.클래스명 { 속성:값; ... } 

.fnt { font-family:궁서체; }

<div class="fnt"> </div>
<p class="fnt"> </p<
  • behavior selector
    • 사용자의 동작이 있을 때 디자인을 적용하는 selector
    • 모든 selector가 올 수 있다.
    • hover
      • 마우스 포인터를 특정 위치에 올린 경우 디자인을 적용해야 할 때
모든selector:hover {
    속성:값;
    ...
}

a:hover { font-family:궁서체; }

<a href="">...</a>
<a href="">...</a>

CSS 속성 - 글자 관련

  • 글꼴 변경
    • font-family
    • 글꼴을 여러개 값으로 입력하여 만약 앞에 글꼴이 없다면 그 다음 글꼴이 적용이 된다.
font-family:글꼴, 글꼴, ... ;
  • 진하게
    • font-weight
      • bold : 진하게
      • normal : 일반글자
font-weight:bold;
  • 크기 변경
    • font-size
      • 값으로 px, cm, em을 줄 수 있다.
font-size:00px;
  • 글자색
    • 영어단어 또는 RGB 16진수값을 줄 수 있다.
color:RED;
  • 줄긋기
    • underline : 밑줄
    • overline : 윗줄
    • line-through : 취소선
    • none : 선 없음
text-decoration:underline;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글꼴 관련 CSS 속성</title>
<style type="text/css">
    /* id selector */
    #a { font-family: 궁서체 }
    #b { font-size: 40px }
    #c { color: #0000FF }
    #d {
        font-family: 돋움체, dotum, 휴먼옛체,  SansSerif;
        font-size: 19px;
        color: #00FF00;
    }
    #e { font-weight: bold }
    #f { text-decoration: underline }
    #g { text-decoration: overline }
    #h { text-decoration: line-through }
</style>
</head>
<body>
    <div id="a">글꼴 변경</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>
    
    <a href="#void">링크</a>
</body>
</html>

05

CSS 속성 - 효과 관련

  • 태그 숨기기
    • display
      • inline 또는 block : 보임
      • none : 숨기기
display: none
  • list 목록 타입 숨기기
    • list-style
      • inline 또는 block : 보임
      • none : 숨기기
list-style: none

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 숨기기</title>
<style type="text/css">
    img { display:none }
</style>
</head>
<body>
<div><img src="../common/img.png"/></div>
</body>
</html>

06

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 숨기기</title>
<style type="text/css">
    /* 목록 없애기 */
    li { list-style: none }
</style>
</head>
<body>
<div>
    <ul type="square">
        <li>짜장면</li>
        <li>뼈다귀해장국</li>
        <li>칼국수</li>
        <li>분식</li>
    </ul>
    <ol type="1">
        <li>Oracle</li>
        <li>Java SE</li>
        <li>JDBC</li>
        <li>HTML</li>
    </ol>
</div>
</body>
</html>

07

  • hr태그는 소스코드를 구분하는 용도로만 사용됨
    • 그리지 않기 때문에 css 속성으로 display값을 none으로 많이 사용한다.
hr { display: none }

CSS 속성 - 여백 관련

  • 여백 : 기준선과의 거리

08

  • margin : 기준선 바깥쪽의 거리
    • 왼쪽, 오른쪽, 위,아래 모두 수치상의 여백을 가진다.
margin:00px;
  • 특정위치만 변경가능 * margin-left, margin-right, margin-top, margin-bottom 
margin-left:00px;
margin-right:00px;
margin-top:00px;
margin-bottom:00px;
  • padding : 기준선 내의 거리
    • 왼쪽, 오른쪽, 위, 아래 모두 수치상의 여백을 가진다.
padding:00px
  • margin과 동일하게 특정 위치만 변경 가능
padding-left:00px;
padding-right:00px;
padding-top:00px;
padding-bottom:00px;
  • margin으로 여백을 설정하면 전체 크기는 변경되지 않음
    • padding으로 여백을 설정하면 전체 크기는 변경된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin,padding 여백설정</title>
<style type="text/css">
     div {
          border:1px solid #333;
          width:400px;
     }
     #margin_a { margin:20px }
     #margin_b { margin-left:30px; margin-top:40px;  margin-right:100px; margin-bottom:10px }

     #padding_c { padding:20px }
     #padding_d { padding-left:30px; padding-right:50px;  padding-top:30px; padding-bottom:40px }
     
</style>
</head>
<body>
<div id="margin_a">점심은 닭도리탕 아니겠습니까?</div>
<div id="margin_b">점심은 닭도리탕 아니겠습니까?</div>
<div id="padding_c">점심은 닭도리탕 아니겠습니까?</div>
<div id="padding_d">점심은 닭도리탕 아니겠습니까?</div>
</body>
</html>

09

  • line-height는 설정한 font-size로 행의 높이가 결정되는데 설정한 행의 높이에*한 값이 새로운 행의 높이로 설정된다.
line-height:1.5;

CSS