2021 SeSAC 기업연계형 퍼블리싱/프론트엔드 실무 프로젝트 과정

1️⃣ HTML HTML(HyperText Markup Language) 웹을 표현하는 가장 중요한 기초적인 언어 웹의 구조를 만든다. HTML 기본 태그 헤드 태그 - 문서의 기본정보 바디 태그 - 출력되는 문서 내용 목록 태그 > - 부모 태그

형식속성scope=“row”(행 제목)/“col”(열 제목)셀 합치기colspan=“합칠 칸의 수” (수평)Rowspan=“합칠 칸의 수” (수직)margin요소와 요소 사이의 여백속성margin-top:margin-bottom:margin-left:margin-rig

블럭 요소들을 가로 정렬 할때 사용 하는 속성. 요소를 공중에 붕 띄우는 개념.하위요소를 float 설정-> 상위요소 height 값이 지정되어있지않다면 height 값은 0이 됨💡 해결 방법 상위요소의 높이값을 설정(문제: 하위요소 높이 달라지면 같이 바꿔줘야함

웹페이지 내에서의 입력 양식을 만들어준다.<input></input> : 입력요소를 만드는 태그<속성>type=“text/password/checkbox/radio/submit/reset/button/file/”html5 추가) type=“ email

input\[type=“value”]대괄호: 속성 선택자 표시(class 같은 것)Input 태그 사용시 가장 많이 씀input 태그는 image, button 태그와 같이 인라인 요소이나 너비, 높이 들어감input 태그 작성시 label 태그 꼭 작성해야함(⭐️

비디오파일, 오디오파일을 문서에 삽입할 때 사용형식(audio태그도 동일)속성값🐸 flex 속성 연습 게임(https://flexboxfroggy.com/보다 쉬운 레이아웃 배치를 위해 css3에 새롭게 추가된 display 속성형식 Display: fle

웹페이지 내에서 동적 요소를 만들어주는 언어프론트엔드 분야에서 유일무이한 독점성을 가진 언어웹페이지뿐만 아니라 데스크탑용 앱, 모바일 앱, 게임, 3d 효과, 백엔드 구현 등 무궁무진한 확장성을 가진 언어객체 object 기반의 스크립트 언어(요소 하나하나 객체)데이터

반복되는 동작을 하나로 묶어놓고 호출시키는 기능을 함\-> 이름을 불러서 호출해줘야 실행됨매개변수 인자를 입력해줄 수 있음특정 노드에 접근하기 위한 메서드getElementsByClassName()getElementsByID()querySelector() \*\*많이

하나의 변수로서 많은 값을 저장할 수 있는 컨테이너 역할을 한다.예시) people이라는 변수를 객체로 설정하면 name, age, sex, country 등과 같은 속성(Property)이 있으며, 속성마다 각각의 값을 갖는다. Literal 방식(변수 선언과 동시에

✍️ 프론트엔드 개발 입문 4주차를 돌아보며 > 4주라는 짧은 기간동안 무엇을 했는지, 어떤 것을 배웠는지 톺아보고 앞으로의 공부 계획도 세워보고자 한다. 1️⃣주차 > HTML, 웹 접근성과 웹 표준 등의 개념들에 대해 배우고 html의 기본 구조에 대해 익혔다.

전역에서 쓰인 this는 window 객체를 반환객체의 메서드(function)에서 사용된 this는 메서드를 담고 있는 객체를 반환생성자 함수에서 this는 새로 생성되는 객체(인스턴스)를 반환이벤트 리스너 안에서 this는 현재 동작하는 곳(이벤트 객체의 속성 :

웹앱을 쉽게 만들 수 있도록 페이스북이 만든 자바스크립트 라이브러리 Web-app : 실제로 앱은 아니지만 모바일 앱과 같은 사용성을 지닌 웹앱으로 발행이 쉬움 (react native)앱처럼 뛰어난 ux등장 이후 시장 점유율이 안정권으로 접어들었음Nodejs 설치명

리액트 상태 관리 라이브러리. 전역 상태를 관리할 때 유용함하나의 스토어에서 데이터를 꺼내쓴다는 개념, 데이터의 모든 상태를 관리한다. 트리구조로 내려오는 컴포넌트 -> 값을 변경하려면 state -> 값 전달 props(단방향, 위에서 아래로) => 비효율적임 1

버전 관리 도구 (VCS, Version Controll System)작업한 파일들을 원하는 버전(시점)으로 이동할 수 있게 해준다

새로운 기능 , bug fix 등 작업 -> branch를 새로 만들어서 그 branch에 커밋한다. 각각 branch가 완성이 되고 검증된 내용은 master(main) branch에 mergegit branch ➔ commit된 브랜치 정보 확인(local)git

flex는 flex-grow, flex-shrink, flex-basis의 단축 속성! ⭐️ 참고사이트이 3가지 속성은 따로 쓰지 않고, 대체로 flex 단축 속성으로 작성한다.flex container의 남은 너비를 flex item들이 어떻게 나눠가질 것인지를 지

css를 더 편리하게 사용할 수 있는 css 전처리기(preprocessor) 중 하나인 scss에 대해서 학습해보자.

css 클래스명의 중복을 막아주는 css-module 과 css 관련 리액트 라이브러리인 styled-component 에 대해서 학습해보자. 리액트