[Web/CSS] CSS - 기본 선택자

티스토리 뷰

Web/CSS

[Web/CSS] CSS - 기본 선택자

poopooreum 2024. 4. 21. 21:13

✏️ 전체 요소에 스타일을 적용하는 전체 선택자

스타일을 문서의 모든 요소에 적용할 때 사용하며 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용

<style>
*{
  margin : 0;
}
</style>


// 마진과 패딩
// 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이에 여백을 두는 것

// 태그와 요소
// 태그는 <p></p>와 같이 태그 자체를 칭하고, 요소는 <p>이름</p>와 같은 경우에서 p요소로 칭함

✏️ 특정 요소에 스타일을 적용하는 타입 선택자

특정 태그를 사용한 모든 요소에 스타일을 적용함, 즉 타입 선택자를 사용해 스타일을 지정하면 해당 태그는 모두 적용

<style>
  p{
    color:blue;
  }
</style>

// 이렇게 <head>부분에 작성하게 되면<body> 부분에 있는 모든 p요소의 글자의 색깔이 파란색으로 변함

✏️ 특정 부분에 스타일을 적용하는 클래스 선택자

같은 태그라도 일부는 다른 스타일을 적용시키고 싶을 때, 즉 특정 부분만 선택해서 스타일을 적용할 때 사용

기본형 : .클래스명 {스타일 규칙}

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    p {
      font-style: italic;  /* 이탤릭체 */
    }
    .accent {
      border:1px solid #000;  /* 테두리 */
      padding:5px;  /* 테두리와 내용 사이의 여백 */
    }
    .bg {
      background-color:#ddd;    /* 배경색 */  
    }
  </style>
</head>
<body>
  <div>
    <h1 class="accent bg">안녕하세요</h1>
  </div>
</body>
</html>

✏️ 특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자

클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용

마침표 대신 #을 사용한다는 점을 제외하면 클래스 선택자와 스타일 정의 방법은 같음

차이점으로는 클래스 선택자는 문서에서 여러 번 적용할 수 있지만, id 선택자는 문서에서 한 번만 적용 가능

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    #container {
      width:500px;  /* 너비 */
      margin:10px auto;  /* 바깥 여백 */
      padding:10px;  /* 테두리와 내용 사이 여백 */
      border:1px solid #000;  /* 테두리 */
    }    
  </style>
</head>
<body>
  <div id="container">
    <h1>레드향</h1>
  </div>
</body>
</html>

✏️ 같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자

선택자를 이용하다 보면 여러 선택자에서 같은 규칙을 사용하는 경우가 생기는데, 이럴 때는 콤마를 사용하기

h1,p{
  text-align:center;
}

저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

[Web/CSS] CSS - 글꼴 관련 스타일 (0)	2024.04.22
[Web/CSS] CSS - 복습1 (0)	2024.04.22
[Web/CSS] CSS - 캐스캐이딩 스타일 시트 알아보기 (0)	2024.04.21
[Web/CSS] CSS - 스타일과 스타일 시트 (2)	2024.04.21
[Web/CSS] CSS 소개 및 기본 (0)	2024.04.21

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

푸으름

티스토리 뷰