23.03.08 / HTML - CSS 연결 방법과 경로 입력 방법

경로

1) 절대 경로

표기법 : /  ->  root(최상위=프로젝트)를 의미. 어느 파일에 위치해 있어도 root 경로로 이동이 가능.

2) 상대 경로 : 웬만하면 절대 경로 대신 상대 경로 사용하기

출발하는 위치에 따라 경로가 바뀜

표기법 :

./  (생략 가능 - 명확하게 작성하기 위해서 생략하지 말 것) -> 내 주변에서 찾는 것 

./   => 내 폴더에서 나가지 않고 그 안에서 찾는다.

A 폴더의 1 파일과  2 파일 일때  -> 1 파일에서 2 파일을 찾는다 -> ./2 or 2

../ (내 위치에서 상위 폴더로 올라가서 찾는다. / 내가 속해있는 폴더의 위쪽 폴더에서 올라가 찾는다.)

../   => 내 폴더에서 상위 폴더로 빠져나가서 찾는다.

A 폴더의 1 파일과  B폴더의 2 파일 일때  -> A 폴더 1 파일에서 B 폴더의 2 파일을 찾는다.

-> ../B폴더/2

 

---

CSS 연결 방법 4가지

1) 내장 방식

- 웹 문서(html) 안에 사용할 스타일을 정리하는 방식

- html 문서의 head 영역에 style 작성

- html 문서 내부에 작성하기 때문에, 내장 방식 또는 내부 스타일 시트라고 부른다.

- 장점 : 별도로 css 파일을 작성할 필요 없이 내부에서 작성 가능하다.

- 단점 : css 내용이 많아지는 경우, HTML 문서 내에서 한 번에 처리하기 어렵다.

**웹 표준 : 프론트엔드 개발 방식에서 HTML CSS JS 파일은 구별해서 관리해야 한다.

2) 링크 (권장하는 사용 방식)

- 외부 css 파일을 만들고, 링크.

- 스타일 정보를 따로 저장하기 때문에 외부 스타일 시트라고 한다.

- <link rel="stylesheet" href="경로(스타일이 담긴 css 파일의 경로)">

- link 태그를 이용해서 어떤 파일(css파일)을 가져와서 연결

- rel : 외부에서 가져오는 파일과 현재 html 문서의 관계 명시

- href : 경로

3) 인라인 방식

- 간단한 스타일 정보를 적용하는 인라인 방식

- 요소 (태크 + 콘텐츠)의 style 속성에 직접 스타일을 작성하는 방식

- 유지 보수 시 악영향을 미칠 수 있어서 권장하지 않는다.

-css 적용 우선 순위에서 문제가 발생할 수 있다.

4) @import 방식

- css의 @import  규칙으로 css 문서 안에 또 다른 css 문서를 가져와서 연결한다.