본문 바로가기
코딩 공부/CSS

CSS관련, 경로

by 현장 2022. 9. 8.

CSS(Casecading Style Sheet)

정보 전달을 위한 html을 꾸며주는 디자이너의 역할(시각적인 표현 담당하며, 태그를 선택하여 디자인하고 배치)

 

 

selector {
	property : value;
}

/* 주석 처리 */

/* 
	하나의 속성값이 끝나면 세미콜론으로 마침
	세미콜론이 없으면, 브라우저가 인식 불가능, 오류 발생
 */

 

CSS 적용 우선 순위

동일 CSS 속성이 중복 사용시, 어떤 CSS 속성을 우선 적용할지 결정하는 방법

  • !important : 1 억점
  • inline : 1000점
  • ID selector : 100점
  • Class selector : 10점
  • Tag selector : 1점

 

CSS의 4가지 선언 방식

  • 내장 방식
  • 링크
  • 인라인 방식
  • @import 방식

 

1. 내장 방식

HTML 파일의 head사이에 style로 작성하는 방식

→ CSS 내용이 많아지는 경우 HTML애서 처리하기 어려워서 권장 하지 않음

  <head>
    <meta charset="utf-8" />
    <title>LOGIN</title>
    <style>
      ...
    </style>
  </head>

 

2.  링크 방식

HTML 파일의 head 사이에 CSS 파일을 링크

→ 파일을 분리하여 사용하기 위해서 링크 방식을 사용한다.

<link rel="stylesheet" href="path">

/* 
    link태그로 어떤 파일을 가져와 연결 
    rel 속성은 외부에서 가져오는 파일과 현제 HTML의 관계를 나타냄
*/

 

※ JaveScript의 경우 head사이에 script태그를 사용하여 연결

<script src="path"></script>

 

3.  인라인 방식

요소의 style 속성에 직접 스타일을 작성하는 방식

→ CSS의 우선 순위에 문제가 발생할 수 있으므로 사용을 권장하지 않음

<div style="style 입력">내용</div>

 

4. @import 방식

CCS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식

@import url("./fileName.css");
p {
	property: value;
}

선택자

스타일(CSS)를 적용할 대상을 명확히 설정하기 위해서 사용

 

선택자의 종류

  • 기본 선택자
  • 복합 선택자
  • 가상 클래스 선택자
  • 가상 요소 선택자
  • 속성 선택자

 

1. 기본 선택자


1) 전체 선택자

  • 모든 요소 선택
  • 선택자 작성 부분에 * (Asterisk)작성
* {
	property : value;
}

 

2) 태그 선택자

  • HTML에 정의되어 있는 태그 이름을 작성, CSS속성과 값을 작성하는 방식
  • 별도의 기호가 없이 태그 이름만 명시
tag {
	property : value;
}

/* div, p ... etc */

 

3) 아이디 선택자

  • 태그에 id에 값을 작성, 일치 요소 선택
  • id 중복 금지
  • class만큼 사용하지 않지만, 중요한 내용에 이름을 부여
  • 기호 : ' # '
#id_name {
	property : value;
}

 

4) 클래스 선택자

  • 태그의 Class 속성 값을 작성, 일치 요소 선택
  • 선택자를 이용해서 요소를 명확히 선택하기 위함
  • Class 명은 중복 가능
  • 기호 : ' . '
 
.class_name {
	property : value;
}

 

※ 아이디, 클래스 이름 작성시 유의사항

  1. 이름을 숫자또는 특수기호로 시작하면 안됨
  2. 명확한 단어를 사용
  3. 클래스 이름은 소문자로 작성, 중복되면 ' - ' 또는 ' _ '로 구분함
  4. 클래스 이름과 아이디 이름은 대소문자를 구분함

 

 

2. 복합 선택자

 

1) 일치 선택자

두 개의 선택자를 붙여서 사용, 동시에 만족하는 요소를 선택

tag.className /* class or id */ {
	property: value;
}

 

2) 자식선택자

어떤 선택자의 자식 요소를 선택

 

tag > selector {
	property : vlaue;
}

 

3) 하위(후손) 선택자

어떤 선택자의 하위 요소를 선택

 

tag selector { 
	property: value;
}

 

4) 일반 형제 선택자

어떤 선택자의 다음 형제 요소를 하나 선택

selector + tag {
	property: value;
}

 

5) 인접 형제 선택자

어떤 선택자의 다음 형제요소 모두 선택

selector ~ tag {
	property: value;
}

 

3. 가상 클래스 선택자

우리가 어떤 행동을 했을 때, 동작하는 개념 (표기법은 : 가상클래스)

 

동작을 나타내는 가상 클래스

:hover

어떤 선택자에 마우스 커서를 올렸을 경우 선택

.className:hover {
  property: value;
}

 

:active

어떤 선택자를 클릭하는 동안 선택

.classNamer:active {
	property: value;
}

 

:focus

어떤 선택자를 포커스 하는 경우 선택 (input, label, a... etc)

.className:focus {
  property: value;
}

 

특정 요소를 선택하는 가상 클래스

:first-child

어떤 선택자가 형제 요소 중, 첫째인 경우 선택

.className selector:first-child {
  property: value;
}

 

:last-child

어떤 선택자가 형제 요소 중, 마지막인 경우 선택

.className selector:last-child {
  property: value;
}

 

:nth-child(n)

어떤 선택자가 형제 요소 중, n번째 일 경우 선택

.className selector:nth-child(n) {
  property: value;
}

 

:not(selector)

괄호 안에 작성한 선택자가 아닌 요소를 선택 (부정 선택자)

 

.className selector:not(selector) {
  property: value;
}

 

4. 가상 요소 선택자

콜른을 2개(' :: ') 붙이는 것을 권장합니다.

::before

  • 어떤 선택자 요소의 내부 앞부분에 내용을 넣을 수 있다.
  • 필수 속성 (내용이 없어도 무조건 작성) content : ""
.className::before {
	content: "내용"
}

 

::after

  • 어떤 선택자 요소의 내부 뒷부분에 내용을 넣을 수 있다.
  • 필수 속성 (내용이 없어도 무조건 작성) content : ""
.className::after {
	content: "내용"
}

 

5. 속성 선택자

- 표기법 

  •  [속성 이름] : 대괄호 사이에 속성 이름을 명시
  •  [속성="값"] : 대괄호 사이에 속성과 값을 명시
[속성="값"] {
	property: value;
}

/* 또는 */

[속성 이름] {
	property: value;
}

 

캐시 (Cache)

한번 가져온 데이터를 사용자의 컴퓨터 또는 중간 역할을 하는 서버에 저장해 놓은 임시 저장 공간

  → 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근 가능 (처리 속도 향상)

 

출처 : https://ko.wikipedia.org/wiki/%EC%BA%90%EC%8B%9C

 

절대 경로와 상대 경로

출처:https://ododog12.tistory.com/24

경로 (Path)

 파일시스템을 통해 특정 파일에 이르는 경로 예를 들어, 여러 html 파일에 html파일들을 연결하고 이동하기 위해서 경로를 지정

 

경로 지정시 3가지 구분점

1. 절대 경로 ( / )
→ root (최상위) 폴더를 의미, 어느 파일에 있어도 root경로로 이동하기위해 / 입력

2. 현재 내가 있는 위치 ( ./ )
→ 현재 파일 주변에서 찾는 것으로 생략이 가능하다.

3. 내 위치에서 상위 폴더로 가고 싶은 경우 ( ../ )

 

※ 예시

    <a href="/index.html">Home</a> 
    <a href="./login.html">Login page</a> /* './' 생략가능 */
    <a href="signup.html">Signup page</a>
    <a href="../notice/notice.html">Notice page</a>

 

절대 경로

최상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 기입하는 방식

 

상대 경로

현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성한 경로

'코딩 공부 > CSS' 카테고리의 다른 글

[CSS] 요소의 투명도, 글꼴과 문자  (0) 2022.09.15
[CSS] display와 float, Felx  (0) 2022.09.15
[CSS] margin, padding과 박스 사이즈 계산  (0) 2022.09.15
[CSS] 스타일 상속, 넘침 제어-overflow  (0) 2022.09.15
[CSS] 박스 모델, 선  (0) 2022.09.08

관련글

티스토리툴바