가상 선택자를 사용하여 Anchor 요소 스타일링

‘Anchor’ 요소를 변경하기 위해 ‘a {}’ 선택자를 이용하며 이는

    a {
        color: rgb(167, 1, 67);
        text-decoration: none;
    }

와 같이 나타날 수 있다.

 

a{} 선택자를 이용할 때, 꺾쇠괄호는 입력하지 않으며 중괄호 안에서 색상, 텍스트의 형태와 마우스 커서의 모양 또한 변경 가능하다.

이러한 속성 선택자 외에도 ‘가상 선택자(pseudo selecter)’를 사용하여 다른 상태일 때의 요소를 선택할 수 있다.

예를 들면,

    a:hover {
        text-decoration: underline;
    }

로 나타낼 수 있으며

이는 앵커 요소에 마우스 커서를 위치했을 때 가상 선택자를 지정하는 규칙이다.

728x90

'CSS' 카테고리의 다른 글

이미지 스타일의 변경  (1) 2024.12.10
텍스트의 크기, 굵기와 글꼴 설정  (0) 2024.12.08
ID 선택자(ID Selectors)  (0) 2024.12.05
CSS코드 저장, 병합  (1) 2024.12.04
CSS 변수 정의법  (1) 2024.12.02

CSS에서 하나의 문단만 변경하고자 할 때 ‘ID 선택자’를 이용하여 단일 요소를 선택할 수 있는데 모든 문자는 소문자료 작성하며 띄어쓰기는 공백 대신에 대시(-)’로 대체하는 표기법을 따라야 한다.

예를 들어,

HTML 코드에서는 다음과 같이 표현한다.

<p id="first-paragraph">이것은 첫 번째 문단입니다.</p>

그리고 CSS 폴더에서 지정한 ID 선택자를 이용하여 다음과 같은 코드를 입력한다.

#first-paragraph {
    color: blue;
    font-size: 18px;
}

이러한 경우에 각 문단에 CSS코드를 입력하지 않아도 ID 선택자로 필요한 경우에 텍스트 정보를 변경할 수 있다.

이러한 ID 선택자는 주요 CSS 선택자중 하나이며 ID는 고유한 이름을 할당해야 한다.

왜냐하면, 다른 요소에 동일한 ID명을 할당하게 되면 충돌이 일어나기 때문이다.

728x90

'CSS' 카테고리의 다른 글

텍스트의 크기, 굵기와 글꼴 설정  (0) 2024.12.08
가상 선택자(Pseudo Selectors)  (0) 2024.12.07
CSS코드 저장, 병합  (1) 2024.12.04
CSS 변수 정의법  (1) 2024.12.02
SVG(Scalable Vector Graphics)  (0) 2024.12.01

여러 파일의 병합

HTML 파일은 콘텐츠, 구조 그리고 메타데이터가 포함된 파일이기 때문에 가장 먼저 요청되며 그 후에 CSS파일 등을 브라우저에서 자동으로 요청하게 된다. 따라서, HTML 파일에 외부 파일을 포함하거나 불러오는 경우 해당 파일의 위치가 지정되어 있다면 페이지가 로드될 때 브라우저가 이러한 추가 파일을 자동으로 요청한다.

 

외부 파일에 CSS코드 저장

하나의 편집기에서 CSS코드와 HTML코드을 한번에 작성할 경우, 굉장히 복잡해질 수 있는데 이는 CSS파일을 따로 저장하여 분리가 가능하다. style 안에 있는 CSS코드를 따로 분리하여 ‘.css’확장자로 저장하면 이는 CSS코드로 인식이 된다.

이러한 파일은 HTML 코드에서 <link> 요소를 사용하여 HTML코드로 불러오기가 가능하며

예를 들면,

<head>
        <link href="link.css" rel="stylesheet">
        <title>name of title</title>
</head>

와 같이 표현 가능하며 <link> 요소는 HTML의 <head> 부분에 위치하여야 한다. 또한, <title> 역시 <head> 내부에 위치하여야 한다.

그러나, <link>로 CSS파일을 연동한다고 해도 자동으로 HTML 파일에 병합되지 않기 때문에 요소 안에 ‘rel=”stylesheet”’ 라는 콘텐츠를 입력하여 해당 요소가 CSS파일 이라는 것을 설명해 주어야 한다.

728x90

'CSS' 카테고리의 다른 글

가상 선택자(Pseudo Selectors)  (0) 2024.12.07
ID 선택자(ID Selectors)  (0) 2024.12.05
CSS 변수 정의법  (1) 2024.12.02
SVG(Scalable Vector Graphics)  (0) 2024.12.01
변환과 전환(Trnaformation & Transitions)  (1) 2024.11.29 
html {
--color-grey-100: rgb(236, 236, 236);

background-color: var(--color-grey=100);
}

와 같이 나타날 수 있으며, 이는 위에서 변수를 선언 하였으므로 CSS가 자동으로 사용자 정의 속성의 기본 값인 grb 코드를 사용하게 된다.

변수를 정의하고자 한다면 계단식 상속 법칙에 따라 적용하고자 하는 부분의 위에 입력해야 한다.

728x90

'CSS' 카테고리의 다른 글

ID 선택자(ID Selectors)  (0) 2024.12.05
CSS코드 저장, 병합  (1) 2024.12.04
SVG(Scalable Vector Graphics)  (0) 2024.12.01
변환과 전환(Trnaformation & Transitions)  (1) 2024.11.29
반응형 사이드바(Side Drawer)  (0) 2024.11.28

SVG(Scalable Vector Graphics)란 차원 백터 그래프를 표현하기 위한 XML 기반의 마크업 언어이며,

이는 브라우저가 랜더링 할 수 있는 확장형 이미지를 텍스트 기반으로 묘사한 것이다.

 

이는 아래와 같은 링크를 참고하여 작성할 수 있다.

 

Heroicons

Heroicons is a collection of MIT open source interface icons for web and app development. Icons are free, no attribution required. Icons by @steveschoger. Website by @username_ZAYDEK.

heroicons.dev

 

Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

heroicons.com

 

728x90

'CSS' 카테고리의 다른 글

CSS코드 저장, 병합  (1) 2024.12.04
CSS 변수 정의법  (1) 2024.12.02
변환과 전환(Trnaformation & Transitions)  (1) 2024.11.29
반응형 사이드바(Side Drawer)  (0) 2024.11.28
반응형 웹 디자인  (0) 2024.11.27

티스토리툴바