Skip to content

CSS.md

Latest commit

 

History

History
116 lines (85 loc) · 6.58 KB

CSS.md

File metadata and controls

116 lines (85 loc) · 6.58 KB

CSS

  • html 은 웹페이지의 내용과 그것이 표시될 형식이며

  • css는 html 문서에 적용할 글꼴,색상,정렬, 각 요소의 배치와 같은 디자인 특성을 정의합니다.

  • 내용과 디자인 작업이 분리되어 웹페이지의 내용을 작성한 html 에 여러 형태의 디자인을 적용하는 것을 쉽게 할 수 있습니다.

  • css 는 반응형 웹디자인을 가능하게 합니다. PC 또는 모바일 기기에 맞는 화면을 각각 만드는 것이 아니라 웹페이지가 보여지는 브라우저의 크기에 따라 자동으로 배치를 바꾸어 줄 수 있습니다.

  • cascade style sheet : html 문서에 적용되는 스타일을 모아 놓은 파일

    • style : 문서의 시각적인 디자인 요소들을 정의한 것. 속성과 값으로 규칙을 정의합니다.
    • sheet : 스타일 정의(규칙)을 모아놓은 파일. html 하나에 여러 css 파일을 사용할 수 있습니다.
    • cascade : 위로 부터 계단식으로 행하다. html 문서를 구성하는 요소의 부모-자식 관계에 따라 지정 될 수 있으며 또는 우선순위를 갖고 적용 됩니다.

CSS 형식

  • html 의 태그에 대해 브라우저가 기본적으로 표시하는 스타일 외에 제작자 스타일을 만드는 형식입니다.
  • 제작자가 정의한 스타일은 브라우저의 기본 스타일을 바꿉니다.
      선택자 { 
         속성1 : 속성1의 값;  
         속성2 : 속성2의 값;
            :
         속성n : 속성n의 값;
      }
  • 선택자는 정의한 스타일이 적용될 태그 요소를 지정합니다. 태그이름 등 여러가지 방법을 사용합니다.
  • 속성이름과 그 속성값이 하나의 쌍으로 이루어집니다.
  • 다양한 속성이 어떻게 디자인 결과를 만드는지 학습합니다.

css 적용하는 방법

1. 태그의 style 속성으로 정의하기 (인라인 스타일)
2. html 문서의 <style> ... </style> 태그 안에서 정의 하기 (내부 스타일 시트)
3. css 만 모아 놓은 파일을 생성하여(확장자 css) html 의 link 태그에서 파일의 주소를 정의하기(외부 스타일 시트)

- 단, 인라인 스타일은 선택자를 지정할 필요는 없습니다.

선택자

  • 태그명 : 타입 선택자라고 하며 해당 태그 이름을 갖는 모든 요소에 정의한 스타일이 동일하게 여러번 적용됩니다. 태그이름 한 개 또는 여러개를 나열할 수 있습니다.

  • 클래스 이름 - class 속성과 값(이름)을 태그요소에 설정합니다. 해당 클래스 이름을 갖는 모든 요소에는 정의한 스타일이 동일하게 여러번 적용됩니다. - 선택자를 class 이름으로 할 때에는 기호 . (마침표) 를 붙입니다.

  • 아이디 이름 - id 속성과 값(이름)을 태그요소에 설정합니다. 해당 id 이름을 갖는 요소에는 정의한 스타일이 적용됩니다. - 아이디는 식별값이므로 한 개 요소에 한번만 적용됩니다.
    - 선택자를 id 이름으로 할 때에는 기호 # (마침표) 를 붙입니다.

  • 와일드 카드 문자 * - 모든 요소에 적용되는 선택자 입니다.

  • 특수문자 : 웹 문서의 요소(태그)들은 포함 관계가 있으며 이 때 자식 요소, 자손 요소 등의 관계를 선택자에 표시 할 수 있습니다.

스타일의 우선 순위

  • 태그 요소 하나에 여러가지 정의된 스타일이 충돌될 때의 우선 순위
  1. !mportant
  2. 인라인 스타일
  3. id 스타일
  4. class 스타일
  5. 타입 스타일
  • 동일한 우선 순위로 여러개의 스타일이 정의되어 있으면 소스 코드 작성 순서가 나중에 작성된 것이 적용됩니다.

  • 스타일 상속

    • 웹 문서의 요소(태그)들이 와 같은 포함 관계가 있을 때 , X는 부모 요소 Y는 자식 요소 입니다.
    • 자식 요소가 별도의 스타일을 정의 하지 않으면 부모 요소의 스타일이 자식 요소에게 전달(상속)되는 스타일 속성이 있습니다. : 글꼴 크기 , 색상

크기 지정 단위

글자 크기, 영역의 너비와 높이 , 영역의 내부 여백과 외부 여백 등에 사용 됩니다.

  • pt : 포인트. 일반 문서 편집 프로그램에서 사용.
  • px : 픽셀. 모니터 해상도의 1px
  • rem : 웹 문서의 html 요소에서 지정한 크기를 1rem 으로 기준하여 비율을 지정하는 상대 크기. 1rem = 16px , 12pt (크롬)
  • em : 부모 요소에서 지정한 글꼴 크기를 1em 으로 기준하여 비율을 지정하는 상대크기.
  • % : 부모 요소의 크기를 기준으로 계산하여 비율을 지정하는 상대크기

색상 지정

글자 , 테두리 선, 바탕색 등의 색상 설정 값을 표현하는 방법은 red 0255 , green 0255 , blue 0~255 사이의 값들을 조합하여 생성됩니다.

  • 색상 조합은 https://htmlcolorcodes.com/ 를 참고하세요.
  • 16진수로 표현하기 : 10진수 255는 16진수 ff 입니다. 3가지 색상을 순서대로 #rrggbb(rr은 빨강, gg는 초록, bb는 파랑 16진수 2자리) 로 지정합니다.
    • #ffffff 는 흰색, #000000 은 검정색 입니다.
    • #ff0000 은 파랑, #00ff00 은 초록, #0000ff는 파랑색입니다.
  • 색상이름 black, blue,yellow, red ,white 와 같이 대표색상은 이름을 사용할 수 있습니다.
  • rgb(빨강, 초록, 파랑) 함수로 빨강, 초록, 파랑의 10진수 값을 지정합니다.
  • rgb(빨강, 초록, 파랑,불투명도) 함수로 값을 지정합니다. 불투명도는 0 ~ 1 사이의 값이며 1은 불투명, 0에 가까울 수록 투명해집니다.
  • hsl(색상,채도,명도) 함수로 값을 지정합니다. 참고: https://www.w3schools.com/html/html_colors_hsl.asp

텍스트 스타일

  • 모양

    • font-famly : 글꼴
    • font-size : 글자 크기
    • font-style : italic 이탤릭체 설정
    • font-weight : 글자 굵기. bold 또는 100,200,300,...900 으로 굵기 지정. 일반적인 regular 는 400

  • 정렬 text-align

    • 속성 값 : left , right , center

  • 줄 간격 line-height

    • 24px (절대값), 2 또는 200% (상대값.글자크기에 대한 배수)
    • height 와 line-height 를 같게 하면 텍스트를 세로로 쉽게 정렬할 수 있습니다.

  • 대소문자 변환 text-transform

    • 속성 값 : capitalize , uppercase , lowercase

  • 글자 간격 letter-spacing , word-spacing