CSS(Cascading style sheet)란?
: 웹페이지를 디자인하기 위해 사용하는 언어
● 개발자 도구의 역할?
+ 웹페이지에서 개발자 도구 확인 방법(맥: option+cmd+i , 윈도우:f12)
- 브라우저에서 개발 편의를 위해 제공되는 도구
- 지금 보고 있는 웹페이지의 HTML. CSS. Javascript 등을 볼 수 있음
- 해당 코드를 수정가능
- 특정 요소 코드 확인/ 크기 조정/ 모바일 버전 확인 모두 가능
● HTML5에서의 스타일 적용
-HTML5 이전 버전에서는 HTML 자체에서 Style을 컨트롤 할 수 있는 태그인 <font>,<center>등을 사용하였으나
HTML은 '텍스트를 전달하는 문서'이자 '문서의 구조'이므로 즉 본연의 기능이 아닌 디자인 적 요소가 추가되면서 많은 혼란이 야기 되었음 -> CSS 의 필요성
● 3가지 CSS 참조 방식
1) 인라인방식
<div style="color: red; margin: 20px;"></div>- 요소의 style 속성에 직접 스타일을 작성하는 방식
- 각각 태그마다 전부 스타일을 적어줘야함
- 아래에서 같은 스타일을 가진 태그를 사용하려고 해도 코드를 전체 복사 붙여넣기 해야한다는 번거로움이 존재
- 재사용 불가
2) 내장 Style 방식
<style>
div{
color:red;
mrgin: 20px;
}
</style>- HTML의 <head>태그 내부에 사용할 style을 <style>태그로 미리 선언하여 사용함
- 태그에 같은 스타일이 적용 가능
- 그러나 다른 HTML파일에는 적용 불가함
3) 링크 방식
#link.css
div {
color: red;
}
#main.html
.
.
<head>
<link rel="stylesheet" href="./link.css">
</head>- 모든 style을 하나의 CSS파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식
- 재사용 가능
- 스타일 변경 가능
+ 4) @import 방식
#./import.css
p {
background-color: red;
color: white;
}
h3 {
background-color: black;
color: white;
}
#./link.css
@import url(./import.css);
#main.html
<head>
.
.
.
<link rel="stylesheet" href="./link.css">
</head>- CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식
● 3가지 CSS 참조 방식 우선순위
인라인 방식 > 내장 방식 ? 링크 방식
- 3가지 방식이 겹칠 경우 가장 늦게 읽히는 것이 우선으로 적용죔
- 인라인은 내장, 링크 방식에 우선되고, 내장 및 링크 방식은 가장 늦게 쓰여진 것이 우선이 됨
다음으로 css에 대해서 배웠다.
가끔 사이트에 들어갈 때 오류처럼 뜨던 페이지가 css가 적용이 안된 페이지였다.
그만큼 웹에 있어서 css는 중요한 역할이라는 것을 알 수 있었다.
css를 참조하는 방식에 3가지 방식이 있고 우선순위가 있다는 것을 배울 수 있었다.
'프론트앤드 > CSS' 카테고리의 다른 글
| [포스코x코딩온] 웹개발자 입문 과정 2주차 회고-02 | CSS Transform (0) | 2023.03.07 |
|---|---|
| [포스코x코딩온] 웹개발자 입문 과정 2주차 회고-01 | CSS Flex (0) | 2023.03.07 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-13 | CSS 실습2 (0) | 2023.03.06 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-12 | CSS 선택자 (0) | 2023.03.06 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-11 | CSS 실습1 (0) | 2023.03.03 |