태그 유형 선택자

o CSS: p { ... }

o 예를 들어 이 HTML 요소를 선택하면: <p>Some text...</p>

o 이 선택자는 이 태그 유형의 모든 HTML 요소를 선택한다.

아이디 선택자

○ CSS: #some-id { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <h1 id="some-id">...</h1>

○ 이 선택자는 이 ID가 있는 요소를 선택한다.(페이지당 한 번만 가능)

클래스 선택자

○ CSS: .some-class { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <h1 class="some-class">...</h1>

○ 이 선택자는 이 클래스가 있는 모든 HTML 요소를 선택한다.

속성 선택기

○ CSS: [src] { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <img src="...">

○ 이 선택자는 이 HTML 속성이 있는 모든 요소를 ​​선택한다.

 범용 선택기

○ CSS: * { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <p>....</p><img ...>

○ 이 선택자는 모든 HTML 요소를 선택한다.(상속을 통하지 않고 모든 HTML 요소를 개별적으로 대상으로 지정하는 것처럼 직접 가능).

 

 그룹화 선택자/선택자 리스트

○ CSS: p, .some-class { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <p>...</p><h2 class="some-class">...</h2>

○ 이 선택자는 해당 목록의 개별 선택자와 일치하는 모든 요소를 ​​선택한다.

결합 선택자

○ CSS: p.some-class { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <p class="some-class">...</p>

○ 이 선택자는 두 조건을 모두 충족하는 모든 요소를 ​​선택한다.(예: 이 예제에서는 "some-class" 클래스가 있는 "<p>" 요소).

의사 선택자

○ CSS: a:hover { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <a>...</a>(사용자가 해당 요소 위로 마우스를 가져갈 때)

○ 이 선택기는 이 "의사 상태"를 충족하는 모든 요소를 ​​선택한다.(즉, 이 예에서 가리키고 있는 모든 링크).

 

728x90

'CSS' 카테고리의 다른 글

미디어 쿼리(Media Queries)  (0) 2024.11.26
CSS 박스 모델  (0) 2024.11.25
CSS 그리드(CSS Grid)  (1) 2024.11.24
CSS 기본  (1) 2024.11.04
CSS란?  (1) 2024.10.31

HTML은 다음과 같은 구조을 기반으로 만들어진다

<body>
ㅡ
<header>
<h1>...</h1>
</header>
ㅡ
<main>
<ol>
<li>...<li>
</ol>
</main>
ㅡ
<footer>
<p1>...</p1>
</footer>
ㅡ
</body>

이러한 구조를 참고하여 웹페이지를 만든다면 유지, 관리에 유리하다.

728x90

'HTML' 카테고리의 다른 글

HTML 문단 나누기  (0) 2024.12.01
웹 폼 (Web Form)  (0) 2024.11.30
HTML 요소(HTML element)  (0) 2024.10.31
HTML 기본  (0) 2024.10.31
HTML이란?  (0) 2024.10.30

CSS 색상 설정법

설정 글자의 색을 바꾸고자 할 경우, HTML태그 안에 style=”(원하고자 하는 색상 값)”을 넣어서 색상을 변경할 수 있으며, 더 자세한 설정값을 위해서 16진법을 이용하여 코드를 입력할 수 있다.

16진법을 이용한다면, 모든 색상을 6자리로 표현할 수 있고 2자리씩 세 쌍으로 나눌 수 있는데 이는 각각 빨강, 초록, 파랑 부분을 의미한다.

이 세가지 색상을 이용하여 모든 색상을 조합할 수 있다.

원하고자 하는 색상이 명확할 경우, 구글에서 ‘색상 선택도구’를 검색하여 구글에 내장된 색상 선택도구를 이용할 수 있으며 vs코드에 색상코드 위로 마우스 커서를 이동하면 내장된 색상 선택도구 창이 열려 색상을 선택하며 코드로 표현될 수 있다.

또한, 코드로 표현하는 것이 아닌 RGB로 표현하는 등의 다양한 표현방법이 존재한다.

 

글로벌 CSS 스타일의 사용

위의 사용 방식은 하나하나 적용하게 되는 ‘인라인 스타일’이라고 불리며

실무에서 웹페이지를 만들게 될 때, 수백개 이상의 코드를 사용해야 하므로 이는 굉장히 가시성이 낮아지며 일률이 떨어진다. 그러므로 필요 부분에 일괄적으로 사용할 수 있는 ‘글로벌 CSS 스타일’을 사용하면 여러 요소에 개별적으로 스타일을 적용 할 필요가 없다.

이는, <style> 요소를 이용할 수 있으며 CSS규칙을 따라야 한다.

예를 들어,

<style>

    p { font-family: sans-serif;
    
    text-align: center;
    
     color: rgb(50, 50, 50);
    }
    </style>

와 같이 나타낼 수 있으며

‘p’는 모든 ‘p’요소에 해당하는 부분에 대해 스타일을 설정 하였고 중괄호 안에 있는 내용은 해당 요소에 대한 스타일 설정 내용이며, 스타일 설정마다 ‘세미콜론(;)’으로 지정을 끝내야 한다.

이러한 요소는 웹페이지에 영향을 끼치지만 웹페이지 상에 나타나지 않는데, 이를 ‘메타 정보’라 한다.

실무에서는 이러한 HTML 문서 구조를 일정한 규칙에 의해 완성되는데

예를 들면,

 

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        
    </body>
</html>

와 같이 나타나며, 이를 설명하자면

맨 위 부분에는 <!DOCTYPE html> 이라는 요소를 입력하며, 이는 html의 버전을 알려주는 요소이다.

<head> 섹션과 <body> 섹션으로 나누어지며 이는 메타 데이터와 시각적 데이터를 구분하기 위함이다.

<head> 섹션에서는 메타데이터 부분을 담당하며

<body> 섹션에서는 웹페이지의 콘텐츠 부분을 담당한다

<head> 요소와 <body> 요소는 <html> 요소로 감싸져 있어야 한다.

 

 또한, <title> 요소를 <head> 요소 안에 추가할 수 있는데 이는 페이지 자체에 표시되지 않고 탭과 검색 엔진 결과에 표시된다.

 

728x90

'CSS' 카테고리의 다른 글

미디어 쿼리(Media Queries)  (0) 2024.11.26
CSS 박스 모델  (0) 2024.11.25
CSS 그리드(CSS Grid)  (1) 2024.11.24
CSS 선택자  (1) 2024.11.13
CSS란?  (1) 2024.10.31

티스토리툴바