css경로 설정 및 스타일시트적용

css경로 스타일시트 설정에 있어 절대경로와 상대경로를 이용해 불러오려는 과정에서의 정의를 해보자면 상대경로라는 것은 말그대로 적용하고자 하는 파일이 있는 위치에서 적용해 줄 파일을 찾아가는 것입니다. 

그림에서 처럼 index.html에서 css를 불러오고자 한다면 폴더 두개를 올라가서 css폴더 안에 있는 style_name.css를 찾아야하기 때문에 ../../를 두번 적어주는 겁니다.

<link rel="stylesheet" href="../../css/style_name.css" /> 

<link rel="stylesheet" href="/css/style_name.css" />

오른쪽 그림처럼 css폴더와 적용해 줄 html이 같은 위치에 있다면 그냥 css/style_name.css로 해주면 적용이 됩니다. 상위폴더로 찾아갈 필요가 없기 때문에 ../가 붙지 않아도 되는 겁니다.

CSS에서 internal style shhet 방식을 통한 내부 스타일시트 방식을 적용시킬때

<style type="text/css">
    .header1 { display : table;
    width : 100%;
    height : 50px;
    color : white; }
</style>

 

에서 .header1 에서 앞에 마침표가 왜붙는지 궁금해 하는 사람이 있습니다.

(.)마침표를 때고 header1 로 클래스를 정하니깐 적용이 안된다는 사람이 있습니다.

.header1 이라는 것은 class header1을 지칭하는 것입니다.

당연히 css의 (.) 마침표를 떼면 적용이 되지 않습니다.

<div class="class_name">

적용글자

</div>

스타일시트가 이런식으로 된 html에서 class_name이라고 class값이 지정되어 있는 div를 선택하기 위해서는 css에서 .class_name { color:red;} 이런식으로 .을 찍고 클래스 이름을 적어야지 class_name이 지명이되어 적용이 됩니다.

비슷한 것으로 #이 있는데 이 표시는 id를 선택할 때만 사용 할 수 있습니다.

<style type="text/css">

#id_name{ 

color:red;}

</style>

<div id="id_name">

적용글자

</div>

참고 - 대부분의 코딩은 테스팅의 경우 아래와 같이 쉬운 경로를 사용하여 코딩하는 것이 편합니다.

<link rel="stylesheet" href="/style_name.css" />

---

---

[Html_css&css3] - html 슬라이딩 소스 참고하세요.

[Html_css&css3] - style css의 하이퍼 링크 활용하기

[Html_css&css3] - 스타일시트 CSS Style margin

[Html_css&css3] - CSS 링크의 color와 background-color

[Html_css&css3] - CSS style 컬러 기본설정

[Html_css&css3] - vertical-align와 text-align CSS 활용하여 정렬하기

[Html_css&css3] - html 순서 및 목록 만들기