본문 바로가기

생활코딩 HTML + CSS + 자바스크립트/자바스크립트 이론11

11 CSS 기초 : 선택자 1. 선택자를 사용 하는 이유 ? 웹 페이지를 구성하는 여러 요소에 효과를 효율적으로 줄 수 있기 때문에 이다. 다음과 같이, id 속성을 사용했을 경우는 어떤 선택자를 사용 해야 할까 ? id 선택자를 사용 하면 된다. id 선택자는 . (마침표) 대신에 #을 사용 하면 된다. 그냥 이렇게 약속 되어 있다. 2. 근데, 여기서, 아래와 같이 변경 해 보자. 위의 이미지를 보면, 한가지 사실을 알 수 있다. 첫번째 span 태그에 둘러쌓여 있는 JavaScript 라는 단어는, class 선택자 에게도 영향을 받고, id 선택자 에게도 영향을 받는다. 3. 클래스는 무언가를 그루핑 한다는 의미를 가지고 있고, 아이디는 어느 한 가지 대상을 식별 한다는 의미를 가지고 있는데, 학교를 예시로 든다면, 반 =.. 2023. 7. 11.
10 CSS 기초 : <style> 태그 1. 09 장에서 style 속성 이라는 HTML 문법을 이용해서, CSS를 웹 페이지에 삽입했다. 하지만, 이렇게 하는 방법보다, 더 효율적인 방법이 존재 한다. 선택자 라는 개념 이다. 2. 태그 란? 어떠한 기능이나 의미가 없는 태그 이며, CSS를 통해서 또는 자바스크립트를 통해서, 어떤 정보를 제어하고 싶을 때 감싸주는 역할을 하는, 무색무취의 태그 이다. 이런식으로 그냥 감싸서 사용 하면 된다. 3. 태그의 특징 ? 태그는 화면 전체를 사용 하기 때문에, 해당 태그를 사용 하면 자동 줄바꿈이 된다. 그런데, 줄바꿈이 되지 않는 무색무취의 태그가 필요 하면 무슨 태그를 사용 하면 될까 ? 4. 태그 태그는 줄바꿈이 되지 않는, 무색무취의 태그 이다. 이미지와 같이, 5개의 span 태그로 둘러쌓.. 2023. 7. 11.
09 CSS 기초 : style 속성 1. 자바스크립트 이론을 다루는 중이기에, 아래의 것들만 알고 있다면, 사용하는데 전혀 문제 없다. 1) 태그 2) style 속성 3) 선택자 (id 선택자 / class 선택자) 2. style 속성 알아보기. 위의 이미지에서, 태그로 둘러쌓여 있는, JavaScript란 무엇인가 ? 를 디자인적으로 바꾸고 싶으면 어떻게 해야할까 ? 바꾸고 싶은 태그에 style 속성을 사용 하면 된다. HTML 사용 설명서에는, 다음과 같이 기술 되어 있다. onclick 안에 자바스크립트 코드가 오는 것처럼, style 속성 안에는 CSS가 온다. JavaScript란 무엇인가 ? 위와 같이, 태그 내부에 style 속성을 사용해서 CSS를 부여하면, 이렇게 CSS가 적용 되게 된다. "color : powder.. 2023. 7. 11.
08 웹 브라우저 제어 1. 위의 이미지와 같이, 해당 웹 페이지에서, night 버튼을 눌렀을 때, day 버튼을 눌렀을 때, 배경색을 검은색으로, 글씨색은 흰색으로, 또는 배경색을 흰색으로, 글씨색은 검은색으로 변경 하고 싶다면 어떻게 해야 할까 ? 버튼을 클릭 했을 때, 태그의 스타일 속성을 바꾸는 방법을 알면 된다. 이는, style에 들어가는 CSS 지식을 조금은 알고 있어야 가능한 부분이기는 하다. 뿐만아니라, 태그를 웹 브라우저에게 알리기 위한, 자바스크립트 문법을 알아야 한다. 만약에, 자바스크립트 문법을 사용 하지 않는다면, 웹 페이지는 항상 정적일 것이다. 왜냐하면, HTML 태그 언어는 정적언어 이기 때문 이다. 한번 화면에 표시되면 자신을 바꿀 수 없는 능력을 가졌기 때문 이다. 하지만, 자바스크립트는 동.. 2023. 7. 10.
07 변수와 대입 연산자 1. 변수 ? 변수란 바뀔 수 있는 값을 의미 한다. 콘솔에서 확인 해보기. 처음에 x + y = 2 였는데, 그 바로 아래에서, 새롭게 x를 변수에 1000 이라는 값을 대입 해주니, x + y = 1001 이 된 모습을 확인 할 수 있다. 이렇게 값이 언제든지 변할 수 있는 수를 변수 라고 한다. 변수 == variable = 는 대입 연산자 이다. 여기서, 숫자 1, 2, 1000, 1001은 상수 라고 지칭 한다. 상수 == constant 2. 변수를 사용 할 때는, 타입을 붙혀 줘야 한다. var 라는 타입을 변수 앞에 적어 주면 된다. var 타입은 장 / 단 점이 존재 하는데, 일단은 var 을 보통 사용 한다고 생각 하면 된다. 2023. 7. 10.
06 데이터 타입 - 문자열과 숫자 1. 자바스크립트에는 여러가지 데이터 타입이 존재 한다. 그중에서, 문자와 숫자 데이터 타입에 대해서 정리 해보려고 한다. 데이터 타입 이란 ? Data Type == 자료형 이라고도 한다. 2. 자바스크립트에는 6개의 데이터 타입이 있고, 객체 (Object) 가 있다. 1) Boolean 2) Null 3) Undefined 4) Number 5) String 6) Symbol and Object 3. 경고창에 숫자 표현 하기. 하지만 숫자를 나타낼 때, 굳이 경고창 (alert) 를 통해 나타낼 필요가 없다. 콘솔창에 이렇게 입력하고, 엔터키를 입력하면 숫자 2가 출력 되는 모습을 볼 수 있다. 4. 숫자를 의미하는 Number 타입. 연산의 개념이 중요 하다. 더하기, 빼기, 곱하기, 나누기가 가.. 2023. 7. 10.
05 HTML과 JS의 만남 : 콘솔 1. 자바스크립트 코드를 실행하는 또 다른 실용적인 방법이 있다. 콘솔 (console) 이다. 2. 지금 까지는, 자바스크립트 코드를 실행 하기 위해, 웹 페이지, 즉, 파일을 만들었다. 경우에 따라서는 파일을 만들지 않고, 간단하게 어떤 코드를 실행 해야 하는 상황이 있을것이다. 이럴때, 콘솔을 활용 하면 좋다. 3. 위와 같이, 문자를 쓸 수도 있고, 계산도 가능 하다. 또한 아래와 같이, 자바스크립트 언어를 사용 할 수 있다. 앞에서 배운 alert 기능 이다. 안에 들어가 있는 문자의 길이를 한번에 알림 해주는 코드 이다. 결과로 426 을 바로 확인 할 수 있다. 즉, 콘솔을 이용하면 자바스크립트 코드를 즉석에서 실행할 수 있다. 4. 뿐만아니라, 이 콘솔창에서 실행하는 자바스크립트 코드는 내.. 2023. 7. 2.
04 HTML과 JS의 만남 : 이벤트 1. 이벤트 란? 자바스크립트가 사용자와 상호작용 하는데 핵심적인 역할을 한다. 이벤트 == event. 말 그대로, 어떤 사건이 일어났을 때, 사용자와 상호작용이 되는 ~ 2. 예시) 태그를 사용해서, 이 태그의 type을 button으로 지정하면, 버튼 모양으로 된다. 그리고, 버튼에 글자를 넣고 싶으면, value 라는 속성을 사용 하면 된다. 3. 여기서, 이제 이 버튼을 클릭했을 때, 경고창이 뜨도록 하고 싶으면 어떻게 해야할까 ? 경고창은 alert() 라는 기능을 사용 하면 된다. 4. 여기서 짚고 넘어가야할 개념이 있다. 태그 내부에 onclick 이라는 속성을 사용했는데, 이 onclick 이라는 속성은 반드시 속성값으로 자바스크립트 코드가 와야 한다고 HTML 설명서에 명시 되어 있다... 2023. 7. 2.
03 HTML과 JS의 만남 : <script> 태그 1. 자바스크립트는 HTML 위에서 동작 하는 언어 이다. why ? 그냥 자바스크립트는 처음부터 그렇게 시작 했다. 그러면, HTML 이라는 언어에, 완전히 다른 문법을 가진 자바스크립트 코드를 어떻게 넣을 수 있을까 ? 바로, 태그 이다. 2. 웹 브라우저에게 지금부터 HTML에 자바스크립트 코드가 시작 될거야 ~ 라고 알려주는 태그가 태그 이다. 3. 4. 자바스크립트는 동적 언어 이기 때문에, HTML (정적 언어) 언어와 다르다고 했다. 어떻게 다른지 예시를 아래에서 확인해보자. 자바스크립트 에서는 1 + 1 + 1 + 1 + 1 을 연산해서 5로 나타내준 모습이다. 이는, 숫자 1 들을 더한 다음에, 그 값을 출력하는 능력이 있다는 것이다. 반면에, HTML은 연산이 되지 않는다. 그냥, 그렇.. 2023. 7. 2.

티스토리툴바