본문 바로가기
CSS

CSS - Cascading Style Sheets(1)

red_jh 2024. 5. 31. 18:48
반응형

[CSS]

HTML 이 정보 전달에 중점을 맞추기 위하여 기존의 HTML 에서의 디자인 기능을 분리시켜 새로운 CSS 라는 언어로 재탄생한 것

개별적으로 디자인 적용시켰던 HTML 에 비해 일괄 적용이 가능해져 더 효율적이다.

 

CSS 적용 방식에는 다음과 같이 두 가지 방법이 있다.

 

<head></head> 구역에서 <style></style> 태그 내에 작성

 

<태그 style="SCC:문법"> style 속성을 통해 작성

[selector(선택자)]

CSS 를 태그 내에 작성하는 것을 selector 라고 부른다.

selector 의 기본 문법은 제일 앞에 selector 로 지정할 html 파트를 입력 후 중괄호 { } 내분에 옵션과 값을 콜론 : 으로 구분하고, 하나의 옵션 지정이 끝나면 세미콜론 ; 으로 구분해준다.

 

적용시킬 파트{ 적용 속성 : 속성 값; 적용 속성 : 속성 값;}

 

그리고 선택자의 종류에는 대표적으로 세 가지가 존재한다

 

1. tag 선택자

2. id 선택자

3. class 선택자

<!DOCTYPE html>
<html>
    <head>
        <style>
            h2 { 
                color:blue;
            }
        </style>
    </head>
    <body>
        <h1 style="color:red">hello world</h1>
        <h2>hello world</h2>
    </body>
</html>

 

결과

hello world

hello world

 

( h2 태그에 적용된 CSS 가 웹페이지에선 적용이 되는데 어째서인지 t-story 에선 적용되지 않는다....)

[ tag 선택자]

위에서 보여준 것처럼 태그를 선택하여 CSS 를 적용시키는 것이다.

 

<li> 태그에 일괄 적용 및 밑 줄 생성을 적용시키면서 확인

<!DOCTYPE html>
<html>
    <head>
        <style>
            li {
                color:red;
                text-decoration:underline;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </body>
</html>

 

결과

  • HTML
  • CSS
  • JavaScript

(<li> 태그를 직접 선택하고, text_decoration 옵션을 통해서 밑 줄을 적용시킨 것을 볼 수 있다.)

[ id 선택자]

다음은 id 선택자로 속성 옵션의 id 에 연결 해둔 값을 활용

 

id 선택자는 속성 id 의 값 활용해서 CSS 를 적용시키는 것으로 id 속성에 주어지 값을 샵 # 을 활용해서 적용시키는 것

<!DOCTYPE html>
<html>
	<head>
		<style>
			li {
				color:red;
				text-decoration:underline;
			}
			#select {
				font-size:50px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li id="select">CSS</li>
			<li>JavaScript</li>
		</ul>
	</body>
</html>

 

결과

  • HTML
  • CSS
  • JavaScript

( id 값으로 주어진 select 를 # 을 통해서 지정한 것을 볼 수 있다.)

[ class 선택자]

두 가지 이상을 별도로 선택할 때 위처럼 id 값을 같은 값으로 주어서 적용시키면 가능은 하지만 CSS 문법에 위배되는 것이기 때문에 이를 위해서 class 를 활용한다.

id 로 설정된 것을 샵 # 으로 지정하였다면,

class 로 설정되는 건 점 . 으로 지정한다.

 

위의 <li> 태그 중 HTML 과 JavaScript 부분에 취소선을 적용시키면서 확인해보자

<!DOCTYPE html>
<html>
    <head>
        <style>
            li {
                color:red;
                text-decoration:underline;
            }
            #select {
                font-size:50px;
            }
            .deactive {
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="deactive">HTML</li>
            <li id="select">CSS</li>
            <li class="deactive">JavaScript</li>
        </ul>
    </body>
</html>

 

결과

  • HTML
  • CSS
  • JavaScript

[부모-자식 || 조상-자손 선택자]

위에서 사용했던 세 가지의 선택자를 복합적으로 사용하는 방법

 

조상-자손 선택자

<ul> 태그와 <ol> 태그에 같은 <li> 값을 주어서 확인해보자

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul li {
                color:red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <ol>
            <li>HTML</li>
            <li>CSS
                <ol>
                    <li>selector</li>
                    <li>selector</li>
                </ol>
            </li>
            <li>JavaScript</li>
        </ol>
    </body>
</html>

 

결과

  • HTML
  • CSS
  • JavaScript
  1. HTML
  2. CSS
    1. selector
    2. selector
  3. JavaScript

 

(이건 또 왜 전체 적용에다가 border 는 밑에서 적용시켰는데 위에도 반영이 되는 아이러니한 t-story...  ㅠㅜ 웹사이트 사진 첨부)


style 에 <li> 를 선택해서 적용시킨다면 해당 코드의 모든 <li> 태그에 적용되게 된다. 이 때 <ul> <li> 로 <ul> 태그의 <li> 라고 명시적으로 적어줌으로써 <ul> 태그 부분의 <li> 에만 설정된 것을 확인할 수 있다.

그럼 하단의 코드 같이 <ol> 내부의 <ol> 이 있을 경우는 어떻게 되는지 border 를 적용시키면서 확인해보자.

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul li {
                color:red;
            }
            ol li {
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <ol>
            <li>HTML</li>
            <li>CSS
                <ol>
                    <li>selector</li>
                    <li>selector</li>
                </ol>
            </li>
            <li>JavaScript</li>
        </ol>
    </body>
</html>

 

결과

  • HTML
  • CSS
  • JavaScript
  1. HTML
  2. CSS
    1. selector
    2. selector
  3. JavaScript

어쨌든 border 가 내외부 <ol> 전부에 적용되는 것을 볼 수 있다.

이 때, 부모-자식 선택자를 활용하는데 구분을 나누고자 한다면 id 선택자를 같이 활용하면 된다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul li {
                color:red;
            }
            #lecture>li {
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <ol id="lecture">
            <li>HTML</li>
            <li>CSS
                <ol>
                    <li>selector</li>
                    <li>decoration</li>
                </ol>
            </li>
            <li>JavaScript</li>
        </ol>
    </body>
</html>

 

결과

  • HTML
  • CSS
  • JavaScript
  1. HTML
  2. CSS
    1. selector
    2. decoration
  3. JavaScript

(이 또한 적용이 되질않아 사진 첨부)
적용시킬 <ol> 에 id 값을 설정해주고, 해당 아이디를 샵 # 을 통해 지정 후 직계 자손임을 가리키는 오른쪽 꺽새 > 를 설정해주면 다음과 같이 적용된다.

다음으로 <ul> 과 <ol> 배경색에 같은 색상을 넣고 싶다면 다음과 같이 작성하면된다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul li {
                color:red;
            }
            #lecture>li {
                border:1px solid red;
            }
            ul, ol {
                background-color: powderblue;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <ol id="lecture">
            <li>HTML</li>
            <li>CSS
                <ol>
                    <li>selector</li>
                    <li>decoration</li>
                </ol>
            </li>
            <li>JavaScript</li>
        </ol>
    </body>
</html>

 

결과

  • HTML
  • CSS
  • JavaScript
  1. HTML
  2. CSS
    1. selector
    2. decoration
  3. JavaScript

 

(2024.05.31 기준으로 t-story 에서 작성한 html 들이 하단부 내용이 상단 코드에도 적용되는 버그로 인해 웹페이지와 다른게 같은 값들이 적용되는 문제가 있다)

 

이상 오늘의 CSS 1 note 마무리

반응형

'CSS' 카테고리의 다른 글

CSS - Cascading Style Sheets(2)  (0) 2024.06.01

'CSS' Related Articles

티스토리툴바