-
생활코딩의 WEB2 JavaScript - 6~11 (YouTube)카테고리 없음 2020. 11. 25. 22:02
오늘은 생활코딩의 WEB2 JavaScript - 6~11를 보고 공부를 하였습니다.
문자열과 숫자
자바스크립트에는 어떤 형태의 데이터들이 존재하는가를 알아보고 그중 대표적인 문자와 숫자에 대해 알아봅시다.
데이터 타입은 자료형이라고 합니다. 자바스크립트에는 6개의 데이터 타입과 객체가 있습니다. 그중에 문자열과 숫자열에 대해서 알아보겠습니다.
콘솔 창에서 연산식을 입력하고 엔터를 누르면 연산 결과가 출력됩니다. 문자는 ""와 ''를 사용하여 입력할 수 있습니다. 문자열에 대한 여러 가지 기능이 존재합니다. 문자를 처리할 때 사용할 수 있는 명령들은 JavaScript string을 검색하여 찾아볼 수 있습니다.
위 그림을 보면 1+1을 실행시키면 여기서 '1'은 숫자로 인식되어 2가 나오지만 "1+1"과 "1"+"1"을 실행시키면 '1'이 문자열로 인식되어 결과값은 1+1과 11로 나오는 것을 알 수 있습니다.변수와 대입 연산자
변수는 바뀔 수 있는 값입니다. x=1이라는 것을 입력을 했을 때 'x'는 변수 '='는 대입 연산자 '1'은 상수입니다.
어떤 긴 글을 작성하며 중간중간에 자신의 닉네임을 집어넣는다고 해봅시다.
이렇게 작성을 마쳤는데 나중에 닉네임을 바꿨을 경우 하나하나 고칠 수는 없는 노릇입니다.
그래서 닉네임을 변수로 지정하고 작성을 한다면
이렇게 작성할 수 있습니다. 여기서 닉네임을 바꾸고자 한다면 name='dnjawm'에서 예전 닉네임을 지우고 새로운 닉네임을 작성하여 출력하면
이런 식으로 편하게 사용할 수 있습니다.CSS 기초 :style 속성
CSS는 Cascading Style Sheets의 약자로 HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다.
HTML로 문서의 뼈대를 만들면 CSS로 글꼴이나 배경색, 너비와 높이, 위치 등을 지정하거나 웹브라우저, 스크린 크기, 장치에 따라서 화면을 다르게 표시될 수 있도록 지정할 수 있습니다.
위 그림을 보면 <h2 style="color:powderblue">JavaScript</h2> 에서 'style'은 HTML의 문법이고 'color:powderblue'는 CSS의 속성입니다. 즉 'style'이라는 HTML의 문법은 웹브라우저에게 'color:powderblue'가 JavaScript Code라는 것을 알려주며 JavaScript가 'style'태그에 적용되어야 한다는 것을 알려줍니다.
특정 태그를 CSS언어로 디자인하고 싶을 경우 style이라는 속성을 쓰고 CSS의 속성이라는 문법을 사용하면 됩니다.CSS 기초 :style 태그
특정 단어를 CSS로 꾸며주고 싶을 경우 div코드를 사용하면 됩니다. div자체로는 어떠한 기능도 없습니다. 하지만 CSS나 JavaScript를 통해서 제어하고 싶을 경우 div코드는 그것을 감싸주는 역할을 합니다.
div태그
div태그는 기본적으로 h1이나 h2처럼 화면 전체를 사용하기 때문에 줄 바꿈이 되는 태그입니다. 그러면 줄 바꿈을 하지 않고 제어를 하고 싶은 경우 span이라는 태그를 사용하면 됩니다. span이라는 태그는 div와 같은 역할을 하지만 전체를 사용하지 않기 때문에 줄을 바꾸지 않습니다.
span태그 따라서 Develop라는 단어의 색을 바꾸고 싶을 때는 <span style="color:blue;">Develop</span>, 글자를 진하게 만들어 강조하고 싶을 때는 <span style="color:blue;font-weight:bold;">develop</span>를 사용하면 됩니다.
이런 식으로 특정 단어를 꾸밀 수 있습니다.그런데 작성된 모든 Develop이라는 단어를 꾸미고 싶을 때 이 단어가 한두 개만 나온다면 일일이 바꿔도 전혀 문제가 되지 않습니다. 하지만 이 단어가 많을 경우 일일이 바꾸기에는 한계가 있습니다.
그래서 CSS에는 이런 문제를 해결할 수 있는 기능이 있습니다. 그것은 class를 생성하고 그 class를 style태그로 묶는 방식입니다. 이런 식으로 사용하면 class="dev"가 들어 있는 모든 단어를 선택자를 이용하여 간단하게 바꿀 수 있습니다.
<head>에 <style>이 들어옵니다. CSS 기초: 선택자
CSS를 이용하여 여러 요소들을 제어하기 위해서 선택자를 잘 사용해야 합니다. 그래야 우리가 주고 싶은 효과를 효율적으로 활용할 수 있기 때문입니다.
이번에는 Develop의 글자색을 초록색으로 바꿔봅시다.
위에서 본것처럼 .dev에서 .은 class를 의미하는 것이고 #은 id를 의미하는 것입니다.그런데 이미 class로 인해 파란색이 적용되었는데 왜 초록색이 나오는지 의문이 생길 수도 있습니다. 여기서 알아야 할 것은 class는 대상을 그룹화하는 것이고 id는 대상을 식별화 한다는 것입니다. 단순히 글로만 봤을 때 무슨 말인지 잘 이해가 안 갈 수도 있습니다. 그래서 아래 그림을 봅시다.
span, class, id
위 그림을 보면 class는 id보다 포괄적이므로 Develop는 id의 색인 초록색이 나오게 됩니다. 또한 class는 반복될 수 있지만 id는 각 요소마다 한 개씩만 가질 수 있습니다.여기서 span태그를 넣고 빨간색으로 설정해봅시다.
그러면 span이 사용된 모든 단어가 빨간색으로 나오게 됩니다. 하지만 위 span, class, id그림을 보면 span이 가장 포괄적이므로 Develop는 id를 따라 초록색이 나오고 JavaScript는 class를 따라 파란색, React는 span을 따라 빨간색이 나오게 되는 것입니다.