티스토리 뷰

CSS

CSS 기초 1

carrot62 2020. 7. 23. 13:04

CSS는 Cascading Style Sheets의 약자로 HTML 문서의 style을 정의(화면에 어떤 스타일로 나올지 설정해주는)하는 언어이다. HTML 언어를 사용해서 컨텐츠를 표현했다면, CSS는 거기에 디자인을 덧붙이는 역할을 하는 것이다.

CSS Syntax

예시)  h1 { color:blue; font-size:12px; } 

  • selector (예: h1)
  • declaration: 각각의 declaration은 semicolon으로 구분 되어 있고, declaration 블록은 중괄호로 묶여있다
    • property:value   (예: color-property, blue-value)

CSS Selectors

우리가 꾸미고자 하는 HTML element를 지정하는 역할을 한다

  • Element selector
        예) p, h1, ...
  • Id selector
    • 형식: #"id 이름"
    • id 이름은 숫자로 시작하면 안된다
          예) #note
  • Class selector
    • 형식: ."class 이름"
    • 영향을 끼치고 싶은 HTML elements도 따로 지정 할 수 있다 ( "." 앞에 HTML element를 적어주면 된다)
          예) p.center{text-align:center; color:red;}
    • HTML elements는 한 개 이상의 class를 적용할 수 있다 (id는 단 하나의 HTML element에서 사용되어야 한다는 점과 다르다)
    • class 이름은 숫자로 시작하면 안된다
  • Universal selector
    • * 문자를 사용한다
          예) *{text-align:center; color:red;}
  • Grouping selector
    • 같은 style declaration을 가진 selector들을 묶어놓은 것
          예) h1, h2, p {text-align:center; color:red;}

CSS를 추가하는 방법 3가지

  • External CSS
    • <link>를 이용해서 외부에 있는 style sheet를 적용시키는 방법이다
          예) <link rel="stylesheet" type="text/css" href="mystyle.css">
    • .css 확장자로 저장되어야 한다
<!--mystyle.css-->
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}
  • Internal CSS
    • 현재 HTML 페이지 전체에 style을 적용시키는 방법이다
  • Inline CSS
    • 하나의 HTML element에 style을 적용시키는 방법이다
          예) <h1 style="color:blue; text-align:center;">Heading</h1>
  • Multiple style sheets
    • internal style sheet와 external style sheet를 동시에 적용 시켰을 경우?
    • 다음 우선 순위로 차례대로 적용된다:
      1. Inline style
      2. External and internal style sheets
        Enternal 과 internal style sheet이 둘다 있을 경우에는 <link> <style> 중에서 더 뒤에 나오는 style이 최종적으로 적용된다.
      3. Browser default

<link>가 <style>보다 뒤에 있었으므로 internal style sheet이 적용된다

 

<style>이 <link>보다 뒤에 있었으므로 external style sheet이 적용된다

위 사진의 예시 코드를 보고 싶다면: http://songoftea.dothome.co.kr/2020Camp/hw3_1.html

CSS 주석(comments)

주석은 코드에 대한 설명으로 브라우저가 해석하는데에는 아무런 영향을 끼치지 않고 나중에 코드를 업데이트 하게 될때 참고할 수 있도록 적어놓은 내용이다.

형식: /* */

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* CSS 주석 */
}
</style>
</head>
<body>
	<!-- HTML 주석 -->
</body>
</html>

CSS Color Names

색은 이름으로 지정하거나, RGB, HEX, HSL, RGBA, HSLA등을 사용해서 정의할 수 있다

  • color : 글자 색을 변경 할 때 사용하는 속성
  • background-color: 배경색을 변경 할 때 사용하는 속성
  • border : 테두리 굵기, 종류, 색을 반드시 명시해야 제대로 나온다
        예) <h1 style="border: 2px solid black;">hello</h1>

CSS colors

  • RGB
    • rgb(red, green, blue)
      • rgb(255, 255, 255): 흰색
      • rgb(0,0,0): 검은색
  • RGBA
    • rgba(red, green, blue, alpha) : 투명도 조절 가능
  • HEX
    • #rrggbb
    • 00 = 0(rgb), ff= 255(rgb)
  • HSL
    • hsl(hue, saturation, lightness)
  • HSLA
    • hsla(hue, saturation, lightness, alpha)

CSS backgrounds

  • background-color
  • opacity (0.0 ~ 1.0)
    • opacity property를 쓰면 배경색과 함께 글씨도 투명해지지만, rgba를 사용하면 글자색의 투명도는 그대로이다.

  • background-image
         예) background-image: url("");
  • background-repeat
    • 옵션: repeat-x(수평으로 반복), repeat-y(수직으로 반복), no-repeat(반복하지 않음)
  • background-position
  • background-attachment
    • fixed
    • scroll

CSS Background Shorthand

아래와 같이 다 적는 대신에:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

shorthand 기번으로 다음과 같이 한꺼번에 적을 수 있다:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

CSS Borders

  • border : 태두리를 추가하는 속성
  • border-style: 테두리 스타일을 정의하는 속성, 총 4개의 값을 가질 수 있다
    • border-style property가 설정 되어야만 추가적으로 border에 하는 설정들이 영향을 미칠 수 있다
    • 다음과 같은 순서로 값을 가진다:
      1. top border
      2. right border
      3. bottom border
      4. left border
    • dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}

<!--border-style 값 4개 다 입력할 경우: -->
p.mix {border-style: dotted dashed solid double;}

CSS Border width

  • border-width
    • px, pt, cm, em 등...의 값으로 테두리 두께를 정하거나
    • thin, medium, thick 중 한 값을 사용해도 된다

CSS Border Color

  • border-color
    • name, HEX(#000000), RGB, HSL, transparent
    • top, right, bottom, left 해서 각각 다른 색깔로 설정 할 수 있다

CSS Margins

  • margin: element와 바깥의 경계 사이 space를 정의하는 속성
  • margin-top, right, bottom, left
  • margin: auto하면 자동으로 화면 중간에 맞춰준다
  • inherit: parent element의 margin값을 그대로 받아온다

Margin Collapse

Top와 bottom margin에만 해당된다
아래의 코드를 보면 두 heading 사이의 margin은 50+20 해서 70px 이 되어야 할 것 같지만, margin collapse에 의해 50px로 나온다.

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}
  • line-height: 줄 사이 간격을 정의 할 때 사용된다
div.a {
  line-height: normal;
}

div.b {
  line-height: 1.6; /* recommended line-height: 1.6*/
}

 

'CSS' 카테고리의 다른 글

CSS Forms  (0) 2020.09.16
CSS 기초 4  (0) 2020.08.03
CSS 기초 3  (0) 2020.08.02
CSS 기초 2  (0) 2020.08.01
CSS Advanced: border 속성, google font, fontawesome 사용법  (1) 2020.07.24