-
CSS
2일차 : 혁명적 변화, CSS 속성 알아내는 법
2일차 : 혁명적 변화, CSS 속성 알아내는 법 지난 시간에 CSS가 등장하게 된 배경에 대해 살펴보았습니다. 이번에는 조금 더 구체적으로, CSS를 사용하는 방법에 대해 알아볼 예정입니다. ○ 웹 페이지에서 CSS를 적용하는 두 가지 방법 1. style 태그를 이용 style 태그는 지난 시간에 살짝 살펴보았습니다. 이처럼 을 입력한 후, 속성을 적용시킬 대상 (a) 을 선택하고, 적용시킬 효과 (color=색상;) 를 적어주면 됩니다. a 태그를 달고 있는 모든 곳에 동일한 속성을 한 번에 적용시키는 것이죠. 여러가지 속성을 한꺼번에 변경시킬 때 유용하게 사용할 수 있는 것이 바로 이 스타일 태그입니다. 그렇다면, 이 중에 하나만 변경하고 싶을 때는 어떻게 할까요? 2. style 속성을 이용 바..
-
CSS
1일차 : 수업소개 ~ CSS의 등장
1일차 : 수업소개 ~ CSS의 등장 WEB1 HTML과 INTERNET을 마치고 WEB2 CSS로 넘어왔습니다. ○ CSS란? HTML을 통해 정보를 표현하게 된 사람들은 이제 디자인을 신경쓰게 되었는데요. 사람들은 웹페이지를 아름답게 만들기 위해 두 가지 방법을 생각해 냈습니다. 1. 쉬운 길 : HTML에 디자인에 대한 새로운 태그를 추가 2. 어려운 길 : 디자인을 표현할 수 있는 새로운 언어를 개발 ○ 쉬운 길 CSS가 등장하기 이전에는 1번 쉬운 길인 태그를 통해 문자의 디자인을 변경해 주었습니다. 예를 들어, font 태그를 이용하면 문자의 색을 변경할 수 있습니다. 위처럼 문구 이렇게 설정하여 색을 변경하면 됩니다. 웹이 태어난 직후에 HTML에는 이처럼 디자인을 위한 코드가 대거 추가됩니..
-
HTML&INTERNET
1일차 : 수업소개부터 실습환경 준비까지
1일차 : 수업소개부터 실습환경 준비까지 직장동료들에게 컴퓨터 언어 강의를 하게 된 것이 생활 코딩 수업의 시작이라고 하네요. 마침 유튜브가 생기면서 시간적/공간적/비용적 제약없이 강의를 공유할 수 있었다고 합니다. (덕분에 저도 집에서 편하게 강의를 듣고 있습니다!) 하지만 수업의 선후관계라던가 예제 코드, 첨부 링크, 보충 설명 등을 동영상들 만으로 정리하는 것이 어려웠죠. 이러한 문제점들을 해결하기 위해서 웹사이트 기획을 시작했다고 합니다. ▶ 기획 : 무언가를 만들기 전에 무엇을 만들 것인가를 미리 상상하고, 계획해보는 과정 이런 기획으로 탄생하게 된 것이 바로 생활코딩 웹사이트입니다. 저도 이 수업들을 다 듣고 나면 이런 웹사이트를 만들 수 있겠죠? 기획을 했으면 구현을 해야합니다. 구현을 하기..
-
JS - React
2일차 : 소스코드 수정방법, 배포, 컴포넌트 만들기
2일차 : 소스코드 수정방법, 배포, 컴포넌트 만들기 1일차에 우리는 개발 3대 작업인 설치를 끝냈습니다. (개발의 3대 작업은 설치, 수정 그리고 마지막은 배포입니다.) 수정하는 방법 자체는 5분이면 배운다고 하네요. 물론 수정을 어떻게.. 잘 하느냐가.. 관건이긴 하지만요..ㅎ 소스코드 수정방법 지난번에 create react를 이용해 개발 환경을 세팅했는데요. 지난 시간에는 모르고 지나쳤지만, 우선 이 방법을 사용하면 어떤 디렉토리 구조를 갖게 되는 지 먼저 살펴보겠습니다. 지난번에 만들어 둔 리액트 폴더에 분명 아무 것도 없었는데..! 명령어 하나 넣어줬더니 트리가 아주 풍성한 가지를 갖게 되었네요. 우선 가장 중요한 것은 src라는 폴더에 index.js라는 파일을 찾는 것입니다. 이것이 바로 ..
-
JS - React
1일차 : 수업소개, 실습환경 구축
1일차 : 수업소개, 실습환경 구축 수업소개 이 수업은 리액트 입문자를 위한 수업으로 리액트의 기본 문법과 핵심 개념을 익할 수 있습니다. 리액트는 사용자 정의 태그를 만드는 기술입니다. 복잡하고 긴 코드에 이름을 붙여서, 단순한 태그로 만들면 좋겠죠? 복잡한 코드들은 숨겨버리고 단순한 태그만 보여주는 것이죠. 사용자 정의 태그를 만들면, 이것이 가능해집니다. 리액트를 만드는 방법은 두 가지 방법이 있습니다. 바로 class 문법을 사용하는 것과 function 문법을 사용하는 것입니다. 요새는 대부분 함수 문법을 사용해서 리액트를 만들기 때문에, 이 수업에서는 함수를 사용할 예정입니다. 실습환경 구축 리액트를 이용하기 위해서 다운받아야 하는 것들이 꽤 있습니다. 만약 컴퓨터에 개발환경을 구축하기 어렵고..
-
JavaScript
12일차 : UI vs API
12일차 : UI vs API 지금까지 자바스크립트의 핵심적인 문법을 살펴봤습니다. 자바스크립트를 활용하면 웹 애플리케이션을 개선할 수 있는 것도 배웠습니다. 마지막으로 정말 중요한 개념을 배우고, 자바스크립트 기본 강의는 마친다고 합니다. UI vs API UI와 API 둘다 많이 들어본 것 같은데요. UI는 User Interface의 약자로 평상시에 풀네임인 유저 인터페이스라는 말도 자주 듣게 되는 것 같습니다. API는 Application Programming Interface의 약자입니다. 일반적인 사용자 입장에서는 UI에 비해 자주 듣지 못한 단어인 것 같습니다. 이 둘은 비슷한듯 다르며, 다른듯 비슷합니다. 우선 사용자가 시스템을 제어하기 위해서 사용하는 조작장치를 UI라고 합니다. 우리가..