목록FrontEnd (20)
EtoC
음..css 공부를 안하고 바로 프론트로 '공부하면서 프로젝트 해보지 뭐' 했다가 화면이 다 깨지는경험을 했다. margin, padding 쓰지말고 display나 grid를 쓰라고하는데 그게 뭐지 display: flex CSS의 속성 중 하나로, 해당 요소를 플렉스 컨테이너로 만드는 역할을 합니다. 이를 통해 자식 요소들을 플렉스 아이템으로 배치할 수 있다. 플렉스 컨테이너를 설정하면 해당 요소의 자식 요소들을 수평 또는 수직으로 배치하고 정렬할 수 있으며, 플렉스 박스 레이아웃은 요소들을 좀 더 효율적으로 배치하고 정렬할 수 있도록 도와준다. justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정..
리엑트 4일차인데 어제만든 컴포넌트중 하나를 분리하는 과제를 받았다. 🔨 과제 가이드 - src > pages > Product > components 폴더에 ColorButton 폴더를 생성해주세요 - 생성한 ColorButton 폴더에 ColorButton.js 파일과 ColorButton.scss 파일을 생성해주세요 - [Assignment 3-1]에서 구현했던 Color.js에서 colorButton을 분리해 ColorButton 컴포넌트로 구현해주세요 - Color.scss에서 적용된 스타일도 분리해서 ColorButton.scss에 입력해주세요 - 생성한 컴포넌트를 Color 컴포넌트에서 import 해주세요 - 총 3개의 ColorButton 컴포넌트를 사용하고 props로 각각 다른 데이터..
처음 리엑트를 설치하면 리엑트는 기본적인 UI기능만을 제공한다. 그래서 개발환경을 구축하기(패키지 설치, 유지보수 등)에 어려움이있는데 이런 문제를 돕기위해 리엑트는 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 툴체인(toolchain)을 제공한다. 그게 Create-React-App(CRA)고 안의 명령어만으로 리엑트의 개발환경을 구축할 수 있다. Create-React-App 프로젝트이름 명령어를 입력하면 진행할것인지 물어보는데 y를 눌러 설치한다. 이떄 프로젝트 명에는 대문자나 ~,!,(),*,^등의 특수문자를 포함하면 에러가 발생한다. 프로젝트 명은 소문자나 kebaa-case를 사용하여야한다. 설치가 완료되면 터미널 아래에 happy Hacking이라는 문구가 뜬다. 이때 바로 npm st..
으.. 프론트엔드 과제를하면서 html이나 css는 검색해보면서 하니 금방 할 수 있었다. 하지만 html파일과 js파일을 어떻게 관계시켜야할지 감이 오지 않았다. HTML과 Javascript를 어떻게 연결할까? 1. HTML에서 Javascript로 연결 태그를 이용 js파일을 연결해서 이용 2. Javascript에서 HTML로 연결 DOM을 사용하여 javascript로 HTML에 접근하여 조작하기 자바스크립트에서 html(웹페이지)에 접근하기위해서는 DOM을 사용해야한다. DOM을 사용하여 요소를 생성하거나 내용추가,클래스부여,스타일수정등 여러 작업을 할 수 있다. 근데 DOM이 뭔데...? DOM DOM은 문서(Document) 객체(Object) 모델(Model)의 약자로, HTML 이나 X..
개발자도구란? Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. 개발자 도구는 브라우저에 제공하는 하나의 tool(도구)이다. 웹사이트를 즉각적으로 수정하고 문제 발생시 원인을 빠르게 파악할수 있어 빠르게 처리하 수 있도록 도와준다. 개발자도구 열기: cmd+option+i/ctrl+shift+i 개발자도구에는 여러개의 패널이 존재하는데 상황에따라 각 ..
1. sementic web? Semantic Web은 인터넷의 급속한 활성화로인해 웹에 많은양의 데이터가 축적되었고 그 많은 데이터에서 원하는 데이터를 편하게 가져오기 위해 사용하기 시작하였다. 웹은 문서(document) 단위로 정보가 공유되는데 Semantic Web은 이러한 기존의 문서 중심의 웹을 "데이터 중심(data-centric)의 웹"으로 발전시키기 위해 개발되었다. Semantic Web서는 RDF(Resource Description Framework), OWL(Web Ontology Language), SPARQL(SPARQL Protocol and RDF Query Language) 등의 기술을 사용하여 컴퓨터가 사람의 언어로 알아들을 수 있게 데이터를 표현한다. 이러한 기술들은 ..
1. HTML(HyperText Markup Language)란? HTML이란 하이퍼텍스트를 활용하여 네트워크가 연결된 웹페이지에서 문서를 작성하고 읽거나 공유하기 위해 만들어진 체계이다. HyperText? 웹 페이지 등 다른 대상의 링크가 들어있는텍스트르 말하는데, HTML은 이 하이퍼텍스트를 활용하여 다른 사이트로 이동한다. 그렇다면 어떻게 다른 페이지로 이동할까? 그 답은 Markup Languague에 있다. Markup Languague? 이름 그대로 표시(markup)하는 언어를 뜻하며, 텍스트와 구분할수 있는 마크를 추가하는 언어이다. 쉽게 말하면 학교에 과제를 냈을때 선생님 또는 교수님이 어떻게 하면 좋겠다라고 색깔펜으로 표시해 주셨는데 컴퓨터에서 무언가를 하라고 지시하는 것이다. 웹 서..
1. HTML Hyper Text Markup Language의 약자로 네트워크가 연결된 웹페이지에서 문서를 읽고, 작성, 공유하기 위해 만들어진 체계이다. HTML은 웹 페이지를 만들기 위한 언어로 HTML로 웹페이지의 구조를 잡을 수 있다. HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있다. 브라우저(safari, chrome, ie..)는 HTML파일을 통해 어떻게 화면에 그려내면 되는지 파악한 후에 웹 페이지를 생성한다. 2. HTML 파일 HTML은 .html확장자가 붙은 텍스트 파일이다. 텍스트편집기(Text Editor)같은 간단한 메모작성 앱을 열고, .html 확장자로 저장한 후, 해당파일을 브라우저(크롬)에 drag & drop 하면 브라우저에서..