CSS(Cascading Style Sheets)

1. CSS 문법

CSS( Cascading Style Sheets)는 웹 페이지의 디자인과 스타일을 정의하는 스타일 시트 언어입니다. HTML이 웹 페이지의 구조를 정의하는 데 사용되는 반면, CSS는 웹 페이지의 시각적인 표현을 조절하는 데 사용됩니다.

✔ HTML 문서 <head> 요소 안에 <style>요소를 사용하여 CSS 문법을 적용합니다.

    <style> 선택자 {속성명: 속성값; 속성명2: 속성값; ... } </style>
    예)   p {text-align(->정렬 속성): center; color: blue;} /* 주석문 */
선택자   속성 속성값

2. CSS를 적용하는 방법

(1) 인라인 스타일
- HTML요소 내부에 style 속성을 사용하여 적용하는 방법
    <p style = " text-align: center; color: blue; " >안녕하세요!</p>
(2) 내부 스타일
- HTML 문서의 <head>~</head> 사이에 <style> </style> 요소를 사용하여 적용하는 방법
    <head>
        <style>
            p {text-align: center; color: blue;}
        </style>
    </head>
(3) 외부 스타일
- 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법. 파일 안에는 html 문법은 제외하고 css 언어만 들어가 있어야 한다.
    <head>
        <link rel = 'stylesheet' href = 'css 파일 경로'>
    </head>

✔ rel
현재 문서와 링크된 문서 사이의 연관 관계를 명시

/* css 파일 예시 ( html 요소인 stlye 태그 없이 작성) */

h2 {font-size: 50px;}

ul {list-style: none;}

li {display: inline-block; margin-right: 50px; font-weight:

bold; color: deeppink;}

3. 선택자

(1) 전체 선택자
- 스타일을 모든 요소에 적용
- * 기호를 사용해서 표현
- 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음
* { 속성명1: 속성값; 속성명2: 속성값; ...} * {color: deepskyblue;}

✔ 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선한다.

✔ 상속의 개념 짚고 넘어가기

부모 요소의 속성값이 자식 요소에게 전달되는 것.
https://www.w3.org/TR/CSS22/propidx.html

> css 상속 여부를 알아볼 수 있는 사이트. 상속이 되는 속성은 부모 요소에 적용하면 자식까지 모두 영향을 받는다.

HTML 구조 확인하기

<html>

<head>

</head>

<body>

<h2>HTML의 구조</h2>

<p>HTML의 <b>구조</b>입니다!</p>

</body>

</html>

<html> 태그를 기준으로 자식은 초록색 상자이고 자손은 자식을 포함한 파랑색 상자이다. 같은 줄에 있는 요소들을 형제라고 한다.(<title> <h2> <p> 형제)

(2) 요소 선택자
- 특정 요소가 쓰인 모든 요소에 스타일을 적용

<style>

h2 {font-size: 50px;}

p {color: deepskyblue;}

</style>

(3) id 선택자
- 웹 문서안의 특정 부분 스타일을 적용
- # 기호를 사용하여 같은 id 속성을 가진 요소에 스타일을 적용

    HTML
    <h2 id = 'hello'> 안녕하세요! </h2>
    <h2> 반갑습니다!</h2>
~~<p id='hello'>또 만나요!</p>~~ id는 중복될 수 없다!!

    CSS
    h2 {font-size: 30px;} /*안녕하세요, 반갑습니다 모두 글자크기 30px 적용*/
    h2#hello {font-size: 20px;} /* 안녕하세요 글자크기 20px 적용 */
    #hello {color: pink;} /* 안녕하세요 글자색상 pink 적용 */

(4) class 선택자
- 특정 집단의 요소를 한번에 스타일을 적용
- . 기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용

    HTML
    <h2 class = 'hello'> 안녕하세요! </h2>
    <h2> 반갑습니다!</h2>
    <p class ='hello'>하이!</p>
    <p>또 만났군요!</p>

    CSS
    h2 {font-size: 20px;} /*안녕하세요, 반갑습니다 모두 글자크기 20px 적용*/
    h2.hello {color:deeppink;} /*안녕하세요 글자 색상 deeppink 적용*/
    .hello {color: deepskyblue;} /*안녕하세요, 하이 글자 색상 deepskyblue 적용*/

(5) 그룹 선택자

- 여러개의 요소를 나열하고 ,(콤마)로 구분하여 스타일을 적용
h2, p {text-align: center;}

(6) 자식 선택자
- 부모의 요소 하위의 자식 요소의 스타일을 적용
body > p {color: deepskyblue;} ul > a {font-size: 30px;}

(7) 자손 선택자
- 조상 요소 하위의 모든 요소의 스타일을 적용
- 자손은 자식을 포함
body p {color: deepskyblue;} ul a {color: deeppink;}

(8) 인접 형제 선택자
- 동일한 부모의 요소를 갖는 자식 요소들의 관계
- !연속된! 동생 요소에 스타일을 적용
h2 + p {color: deepskyblue;} /* h2 뒤에 바로 붙어서 나온 p 요소만 찾아냄! */

(9) 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소에 스타일을 적용
h2 ~ p {color: deeppink;}

<div>

</div>

p + span {color: gold; background-color: deepskyblue;} /*인접 형제 선택자 (여섯째) */

h3 + p {background-color: deeppink;} /*인접 형제 선택자 (둘째) */

h3 ~ p {color: green;} /*일반 형제 선택자 (둘째,다섯째) */

(10) 속성 선택자
- HTML 요소에서 src, href, style, type, id, class ... 등 속성을 선택자로 지정해서 스타일을 적용
- [] 대괄호를 이용. 패턴이 너무 많음
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
    HTML
    <img src= 'apple.png' alt='사과 이미지'>
    <img src= 'banana.png' alt='바나나 이미지'>

    CSS
    [src] {border: 3px solid red;}
    [src='apple.png'] {width: 200px; height: 200px;}

(11) 가상 선택자
- 클래스를 추가할 필요 없이 요소 중에서 순서에 따라 원하는 요소를 선택

HTML

</ul>

CSS

.list > li:first-child {color: deeppink;} /* li요소 중에서 첫번째 해당하는 요소의 스타일을 적용 */

.list > li:nth-child(2) {color: gold;} /* li요소 중에서 n번째 요소의 스타일을 적용 */

.list > li:nth-child(odd) {background-color: greenyellow;} /* li요소 중에서 홀수번째 요소의 스타일을 적용 */

.list > li:nth-child(even) {background-color: black;} /* li요소 중에서 짝수번째 요소의 스타일을 적용 */

.list > li:last-child {color: white;} /* li요소 중에서 마지막 요소의 스타일을 적용 */

(12) 스타일링 링크
    a:link -> 하이퍼링크가 연결되었을 때 선택
    a:visited -> 특정 하이퍼링크를 방문한 적이 있을 때 선택
    a:hover -> 특정 요소에 마우스를 올렸을 때 선택
    a:active -> 특정 요소에 마우스 버튼을 클릭하고 있을 때 선택

a:link {text-decoration: none; color: greenyellow;} /* 링크 클릭한적 없을 때 */

a:visited {text-decoration: none; color: deepskyblue;} /* 링크를 통해 해당 사이트를 방문한적 있을 때 */

a:hover {text-decoration: underline;} /* 링크에 마우스 올렸을 때 */

a:active {text-decoration: underline; color: red;} /* 링크를 클릭하는 동안 */

✔ CSS의 컬러

- 색상 이름으로 표현
    red, yellow, blue, salmon ...
- RGB 색상값으로 표현
rgb(0~255, 0~255, 0~255)
red green blue
rgba(0,0,255,0.5) -> rgba(0~255, 0~255, 0~255, 0~1의 소수)
a= AlPHA(투명도)
- 16진수 색상값으로 표현
    #0000FF -> 파랑 = #00F
두자리씩 R  G  B

'웹 > CSS' 카테고리의 다른 글

CSS 애니메이션/우선순위/변수 (0)	2023.10.16
CSS flex (0)	2023.10.15
CSS 디스플레이, 포지션 (0)	2023.10.15
CSS 텍스트/배경 (0)	2023.10.15

춤추는 고래의 알고리즘 어드벤처!

CSS(Cascading Style Sheets)

1. CSS 문법

2. CSS를 적용하는 방법

3. 선택자

'웹 > CSS' 카테고리의 다른 글

티스토리툴바

CSS(Cascading Style Sheets)

1. CSS 문법

2. CSS를 적용하는 방법

3. 선택자

'웹 > CSS' 카테고리의 다른 글

관련글

티스토리툴바