들어가며 본 글은 국민대학교 임베디드 소프트웨어 동아리 KOBOT의 과제를 위해 개인적인 기록용으로 유노코딩의 CSS 레이아웃 - flex & grid 1~8강 내용을 정리한 포스트입니다. 내용 CSS 레이아웃 레이아웃(layout)이란 구성 요소를 공간에 효과적으로 배열하는 일 또는 그 기술을 의미한다. CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술이다. CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다. 대표적인 CSS 레이아웃 기술로 다음 것들을 들 수 있다. 일반적인 문서 흐름 display 속성 플렉스박스 그리드 레이아웃 float 속성 position 속성 기타 등등 플렉스박스(flexbox) 플렉..
들어가며 본 글은 국민대학교 임베디드 소프트웨어 동아리 KOBOT의 과제를 위해 개인적인 기록용으로 유노코딩의 입문자를 위한 자바스크립트 기초의 내용을 정리한 포스트입니다. 내용 JavaScript 자바스크립트는 프로그래밍 언어로 서버 개발, 애플리케이션 개발 등 다양한 목적을 위해 사용할 수 있는 언어이지만 주된 활용 분야는 인터넷을 통해 서비스되는 웹사이트를 개발하는 웹 개발이다. 웹 사이트를 개발 할 때는 HTML, CSS, JS를 한 묶음으로 많이 다루는데, 각 부분의 쓰임을 다시 정리하자면 다음과 같다. HTML : 웹 콘텐츠를 정의한다. CSS : 웹 콘텐츠를 스타일링한다. JavaScript : 웹 사이트의 동작이나 상호작용을 정의한다. 콘텐츠에 JS를 더하는 방법으로는 크게 두 가지 방법이..
들어가며 본 글은 국민대학교 임베디드 소프트웨어 동아리 KOBOT의 과제를 위해 개인적인 기록용으로 유노코딩의 입문자를 위한 CSS 기초 강의의 내용을 정리한 포스트입니다. 내용 CSS: Cascading Style Sheets Cascading : 계단식 Style : 멋을 내다 Sheets : (종이) 한 장 즉 계단식으로 스타일을 정의하는 문서이다. 다시말해 CSS는 태그가 태그를 포함하는 계단식 구조를 지니는 HTML 문서에 스타일을 더해준다. CSS 문서 자체는 독립적으로 존재할 수 있으나 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없다. 따라서 HTML 문서 작성이 선행되어야 한다. HTML : 웹 문서의 콘텐츠를 구성하..
들어가며 본 글은 국민대학교 임베디드 소프트웨어 동아리 KOBOT의 과제를 위해 개인적인 기록용으로 유노코딩의 입문자를 위한 HTML 기초 강의의 내용을 정리한 포스트입니다. 내용 HTML : HyperText Markup Language HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트 Markup : 이미지나 텍스트 등의 콘텐츠를 표시 Language : 언어 즉 하이퍼 텍스트와 콘텐츠를 표시해 주는 언어이며 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어로 말할 수 있다. 완성된 HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라고 한다. 텍스트 에디터에서 작성된 HTML 코드(*.html, *.htm)는 웹브라우저..