본문 바로가기

Study/Web

(27)

[JS] 드림코딩 | #2) 콘솔에 출력하기 & script async VS. defer #2. 1. 콘솔에 출력하기(html에 js 포함하기) js를 이용해 콘솔에 Hello World!를 출력해보자. 다른 툴을 이용해도 되지만 요즘 자주 썼던 vsc를 이용했다. 폴더를 만들고 해당 폴더를 vsc에서 연다. 그리고 .js 확장자를 가진 새 파일을 만든다. 필자는 main.js로 파일을 만들었다. console.log('Hello world!'); 을 입력한다. 그리고 같은 폴더에 .html 확장자를 가진 새 파일을 만든다. 필자는 index.html로 파일을 만들었다. 내에 를 입력한 후, 우 클릭에서 Live Server를 연다. 그러면 console 창에 Hello World!가 출력된 것을 알 수 있다. * API: Application Programming Interface webA..

[JS] 드림코딩 | #1) 자바스크립트의 역사, 현재, 미래 #1. [1993년] Mosaic Web Brower 나옴 [1994년] Netscape Navigator 나옴: HTML+CSS로 매우 간단한 브라우저 -> 정적인 브라우저 ---------- Scripting 언어를 추가하자 ---------- [1995년] LiveScript Interpreter(브라우저) -> JavaScript Interpreter(브라우저)로 이름 변경 [1995년] Microsoft에서 Internet Explorer(브라우저) 나옴 [1997년] ECMAScript language specification: 브라우저 마다 다른 구현 사항에 대처(표준화) [2004년] Mozilla에서 Firefox ------------ ECMAScript 표준화를 둘러싼 Mozilla(..

[HTML,CSS] 코코아톡 클론 코딩 | 9일차 | 고급 CSS 효과 + state 고급 CSS 효과에 대해 알아보자. 1. Transition 변화하는 모든 것에 적용된다. 셀렉터가 가장 처음 생겨난 곳에 작성해야 한다. state에 따라 바뀌는 property 갖고 있으면 사용된다. ex. transtition: background-color 10s ease-in-out; transition은 다른 것(Transform)과 결합하여 잘 쓰인다. 스무스한 움직임을 만들 수 있다. 2. Transform 다른 요소의 box를 변형시키지 않고 원하는 요소를 이동시키기 위해서 사용한다. but, 다른 요소는 trans를 알아차리지 못한다. ex. transform: rotateX(deg); // transform: translate; 3. Animation 위의 요소들과 달리 마우스 사용 ..

[HTML, CSS] 셀렉터(selector) 개념에 대해 알아보자 * 출처: poiemaweb 셀렉터 CSS는 HTML 요소의 style을 정의한다. HTML은 CSS의 뼈대이다. CSS가 style을 적용하고자 하는 HTML 요소를 특정하기 위해서 사용되는 것이 바로 셀렉터이다. 셀렉터는 여러 개 동시에 사용할 수 있으며 셀렉터 간에 결합자가 사용된다. 셀렉터의 유형은 다음과 같다. 1. 전체 셀렉터 (Universal Selector) 2. 태그 셀렉터 (Type Selector) 3. ID 셀렉터 (ID Selector) 4. 클래스 셀렉터 (Class Selector) 5. 어트리뷰트 셀렉터 (Attribute Selector) 6. 복합 셀렉터 (Combinator) 7. 가상 클래스 셀렉터 (Pseudo-Class Selector) 8. 가상 요소 셀렉터 (..

[CSS] flex 연습 게임: FLEXBOX FROGGY 두 세 번째 챌린지를 진행하면서 flex 사용이 익숙하지 않아서 애를 많이 먹었다. flex 종류가 하도 많아서 어떤 것들이 있는지 헷갈리고 어떻게 쓰는 건지 잘 와닿지 않았는데 같이 스터디 하고 있는 팀원님이 재밌는 걸 소개해줬다. 바로 flex 성질을 활용한 게임이었다. 개구리의 색에 맞는 연꽃 위에 개구리를 안착시키면 되는 게임이다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 호오 확실히 웹 쪽이라 그런지 기발하고 재미있는 아이디어가 많은 것 같다. 정말 신기했다! 재미있어 보여서 바로 해보았다. 이런 맵 24 단계를 통과하면 되는 게임이다. 호우! 다 통과하면 아래의 사진..

[HTML, CSS] 코코아톡 클론 코딩 | 챌린지 일정 🗓 코코아 챌린지(2주) 진도표 1 주차 월 | Day 01 ✍️ #1.3 ~ #1.7 ✔️ 퀴즈 화 | Day 02 ✍️ #2.0 ~ #2.4 ✔️ 퀴즈 수 | Day 03 ✍️ #2.5. #2.6. #2.9. #2.10 ✔️ 퀴즈 목 | Day 04 ✍️ #2.7. #2.8 ✔️ 코드 챌린지 금 | Day 05 ✍️ #3.0 ~ #3.5 ✔️ 퀴즈 토 | Day 06 ✍️ #3.6 ~ #3.11 ✔️ 코드 챌린지 일 🌴 휴일 2 주차 월 | Day 08 ✍️ #3.12 ~ #3.16 ✔️ 코드 챌린지 화 | Day 09 ✍️ #3.17. #4.0 ~ #4.4 ✔️ 코드 챌린지 수| Day 10 ✍️ #6.0 to #6.5 ✔️ 코드 챌린지 목 | Day 11 ✍️ #6.6 to #6.11 ✔️ 코드 ..

[HTML] 코코아톡 클론 코딩 | 3일차 (2) | HTML 요소 알아보기 HTML에는 다양한 요소가 있다. 요소 내에 다른 요소가 포함되어 쓰이는 경우도 있다. 여러가지의 태그를 한꺼번에 배우고 사용하다 보니 사용한 태그가 어떤 역할인지 헷갈려서 이를 정리하는 글을 작성한다. 요소 이름과 그 중에서 사용해본 요소 몇 개만 나열해보겠다. ■ 1. Main root(메인 루트) ∨ : HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 요소의 후손이어야 합니다. ■ 2. Document metadata(문서 메타데이터) 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진 (en-US), 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있..

[HTML] 코코아톡 클론 코딩 | 3일차 (1) | HTML 문서의 기본 구조와 HTML 요소 구조 ■ html의 기본 구조 HTML 문서는 여러 요소(element)로 구성된다. 상위 요소에 하위 요소가 포함되는 형식으로 구성된다. - : DTD(Document Type Definition, 문서 형식 정의) 선언. 이 문서의 타입이 html이라는 걸 선언한다. - : html 문서의 루트(root) 요소를 정의한다. - : html 문서에 대한 메타데이터를 다룬다. 웹 브라우저에 표시되지 않는다. - : 웹 브라우저에 보여지는 정보를 다룬다. ▷ 메타데이터(metadata) 문자 집합, 스타일, 링크, 스크립트, 문서 제목 등을 정의한다. , , , , , and 등의 메타데이터가 있다. * 출처: TCP school ■ HTML 요소 구조 ▷ 요소(element)란? ' 내용 ' 이 밑줄 친 전체..

이전 1 2 3 4 다음

티스토리툴바