-
CSS Tutorial (1) / CSS 시작하기 (1)Programming/Web Programming 2023. 1. 22. 02:20
지난번에 html을 튜토리얼을 마쳐서 이어서 CSS 튜토리얼을 공부하려고 한다.
클래스 101, 프로그래밍 입문자를 위한 CSS 기초를 보고 공부한 내용 위주로 작성될 예정이다.
HTML도 같은 강사님께 들었는데 설명도 엄청 자세하게 해주시고 실습도 알차서 재밌게 배웠었다!
이번에도 완강까지 화이팅..
혹시 몰라 남겨놓는 강의 링크 (유노코딩 검색 / 유로 강의입니다!)
CLASS101+ | 세상의 모든 클래스를 하나의 구독으로
2700개 이상의 클래스로 일러스트, 공예, 코딩, 부업, 주식까지 세상의 모든 분야를 배워보세요. CLASS101에서 14일 무료 체험해 보세요.
class101.net
챕터1. CSS 시작하기 - CSS 기본 문법 및 작성 방법
1강. CSS란? CSS의 역할 알아보기
(1) CSS란 무엇일까?
CSS : Cascading Style Sheets (계단식 스타일 시트)
HTML문서에 스타일을 입히는 역할을 해준다.
HTML문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있다.
*HTML : 웹 문서의 콘텐츠를 작성하는 언어
*CSS : 색상 크기, 위치 등 스타일을 입혀주는 언어
=> 즉, html로 스케치를 하면 css는 그 위에 색을 입히는 느낌인 것 같다.
그러니 css 들어가기 전에 html 공부를 먼저 해야한다!
HTML이 없는 CSS는 속재료가 없는 김밥같은 느낌.. = 의미가 없다.
* 웹페이지 제작 과정
HTML + CSS (연결해서 하나의 웹페이지 제작 ) -> 인터넷 웹브라우저 연결 -> 우리의 컴퓨터에 렌더링
| 정리 |
* CSS는 웹문서를 꾸며주기 위해 사용하는 언어이다.
* CSS 코드는 CSS 파일에 작성한다. 확장자는 *.css이다.
* CSS 코드는 HTML 문서에 스타일을 추가(정의)하는 언어이다.
따라서 HTML 문서가 존재하지 않을 때는 단순 텍스트에 불과하다.
(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)
2강. CSS 기본 문법 및 사용 방법
(1) CSS 기본 문법
기본 구조는 다음과 같이 이루어져있다.
선택자 {
속성명: 속성값;
}
선택자: 선택요소이다. 즉 어떤 요소에다가 스타일을 입힐지, 그 대상을 써주면 된다. (이미지면 이미지, 텍스트면 텍스트!)
{ } : 이 영역 안에서 관련 코드를 입력하겠다는 뜻. / 다른 코딩언어에서 아는 그 중괄호랑 똑같다.
속성명: 어떤 스타일을 입힐 것인지. 색상이면 색상 크기면 크기!
속성값: 어떻게 스타일을 입힐 것인지. 색상값이나 구체적인 크기값. 등등...
* 예시코드
p {
color : red;
}
p: 선택자 / p태그에 스타일을 적용하겠다.
{} : 이 안에 관련 내용을 쓰겠다.
color: 색상을
red: 빨갛게 바꿔주세요.
* 주석처리 : 주석처리는 다른 언어랑 같다. /* 이 안에 내용이 주석이 된다. */
html은 달랐던 것 같은데.. 다른 언어랑 같으니 훨씬 편리하다.
(2) HTML에 CSS 적용하기.
그러면 어떻게 HTML과 CSS를 연결할까? 다음과 같은 세가지의 방식이 있다.
1. 인라인 스타일
2. 스타일 태그
3. 문서 간의 연결
1. 인라인 스타일 :
html과 css 파일을 분리하지 않고 냅다 html에다가 style 속성만 추가해서 쓰는 방식.
html 코드 안에 직접 정의하기 때문에 선택자 부분이 없다.
장점: 편하다. 빠르다. (쓰는 순간에는...)
단점: 유지, 보수할때 답이 없다.
결론: 나중에 코드를 수정할 확률이 높으면 쓰지말자.
다른 역할을 하는 코드들을 한 파일에 뒤엉켜 버리면 나중에 힘들다.
* 예시코드 :
<p style="color: blue;">
글자 색상 파랑으로
</p>
2. 스타일 태그를 이용하기 :
HTML 문서 안에 <style></style> 태그를 추가해서 그 안에 css코드를 적는 방식.
HTML 문서이지만, 이 안의 내용은 css 문법을 따른다.
보통 스타일에 관한 내용은 HTML문서에 대한 정보로써 취급되기 때문에 <head></head> 태그 안에 작성한다.
장점: 하나의 파일에 담으면서도 어느 정도의 구별이 있다.
단점: 이럴거면 파일을 나누는게 낫지 않나..? 라는 생각이 문득 든다.
*예시코드
<style>
/* style 태그 안에는 CSS 문법으로 코드가 작성된다!*/
p { color: red }
</style>
3. 문서 간의 연결
HTML 파일(*html)과 CSS 파일(*css)파일을 따로 작성하고,
HTML 문서 내에서 <link> 태그를 사용해 연결해주는 방법.
* 예시코드
<link href="./style.css" rel="stylesheet">
- link 태그는 단일태그이며 href와 rel 속성을 필수적으로 기입해 주어야 한다.
- href : 연결하고자 하는 외부 소스의 url을 작성해주는 속성.
- rel : 해당 외부 속성과의 관계 (relationship)을 기입해주는 속성.
css의 경우 stylesheet이라고 작성하면 되는 듯하다.
* <link> 태그는 반드시 <head></head> 태그 안에 작성되어야 한다.
< 실습 >
1. 인라인 스타일
기본 html 포맷에 인라인 요소로 css 코드를 작성해 웹사이트로 띄워보았다.
color : red/blue/등등.. 자유롭게 작성하면 되고, 색이 들어간 네모를 누르면 자유롭게 색상 선택도 가능하다.
2. 스타일 태그 방식
style태그를 head 태그 안에 작성하여 만들어보았다.
* CSS에서도 HTML과 마찬가지로 공백은 무시되기 때문에 p다음 코드를 한줄에 쭉 써도 무방하다. 가독성을 위해 띄워줄 뿐이다.
또한 clor:skyblue;에서 ;(세미콜론)을 찍으면 그 뒤에 또 다른 속성들을 추가할 수 있다. 크기라던지...
3. 문서 간의 연결
우선 새로운 css파일을 만들어준다.
편의성을 위해 같은 폴더 안으로 옮겨주었다. (폴더이름이 CSS인것!)
link 안에 href 속성에 url을 입력해주었다.
쓰다보면 에디터에서 알아서 자동완성해주는데 그걸 클릭하는게 안전한 것 같은 기분이 든다.
url에 ./은 안써도 크게 연결에 지장은 없었지만 강사님이 쓰시니 쓰는 편이 안전해보인다.
CSS 파일 속 내용은 아까와 같다.
| 정리 |
* CSS는 선택자, 중괄호 영역, 속성명, 속성값 등으로 구성된다.
* CSS 코드에도 주석을 사용할 수 있다. /*주석*/
* CSS 코드는 HTML 문서에 적용하기 위해서는 인라인 스타일, 스타일 태그,
외부 문서 연결 등의 방식을 사용해야 한다.
(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)
3강. CSS 선택자 1편
(1) 선택자와 종류
1. 선택자란?
어떤 요소에 스타일을 적용할 것인지에 대한 정보.
그러면 이 선택자는 어떤 식으로 작성해주어야 할까?
2. 선택자의 종류
기본 선택자, 그룹 선택자, 특성 선택자, 결합 선택자, 의사 클래스, 의사 요소 등이 있다.
이번 시간에는 사용이 간단하고 빈도도 높은 기본 선택자와 그룹 선택자에 대한 내용을 배워보자.
(2) 기본 선택자
1. 전체 선택자
모든 요소를 선택해서 스타일을 적용해준다.
* 라는 애스터리스크 기호를 사용한다. 이 기호는 문서 내의 모든 요소를 의미한다.
(약간 CtrlA해서 다 선택하는 느낌으로 다가온다.)
* 예시코드
* {
color: blue;
}
=> 문서 내의 모든 글자 색을 파란색으로 지정합니다.
2. 태그 선택자
해당 이름을 가진 태그의 요소들을 선택한다.
주어진 이름의 태그의 요소들이 많을 경우, 해당 요소들을 모두 선택한다.
* 예시코드
p{
color: blue;
}
=> 문서 내 모든 p태그 요소의 글자 색을 파란색으로 바꿉니다.
3. 클래스 선택자
주어진 class 속성값을 가진 요소들을 선택한다.
해당 class 속성값을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.
- class란?
HTML의 모든 요소에 지정해줄 수 있는 전역 속성.
보통 요소들의 특성을 기준으로 그룹 지어줄때 많이 쓴다.
- . 기호
.기호는 나는 이제부터 클래스를 골라줄 것이다. 라고 문서에 얘기해주는 기호!
빠트려서는 안된다.
*예시코드
.text {
color: blue;
}
=> 문서 내의 class가 text인 모든 요소들의 글자색을 파란색으로 바꿔줍니다.
4. 아이디 선택자
주어진 id 속성값을 가진 요소를 선택한다.
- id는 고유한 속성값이므로 동일한 id값을 가진 요소가 여러개일 수 없다. (클래스와 차이점)
- #기호
#기호는 나는 이제부터 id를 골라줄 것이다. 라는 의미.
마찬가지로 빠트려서는 안된다!
*예시코드
#topic{
color: blue;
}
=> 문서 내의 id가 "topic"인 요소의 글자색을 파란색으로 바꿔줍니다.
(3) 그룹 선택자
다양한 유형의 요소들을 한번에 선택할 수 있다.
쉼표(,)를 이용해 선택자들을 그룹화한다.
*예시코드
h1, p, div {
color: blue;
}
=> 문서 내 모든 h1, p, div 태그 속 요소들의 글자색을 파란색으로 바꿔줍니다.
=> 이 외에도 클래스 선택자, 아이디 선택자 등 다른 선택자들도 묶을 수 있다.
(4) 선택자가 겹치는 경우
만약, 같은 유형의 선택자 (태그 선택자끼리 겹친다거나..)끼리 겹치면
나중에 작성된 스타일이 적용된다.
선택자가 다르지만 요소가 겹칠 경우! (같은 요소에게 각각 다른 색을 요구한다든지)
선택자의 우선순위에 따라 적용될 스타일이 결정된다.
* 선택자의 우선순위
아이디 선택자 > 클래스 선택자 > 태그 선택자
(5) 실습
1. 전체 선택자
style 태그 방식으로 CSS 내용 작성.
<p>태그 안에 들어가있는 것은 지난 내용을 미처 못지워서 중복된 모양이다.
맨 겉에 있는 <p>태그는 삭제하는 것이 좋다.
2. 태그 선택자
3. 클래스 선택자
4. 아이디 선택자
5. 그룹 선택자
- 태그 선택자를 그룹화하기.
- 클래스 선택자와 아이디 선택자를 그룹화하기.
6. 선택자가 겹치는 경우
클래스 선택자 > 태그 선택자 (+ 뒤에 써있는 것이 우선)
아이디 선택자 > 클래스 선택자 > 태그 선택자
| 정리 |
* 선택자는 어떤 요소에 대한 스타일을 정의할 것인지에 대한 정보이다.
* 기본 선택자로는 전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자 등이 있다.
* 그룹 선택자는 여러 개의 선택자를 그룹화할 수 있는 선택자이다.
* 문서 내에 동일한 선택자가 존재하는 경우, 뒤에 작성 스타일이 적용된다.
* 서로 다른 선택자가 동일한 요소를 선택한 경우, 우선순위를 고려해야 한다.
(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)
이 글은 클래스 101, "프로그래밍 입문자를 위한 CSS 기초 (유노코딩)" 강의를
기반으로 작성되었음을 알립니다.
'Programming > Web Programming' 카테고리의 다른 글
CSS Tutorial (6) / CSS 시작하기 (6) 선택자, 의사클래스와 의사요소 (0) 2023.01.23 CSS Tutorial (5) flexbox / CSS 시작하기 (5) flexbox (0) 2023.01.23 CSS Tutorial (4) set position / CSS 시작하기 (4) 위치 정하기 (2) 2023.01.23 CSS Tutorial (3) Box Model / CSS 시작하기 (3) 박스 모델 (0) 2023.01.22 CSS Tutorial (2) / CSS 시작하기 (2) (0) 2023.01.22