전체 글

HTML 태그에 CSS 속성을 적용하기 위해선 id 와 class를 사용해야한다. 이처럼 CSS 속성을 적용할 대상을 선택하는 방법을 CSS selector 라고 한다 . 오늘은 Css selector에 대해 학습해보자. 기본 셀렉터 전체 셀렉터 전체 셀렉터는 문서의 모든 요소를 선택한다. * { } 태그 셀렉터 태그 셀렉터는 같은 태그명을 가진 모든요소를 선택한다. 복수로도 선택 가능하다. h1{ } div{ } h2, section { } ( , 를 꼭 써줘야 복수 선택이 가능하다 ) ID 셀렉터 ID셀렉터는 #id명 으로 입력하여 선택한다. #container { } class 셀렉터 class 셀렉터는 .class명 으로 입력하여 선택한다. 같은 class를 가진 모든 요소를 선택한다. .box{..

오늘은 CSS에서의 박스 모델에 대해 알아보자! 모든 콘텐츠는 그림과 같이 고유한 영역이 존재한다. 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다. 박스는 직사각형이고 너비(width)와 높이(height)를 가진다. CSS를 이용해 속성과 값으로 그 크기를 설정할 수 있다. 박스의 종류 줄 바꿈이 되는 박스 옆으로 붙는 박스 block inline , inline-block 여기서 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부른다. 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있다. 코드를 통해 박스의 종류에 대해 알아보자 ! HTML 파일 block inline..

지난 시간에는 웹 구조를 다루는 HTML에 대해 학습하였다. 오늘은 웹에서 디자인 요소를 담당하는 CSS에 대해 학습해 볼 것이다. CSS와 프론트엔드 개발 CSS란? 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. HTML이 웹 페이지의 구조를 담당한다면 CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 한다. CSS를 왜 사용해야 하는가 ? 더 나은 사용자 경험을 제공하기 위해 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스를 제작해야한다. 이것이 CSS를 사용해야 하는 이유이다. 여기서 사용자인터페이스란 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에 사용자가 붙어 만들어진 용어이다. 예를 들어보자 . 트위터로 메세지를 보내려면 메세지를 키보드 인터페이..

코딩에 접하신 분들이라면 다들 Github , vscode 를 한번쯤은 들어보셨을텐데요. 하루하루 편하게 잔디를 심고 싶은데 어떻게 해야할까요 ? 그럼 지금부터 vscode에 Github를 간편하게 연동하는 방법을 알려드리겠습니다! 필요한 기본 준비는 github 계정 생성 , 코드에디터로는 vscode를 준비해줍니다! 1. 먼저 깃허브 레포지토리를 생성해줍니다. 2. 생성된 레포지토리 URL을 복사해줍니다. 3. vscode에 들어간 후 fn+F1버튼(윈도우는 F1)을 클릭해 나오는 창에 ' git clone' 을 입력해줍니다. 4. 아까 복사한 레포지토리 주소를 복사해서 넣습니다. 5. 로컬 폴더를 확인해보면 아까 만든 레포지토리의 이름으로 된 폴더가 생성됩니다. 6. 새로 만들어진 폴더에 기존 파일..

HTML은 집을 짓기 전 설계도에 따라 구조를 잡듯, 웹 페이지의 구조를 짜는(마크업) 언어이다. CSS는 스타일을 담당하는 디자인 언어이다. JavaScript는 구조와 스타일이 완성된 각각의 요소에 생명을 부여하는 역할을 한다. 한마디로 HTML 은 구조를 , CSS 는 스타일을 , javascript는 상호작용을 담당한다. 앞으로의 실습에서 코드 에디터는 Visual Studio Code를 사용할 것이다. 전부터 많이 사용해왔던 툴이라 어려움 없이 사용할 수 있을 거 같다! HTML 기초 HTML - 문서의 틀을 만드는 언어, 웹 페이지나 웹 애플리케이션이 전부 HTML로 작성 되어있음. - 웹 페이지의 틀을 만드는 마크업 언어 - tag들의 집합 Tag: 부등호()로 묶인 HTML의 기본 구성 요..

너는 좋겠다 코딩 잘하니까 취업에는 문제 없겠네 컴퓨터 과학과를 진학하면서 가장 많이 들었던 말이었다. 모두가 컴퓨터과학과를 졸업했다고 해서 코딩을 잘하게 되는 것은 아니었다. 코딩 하는 척 하는 것일 뿐 .. 그 예시가 바로 나였다. 학교에서 자료구조 , 알고리즘 등등.. 이론 강의를 들으면서 이걸로 어떻게 내가 먹고 살까 ? 하는 고민이 들게 되었고 점점 학교 강의에 흥미를 잃었었다. 그러던 중 3학년 때 우연치 않게 듣게 된 교양 과목은 나에게 웹 프론트엔드라는 신세계를 알려주었다. 아드레날린이 막 분출했다. 마치 사막에서 오아시스를 발견한 느낌이라면 이런 느낌일 것이라고 생각이 들었다. 늘 중위권인 내가 그 강의는 중간, 기말 만점으로 1등을 하게 되었다. 그 후 나는 웹 프론트엔드 ... 이거다..

기존 ES5 문법과 비교해 전개 연산자를 통해 배열과 객체 데이터를 합치거나 추출하는 방법을 이해해보겠습니다. 전개연산자 ? 배열이나 객체 변수를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법입니다 . 변수 앞에 ... (마침표 3개)를 입력해서 사용합니다. 예제 작성을 통해 전개연산자에 대해 알아보겠습니다. 먼저 App.js 파일을 생성해줍니다. App.js import './App.css'; import { React } from 'react'; import SpreadOperator from './SpreadOperator'; function App() { return ( Start React 200! css 적용하기 ); } export default App; SpreadOpe..

오늘은 ES6의 변수 선언 방식인 let과 const에 대해 기존 var 변수와 비교해 변수의 재선언, 재할당이 가능한지 공부해보겠습니다. ES5에서 사용하던 var는 유연한 방식으로 변수를 재선언, 재할당 할 수 있습니다. 이런 특징으로 인해 변수의 사용 범위가 불확실해지거나 의도하지 않은 변숫값 변경이 발생할 수 있습니다. 따라서 이러한 var의 단점을 보완하기 위해 ES6에서 let와 const가 추가 되었습니다. App.js 파일 Variable.js 파일 이미 선언한 var 변수 varName을 다시 선언했을 때 var 변수는 재선언, 재할당을 허용하기 때문에 페이지가 정상적으로 출력됩니다. 이미 선언한 let 변수 letName을 다시 선언했을 때 에러메세지가 발생하며 let 변수는 재선언을 ..

ES(ECMA 스크립트)는 표준화된 스크립트 언어이고 ES 뒤에 붙은 숫자는 버전을 의미합니다. 2015년 발행된 ES6는 많은 유용한 기능이 추가됐고 자바스크립트는 이 기술 규격을 따릅니다. 리액트도 자바스크립트 기반 언어이기 때문에 ES6의 모든 기능을 사용할 수 있습니다. 오늘은 ES6 문자열의 사용 방법에 대해 알아보겠습니다. App.js 파일을 생성합니다. Es6.js 파일을 생성합니다. 기존 자바스크립트에서 줄바꿈을 하려면 개행문자(\n)을 사용해야 합니다. 문자열과 변수를 합치기 위해서는 문자열을 작은 따옴표(또는 큰따옴표)로 감싸고 + 로 연결해야합니다. 따옴표가 아닌 백틱(`)으로 전체 문자열과 변수를 묶어 사용할 수 있습니다. 변수는 ${변수명} 형태로 넣고 코드상에서 줄바꿈을 하면 개..