news, issue 지난 CSS의 링크와 클래스 시작

예전에는 CSS의 선택에 대해서 아주 민감한 문제로 다루었다. 하지만 오늘날 웹 페이지의 스타일을 지정하는데에 자주사용되는 CSS의 id 및 클래스를 공부하고나면 민감한 주제가 아닐 수 있다.

예를 들어 CSS ID는 특정 스타일을 적용해야하는 HTML의 고유 식별자라고 할 수 있다. 내부 및 외부 스타일 시트모두에서 해시#를 사용하며 ID선택은 필수적인 것이 되었다.

아래 코딩을 입력해보고 어떤식으로 구현되는지 확인해보자.

<html>

<head>

<style>

#green {

color: #1d98c9;

}

</style>

</head>

<p> id를 확인해보자. </p>

</body>

</html>

green id는 할당되었기에 html의 head에서 색상과 스타일을 선언받고 표시되는 것이다. id는 즉, 할당하고 선언되는 것을 말하며 클래스 선택하기 이전 단계에 활용하기 좋은 명령어라고 할 수 있다. CSS의 클래스는 동일한 웹 페이지에서 여러 html 코드를 동일한 스타일로 적용할 수 있는 전문 언어이며 논리이다.

내부 및 외부 스타일을 모두 클래스로 지정한다면 클래스는 제목과 본문에서 두 번 사용할 수 있다. 흔히들 ID와 클래스의 차이점을 헷갈려하는데 Id는 쉬운 언어로 고유하지 않고 클래스는 고유값이라 html 전반에 걸쳐서 사용할 수 있다는 것이다. id는 한페이지에 정의하고 사용하는 반면 클래스는 html 전반에 정의하고 사용되는 값이라, 클래스와 id를 헷갈릴 필요는 없다.

이것이 헷갈린다면 주석을 사용하여 코드에 설명을 추가할 수 있다. 모든 개발자는 코드로 설명을 추가해놓고 작업을 진행하게된다. 약 5페이지 미만의 짧은 코딩은 굳이 설명을 추가하지 않아도 다른 사람들이 업무를 파악할 수 있지만 10페이지가 넘어가면 코드에 설명은 필수적으로 포함해야한다. 그렇지 않으면 많은 일거리를 만들게 되는 꼴이다. 군대의 고문관같다고 할까?

마지막으로 의사 클래스에 대해서 알아보겠다. 부정의사와 긍정의사 클래스, 두가지가 가장 큰 의사 클래스 이며 이것의 유형을 선택한 후에 작동시키는것이 올바르다고 할 수 있다. 의사 클래스의 예시를 들어보겠다.

<html>

<head>

<style>

p { color: 777;

}

:not(p) {

color: 888;}

</style>

</head>

<body>

<h2> 어떤식으로 표현이되었는가 확인 </h2>

</body>

</html>

'뉴스' 카테고리의 다른 글

조르나만라 독일의 화가, 또한 그녀는 위대한 예술가 중 한명이다. (0)	2022.12.09
단항식, 다항식 차이점과 문제풀이 방식에 접근해보자 (0)	2022.12.08
border 속석을 시작으로 CSS를 공부해봅시당 (0)	2022.12.06
배치 파일 정보를 응용하는 DOS 명령 프로그래밍 (0)	2022.12.05
웹 사이트 개발과 php의 텍스트 형식 (0)	2022.12.04

HI

news, issue 지난 CSS의 링크와 클래스 시작