HTML, CSS, JavaScript - 6. CSS의 기본. (CSS)

하쮸·2024년 12월 8일

CSS(Cascading Style Sheets)

HTML_CSS_JavaScript

목록 보기

6/7

CSS는 HTML과 함께 웹 표준의 기본 개념.
- HTML : 텍스트, 이미지, 표와 같은 요소를 웹 문서에 넣어서 뼈대를 만드는 역할.
- CSS : 텍스트, 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당.

1. 웹 문서에 디자인.

미리 약속한 스타일 속성을 입력해서 디자인 함.
웹 문서에서 스타일(style)이란?
- HTML 문서에서 자주 사용하는 글꼴, 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것.

1-1. 스타일을 사용하는 이유.

1. 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있음.

HTML로 웹 사이트의 내용을 나열, CSS로 웹 문서의 디자인을 구성.
- 이것이 웹 표준의 시작.
  - 내용과 디자인이 구분되어 있으면 사이트의 내용을 수정할 때 디자인에 영향을 미치지 않아서 편리함.
  - 반대로 내용은 건들지 않고 스타일 시트를 이용해서 디자인만 바꿔도 색 다른 느낌을 줄 수 있음.

2. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있음.

CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 해당 기기에 맞게 CSS만 바꿔주면 같은 내용을 여러 기기에서 볼 수 있음.
반응 형 웹 디자인이란?
- 사용자가 pc로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법을 말함.

2가지 웹 문서를 따로 만드는 것이 아니라 하나의 웹 문서에서 작동하도록 만드는 것이 바로 스타일의 역할.

2. 스타일과 스타일 시트.

한 문서에서 자주 쓰는 스타일을 모아 놓은 스타일 시트.

2-1. 스타일 형식.

CSS 소스에서 한 줄이 하나의 스타일에 해당.

기본형

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

선택자
- 스타일을 어느 태그에 적용할 것인지 알려주는 것.
중괄호 {}
- 중괄호({}) 사이에는 스타일 정보를 넣음.
- 속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 함.
- 세미콜론(;)으로 구분해서 스타일 규칙을 여러 개 지정할 수 있음.

Ex) <p> 태그에 스타일 적용

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

p : 선택자
text-align : 텍스트 정렬 속성.
color : 글자색 속성.
center, blue : 값.

CSS를 여러 줄로 표기하거나 한 줄로 표기해도 결국 같은 스타일을 나타냄.
- 즉, 위의 예시는 아래의 코드와 같은 스타일임.

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

CSS에서 주석을 표기하려면 /*, */ 사이에 내용을 입력하면 됨.

2-1-1. tip) CSS 소스 경량화.

CSS 소스에 주석을 넣거나 줄 바꿈하는 것은 웹 사이트작성자가 알아보기 쉽도록 하는 것일 뿐 웹 브라우저는 아무런 의미가 없음.
CSS 소스는 네트워크를 이용해 파일로 내려받으므로 되도록이면 파일 크기가 작은 것이 좋음.
- 그래서 소스가 길면 주석, 줄 바꿈, 공백 등을 제거하고 꼭 필요한 정보만 남겨서 파일을 작게 만들어서 사용함.
- 이를 CSS 소스 경량화(minify)라고 함.
  - css minify or css compress를 검색하면 소스 파일 크기를 줄여주는 다양한 툴을 찾아볼 수 있음.

2-2. 스타일 시트.

웹 문서 안에서는 스타일 규칙을 여러 개 사용함.
- 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 함.
스타일 시트의 분류.
- 스타일 시트.
  - 브라우저 기본 스타일 : 웹 브라우저에 기본으로 만들어져 있음.
  - 사용자 스타일 : 사이트 제작자가 만듦.
    - 인라인 스타일.
    - 내부 스타일 시트.
    - 외부 스타일 시트.

2-2-1. 브라우저 기본 스타일.

CSS를 사용하지 않은 웹 문서라 하더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용.
- 이를 브라우저 기본 스타일이라 함.

<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>

<h1>태그를 사용한 제목은 크게 표시, <p>태그를 사용한 본문 텍스트는 제목보다 작게 표시, 제목 텍스트 위쪽, 왼쪽에 약간의 여백.
- 이러한 것들이 전부 브라우저에서 미리 정해 놓은 스타일임.

2-2-2. 인라인 스타일.

간단한 스타일 정보일 경우 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시함.
- 이를 인라인 스타일이라 함.
스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style 속성을 사용해서 style = "속성 : 속성값;" 형태로 스타일을 바꿀 수 있음.

Ex

<p style="color:blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>

2-2-3. 내부 스타일 시트.

웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 함.
스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정해야 하므로 모든 스타일 정보는 <head> 태그 안에 정의하고 <style>, </style>태그 사이에 작성함.

Ex

  <style>
    h1 {      
      padding:10px;
      background-color:#222;
      color:#fff;
    }
  </style>
</head>
<body>
  <h1>레드향</h1>

2-3-4. 외부 스타일 시트.

웹 사이트를 만들 때 대부분 디자인에 일관성이 있도록 같은 스타일을 여러 웹 문서에 사용.
사이트를 제작할 때는 여러 웹 문서에서 사용한 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하는 것이 일반적.
- 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라고 함.
  - *.css라는 파일 확장자를 사용.
  - 스타일을 작성할 때 <style>태그를 사용하지 않음.
  - 웹 문서에 연결해야 스타일이 문서에 적용됨.
  - 연결할 때 사용하는 태그는 <link>태그.

기본형

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

Ex

h1 {      
  padding:10px;
  background-color:#222;
  color:#fff;
}

<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>레드향</h1>

3. CSS 기본 선택자.

스타일 규칙은 태그뿐만 아니라 웹 문서의 어떤 요소에도 적용할 수 있음.
선택자는 웹 문서에서 어느부분에 스타일을 적용할지 알려주는 것.
- 선택자를 사용하는 방법은 미리 약속되어 있음.

3-1. 전체 선택자.

전체 선택자(universal selector)
- 스타일을 문서의 모든 요소에 적용할 때 사용.
- 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용.

기본형

* { 속성: 값; ...}

전체 선택자는 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용함.
- Ex 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이에 여백을 약간 두는 데 이것을 마진(margin), 패딩(padding)이라고 함.
  - 마진(margin)
    - 현재 요소 주변의 여백 공간.
  - 패딩(padding)
    - 콘텐츠와 테두리 사이의 여백 공간.
- 이러한 여백 때문에 깔끔하지 않을 경우 전체 선택자를 이용해서 웹 문서 전체에 마진, 패딩 여백을 0으로 지정할 수 있음.

3-2. 타입 선택자.

타입 선택자(type selector)
- 특정 태그를 사용한 모든 요소에 스타일을 적용함.
타입 선택자를 사용해서 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용됨.
※ 타입 선택자를 태그(tag) 선택자, 요소(element) 선택자라고도 함.
- But W3C 공식 문서에는 type selector로 표기되어 있음.

3-3. 클래스 선택자.

같은 태그라도 일부는 다른 스타일을 사용하고 싶을때, 즉 특정 부분만 선택해서 스타일을 적용하려면 클래스 선택자(class selector)를 사용.
- 클래스 이름을 사용해서 다른 선택자와 구별.
  - 이때 클래스 이름 앞에 .을 반드시 붙여야 함.
- 클래스 이름은 임의로 지정하면 됨.

기본형

.클래스명 { 스타일 규칙 }

클래스 선택자를 사용해서 만든 스타일을 클래스 스타일이라고 함.
- 이미 만들어 놓은 클래스 스타일을 적용할 때는 태그 안에 class="클래스명"처럼 class 속성을 사용해서 지정함.
- 클래스 스타일은 여러 곳에 적용할 수 있음.
요소 하나에 클래스 스타일을 2개 이상 적용할 수도 있음.
- 2개 이상 적용할 때는 공백으로 구분해서 스타일 이름을 적어주면 됨.

  <style>
    p {
      font-style: italic;  /* 이탤릭체 */
    }
    .accent {
      border:1px solid #000;  /* 테두리 */
      padding:5px;  /* 테두리와 내용 사이의 여백 */
    }
    .bg {
      background-color:#ddd;    /* 배경색 */  
    }
  </style>

	(생략)
    
    <h1 class="accent bg">레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>

3-4. id 선택자.

id 선택자(id selector)
- 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용함.
- . 대신 #을 사용한다는 점만 제외하면 스타일을 정의하는 방법은 클래스 선택자와 동일.
- id 스타일을 웹 요소에 적용할 때는 id="아이디명"처럼 사용함.

기본형

#아이디명 { 스타일 규칙 }

클래스 선택자와 id 선택자의 가장 큰 차이점.
- 클래스 선택자 : 문서에서 여러 번 적용할 수 있음.
- id 선택자 : 문서에서 한 번만 적용할 수 있음.
id 선택자는 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용함.

  <style>
    #container {
      width:500px;  /* 너비 */
      margin:10px auto;  /* 바깥 여백 */
      padding:10px;  /* 테두리와 내용 사이 여백 */ 
      border:1px solid #000;  /* 테두리 */
    }    
  </style>
(생략)
  <div id="container">
    <h1>레드향</h1>

3-5. 그룹 선택자.

여러 선택자에서 같은 스타일 규칙을 사용하는 경우 ,로 구분해서 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의 하면 됨.

기본형

선택자1, 선택자2 { 스타일 규칙 }

h1 {
	text-align: center;
}
p {
	text-align: center;
}

	/* 위의 코드를 아래처럼. */

h1, p {
	text-align: center;
}

4. 캐스케이딩 스타일 시트.

스타일 시트는 CSS라는 명칭으로 더 잘 알려져 있음
CSS와 스타일 시트의 차이점.
- CSS = 캐스케이딩(cascading) + 스타일 시트

4-1. 캐스케이딩의 의미.

CSS에서 C는 캐스케이딩(cascading)의 줄임말.
- 스타일 시트에서는 우선순위가 위 -> 아래, 즉 계단식으로 적용된다는 의미로 사용함.
CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정함.
캐스케이딩은 스타일끼리 충돌하지 않도록 막아주는 중요한 개념.
- 스타일이 충돌하지 않게 하는방법.
  - 스타일 우선순위.
    - 스타일의 규칙의 중요도, 적용 범위에 따라 우선순위가 결정.
    - 우선순위에 따라 위 -> 아래로 스타일을 적용함.
  - 스타일 상속.
    - 태그의 포함 관계에 따라 부모 요소의 스타일 -> 자식 요소로, 위 -> 아래로 전달.

4-1-1. 스타일 우선순위.

첫 번째 원칙인 스타일 우선순위는 캐스케이딩에서 가장 중요함.
우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙.
1. 얼마나 중요한가?
- 웹 브라우저에 내용을 표시할 때 사용자 스타일, 제작자 스타일, 브라우저 기본 스타일 이렇게 3가지 스타일이 함께 사용됨.
- (우선순위 높음)사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일 (우선순위 낮음)
2. 적용범위는 어디까지인가?
- 중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있음.
- 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아짐.
- (우선순위 높음)!important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일 (우선순위 낮음)
  - !important
    - 어떤 스타일보다 우선 적용하는 스타일.
  - 인라인 스타일
    - 태그 안에 style 속성을 사용해서 해당 태그만 스타일을 적용.
  - id 스타일
    - 지정한 부분에만 적용되는 스타일.
    - 한 문서에 한 번만 적용.
    - 선택자 이름 앞에 # 사용.
  - 클래스 스타일
    - 웹 문서에서 지정한 부분에만 적용되는 스타일.
    - 한 문서에 여러 번 적용.
    - 선택자 이름 앞에 . 사용.
  - 타입 스타일
    - 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용.
3. 소스 코드의 작성 순서는 어떠한가?
- 스타일 시트에서 중요도와 적용 범위가 같다면 스타일을 정의한 소스 순서로 우선순위가 정해짐.
- 소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓰는 것.

<style>
    p {
      color:black;
    } 
    h1 {
      color: brown !important;
    } 
    p {
      color:blue;
    }
  </style>

  <h1 style="color:green">레드향</h1>
  <p style="color:red;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로</p>
  <p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>

4-1-2. 스타일 상속.

웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있음.
- 포함하는 태그를 부모 요소
- 포함된 태그를 자식 요소
스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달.
- 이것을 스타일 상속이라 함.
Ex 문서 구조에서 <body> 태그는 웹 문서에 사용한 모든 태그의 부모 요소.
- <body>태그 스타일에서 글자색 or 글꼴을 지정하면 그 스타일은 웹 문서 전체에 적용할 수 있음.
- 부모 요소의 스타일이 자식 요소에게 그대로 상속되기 때문.

5. 태그 vs 요소

태그 : 태그 자체를 가리킴.
요소 : 태그를 적용한 것을 가리킴.

<p>텍스트 지정</p>

<p>, </p>태그는 태그 자체를 말하는 것.
태그를 포함해 <p>태그를 적용한 '텍스트 지정' 부분을 p 요소라고 함.
- <p> 태그를 적용한 스타일이라는 표현은 태그 자체를 적용하는 스타일이 아니므로 틀린 말임.
- p 요소에 적용하는 스타일로 표현하는 것이 맞는 표현.

하쮸

Every cloud has a silver lining.

이전 포스트

HTML, CSS, JavaScript - 5. 입력 양식 작성하기. (HTML)

다음 포스트

HTML, CSS, JavaScript - 6. CSS의 기본. (CSS)

HTML_CSS_JavaScript

1. 웹 문서에 디자인.

1-1. 스타일을 사용하는 이유.

2. 스타일과 스타일 시트.

2-1. 스타일 형식.

2-1-1. tip) CSS 소스 경량화.

2-2. 스타일 시트.

2-2-1. 브라우저 기본 스타일.

2-2-2. 인라인 스타일.

2-2-3. 내부 스타일 시트.

2-3-4. 외부 스타일 시트.

3. CSS 기본 선택자.

3-1. 전체 선택자.

3-2. 타입 선택자.

3-3. 클래스 선택자.

3-4. id 선택자.

3-5. 그룹 선택자.

4. 캐스케이딩 스타일 시트.

4-1. 캐스케이딩의 의미.

4-1-1. 스타일 우선순위.

4-1-2. 스타일 상속.

5. 태그 vs 요소

HTML, CSS, JavaScript - 5. 입력 양식 작성하기. (HTML)

HTML, CSS, JavaScript - 7. 텍스트를 표현하는 다양한 스타일. (CSS)

0개의 댓글