데이터타입 – 문자열과 숫자 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. JS data type JavaScript의 타입과 자료구조 – JavaScript | MDNMDN 해당 페이지의 설명에 따르면 … JavaScript의 타입 JavaScript 언어의 타입은 원시 값과 객체로 나뉩니다. 자바스크립트의 자료형은 7개의 원시값과 객체로 정의할 수 있다. 요약해서 표로 정리해 보았다. 자료형 설명 Boolean Boolean 타입은 … 더 읽기
수업의 목적 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. JavaScript CSS로 아름다운 웹 페이지에 대한 욕구가 충족되기 시작했다. 그러자 사용자들이 동적으로 상호작용할 수 있는 웹 페이지를 원하기 시작했다. 그래서 자바스크립트라는 기술이 태어났다. 기존의 웹 페이지는 화면에 출력되면 자기 자신을 변화시킬 수 없었다. 하지만 자바스크립트는 HTML을 제어하여 사용자와 상호작용할 수 있다. 그런 면에서 … 더 읽기
반응형 디자인 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 반응형 웹 PC든 스마트폰이든 태블릿이든 웹에 접속할 수 있는 하드웨어가 다양해졌다. 그렇기에 웹은 다양한 사이즈와 비율을 가진 하드웨어에 대응하는 웹 페이지를 만들어야 했다. 그런 맥락에서 탄생한 것이 바로 반응형 웹 디자인이다. 반응형 웹 디자인(responsive web)이란 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 … 더 읽기
박스모델 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 박스 모델 적용 위의 이미지와 같이 칸으로 나눠진 웹 페이지를 만들어 보자. 가로줄을 긋기 가로줄을 긋는다. 덤으로 h1 태그의 글자 크기와 정렬 위치를 변경한다. 개발자 도구를 이용해서 h1 태그의 디테일을 수정한다. (우클릭→ ‘검사’ 클릭) margin을 없애고 padding 20px을 추가한다. 세로줄 긋기 ul 태그는 block … 더 읽기
박스모델 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 1. 박스 모델이란? 박스 모델이란 개념이 있다. 직관적으로 이해하기 위해서 구글에 검색해 이미지를 살펴보자. 구글에 박스 모델이라고 검색하면 아래와 같은 결과를 얻을 수 있다. 박스 모델에 대한 사전적 정의를 찾아보면 아래와 같은 대답을 얻을 수 있다. In CSS, the term “box model” is used … 더 읽기
CSS 속성을 스스로 알아내는 방법 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 1. Property 프로퍼티란 CSS에서 적용할 효과의 종류를 뜻하는 용어다. 모든 프로퍼티를 외워서 사용하기는 어렵고 비효율적이니깐 검색해서 사용하는 법을 배워야 한다. 검색창에 “css ??? property”라고 입력하면 대부분 적절한 프로퍼티를 추천해 줄 것이다. 가. 예시 : 글자 크기 구글에 “css text size … 더 읽기
CSS 등장 이전의 상황 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. CSS 소개 CSS(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)다. HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명 style.css이다. 출처 … 더 읽기
부록 : 코드의 힘 – 동영상 삽입 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 동영상 넣기 유튜브 영상을 추가하고자 한다면… 영상 하단에 공유 버튼을 누른다. 퍼가기(혹은 소스)를 누른다. 이제 HTML 태그로 된 코드를 원하는 단락에 복사해서 붙여 넣으면 된다. 그 외 강의에는 동영상을 넣는 것 이외에도 다른 기능을 소개한다. 3가지 강의 내용은 … 더 읽기
인터넷에서 웹이 동작하는 기본적인 원리 인터넷이 동작하려면 최소 2대의 컴퓨터가 필요하다. 역할에 따라서 서버와 클라이언트로 부른다. 따라서 웹이 인터넷에서 동작하려면 웹 클라이언트와 웹 서버가 필요하다. 인터넷에서 웹이 동작하는 과정을 살펴보자. 이미지 출처 : https://youtu.be/yBPyzaccbkc 웹 서버를 운영하는 하는 방법은 크게 2가지다. 우리는 두가지 방법을 모두 해보자. 웹 호스팅 (깃허브 페이지) 웹 호스팅은 웹 서버를 직접 … 더 읽기
HTML 태그의 제왕 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. a tag 지금의 웹을 만든 중요한 태그가 있다. 웹과 웹이 서로 연결하는 <a> 태그가 그것이다. href : Hypertext + reference 자주 쓰는 형식은…. 출처를 표시하기 위해서 나무위키로 링크를 만들어보자. 웹 페이지 완성하기 강의에서는 위와 같이 링크를 연결한다. 나는 참고해서 링크를 구성하자. … 더 읽기
