WEB/2020_webCamp

LAB3_CSS

HBean_ 2020. 7. 24. 01:27
  • CSS
    • css파일 또는 <head> 내 <style>에서 페이지의 전반적인 디자인을 꾸밀수 있다.
    • 경우에 따라 부호가 다르니 주의! (. 또는 # 또는 없음 …) 

 

    • 클래스에 따라 적용

 

 

    • id에 따라 적용

 

 

    • 한 태그 전체 적용

 

    • 태그의 특정 클래스 적용 

 

 

    • 모든 html element 적용

 

 

    • 여러 개 묶음도 가능

 

  • Css를 사용하는 방법이 여러가지가 있는 데, 크게 inline, internal, external 있는 데 동시에 사용할 때 우선순위는 inline > internal > external 이다.

 

  • CSS 주석처리( comments ) : /*내용*/ 이렇게 한다

 

  • Background image 설정
    • Background-image : image 등록
    • Background-repeat : image를 어떻게 반복할 것인가?
    • background-position: image 위치
    • Background-attachment: 스크롤을 내릴 때 고정할 것인가? 아닌가? (fix/scroll)
    • 이 설정들을 짧게 한줄로 코딩할 수 도 있다. ( 두 박스는 같은 결과를 냄) 

 

  • margin (여백)
    • 한 줄에 여러개 지정 가능 (margin : 25px 50px … : top right bottom left 순서)

 

  • width/ height : auto / 구체적인 길이 / 화면의 % 등 설정이 가능 max-width도 가능함
  • Border (테두리)
    • 라운드형으로 바꾸기 
  • Text Transformation
    • text-transform: uppercase; // 대문자
    • text-transform: lowercase; // 소문자
    • text-transform: capitalize; // 단어의 첫 글자만 대문자
  • Text Spacing
    • Text Indentation >> text-indent: 50px; /* 50px 들여쓰기*/
    • Letter Spacing >> letter-spacing: 3px; /*글자사이 간격*/
    • Line Height >> line-height: 0.7; /*줄간격*/
    • White-space: 공백 문자를 처리하는 규칙 지정
    • Text shadow >> text-shadow: 2px 2px 5px color; 

/* the horizontal shadow, the vertical shadow, blur effect, color */

 

  • Font

 

 

 

https://www.w3schools.com/css/default.asp

 

CSS Tutorial

CSS Tutorial CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. Start learning CSS now » Examples in Each Chapter This CSS tutorial

www.w3schools.com