css
[유노코딩] CSS 기초강의 1~3강
목차(T.O.C)
1. css 란 무엇인가
1-1. css 란
1-2. css 가 일하려면
2. css 기본문법 및 사용법
2-1. css 기본문법
2-2. html 에 css 를 더하려면
3. 선택자 1편
3-1. 기본 선택자
3-2. 그룹 선택자
CSS 에 대해 알아보자
0강. CSS 란 무엇인가
웹 페이지를 꾸며봅시다.
CSS란
1. Cascading Style Sheets( 계단식으로 멋을 내는 종이한장)
--> 계단식으로 스타일을 정의하는 문서!
2. CSS는 HTML 문서에 스타일을 더해준다!
3. (HTML 문서는 태그가 태그를 포함하는 계단식 구조를 가지고 있다
CSS가 일하려면
1. CSS문서는 독립적으로 존재할 수는 있지만 사실상 의미가 없다.
2. HTML: 웹 문서의 콘텐츠를 구성하는 언어
3. CSS: 웹 문서의 콘텐츠에 스타일을 추가하는 언어
2강. CSS 기본 문법 및 사용 방법
HTML 문서에 CSS 를 더해보자
CSS 기본 문법
선택자{
속성명: 속성값;
}
1. 선택자: 어떤 요소에 스타일을 적용 할지에 대한 정보
2. 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보
3. 속상값: 어떻게 정의하고 싶은지에 대한 정보
4. 주석: /*주석을 작성합니다*/
HTML 에 CSS를 더하려면
1. 인라인 스타일: 태그에 직접기술하기
<p style="color:blue;">
글자를 파랗게 만들어줘 </p>
2. 스타일 태그: 스타일시트를 위한 태그를 추가하여 기술하기
<style>
/*style 태그 안에는 css 코드를 작성해야한다*/
p{ color: red;}
</style>
3. 문서 간의 연결: 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
확장자 *.css 인 스타일시트 파일을 생성해 그 안에 css 코드를 작성하고, html 문서를 이에 연결한다.
이때는 <link> 태그를 사용한다
<link href="./style.css" rel="stylesheet">
href: 연결하고자 하는 외부소스의 url을 기록하는 속성
rel: 현재문서와 외부소스의 연관관계를 기술하는 속성
--> <link> 태그는 html 태그의 <head> </head> 내부에 작성해야한다.
3강. 선택자 1편
기본선택자
1. 전체 선택자
모든 요소를 선택한다
*(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다.
*{
color: blue;
}
-->문서 내의 모든 요소를 파란색으로 지정한다!
2. 태그 선택자
주어진 이름을 가진 요소를 선택한다. '유형 선택자' 라고도 한다
주어진 이름을 가진 요소가 다수이면 모두 선택한다.
p{
color: blue;
}
-->문서 내의 모든 p 태그 요소의 글자 색을 파란색으로 지정한다!
3. 클래스 선택자
주어진 class 속성값을 가진 요소를 선택한다
주어진 class 속성값을 가진 요소가 다수라면 모두 선택한다.
.text{
color :blue;
}
text 인 class 의 모든 요소의 글자색을 파란색으로 !
4. 아이디 선택자
주어진 id 속성값을 가진 요소를 선택한다
id 는 고유한 식별자 역할을 하는 전역속성이다.
#topic{
color: blue;
}
--> 문서 내의 id 가 "topic"인 요소의 글자색을 파란색으로
5. 선택자 우선순위
겹치는 경우- 나중에 작성된 스타일이 적용
선택자가 다르지만 요소는 겹치는 경우- 아이디> 클래스 > 태그선택자
그룹선택자
h,p {
color: purple;
}
'CSS' 카테고리의 다른 글
| #29. [유노코딩] CSS 기초강의 4~6강 (2) | 2025.08.13 |
|---|