-
JS 편 - 3일차개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 11. 09:00반응형
3일차
09. CSS 기초: style 속성
- 앞전 CSS 포스팅을 보았다면 내용이 중복되기 때문에 11장까지는 패스하여도 좋다.
- HTML에서 디자인 적으로 바꾸고 싶은 태그가 있다면 style 속성을 쓰면 된다.
- 아래의 코드를 보자.
<h2 style="background-color:coral; color:powderblue">JavaScript</h2>
- JavaScript라는 글에 HTML의 문법인 style 속성(property)을 넣어서 글자색과 배경색을 바꾸었다.
- 이렇게 특정 태그를 CSS 언어로 디자인하고 싶다면, style이라는 속성을 쓰고 그 안에 CSS의 속성이라는 문법을 사용하면 된다.
- 저자 유튜브 강의보기
반응형10. CSS 기초: <style> 태그
- 이전 장에서 CSS를 웹 페이지에 삽입하는 방법으로 style속성이라는 HTML 문법을 이용하는 방법을 확인하였다.
- 좀 더 효율적인 방법으로 선택자라는 것이 있다.
- 어떠한 본문에 JavaScript라는 글자가 중요해보여서 디자인하고 싶다고 가정하자.
- 참고로 어떠한 기능이나 의미가 없는 태그로 <div>, <span> 태그가 있는데 전자는 줄바꿈이 되는 태그이고 후자는 줄바꿈이 되지않는 태그이므로 상황에 맞게 쓰도록 하자.
- 본문의 내용이어서 줄바꿈을 하지 않을 것이기에 <span>태그를 쓸 것이다.
- 만약 이전 장과 같이 style속성을 사용한다고 한다면 몇 개는 가능하겠지만 극단적이도록 1억개라고 가정하면 매우 어렵게 된다.
- 그래서 <style> 태그를 사용하며, 이것은 <style> 태그로 감싼 코드가 CSS 코드라는 것을 알려주는 역할을 한다.
- 그리고 style속성 대신 class를 추가하여 클래스를 선택자로 CSS 코드를 적용하면 다음과 같다.
<!DOCTYPE html> <html> <head> <title>WEB1 - JavaScript</title> <meta charset="utf-8"> <style> .js { font-weight: bold; color: red; } </style> </head> <body> <h1><a href="index.html">WEB</a></h1> <h2 style="background-color:coral; color:powderblue">JavaScript</h2> <p> <span class="js">JavaScript</span>, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.[11] Over 97% of websites use <span class="js">JavaScript</span> on the client side for web page behavior,[12] often incorporating third-party libraries.[13] All major web browsers have a dedicated <span class="js">JavaScript</span> engine to execute the code on users' devices. <span class="js">JavaScript</span> is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[14] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides <span class="js">JavaScript</span> APIs for I/O. <span class="js">JavaScript</span> engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js. Although Java and <span class="js">JavaScript</span> are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design. </p> </body> </html>
- <style>태그와 선택자를 이용해 여러 개의 태그를 한 번에 선택하는 방법을 살펴보았다.
- 저자 유튜브 강의보기
11. CSS 기초: 선택자
- CSS를 이용해 웹 페이지에 있는 여러 요소를 제어하려 할 때 사용하는 선택자를 살펴보자.
- 선택자를 살펴보는 이유는 선택자를 이용해야 웹 페이지를 구성하는 여러 요소에 효과를 효율적으로 줄 수 있기 때문이다.
- 먼저 예제를 보자.
<!DOCTYPE html> <html> <head> <title>WEB1 - JavaScript</title> <meta charset="utf-8"> <style> .js { font-weight: bold; color: red; } #first { color: green; } span { color: blue; } </style> </head> <body> <h1><a href="index.html">WEB</a></h1> <h2 style="background-color:coral; color:powderblue">JavaScript</h2> <p> <span id="first" class="js">JavaScript</span>, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside <span>HTML</span> and <span>CSS</span>.[11] Over 97% of websites use <span class="js">JavaScript</span> on the client side for web page behavior,[12] often incorporating third-party libraries.[13] All major web browsers have a dedicated <span class="js">JavaScript</span> engine to execute the code on users' devices. <span class="js">JavaScript</span> is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[14] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides <span class="js">JavaScript</span> APIs for I/O. <span class="js">JavaScript</span> engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js. Although Java and <span class="js">JavaScript</span> are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design. </p> </body> </html>
- 선택자는 우선순위가 있으며, 위 코드와 같이 span이라는 태그 자체를 선택하면 하위 순위이며, 그 다음 .js라는 클래스(class) 선택자가 중간 순위, #first라는 아이디(id) 선택자가 상위 순위이다.
- 우선순위는 선택자가 선택한 것이 포괄적일수록 순위는 낮아진다.
- 클래스 선택자는 무언가를 그룹핑(grouping)한다는 것이다.
- 아이디 선택자는 어느 한 가지 대상을 식별한다는 뜻으로 HTML 문서에서 중복될 수 없다(작동은 하지만 규칙이다).
- 저자 유튜브 강의보기
12. 제어할 태그 선택하기
- 이전 장까지는 CSS라는 컴퓨터 언어에 대해 살펴보았고 다시 자바스크립트로 돌아와서 최종적인 목표를 달성해보자.
- night 버튼을 누르면 야간모드, day 버튼을 누르면 주간모드로 바뀌는 것이 목표이다.
- 먼저 이해를 돕기 위하여 아래의 그림을 보자.
(왼쪽) 주간모드 (오른쪽) 야간모드 - 위와 같은 결과를 얻기 위해 <input>태그로 버튼을 추가하고 각각 value에 night, day를 입력하여 틀을 만든다.
- 그리고 클릭했을 때 바뀌므로 onclick 속성을 추가하고, 이 이벤트로 <body> 태그에 style 속성을 동적으로, 프로그래밍적으로, 상호작용에 의해 넣으려고 한다.
- 먼저 <body> 태그를 선택하기 위하여 확인해보면 document.querySelector('body');를 사용한다.
- 이것은 이 웹 페이지에 있는 태그 중에서 태그명이 'body'인 태그를 선택하는 선택자이다. 예로 클래스 선택자라면 .클래스명, 아이디 선택자라면 #아이디를 사용한다.
- 이제 <body> 태그에 스타일 속성을 어떻게 자바스크립트로 넣을 수 있는지 알아보자.
- 검색엔진('Javascript element style')으로 찾아보면 '.style'로 사용한다고 되어있다.
- 그리고 style 중에서도 배경색과 글자색을 확인하면, 배경색의 경우 style.backgroundColor(카멜표기법)을 사용하며, 글자색의 경우 style.color를 사용한다.
- 이것을 이용하여 코드를 작성하면 아래와 같다.
<!--3.html--> <!DOCTYPE html> <html> <head> <title>WEB1 - JavaScript</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1><a href="index.html">WEB</a></h1> <input type="button" value="night" onclick=" document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color = 'white'; "> <input type="button" value="day" onclick=" document.querySelector('body').style.backgroundColor = 'white'; document.querySelector('body').style.color = 'black'; "> <div id="grid"> <ol> <li><a href="1.html">HTML</a></li> <li><a href="2.html">CSS</a></li> <li><a href="3.html">JavaScript</a></li> </ol> <div id="article"> <h2>JavaScript</h2> <p> JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.[11] Over 97% of websites use JavaScript on the client side for web page behavior,[12] often incorporating third-party libraries.[13] All major web browsers have a dedicated JavaScript engine to execute the code on users' devices. JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[14] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O. JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js. Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design. </p> </div> </div> </body> </html>
- 자바스크립트로 할 수 있는 가장 중요한 일, 즉 사용자와 상호작용해서 HTML과 CSS를 프로그래밍적으로, 동적으로 변경해서 주간 모드, 야간 모드를 만들 수 있게 되었다.
- 저자 유튜브 강의보기
해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.
반응형'개발 공부 > 생활코딩! HTML+CSS+JavaScript' 카테고리의 다른 글
JS 편 - 5일차 (1) 2025.05.13 JS 편 - 4일차 (1) 2025.05.12 JS 편 - 2일차 (0) 2025.05.10 JS 편 - 1일차 (1) 2025.05.09 CSS 편 - 5일차 (0) 2025.05.08