yehey's 공부 노트 \n ο(=•ω＜=)ρ⌒☆

웹 기초 - CSS 본문

웹/웹 기초

웹 기초 - CSS

yehey 2020. 9. 4. 17:08

CSS

: HTML 요소들이 각종 미디어에서 어떻게 보이는 가를 정의하는데 사용되는 스타일 시트 언어

 

CSS

 

CSS - 선택자

: CSS를 적용하고자 하는 HTML 요소를 가리킨다.

 

HTML 요소 선택자

: HTML 요소의 이름을 직접 사용해서 선택 가능

 

HTML 요소 선택자 사용 예시

아이디(ID) 선택자

: CSS 를 적용할 대상으로 특정요소를 선택할 때 사용한다.

: 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 준다.

ID 선택자 사용 예시

HTML 요소 선택자와 ID 선택자의 단점

: HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작한다.

그러나 중복된 아이디를 가지고 '자바 스크립트' 작업을 하게 되면 오류가 발생한다.

 

-> 따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 class 선택자를 사용하는 것이 좋다!

클래스(class) 선택자 

: 특정 집단의 여러 요소를 한번에 선택할 때 사용한다.

class 선택자 사용 예시

그림에서 class 속성 값이 headings인 <h2>와 <h3>요소에는 headings에 입력된 스타일이 적용된다.

<p>요소에는 class를 지정해주지 않았지 때문에

<p>태그에 저장되어 있는 스타일이 기본으로 적용된다.

 

그룹(group) 선택자

: 여러 선택자를 쉼표(,)로 구분하여 연결한다.

: 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만드는 장점이 있다.

그룹 선택자 사용 예시

h1 태그를 갖는 요소에는 color, text-align, background-color 속성이 모두 적용되고

h2 태그를 갖는 요소에는 text-align, background-color 속성이 적용되고

p 태그를 갖는 요소에는 background-color 속성만 적용된다.

 

이처럼 그룹 선택자를 적절히 사용하면 간결하고 깔끔한 코드를 만들 수 있다.

 

CSS 적용 방법

인라인 스타일 (Inline style)

: HTML 요소 내부에 style 속성을 사용해서 CSS를 적용하는 방법

: 해당 요소에만 스타일을 적용할 수 있다.

 

인라인 스타일 사용 예시

 

내부 스타일 시트 (Internal style sheet)

: HTML 문서 내의 <head>태그에 <style>태그를 사용해서 CSS를 적용한다.

: 해당 HTML 문서에만 스타일을 적용할 수 있다.

 

내부 스타일 시트 사용 예시

 

외부 스타일 시트 (External style  sheet)

: 외부에서 스타일 시트 파일(.css)을 작성한다.

: 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있으므로 관리가 용이하다.

: 스타일을 적용할 웹 페이지의 <head> 태그에 <link> 태그를 사용하여 외부 스타일 시트를 포함해야한다.

 

외부 스타일 시트 사용 예시 (외부 스타일 시트를 포함한 웹 페이지)

 

외부 스타일 시트 사용 예시 (스타일 시트 파일 external.css)

 

 

CSS 적용 우선순위

 

CSS 적용 우선순위를 알아보기 위해 위에서 예시를 든 코드들을 모아 하나의 웹 페이지를 만들어 보았다.

 

  • 웹 브라우저 기본 스타일
  • 외부 스타일시트와 내부 스타일 시트를 동시에 사용한 경우
  • 내부 스타일 시트와 인라인 스타일을 동시에 사용한 경우

를 추가해서 실행해 보았다.

 

웹 페이지 소스코드 (ex.html)

 

외부 스타일 시트 (external.css)

 

ex.html 실행화면

 

따라서 CSS 적용 우선순위는 

  1. 인라인 스타일

  2. 내부 스타일 시트

  3. 외부 스타일 시트

  4. 웹 브라우저 기본 스타일

임을 알 수 있다.

 

 

 

 

출처: http://tcpschool.com/css/intro

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

생활코딩 WEB2-CSS https://www.youtube.com/watch?v=Ok0bBJPtgJI&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B

 

'웹 > 웹 기초' 카테고리의 다른 글

HTTP  (0) 2020.09.08
웹 기초 - HTML  (0) 2020.09.03
'웹/웹 기초' Related Articles more
Comments