태그 유형 선택자

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

 

HTML 요소(HTML element)

실제 웹사이트를 만들 때는 제목 외에도 이미지, 부제, 텍스트, 버튼 등이 필요하며 이를 표현하기 위해 HTML 요소를 사용할 수 있는데, 이는 제목, 표제, 일반 텍스트, 이미지, 버튼, 입력란과 같은 콘텐츠를 게시할 수 있으며 이외에도 훨씬 많은 요소들이 있다.

이러한 요소들을 모두 외울 필요는 없으며, ‘MDN Web Docs’ 페이지와 같은 리소스를 사용할 수 있다.
( MDN 요소 링크 참조 : https://developer.mozilla.org/ko/docs/Web/HTML/Element )

 

이러한 HTML 요소는 일반적으로 아래와 같이 구성된다.

 

HTML 요소는 시작 태그와 종료 태그로 구성되며 태그 사이에는 콘텐츠를 입력한다.

  1. 여는 태그 (Opening tag): 요소의 이름으로 구성되며, 꺾쇠괄호로 감싸진다.
    이는 요소가 시작되는 부분을나타내며, 위의 이미지는 문단이 시작되는 위치를 나타낸다.
  2. 닫는 태그 (Closing tag): 이는 요소의 여는태그와 같지만, 요소의 이름 앞에 슬래시가 포함되며, 이는 요소의 끝을 나타낸다.
    이는 요소가 끝나는 부분을 나타내며, 위의 이미지는 문단이 끝나는 위치를 나타낸다.
  3.  
  4. 콘텐츠 (Content): 이것은 요소 안의 내용(content)이다.
  5. 요소 (Element): 요소는 여는 태그와 닫는 태그, 그리고 콘텐츠로 이루어진다.

 

출처 : https://developer.mozilla.org/en-US/docs/Web/HTML

728x90

'HTML' 카테고리의 다른 글

HTML 문단 나누기  (0) 2024.12.01
웹 폼 (Web Form)  (0) 2024.11.30
HTML 레이아웃  (0) 2024.11.10
HTML 기본  (0) 2024.10.31
HTML이란?  (0) 2024.10.30

실제 웹사이트를 만들 때는 제목 외에도 이미지, 부제, 텍스트, 버튼 등이 필요하며 HTML 요소로는 제목, 표제, 일반 텍스트, 이미지, 버튼, 입력란과 같은 콘텐츠를 게시할 수 있으며 이외에도 훨씬 많은 요소들이 있다.

 

이러한 요소들을 모두 외울 필요는 없으며, ‘MDN Web Docs’ 페이지와 같은 리소스를 사용할 수 있다.

 

HTML 텍스트에서 단순히 문자만 입력해도 표출이 되긴 하나, 웹 브라우저는 호환성이 높으므로 텍스트의 형태보다는 HTML 요소로 바꿔 콘텐츠에 대한 설명을 추가하면 검색 엔진과 보조 기술을 사용하는 사람들에게 더 많은 의미를 전달할 수 있다.

 

각 HTML 요소는 서로 다른 속성을 지원하며 스타일 속성은 모든 HTML 요소에 적용 할 수 있다.

 

이 때, 속성은 항상 시작 태그에 추가해야 하며 추가하는 속성에 따라 정보를 더하거나 요소의 동작을 변경할 수 있다.

728x90

'HTML' 카테고리의 다른 글

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

티스토리툴바