코딩스토리

WEB2 - JavaScript _ CSS 기초 본문

Web/HTML & CSS

WEB2 - JavaScript _ CSS 기초

kimtaehyun98 2021. 1. 9. 03:05

# 이 글은 생활코딩 Web2-JavaScript를 바탕으로 작성한 내용입니다.

 

 

style 태그

 

<h2 style = "color:powderblue; background-color:black">JavaScript</h2>

 

위와 같은 코드를 통해 h2 태그 안의 JavaScript를 다음과 같이 변화시킬 수 있다.

JavaScript

 

 

 

div & span 태그

 

내가 어떠한 문장에 CSS를 입히고 싶다.

이때 만약 <p>태그 안에 있는 문장이라면 <h2>를 쓸수도 없고 곤란하다.

이럴때 사용하는 태그가 div와 span이다.

 

div는 줄바꿈을 해주기 때문에 span을 사용하는 것이 편하다.

 

<p>This is text for practise <span style = "font-weight:bold;">CSS</span>. I like coding.</p>

 

This is text for practise CSS. I like coding.

 

(실제 HTML 코드를 입력한 것임)

 

 

선택자

 

위와 같은 코드를 통해 글을 작성했다고 가정하자.

그리고 이 긴~ 글 속에 'CSS'란 단어 100개를 검은색으로 썼다고 가정하자.

근데 누군가 나에게 '검은색은 마음에 안드니까 빨간색으로 바꿔!'라고 말했다면,

나는 'CSS'란 단어를 하나 하나 찾아가며 color를 red로 바꿔줘야 할 것이다.

 

이런 미친짓을 해결해주는 CSS 문법이 선택자이다.

 

클래스 선택자 : .js 처럼 하나의 클래스로 묶는 것

id 선택자 : 특정 태그 하나만 지정

태그 선택자 : 태그 전체의 속성을 바꿈

 

<html>
    <head>
        <style>
            .js{                        // 클래스 선택자
                font-weight:bold;
                color : red;
            }
            #first{                     // id 선택자
        	color : green;
            }
            span{                       // 태그 선택자
        	color : blue;
            }
        </style>
    </head>
    <body>
        <p>This is text for <span>practise</span> <span id = "first" class = "js">CSS</span>. I like coding.
        This is text for practise <span class = "js">CSS</span>. I like coding.
        This is text for practise <span class = "js">CSS</span>. I like coding.
        This is text for practise <span class = "js">CSS</span>. I like coding.
        This is text for practise <span class = "js">CSS</span>. I like coding.
        </p>
    </body>
</html>

 

 

 

 

 

 

'Web > HTML & CSS' 카테고리의 다른 글

2. 서버  (3) 2021.01.03
1. HTML  (0) 2021.01.02
'Web/HTML & CSS' Related Articles more
Comments