WEB-CSS-스타일

스타일 형식

선택자 {속성1: 속성값1; 속성2:속성값2; }

선택자 -> 어느 태그에 스타일을 적용할 것인지 알려줌 속성과 값이 한 쌍을 이루며 세미콜론(;)으로 구분한다.

p {
  text-align : center;
  color : blue;
}

스타일 시트를 사용하지 않고 직접 표시한 경우

style = "속성 : 속성값;"

<h1>hi</h1>
<p style="color: orange;">안녕하세요?</p>

<head> 태그 안에서 정의하며 <style> 태그 사이에 작성한다. 브라우저 화면에 표시하기 전에 결정한다.

<style>
    h1 {
      color: blue;
      background-color: aquamarine;
    }
</style>

스타일을 별도의 파일에 저장해 놓으며 .css 파일 확장자를 사용

외부 스타일 시트 파일에는 <style> 태그를 사용하지 않는다. <link> 태그를 이용해서 파일을 연결시킨다.

<link rel="stylesheet" href="외부 스타일 시트 파일 경로">

<link rel="stylesheet" href="style.css">

h1 {
  background-color: black;
  color: aqua;
}

출처

(고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.