온풀투데이

[CSS] <style>태그, 스타일 시트, 선택자 사용 본문

TIL

[CSS] <style>태그, 스타일 시트, 선택자 사용

온풀 2020. 8. 29. 22:48

style을 사용하는 이유

  • HTML로는 웹 사이트의 내용을 나열, CSS로는 웹 문서의 디자인을 구성한다는 것이 웹 표준의 시작
  • 내용과 디자인이 구분되어 있기 때문에 사이트의 내용을 수정해야 할 때도 디자인에 전혀 영향을 미치지 않고 내용만 수정 가능하다.
  • 반대로 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꾸어 완전히 다른 느낌의 문서로 만들 수 있다.

 

style 형식

p{text-align:center;} /* 텍스트 단락을 중앙에 정렬 */
  • 'p' : 선택자 / 'text-align' : 스타일 속성 / 'center' : 값

 

css 주석

/* 주석 내용 입력 */

 

내부 스타일 시트

<head>
    <title> ... <title>
    <style>
        body {
        background-color:lightyellow;
        }
    </style>
</head>
  • <head></head> 태그 안에서 스타일 정보를 정의
  • <style></style> 태그 안에 스타일 정보 작성

 

외부 스타일 시트

h1 {
  text-align: center;
}
body {
  background-color: lightyellow;
}
ul {
  font-size: 12px;
}
p {
  font-size: 10px;
}
  • 파일을 '.css' 확장자를 사용하여 저장
  • 외부 스타일 시트에는 스타일 태그 사용하지 않음

 

내부 스타일 시트

<link rel="stylesheet" href="1.css">
  • <head></head> 안에 작성

 

인라인 스타일

<p style="color:green;">우리 사랑으로 헤엄쳐요</p>
  • 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 대상에 직접 표시

 

주요 선택자

1. 전체 선택자 : 모든 요소에 스타일 적용하기

p {
  font-size: 12px; /*글자 크기*/
}
  • 태그{스타일} 형태로 작성

 

2. 클래스 선택자 : 특정 부분에 스타일 적용하기

<style>
.cat {
  color:blue;}
</style>
<h2 class="cat">고양이는 야옹</h2>
<span class="cat">강아지는 멍멍</span> <!--<span>은 문장 단위 태그-->
  • 특정 부분에만 스타일을 적용
  • 클래스 선택자는 태그 이름과 겹쳐서는 안 됨
  • 클래스 이름 앞에는 반드시 마침표(.)를 붙여야 함
  • <span> 태그를 사용하여 텍스트 일부에만 스타일 적용 가능

 

선택자 적용 범위 제한하기

<style>
    h2.poem {
        color:green;
    }
</style>
<h2 class="poem">우리 손을 잡고 헤엄쳐요</h2>

 

둘 이상의 스타일 동시에 적용하기

<style>
    .redtext {
      color: red;
    }
    .boldtext {
      font-weight:bold;
    }
</style>

<h2 class="redtext boldtext">고양이는 귀엽다</h2>
  • 각각의 선택자를 따로 지정한 후 함께 적용하는 것이 가능
  • 공백으로 구분하여 나란히 적기

 

id 선택자

  • 클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용
  • 마침표(.)대신 #기호를 사용한다는 점만 제외하면 클래스 선택자와 사용법이 같음
  • 클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자가 문서 안에서 여러 번 적용할 수 있는 스타일인 반면, id 선택자는 문서 안에서 한 번만 적용할 수 있다.
  • 중복해서 사용할 수 없기 때문에 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스크립트 프로그램에서 웹 요소들을 구별하기 위해 자주 사용한다.

 

그룹 선택자

h1, h2 {
      text-align:center;
}
  • 둘 이상 요소에 같은 스타일 적용 가능

'TIL' 카테고리의 다른 글

[CSS] 가상 클래스와 가상 요소  (0) 2020.11.30
[CSS] CSS 선택자 : 연결 선택자, 속성 선택자  (0) 2020.11.25
[CSS] 캐스케이딩 스타일 시트(css)  (0) 2020.08.29
[TIL] GIT PUSH 에러 해결하기 / "error:failed to push some refs to" 해결 방법  (0) 2020.08.28
[TIL] 원시 웹 만들기 / 깃, 깃허브 만들기, 블로그 만들기  (0) 2020.08.27
'TIL' Related Articles more