[CSS] WEB2 - CSS

은혜·2022년 8월 27일
CSSInflearn
0

CSS

목록 보기
1/3

CSS의 등장

등장 배경

  • 정보와 디자인의 분리
    • HTML : 웹 언어의 시초
      • 본질은 정보 (어떻게 정보를 잘 표현할 것인가?)
    • CSS : 웹페이지 꾸며주는 기술
  • 배경
    • css 등장 전에는 HTML이 태그를 추가하여 디자인도 담당
    • font 태그 등을 사용했으나 이는 디자인적인 요소일 뿐 의미가 없음 (ex. a는 링크, h1은 제목을 의미)
    • HTML에 디자인에 대한 태그를 추가해서 해결하는 것은 정보 제공적인 측면에서 좋지 않음
  • 장점
    • HTML이 정보에 전념 가능
    • 효율적인 문법 체계 가능
    • 유지보수 유용

적용 방법

1. 인라인 스타일 (style 속성)

<h1 style="color: red"></h1>

2. 내부 스타일 시트 (style 태그)

<head>
	<style>
    	h1 {
      		color: red
        }
    </style>
</head>

3. 외부 스타일 시트 (css 파일)

  • .css 파일 생성 후 head 태그에 아래 코드 추가
<link rel="stylesheet" href="style.css">
  • 모든 파일에 style 태그로 css를 지정하면 재사용성 감소 → css 파일로 따로 관리해서 해결!
    • 재사용성 증가 + 중복의 제거 + 효율적 + 사용성 증가 + 코드 길이 감소
    • 웹 브라우저가 html을 해석하고 로딩할 때 해당 css 파일을 다운로드 후 웹 페이지에 적용
    • 웹 브라우저는 캐시 덕분에 css 파일을 한번 저장해두고 다음에 또 사용
      • 네트워크 트래픽 감소 → 로딩 속도 감소
      • 사업자의 돈 절약

기본 문법

  • 가장 중요한 것은 선택자와 속성!
    • 선택자 Selector : 누구에게 적용? (ex. h1)
    • 효과 Declaration : 어떤 효과 적용? (ex. color: red)
    • 속성 Property : (ex. color)
    • 값 Value : (ex. red)
    • 구분자
      - 속성-속성값 구분자 :
      - 선언-선언 구분자 ; (세미콜론)

Property

  • Property
    • color
      • 폰트 색상 지정
    • text-decoration
      • none : 밑줄 등 모두 삭제
      • underline : 밑줄 추가
    • text-size
    • text-align
  • 모두 외우려고 하지말 것! 스스로 알아내면 된다!
    • 검색어 예시
      • css text size property
      • css text center property

Selector

  • Selector
    • class
      • 선택자 앞에 .
      • 여러 개 사용 가능 (ex. class = "a b")
      • 여러 개 사용 시, style 태그 내에서 더 아래쪽에 작성된 선택자가 적용
    • id
      • 선택자 앞에 #
      • 중복 불가능 (같은 프로젝트 내에서 동일한 id는 존재 불가)
    • 우선 순위 id > class > element(tag)
      • 구체적 > 포괄적

박스모델

  • border 테두리
    • border-width 두께
    • border-color 색상
    • border-style 타입 (ex. 점선, 실선)
    • "boader : 두께 색상 타입" 으로 한번에 선언 가능


  • block level element
    • 화면 전체를 모두 사용하는 태그
    • ex. h1 태그
  • inline element
    • 자신의 크기만큼 가지는 태그
    • ex. a 태그

  • display
    • block/inline : block/inline 설정
    • none : 화면에서 안 보이게 설정
  • height/width
    • 너비/폭 지정
    • inline element는 적용되지 않음!
  • padding
    • 컨텐츠와 테두리 사이 여백
  • margin
    • 테두리 사이 간격

그리드

  • grid
    • grid 하고자 하는 태그를 모두 감싸는 부모 태그에 선언
    • display : grid
    • grid-template-columns
      • 각 컬럼의 크기 지정
      • 1fr (단위)
        • 남은 자리 전부
        • 모두 1fr이라면 모두 동일한 크기
        • 2fr 1fr이라면 전체 크기의 2:1

미디어 쿼리

  • 미디어 쿼리
    • 선택적으로 스타일을 적용
    • 반응형 웹
@media(조건){
  Selector{
    Declaration
  }
}
@media(max-width:800px){
  div{
    display:none;
  }
}

기타

  • 개발 환경
    • 웹 브라우저
    • 에디터

  • 중복 제거를 위해 선택자 묶기
    • (ex. h1, a { ... })
  • id 하위에 있는 태그에 대한 css 지정
    • (ex. #grid ol)

  • 개발에 있어 중요한 것
    • 중복 제거
    • 가독성
    • 유지보수
  • 개발자 도구를 잘 이용할 수 있을 것!
    • padding/margin 확인 가능
    • 화면 크기 확인 가능

  • CSS 주석 처리
/*  */

  • Lerem Ipsum
    • 의미 없는 텍스트 생성하는 서비스

결과

전체 코드는 GitHub에 업로드하였다. 웹 사이트는 여기에서 확인할 수 있다.

후기

나중에 확인할때 편하도록 순서에 맞춰 필기를 정리하지 않고, 유사한 개념끼리 모아서 정리했다. 또, 오리엔테이션, 수업을 마치며 등 필요없는 비교적 메모할 내용이 없는 섹션은 생략했다. Inflearn의 "CSS 기본부터 활용까지" 강의와 겹치는 부분을 이 게시글에 추가했다.

profile
은혜
다음 포스트

[CSS] CSS 기본부터 활용까지

0개의 댓글

관련 채용 정보