끵뀐꿩긘의 여러가지

[부스트코스]웹 프로그래밍 7.CSS(1) 본문

부스트코스 - 웹/1. 웹 프로그래밍 기초

[부스트코스]웹 프로그래밍 7.CSS(1)

끵뀐꿩긘 2020. 2. 14. 17:24

CSS


CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있습니다.

초기의 웹은 HTML 하나로 문서의 뼈대도 만들고 꾸미기도 함께 하였지만,
공통적인 디자인을 갖는 문서가 여럿 존재 할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는 등의 번거로움이 존재했습니다.

CSS는 이런 문제를 해결함과 동시 웹페이지의 내용과 스타일(표현)을 분리해주어, 역할 분담도 되는 효과를 가지고 있습니다.

사용법

CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의 차이가 존재합니다.
기술하는 방법은 아래의 3가지가 있습니다.

  1. HTML 태그의 style 속성을 이용 (inline)
  2. <style> 태그를 통해 HTML 문서 내부에 기술 (<style> 태그는 주로 <head>태그 내부에 사용합니다)(internal)
  3. .css 파일로 분리하여 HTML 문서에 연결 (externel)

 

1. inline

HTML태그 안에다가 적용합니다.

다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다.

 

ex)

 

<p style="border:1px solid gray;color:red;font-size:2em;">

 

 

2. internal

style 태그로 지정합니다.

구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다.

별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다.

 

ex)

 

<head>

<style>

p {

font-size : 2em; border:1px solid gray; color: red;

} </style>

</head>

<body>

<div>...</div>

</body>

 

 

3. external

외부파일(.css)로 지정하는 방식입니다.

CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다.

현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 합니다.

internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만듭니다. 

이후에 아래처럼 link태그로 추가하면 됩니다.

<html>

<head>

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

</head>

<body>

<div>

<p>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</p>

</div>

</body>

</html>

 

4. 우선순위 

 

CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다는 점을 잘 기억해야 합니다. inline은 별도의 우선순위를 갖지만, internal 과 external은 우선순위가 동등합니다. 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영됩니다.

주석

/*로 시작하여 */로 끝납니다.

 

 

선택자

CSS는 어떤 태그들에게 스타일 효과를 주는 언어입니다.

그렇다면 어떤 태그에 적용하는지를 정의하는 문법이 필요하게 되는데, 이때의 문법을 선택자 라고 합니다.

 

선택자 {

    속성1: 값1;

    속성2: 값2;

 }

 

CSS는 위 처럼 선택자를 먼저 쓰고 중괄호 {} 안에 속성과 값을 적는 방식으로 이루어져 있습니다.

 

CSS의 선택자는 다음 3개로 이루어져 있습니다.

  • 태그
  • ID
  • CLASS

이 3개의 선택자를 조합하는 방식으로 원하는 태그에 원하는 스타일을 적용시킬 수 있습니다.

 

선언방식에 따른 차이

같은 선택자(selector)라면 나중에 선언한 것이 반영됩니다.

선택자의 표현이 구체적인 것이 있다면 먼저 적용됩니다.

  • body > span (O)
  • span (X)

 

ID > CLASS > ELEMENT 순으로 반영

id가 class보다, class가 element보다 우선 반영됩니다.

 

 

참고: https://www.edwith.org/boostcourse-web/lecture/16674/

 

[LECTURE] 2) 상속과 우선순위 결정 : edwith

들어가기 전에 CSS의 스타일을 적용하는 것에는 여러가지 이유로 몇 가지 규칙이 존재합니다. 상속은 대표적인 CSS 적용 규칙인데 중복된 속성을 매번 적용해야 하는 일을 줄일 수 ... - 부스트코스

www.edwith.org

 

 

https://www.edwith.org/boostcourse-web/lecture/16673/

 

[LECTURE] 2) 상속과 우선순위 결정 : edwith

들어가기 전에 CSS의 스타일을 적용하는 것에는 여러가지 이유로 몇 가지 규칙이 존재합니다. 상속은 대표적인 CSS 적용 규칙인데 중복된 속성을 매번 적용해야 하는 일을 줄일 수 ... - 부스트코스

www.edwith.org

 

https://ofcourse.kr/css-course

 

Redirecting…

 

ofcourse.kr

 

'부스트코스 - 웹 > 1. 웹 프로그래밍 기초' 카테고리의 다른 글

[부스트코스]웹 프로그래밍 9.CSS(3 - 기본스타일 속성)  (0) 2020.02.14
[부스트코스]웹 프로그래밍 8.CSS(2)  (0) 2020.02.14
[부스트코스] - 웹 프로그래밍 6. HTML(2)  (0) 2020.02.06
[부스트코스] 웹 프로그래밍 - 5 .HTML(1)  (0) 2020.02.06
[부스트코스] 웹 프로그래밍 - 4. 웹서버&WAS  (0) 2020.02.05
'부스트코스 - 웹/1. 웹 프로그래밍 기초' Related Articles more
Comments