본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.
생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.
www.youtube.com
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은
opentutorials.org
"어떤 문제가 우리 삶에서 중요하고 심각할 수록
그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."
(생활코딩 : Web1 -1 수업소개. 중)
Intro
지금까지 JavaScript의 기초적인 문법을 살펴보았습니다.
데이터 타입들과 변수 및 상수, 그리고 몇가지 연산자가 그것입니다.
다음으로는 자바스크립트를 통해서 할 수 있는 일 중 하나인 웹 브라우저를 제어하는 방법에 대해 알아보고자 합니다.
글에 앞서서 html태그의 style문법은 HTML도 JavaScript도 아닌 CSS 언어를 사용하기로 약속하였습니다.
이 언어의 역할은 '디자인'입니다.
HTML은 한 번 수정되면 바뀔 수 없는 정적인 언어이기 때문에,
웹 디자인을 동적으로 변경하고자 하면 우리는 JavaScript를 통해 CSS 언어를 제어할 줄 알아야 합니다.
앞으로 CSS의 가장 본질적이고 중요한 문법과,
JavaScript를 통해 우리가 제어하는 태그를 선택하는 방법에 대해 배워보고자 합니다.
#0.
이번 강의에서는 CSS 기초에 대하여 학습해보려고 합니다.
사실, 제목을 달리하여 글을 작성해도 되지만,
뒷 수업인 '제어할 태그 선택하기'와 매우 밀접한 관련이 있어서 이렇게 진행하게 되었습니다.
- CSS는 어떤 목적의 언어인가요?
- CSS를 웹페이지에 삽입하는 방법은 무엇인가요?
- style 속성은 무엇인가요?
- 선택자가 무엇인가요?
생활코딩에서 알려주는 이번 수업의 통과 조건을 읽어보면서 수업을 시작하도록 하겠습니다.
#1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1> WEB </h1>
<h2> JavaScript </h2>
"어떤 문제가 우리 삶에서 중요하고 심각할 수록 <br>
그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."<br>
<p><p style="margin-top:45px"><p align ="center">
(생활코딩 : Web1 -1 수업소개. 중)
</p>
<p><p style="margin-top:45px">
JavaScript<br> (edo JS) goi-mailako programazio-lengoaia bat da, ECMAScript espezifikazio estandarrarekin bat datorrena. Paradigma anitzeko lengoaia da, objektuetara zuzenduriko programazioa, programazio inperatiboa eta programazio funtzionala jasaten dituena.avaScript eta Java programazio-lengoaiek hain antzeko izenak eta sintaxiak izateagatik, antzeko lengoaiak direla pentsatzera eraman dezake. Bi lengoaiak sortu ziren 1995. urtean, Sun Microsystems enpresako James Gosling-ek sortu zuen Java eta Netscape Communications enpresako Brendan Eich-ek JavaScript. Javaren hitz erreserbatuak mantendu ziren JavaScript diseinatu zenean eta Java-ren liburutegi estandarrak kontuan hartuz diseinatu ziren JavaScript-enak..
</p>
<p><p style="margin-top:45px">
<ul>
<li>HTML과 JavaScript의 만남</li>
<li>변수와 대입연산자</li>
<li><b>CSS 기초</b></li>
<li>제어할 태그 선택하기</li>
</ul>
</p>
</body>
</html>
실습을 진행하기 위하여 간단한 HTML을 작성하였습니다.
생활코딩 수업에서 작성하시는 코드를 가지고 진행하셔도 무방합니다.
사실 위 코드에는 이미 CSS언어를 사용하였습니다.
HTML시간에 배운 <p>태그의 위쪽 여백을 주기 위한 'style'이 그것입니다.
HTML은 문법인 style을 통해 웹 브라우저에게 디자인이 적용되는 범위를 알려주고,
그 안으로는 디자인을 담당하는 속성(Property)인 CSS언어가 와야 하는 것입니다.
<h2>태그로 감싸여져 있는 JavaScript를 꾸며보기 위하여 style을 적용시켜 보겠습니다.
<h2 style="color:blue"> JavaScript</h2>어떤가요?
이제 CSS언어를 어떻게 사용해야 할지 감이 조금 잡히시나요?
그렇다면, JavaScript에 뒷 배경을 추가해보겠습니다.
그런데 저희가 이 모든 CSS문법을 전부 외워야 할까요?
아닙니다. 저희는 혁명적인 시대에 살고 있기 때문이죠. 저희는 검색을 통해 극복할 수 있습니다.
검색 : CSS background color property
CSS background-color property
CSS background-color Property Example Set the background color for a page: body {background-color: coral;} Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The background-color property sets the background color of an element.
www.w3schools.com
<h2 style="background-color:coral; color:blue"> JavaScript</h2>
#2.
CSS를 웹페이제 삽입하는 방법으로써 속성이라고 하는 HTML 문법을 사용해 보았습니다.
이번 시간에는 조금 더 효율적으로 CSS를 사용해보고자 합니다.
바로 '선택자'가 그것입니다.
특정한 태그로 감싸여 있지 않은 텍스트를 꾸며주고자 할 때, 저희는 어떻게 해야 할까요?
<h>태그를 제목이 아닌 곳에 사용해주는 것은 그다지 좋은 생각은 아닌 것 같습니다.
그렇다면, 아무런 기능도 의미도 없지만 단순히 감쌀 수만 있는 태그를 우리는 찾게 됩니다.
<div>태그와 <span>태그가 바로 그러한 태그들입니다.
<div>JavaScript</div> (edo JS) goi-mailako programazio-lengoaia bat da, ECMAScript espezifikazio estandarrarekin bat datorrena. Paradigma anitzeko lengoaia da, objektuetara zuzenduriko programazioa, programazio inperatiboa eta programazio funtzionala jasaten dituena.avaScript eta Java programazio-lengoaiek hain antzeko izenak eta sintaxiak izateagatik, antzeko lengoaiak direla pentsatzera eraman dezake. Bi lengoaiak sortu ziren 1995. urtean, Sun Microsystems enpresako James Gosling-ek sortu zuen Java eta Netscape Communications enpresako Brendan Eich-ek JavaScript. Javaren hitz erreserbatuak mantendu ziren <span>JavaScript</span> diseinatu zenean eta Java-ren liburutegi estandarrak kontuan hartuz diseinatu ziren JavaScript-enak.. 보시는 바와 같이 <div>는 줄바꿈이 발생하지만 <span>은 줄바꿈이 발생하지 않습니다.
그렇다면 span태그를 이용하여 본문의 JavaScript를 꾸며주도록 하겠습니다.
<span style="font-weight:bold;">JavaScript</span> (edo JS) goi-mailako ...(생략)우리에게 들이닥친 문제를 원하는 방법으로 해결한 것 같습니다.
그런데, 만약 본문에 있는 모든 JavaScript 텍스트에 같은 효과를 주고 싶다면 어떻게 해야 할까요?
모든 JavaScript 텍스트에 같은 효과를 부여해주면 되겠죠!
그런데, 이제 Bold처리를 하는 것이 아니라 색깔을 바꾸고 싶다면 어떻게 해야할까요...?
그리고 우리에게 바꿔야 하는 태그의 가짓 수가 지금처럼 3개, 4개가 아니라 무수히 많은 숫자라면요?
이러한 문제를 해결하기 위해 제공되는 CSS의 기능이 있습니다.
바로 <style>입니다.
<style>은 웹 브라우저에게 css언어가 위치한다는 것을 알려주는 구분자 역할을 수행합니다.
<head>
<meta charset="utf-8">
<style>
.js{
font-weight: bold;
color: red;
}
</style>
</head>style에서 저희는 js라는 클래스를 굵은 처리 그리고 붉은 색상으로 정의하였습니다.
이 때 js등의 클래스 앞에 '.'을 찍도록 약속되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.js{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<h1> WEB </h1>
<h2 style="background-color:coral; color:blue"> JavaScript</h2>
"어떤 문제가 우리 삶에서 중요하고 심각할 수록 <br>
그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."<br>
<p><p style="margin-top:45px"><p align ="center">
(생활코딩 : Web1 -1 수업소개. 중)
</p>
<p><p style="margin-top:45px">
<span class="js">JavaScript</span> (edo JS) goi-mailako programazio-lengoaia bat da, ECMAScript espezifikazio estandarrarekin bat datorrena. Paradigma anitzeko lengoaia da, objektuetara zuzenduriko programazioa, programazio inperatiboa eta programazio funtzionala jasaten dituena.avaScript eta Java programazio-lengoaiek hain antzeko izenak eta sintaxiak izateagatik, antzeko lengoaiak direla pentsatzera eraman dezake. Bi lengoaiak sortu ziren 1995. urtean, Sun Microsystems enpresako James Gosling-ek sortu zuen Java eta Netscape Communications enpresako Brendan Eich-ek <span class="js">JavaScript</span>. Javaren hitz erreserbatuak mantendu ziren <span class="js">JavaScript</span>diseinatu zenean eta Java-ren liburutegi estandarrak kontuan hartuz diseinatu ziren <span class="js">JavaScript</span>-enak..
</p>
<p><p style="margin-top:45px">
<ul>
<li>HTML과 JavaScript의 만남</li>
<li>변수와 대입연산자</li>
<li><b>CSS 기초</b></li>
<li>제어할 태그 선택하기</li>
</ul>
</p>
</body>
</html>
이제 본문의 자바스크립트에 가해진 효과를 바꾸고 싶다면, .js style만 수정하면 될 것입니다.
#3.
이제 CSS를 통하여 웹페이지의 어떠한 요소를 제어하고자 할 때 사용되는 선택자를 사용해보도록 하겠습니다.
본문에 처음으로 등장하는 텍스트를 강조하기 위해서 초록색으로 바꾸어 보고 싶습니다.
어떻게 하면 될까요?
<style>
.js{
font-weight: bold;
color: red;
}
#first{
color: green;
}
</style> <span id="first" class="js">JavaScript</span> (edo JS) ...(생략)이렇게 id값을 부여해줌으로써 실행할 수 있습니다.
id값을 style에서 정의할 때는 ','이 아닌 '#'이 사용됩니다.
그런데 여기서 한 가지 의문점을 느낄 수 있습니다.
첫 'JavaScript'를 확인해보면 first에 의해 green이, js에 의해 bold와 red의 영향을 받고 있습니다.
하지만 결과는 초록색과 bold로 나타났습니다.
왜 그럴까요?
클래스와 id를 되짚어 볼 필요가 있습니다.
클래스는 그루핑, id는 특정한 대상을 식별하는 기능을 합니다.
따라서 클래스라는 속성은 중복되도 무방하지만, id는 한 번만 사용해야 합니다.
물론, 여러번 사용해도 동작은 하겠지만, 규칙에 어긋납니다.
즉, 클래스의 효과중에서 id로 예외처리 함으로써 예외적으로 효과를 줄 수 있습니다.
<style>
.js{
font-weight: bold;
color: red;
}
#first{
color: green;
}
span{
color: blue;
}
</style>style 내에서 앞에 '.'도 '#'도 붙이지 않는다면,
모든 span을 의미하게 됩니다. 지금은 모든 span태그에 글 색상 파란색 효과를 적용한 것입니다.
<li><b><span>CSS 기초</span></b></li>
여기서 첫 JavaScript는 js와 first, span의 영향을 받고 있지만 초록색으로 표시가 되었습니다.
그리고 다른 JavaScript는 js와 span의 영향을 받고 있지만 빨간색으로 표시가 되었습니다.
즉 그 우선순위를 가짐에 있어 id값이 최우선적으로 우선순위를 가지고, 그 다음 class 값이 가지게 되는 것입니다.
span{
color: blue;
text-decoration: underline;
}
색 속성이 아닌 밑줄 속성은 서로 영향을 주고 있지 않기 때문에 모든 span 태그에 적용된 것을 확인할 수 있습니다.
이렇듯 아무리 많은 CSS 문법을 알고 있다 하더라도,
어떠한 대상을 식별하여 효과를 적용 할 것인지 선택할 수 없다면 무의미 할 수 밖에 없을 것입니다.
'오픈튜토리얼스 > 생활코딩 : Web1' 카테고리의 다른 글
| [생활코딩|WEB_JavaScript#4] 프로그램, 프로그래밍, 프로그래머 2020.01.29 (0) | 2020.01.29 |
|---|---|
| [생활코딩|WEB_JavaScript#3] CSS 기초, 제어할 태그 선택하기 下 2020.01.22 (1) | 2020.01.22 |
| [생활코딩|WEB_JavaScript#2] 변수와 대입연산자 2020.01.21 (0) | 2020.01.19 |
| [생활코딩|WEB_JavaScript#1] Data Type, 문자열과 숫자 2020.01.19 (0) | 2020.01.19 |
| [생활코딩|WEB_JavaScript#0] HTML과 JavaScript의 만남 2020.01.12 (0) | 2020.01.12 |
최근댓글