[Frontend] CSS

Alex of the year 2020 & 2021·2020년 6월 22일
0

HTML, CSS

목록 보기
2/5
post-thumbnail

CSS

Cascading Style Sheets: 종속형 시트
마크업 언어가 실제 표시되는 방법을 기술한 언어
HTML과 XHTML에 주로 사용되고 XML에서도 사용 가능
W3C의 표준으로 레이아웃과 스타일을 정의할 때 자유도가 높음

HTML 문법(이것을 옷으로 두자면)으로 만들어 놓은 웹사이트를
본격적으로 아름답게 꾸며주기 위한 CSS(악세사리 정도)

CSS가 HTML에 적용되려면?

1) 인라인 스타일

<h1 style= "color: red, font-size: 30px">

편하지만,
유지 보수 not good + 가독성 X

2) style 태그 이용

<style>
 h1 {
  color: red;
  font-size: 30px;
 }
</style>

역시 같은 장단점

3) 🍎 CSS 파일로 따로 저장 🍎

css 파일 기본 작성법:

h1 {
    color: red;
}

가장 깔끔하며 가독성도 유지보수에도 모두 좋은 방법
이 때,
h1 부분이 내가 css 효과를 주고자 하는 selector(선택자)
태그 및 class, id 이름 모두가 올 수 있음
color는 해당 선택자의 property(속성)에 해당하며 어떤 효과를 줄지는 : 뒤에 표시한 후 ;

Selector 작성 시 유의

selector가 태그일 때: 그냥 작성
selector가 클래스일 때: .selector
selector가 아이디일 때: #selector

profile
Backend 개발 학습 아카이빙 블로그입니다. (현재는 작성하지 않습니다.)

0개의 댓글