본문 바로가기

Home363

[JS] 3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기 자바스크립트 강의 목차 0. 자바스크립트란 무엇인가? 1. Script 태그 (document.write) 2. 자바스크립트 이벤트란 무엇인가? 3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기 4. 데이터 타입 문자열과 숫자 5. 변수와 대입연산자 6. 자바스크립트로 웹브라우저 제어하기 7. 비교연산자, Boolean 데이터타입 8. 자바스크립트 조건문 및 활용법 9. 리팩토링(refactoring) 10. 배열에 대한 이해 11. 반복문에 대하여 12. 배열과 반복문 13. 배열과 반복문의 활용 14. 함수란 무엇이고 왜 필요한가? 15. 함수의 기본사용법, 매개변수, 인자, 리턴 16. 함수의 활용 17. 객체는 왜 필요한가? 18. 객체란 무엇인가?(객체 생성, 추가, 추출방법) 19... 2020. 10. 7.
[JS] 2. 자바스크립트 이벤트란 무엇인가? 자바스크립트 강의 목차 0. 자바스크립트란 무엇인가? 1. Script 태그 (document.write) 2. 자바스크립트 이벤트란 무엇인가? 3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기 4. 데이터 타입 문자열과 숫자 5. 변수와 대입연산자 6. 자바스크립트로 웹브라우저 제어하기 7. 비교연산자, Boolean 데이터타입 8. 자바스크립트 조건문 및 활용법 9. 리팩토링(refactoring) 10. 배열에 대한 이해 11. 반복문에 대하여 12. 배열과 반복문 13. 배열과 반복문의 활용 14. 함수란 무엇이고 왜 필요한가? 15. 함수의 기본사용법, 매개변수, 인자, 리턴 16. 함수의 활용 17. 객체는 왜 필요한가? 18. 객체란 무엇인가?(객체 생성, 추가, 추출방법) 19... 2020. 10. 7.
[JS] 0. 자바스크립트란 무엇인가? 자바스크립트 강의 목차 0. 자바스크립트란 무엇인가? 1. Script 태그 (document.write) 2. 자바스크립트 이벤트란 무엇인가? 3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기 4. 데이터 타입 문자열과 숫자 5. 변수와 대입연산자 6. 자바스크립트로 웹브라우저 제어하기 7. 비교연산자, Boolean 데이터타입 8. 자바스크립트 조건문 및 활용법 9. 리팩토링(refactoring) 10. 배열에 대한 이해 11. 반복문에 대하여 12. 배열과 반복문 13. 배열과 반복문의 활용 14. 함수란 무엇이고 왜 필요한가? 15. 함수의 기본사용법, 매개변수, 인자, 리턴 16. 함수의 활용 17. 객체는 왜 필요한가? 18. 객체란 무엇인가?(객체 생성, 추가, 추출방법) 19... 2020. 10. 7.
[JS]1. Script 태그 (document.write) 자바스크립트 강의 목차 0. 자바스크립트란 무엇인가? 1. Script 태그 (document.write) 2. 자바스크립트 이벤트란 무엇인가? 3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기 4. 데이터 타입 문자열과 숫자 5. 변수와 대입연산자 6. 자바스크립트로 웹브라우저 제어하기 7. 비교연산자, Boolean 데이터타입 8. 자바스크립트 조건문 및 활용법 9. 리팩토링(refactoring) 10. 배열에 대한 이해 11. 반복문에 대하여 12. 배열과 반복문 13. 배열과 반복문의 활용 14. 함수란 무엇이고 왜 필요한가? 15. 함수의 기본사용법, 매개변수, 인자, 리턴 16. 함수의 활용 17. 객체는 왜 필요한가? 18. 객체란 무엇인가?(객체 생성, 추가, 추출방법) 19... 2020. 10. 7.
[CSS] 8. CSS코드의 재사용 CSS 강의목차 1. CSS 시작, 글 색깔 바꿔보기 2. 스타일속성(선택자,정의,속성) 개념정리 3. CSS 속성과 선택자에 대한 이해 4. CSS 박스모델(padding,margin,border,content) 5. CSS 박스모델 실습하기 6. CSS 그리드 기본사용법 및 활용 7. 반응형 웹페이지 만들기(미디어쿼리 @media) 8. CSS코드의 재사용 아래와 같이 작성된 페이지를 동일한 Style을 적용하려고 합니다. 가장 무식한 방법은 style을 똑같이 복사해서 다른문서에 붙여넣는것인데 이렇게 하게 되면 수정이 생길때마다 일일이 수정해야겠죠. 5개면 할만한데 이게 100개, 1000개라면? 죽을맛이겠죠.. 그래서 이 css파일을 별도로 관리하는법에 대해서 배워보겠습니다. 1. style.cs.. 2020. 10. 7.
[CSS] 7. 반응형 웹페이지 만들기(미디어쿼리 @media) CSS 강의목차 1. CSS 시작, 글 색깔 바꿔보기 2. 스타일속성(선택자,정의,속성) 개념정리 3. CSS 속성과 선택자에 대한 이해 4. CSS 박스모델(padding,margin,border,content) 5. CSS 박스모델 실습하기 6. CSS 그리드 기본사용법 및 활용 7. 반응형 웹페이지 만들기(미디어쿼리 @media) 8. CSS코드의 재사용 HTML 삽입 미리보기할 수 없는 소스 이번시간에는 웹페이지가 화면에 따라서 변화하는걸 배워보겠습니다. 우리는 다양한 기기를 통해서 웹페이지를 봅니다. 모두 화면이 다르죠~~ 그래서 지금은 무조건(?) 이런 반응형 웹페이지를 만들어야 합니다. 1. media 쿼리 알아보기 mediaquery.html 파일을 만들고 아래와 같이 코딩해줍니다. 결과는.. 2020. 10. 7.
[CSS] 6. CSS 그리드 기본사용법 및 활용 CSS 강의목차 1. CSS 시작, 글 색깔 바꿔보기 2. 스타일속성(선택자,정의,속성) 개념정리 3. CSS 속성과 선택자에 대한 이해 4. CSS 박스모델(padding,margin,border,content) 5. CSS 박스모델 실습하기 6. CSS 그리드 기본사용법 및 활용 7. 반응형 웹페이지 만들기(미디어쿼리 @media) 8. CSS코드의 재사용 이번시간에는 지난번에 아래에 있는 본문을 목차 오른쪽으로 옮기기 위한 방법중, 그리드라는 기법을 사용해서 활용하는 법에 대해서 배우고 적용해보겠습니다. 먼저 grid.html 파일을 만들어봅시다! 1. div태그로 두 문자 작성하기 위와 같이 태그로 NAVIGATION, ARTICLE를 작성합니다. 태그는 디자인을 위해서 작성하는 태그입니다. 은 .. 2020. 10. 7.
[CSS] 5. CSS 박스모델 실습하기 CSS 강의목차 1. CSS 시작, 글 색깔 바꿔보기 2. 스타일속성(선택자,정의,속성) 개념정리 3. CSS 속성과 선택자에 대한 이해 4. CSS 박스모델(padding,margin,border,content) 5. CSS 박스모델 실습하기 6. CSS 그리드 기본사용법 및 활용 7. 반응형 웹페이지 만들기(미디어쿼리 @media) 8. CSS코드의 재사용 지난번 배운 내용을 바탕으로 아래의 홈페이지처럼 테두리를 만들어보도록 하겠습니다. 1. Web 글씨 아래에 밑줄 긋기 2.html 파일에서 스타일 태그를 아래와 같이 수정합니다. Web이 h1태그에 있으니 이 h1태그속성에 boder-bottom:1px solid gray을 줍니다. 아래에 1px 사이즈로 밑줄을 그어주는데 gray 색깔로 하는뜻입.. 2020. 10. 7.
[CSS] 4. CSS 박스모델(padding,margin,border,content) CSS 강의목차 1. CSS 시작, 글 색깔 바꿔보기 2. 스타일속성(선택자,정의,속성) 개념정리 3. CSS 속성과 선택자에 대한 이해 4. CSS 박스모델(padding,margin,border,content) 5. CSS 박스모델 실습하기 6. CSS 그리드 기본사용법 및 활용 7. 반응형 웹페이지 만들기(미디어쿼리 @media) 8. CSS코드의 재사용 먼저 아래와 같은 웹페이지와 같이 간단한 형태의 디자인을 웹페이지에 적용해보려고 합니다. 이를 위해서 CSS박스모델이 필요한데요. 1. 먼저 box.html의 새파일을 만듭니다. 아래와 같이 기본적인 내용을 입력했습니다. 그리고 적당한 웹페이지를 CSS에 a href태그로 링크를 겁니다. 아래와 같이요 이제 style 태그를 아래와 같이 입력합니다.. 2020. 10. 7.

티스토리툴바