일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 프로그래머스
- Error installing cocoapods
- 문자열 붙여서 출력하기
- 객체지향
- 프로그래머스 문자열 붙여서 출력하기
- 프로그래머스 최댓값 만들기(2)
- Break
- 프로그래머스 n의 배수 고르기
- 프로그래머스 배열 만들기1
- continue
- 프로그래머스 n번째 원소까지
- 스페인어
- 프로그래머스 주사위 게임1
- 프로그래머스 암호 해독
- 프로그래머스 조건에 맞게 수열 변경하기 3
- 조건에 맞게 수열 변경하기 3
- array
- Til
- swift
- 주사위 게임1
- n번째 원소까지
- 문자열 정렬하기 (1)
- 연산자
- 스파르타코딩캠프
- 프로그래머스 문자열 정렬하기 (1)
- 스파르타 코딩클럽 내일배움캠프
- 프로그래머스 자동커밋
- 배열 만들기1
- cocoapods 설치 오류
- ruby설치
- Today
- Total
dev._.note
[CSS] CSS(Cascading Style Sheets)란? 본문
CSS (Cascading Style Sheets)
기존의 html 문서는 디자인 요소를 넣으려면 html 문서마다 디자인 요소를 적용해줘야했다.
그러나 디자인 요소가 변경될 때마다 그 방대한 문서를 모두 수정하는 것은 불가능한 일이었고, 디자인 요소를 가진 파일만 CSS라는 문법으로 따로 분리하여 관리하니 유지 보수가 매우 쉬워졌다.
CSS 파일은 .css 라는 확장자를 가진 파일로 html 문서와 연결되어 사용
link 태그를 head 영역에 넣어주며, rel 속성으로 stylesheet이라는 것을 알려주며, href 속성에 연결할 css파일의 주소를 적어준다.
<link rel="stylesheet" href="example.css">
CSS 파일 안에는 보통 '선택자'라고 부르는 CSS를 적용할 요소를 지정해서 중괄호{} 안에 적용할 요소를 적는다.
출처: w3schools.com
Selector : 선택자
Property: 속성
Value : 값
위의 그림에서 보면, h1 태그를 선택한 것이고 중괄호 안의 내용은 h1 태그의 속성을 컬러는 블루, 폰트 사이즈는 12px로 적용하겠다는 뜻을 CSS 문법을 사용하여 나타내고 있다. Property를 먼저 적고, : 표시 뒤에 적용할 값을 적는 방식으로 되어있다.
CSS 선택자를 훈련할 수 있는 아주 재밌는 게임을 드림코딩 by 엘리 선생님이 가르쳐주셨는데 마지막 레벨까지 깼다!
관심 있으신 분들은 한번 해보시길...
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
출처
https://www.w3schools.com/css/css_syntax.asp
CSS Syntax
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.