[HTML&CSS] CSS 기본

Gaeon Kim·2022년 5월 1일
0

HTML & CSS

목록 보기
4/4
post-thumbnail

지금까지는 HTML로 웹 페이지의 구성을 만들었다면 이제는 드디어 밋밋하던 웹 페이지를 꾸밀 수 있게 되었다. 지금부터는 만들어 둔 웹 페이지를 CSS(Cascading Style Sheets)를 통해 텍스트의 색, 크기, 이미지의 크기 등을 바꿔가며 보기좋게 디자인 해 볼 것이다!!!


스타일의 형식

선택자{ 스타일 속성 : 속성값; }

선택자 -> 어떤 부분의
스타일 속성 -> 무엇을
속성값 -> 어떻게

=> 즉 어떤 부분의 무엇을 어떻게 바꿀 것인지

예를 들어 밑에 나오는 단락의 글씨를 이텔릭체로, 글자 색은 주황색, 그리고 크기는 25px로 하고 싶은 경우

<style>
	#mark{
    	font-weight: bold;
        font-size: 25px;
        color: orange;
    }
</style>

이렇게 바뀌게 된다!


스타일 시트를 사용하는 방법

이런 스타일 시트를 사용하는 방법은 3가지가 존재한다.

  1. 내부 스타일 시트

    먼저 웹문서인 html안에 사용할 스타일을 정리하는 방법은 html의 head안에 style 태그를 사용해 작성하는 방법이다.
<!doctype html>
<html>
  <head>
  	<meta charset="utf-8">
    <title> 내부 스타일 시트 </title>
    <style>
    	p{
        	text-align: center;
            font-size: 32px;
            color: blue;
            }
    </style>
  </head>
  <body>
  	<h1> 내부에 스타일 시트를 사용하는 방법 </h1>
    <p> 웹 문서 html의 head안에 style태그를 통해 정의한다</p>
  </body>
</html>
  1. 외부 스타일 시트
    두번째 방법은 외부에 스타일 시트를 작성하는 방법이다. 이렇게 사용하기 위해서는 외부에 작성한 스타일 시트와 html문서를 연결해 주어야 한다. 연결을 위해서는 html의 head안에 link를 태그를 사용한다.
<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">
  1. 인라인 스타일
    마지막 방법은 간단한 스타일 정보에 대해서만 사용할 수 있는 방법으로 스타일 시트를 사용하지 않고 스타일을 적용하는 방법이다. 만약 <h1> 태그에 스타일을 적용하고 싶은 경우 아래와 같이 작성하면 된다.
<h1 style="color:blue"> 여기에 스타일을 적용하고 싶을 떄! </h1>

주요 선택자

선택자에는 크게 3가지 종류가 있다고 보면 된다.

  1. 태그 선택자
    태그 선택자는 특정 태그를 사용한 요소에 스타일을 적용하고 싶은 경우 사용한다.

  2. 클래스 선택자
    클래스 선택자는 특정 클래스에 대해 즉 특정 부분에 대해 스타일을 적용하고 싶은 경우 사용한다. 이때 클래스 앞에 .을 붙여 적용하는 부분이 클래스임을 알려준다. 클래스는 문서 안에서 여러 번 적용이 가능하다.

  3. 아이디 선택자
    아이디 선택자는 특정 아이디에 대해 즉 특정 부분에 대해 스타일을 적용하고 싶은 경우 사용한다. 이때 아이디 앞에 #을 붙여 적용하는 부분이 아이디임을 알려준다. 아이디는 문서 안에서 한 요소에만 한 번만 적용이 가능하다.


    그럼 오늘은 여기까지!

0개의 댓글