NOW OR NEVER

html article 태그 이용해 시작화면 / 문제화면 / 결과화면 순으로 구현 mbti에서 type별 점수를 hidden type의 input 태그를 이용해서 앞의 것의 점수를 네가지 type별로 저장하는 칸을 만듦(바깥에는 보이지 않지만 내부적으로 정보를 저장할 경우에는 hidden input 태그 사용) button A와 button B를 사용해서 A버튼을 눌렀을 때만 해당 type의 앞의 글자에 대한 점수를 저장할 수 있도록 만듦, B 클릭시 점수는 저장되지 않고 다음 문제로 넘어가게 하기 javascript(jquery) num을 사용해서 1번부터 하나씩 증가하도록 만듦 q라는 javascript 객체를 이용하여 각 문제 번호 별로 해당하는 정보를 담을 수 있도록 함(저장) result 라는 ..

필수로 알아야하는 semantic tags semantic tags(semantic markup) : semantic의 뜻은 의미의, 의미가 있는 이다. 우리가 사용하는 물건에도 언제 어디에 써야하는 지 등의 저마다의 의미를 가지고 있는 것처럼 html 태그 또한 의미를 가지고 있다. sematic tags를 잘 활용해야 하는 중요한 이유 SEO(Search Engine Optimazation) : 검색을 최적화 하기 위해 Accessibility : 웹 접근성 때문이다. screen reader를 이용하거나 키보드만 이용해서 등의 웹사이트를 이용하는 경우 문제없이 잘 동작될 수 있게 하기 위해 Maintainability : 개발자들을 위해서, 개발자가 html 코드를 바라봤을 때 한눈에 웹사이트 구조..

html 웹을 이루는 가장 기본적인 블록(파일) Html 없이는 웹사이트 못 만듦 Hyper text markup Language Markup 언어 : 어느정도 태그를 이용해서 구조적으로 보여지는 것 Docktype>html>head>body head : ui 적인 요소가 없음, css 불러오는 역할도 함, meta data만 존재, 상세 설명 body : user에게 보여지는 파일들로 이루어져 있다. heading h1~ w3c 웹의 표준화를 추진하는 단체 여기서 정한 표준에 맞게 브라우저를 구현해야 한다. 브라우저는 유효한 태그를 쓰지 않아 어느정도의 에러가 발생하면 똑똑히 회복해서 유저가 html을 보는데 지장이 없도록 할 수 있다. mdn 지원 가능한 태그들 확인은 mdn에서 확인 할 수 있다. ..

https://sigcho.tistory.com/20 프론트엔드 독학 스터디 계획 (by. 식초) -기초: HTML, CSS, JavaScript, Git/Github -기본: React(JS기반 프레임워크) -심화: SCSS, BootStrap,TypeScript, Webpack (필요할 때 함께 공부하기, 어쩌면 취업 후 개인공부).. sigcho.tistory.com 프론트엔드 영어로 된 로드맵도 보고 구글로 어떻게 공부해야 하는지 싹 다 찾아 봤는데 이보다 자세한 것은 없었다..! 식초님의 블로그는 주기적으로 정독해야 할 정도로 정보가 아주 많다. 그래서 식초님 로드맵에 따라 공부해보기로 결심 했다. 일단 기초 지식을 다지는 구간만 엑셀로 정리해놨다. 이런 식으로 하하,,, HTML, CSS, J..

Vue.js 작은 화면당 라이브러리 역할부터 큰규모의 웹 애플리케이션 개발을 돕는 프레임워크 역할까지 점진적으로 적용할 수 있는 프런트엔드 프레임워크 특징 컴포넌트 기반 개발 방식 : 화면(웹페이지)을 여러 개의 작은 단위로 쪼개어 개발, 리액트와 같은 방식 MVVM 패턴 : 화면 UI 코드와 백엔드 데이터 처리 코드 분리 리액트와 앵귤러의 장점을 흡수 설치 파일 vue.js devtools 개발자 모드로 할 경우 개발자 도구에서 vue 패널이 보임 vs code 확장 프로그램 : vetur node-v , npm-v 설치 , nvm html body 태그 내에서 - https://kr.vuejs.org/v2/guide/#%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0에서 개발자 모드랑..

Flex flex item 속성 1.order : flex item의 순서 결정 각각의 item의 순서 설정 item에 순서를 지정하고 숫자가 클수록 순서가 밀림 음수가 허용(더 작을수록 순서가 앞으로 오게 됨) html 구조와 상관없이 순서 변경 가능해서 css만으로 순서 변경시 유용 order 값 같을 시 html 구조(먼저 작성된 순서대로)대로 나열 됨 숫자 : 기본값은 0으로 item 순서 결정 2. flex : flex-grow, flex-shrink, flex-basis를 아우르는 단축속성 flex: flex-grow flex-shrink flex-basis; 주의사항: flex basis 개별 속성 사용시 기본 값은 auto지만 단축 속성일 때 사용시(명시적으로 적지 않았을 때) 기본 값은 ..

CSS 변환 효과(Transform) Transform 2D 변환 함수 애니메이션에 특화되어 있는 이런 함수들을 애니메이션 만들 때 쓰는 것이 좋다 transform: 함수(값) 함수(값); 함수는 띄어쓰기 통해 다중 입력 가능 1. 전체를 아우르는 함수 matrix matrix(n,n,n,n,n,n): 2차원 변환 효과 translate, scale, rotate, skew 등의 함수가 matrix를 대신한다. 이동, 크기, 회전, 기울임을 한번에 제어해주는 함수 이 함수 사용시 일반적인 상식에서 벗어난 방식으로 해서 사용이 어렵다. 직접적으로 사용할 필요는 없다. 브라우저가 알아서 해주기 때문 [실질적 쓰는 함수] 1. 이동 함수 translate 이동 관련 제어해주는 함수[ position과 다른 ..

HTML 전역속성 : 모든 html 요소에서 공통적으로 사용 가능한 속성 1. class 속성 - 태그에 별명 혹은 별칭 부여할 때 사용 - 공백으로 여러 개 별명 설정 가능 - css 혹은 js에서 요소를 선택하는 방법으로 쓰일 수 있다. - 동일한 class가 여러 태그에 동일하게 들어가도 상관없음 - 중복 사용 가능(중요한 부분이 아닐 때 사용) - css에서 .class이름으로 찾을 수 있다. - js에서 찾을 때 const 변수이름설정 = document.querySelector(‘.class이름’) ex) const section = document.querySelector(‘.section’) -> class가 section인 요소 검색 2. id 속성 - 하나의 태그에 고유한 식별자(이름)..

두 번째 과제와 퀴즈! 저번만큼의 난이도로 예상하고 얕잡아 봤는데 어려웠다. 역시 매주 강의를 들으며 강의 내용을 요약한게 많은 도움이 됐다. 정리를 안했더라면 퀴즈 볼 때 머릿속이 까맣게 변했을 것이다. 아는 것 반 모른 거 반이지만 문제를 보고 판단할 정도의 능력은 갖출 수 있었다. 과제 또한 1주차 때보단 어려웠지만 들었던 강의 내용을 곰곰히 생각해보면서 하니까 얼추 완성은 할 수 있었다. 이론 상으로는 알고 있는데 코드로 적용시키는 것이 어려웠었던 것 같다. 앞으론 강의 정리한 것을 토대로 코드로 옮기는 연습을 더 많이 해야 겠다. 1. form 태그 : 여러 입력 양식들의 범위 지정하고, 범위 안에 들어있는 여러 양식의 정보를 특정 페이지를 전송하기 위해 사용 ex) 로그인페이지 display:..

스크립트 태그 : 스크립트 태그 내부에다가 js 내용 삽입(스크립트 코드를 html에 직접 작성)하거나 외부 js를 src로 가져올 때 사용한다 - head 태그 안에 작성하는 것이 일반적이지만 body 안에 가장 끝에 쓸 수 있다. const myName =document.getElementById('my-name'); -> 이거 실행하고 싶으면 heropy을 먼저 실행 시키고 이게 실행되야 한다 1. 속성 -async 속성 : html에서 스크립트의 비동기적 실행 여부, 직접적으로 입력하는 경우는 없음, src 속성이 필수(외부js를 활용한다는 뜻) * js의 동기적 실행과 비동기적 실행: 동기적인 실행은 js 코드가 순차적으로 위에서 아래로 순서대로 실행되는 것, 비동기적 실행은 순차적으로 실행되는..