[목차]
01. css 정의
1) Cascading Style Sheet
👉🏻1️⃣ HTML(정보 전달, 기본 뼈대, 구조)을 꾸며주는 디자이너 역할2️⃣ HTML문서 내에서 태그를 선택해서 디자인하고 배치하는 역할
2) Cascading 의미
👉🏻1️⃣ 폭포처럼 쏟아지는 물2️⃣ 스타일 시트의 적용 우선 순위가 위에서 아래로 적용된다.
02. 기본 문법
작성 방법
💡선택자 { 속성 : 값; 속성 : 값; 속성 : 값; }- 한줄 작성이 가능하지만 가독성을 위해 줄바꿈 해준다.
- 하나의 속성과 값을 작성하면 세미클론으로 마무리 해준다. 없으면 브라우저가 인식을 할 수 없으며 오류 발생
- 선택자(selector)
- 선택자는 스타일(css)을 적용할 대상을 명확히 지정하는 용도
- 속성 : Property
- 값 : value
03. 키워드 - 캐시
임시 데이터 저장소
👉🏻➡️ 가져온 데이터를 한번 가져와서 임시로 저장하는 개념➡️ 한번 받아온 데이터를 사용자의 컴퓨터 또는 중간 역할을 하는 서버에 저장해 놓는다.
➡️ 한번 보관하면 다시 접속할 때 다운로드 불필요
➡️ 파일 다운로드 자체가 서버와 사용자에게 부담(CPU 점유율, 메모리, 속도 등)
➡️ 처리 속도가 향상
➡️ 추가 요청도 빠르게 처리 가능
04. 경로
1) 절대 경로
👉🏻root(최상위)를 의미합니다.➡️ 표기법 : /
➡️ 어느 파일에 위치해 있어도 root경로로 이동 가능 ( = 우리 프로젝트 )
2) 상대 경로
👉🏻출발하는 위치에 따라서 경로가 바뀝니다.➡️ ./ : 내 주변에서 찾는 것
생략가능
명확하게 작성하고 싶으면 생략하지 말 것
➡️ ../
내 위치에서 상위 폴더로 올라가서 찾는다.
내가 속해있는 폴더의 위쪽으로 올라가서 찾는다.
[코드예제] 경로
💡1. 현재 폴더에 index.html 생성 2. 현재 폴더에 notice 폴더 생성 후 notice.html 생성 3. 현재 폴더에 member 폴더 생성 후 login.html, signup.html 생성[index.html]
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>INDEX</title> </head> <body> <h1>index 입니다.</h1> <a href="./index.html">HOME</a> <a href="./notice/notice.html">NOTICE</a> <a href="./member/login.html">LOGIN</a> <a href="./member/signup.html">SIGNUP</a> </body> </html>
[notice.html]
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>NOTICE 입니다.</title> </head> <body> <h1>NOTICE 입니다.</h1> <a href="../index.html">HOME</a> <a href="./notice.html">NOTICE</a> <a href="../member/login.html">LOGIN</a> <a href="../member/signup.html">SIGNUP</a> </body> </html>
[login.html]
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>LOGIN 입니다.</title> </head> <body> <h1>LOGIN 입니다.</h1> <a href="../index.html">HOME</a> <a href="../notice/notice.html">NOTICE</a> <a href="./login.html">LOGIN</a> <a href="./signup.html">SIGNUP</a> </body> </html>
[signup.html]
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>SIGNUP 입니다.</title> </head> <body> <h1>SIGNUP 입니다.</h1> <a href="../index.html">HOME</a> <a href="../notice/notice.html">NOTICE</a> <a href="./login.html">LOGIN</a> <a href="./signup.html">SIGNUP</a> </body> </html>
05. css 연결 방법 4가지
1) 내장 방식
- 웹 문서 안에 사용할 스타일을 정리하는 방식
- html 문서의 head 영역에 style 작성
- html 문서 내부에 작성하기 때문에 내장 방식 또는 내부 스타일 시트라고 부른다.
- 장점
- 별도로 css 파일을 작성할 필요 없이 내부에서 작성 가능
- 단점
- css 내용이 많아지는 경우 HTML문서 내에서 한번에 처리하기 어렵다.
💡웹 표준 : 프론트엔드 개발 방식에서 HTML, CSS, JS 파일은 구별해서 관리해야 합니다.
2) 링크
- 외부 css 파일을 만들어서 링크
- 스타일 정보를 따로 저장하기 때문에 외부 스타일 시트라고 합니다.
- link 태그를 이용해서 어떤 파일을 가져와서 연결한다
- <link rel="stylesheet" href="경로">
- rel : 외부에서 가져오는 파일과 현재 html문서의 관계 명시
- href : 경로
3) 인라인 방식
- 간단한 스타일 정보를 적용하는 인라인 방식
- 요소의 style 속성에 직접 스타일을 작성하는 방식
- 유지보수 시 악영향을 미칠 수 있어서 권장하지 않는다.
- css 적용 우선 순위에서 문제가 발생할 수 있다.
4) @import 방식
👉🏻css의 @import 규칙으로 css 문서안에 또다른 css 문서를 가져와서 연결한다.[코드예제] main.css
@import url("./sub.css"); p { text-align: center; }
[코드예제] sub.css
p { color: blue; }
[코드예제] CSS 연결 방법
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>CSS</title> <!-- 링크 방식 --> <link rel="stylesheet" href="./css/main.css"> <!-- 내부방식 --> <style> /* p { text-align: center; color: blue; } */ </style> </head> <body> <p>안녕하세요 홍길동입니다.</p> <!-- 인라인 방식 --> <span style="color: deeppink;">인라인 방식</span> <p> 한국스마트정보교육원 </p> </body> </html>
tag : #css #정의 #문법 #경로 #연결방법
Uploaded by N2T