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 라는 ..

CSS Units 절대적인 단위의 경우 px을 많이 사용하고 상대적인 단위에서는 %, viewport와 관련된 단위, em, rem 주로 사용 Absolute length units 절대적인 단위 Unit Name Equivalent to cm Centimeters 1cm = 96px /2.54 mm Millimeters 1mm = 1/10th of 1cm Q Quarter-milimeters 1Q = 1/40th of 1cm in Inches 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt Points 1pt = 1/72th of 1in px Pixels 1px = 1/96th of 1in px을 제외한 것들은 물리적인 세상에서만 의미 있음, css 주된 용도..

CSS CSS 꽃 : Flex box 참고 사이트 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ box와 item들을 행 또는 열로 자유자재로 배치시켜줄 수 있는 유연한 것이다. 박스가 커졌을 때 각각의 item들이 어떤식으로 커지면서 박스의 공간을 메꾸어야 할지, 박스가 작아졌을 때 item들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 되는지를 자유롭게 정의할 수 있고 쉽게 가능하게 해준다. 웹사이트 레이아웃을 쉽게 제어할 수 있게 된다. container level : 박스에 적용되는 속성들, container를 꾸며주는 속성들 display flex flex-direction flex-wrap flex-flow : flex-direct..

CSS(Cascading Style Sheet) 의미, 정의 cascading : 정의된 세부적인 정의가 있다면 그것을 쓰고 정의된 게 없다면 다음 기본적으로 정의된 것으로 넘어가는 것을 의미 웹사이트 스타일링 : author style(css) > user style(사용자가 지정한 스타일) > Browser 상에서 기본적으로 정의된 스타일 순으로 적용 !important 쓸 경우 위에서 말한 적용 순서를 무시하고 제일 먼저 적용됨, 나쁜 architecture가 될 수 있으므로 쓰지 않는 것이 좋다 선택자 selectors html의 어떤 태그들을 고를 것인지 규정하는 문법 구체적으로 태그 가까이 설정할 수록 우선순위가 높아짐 종류 * = universal tag이름 = 해당하는 태그만 골라냄 #id..

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

리액트 컴포넌트 스타일링 Sass 문법적으로 짱 멋진 스타일 시트 스타일시트의 재사용성, 코드 가독성 높여줌 반복되는 코드는 @mixin 활용 사용시 props 이름만 설정시 true 값을 갖는 것과 동일 라이브러리 설치 yarn add node-sass로 node-sass 라이브러리 설치(프로젝트에서 sass 사용 가능해짐, sass로 작성된 코드로 css로 변환해주는 역할) classnames 라이브러리 : 조건부로 class name 적용시 굉장히 쉽게 가능, yarn add classnames 문자열, 객체, 배열 등을 사용해서 다양한 옵션으로 조합해 classname으로 생성 가능 falsy한 값(false, null, 0, undefined) 무시 사용 : 사용하려는 파일 상단에 import ..

Github 랜딩페이지 클론 코딩 Header header가 아닌 header 안 inner 클래스를 가진 요소에서 header 높이를 지정하는 이유는 header 자체에 높이를 주게 되면 header 안 inner는 높이를 갖지 못한다. 그래서 높이를 두번 지정하게 되는 번거로움을 겪을 수 있다. 하지만 header 안 inner에 높이를 주게 되면 header는 height:auto가 기본값으로 자동으로 동일한 높이를 가질 수 있어 한번만 높이를 입력해도 되기 때문이다. 화면 가운데 정렬로 굉장히 많이 쓰는 방법: margin: 0 auto; 로 header inner 영역(메뉴 들어있는 영역 화면 가운데 정렬, 이 속성을 쓸 때는 이 속성을 쓰는 요소에 기본적인 가로사이즈(max-width, wid..

Github 랜딩페이지 클론 코딩 반응형, 동영상 삽입, 수평 예제, 지도api 방법 배움 반응형: 사이즈가 줄 때마다 어떻게 변환되는지 수평이 어떻게 줄바꿈 되는지 모바일에서도 잘 나오게 github 예제 완성본 코드 : https://github.com/HeropCode/Github-Responsive head 태그 구성 1. viewport, IE 랜더링 정보 구성 작성자 외부적으로 보이진 않고 브라우저 내부 상 확인하는 정보 : viewport : 화면 상에 우리가 작성한 레이아웃이 나오는 전체 영역 반응형 웹사이트를 만들기 위해서는 viewport 세팅(meta name="viewport" content =”뷰포트에 세팅할 내용”)해줘야한다. 뷰포트 세팅 content= “” 안에 세팅할 내용 ..

SASS/SCSS 문법 함수(functions) @mixin과 굉장히 유사하지만 차이점 존재 @mixin은 믹스인 이름을 정의하고 믹스인 안에서 처리될 매개변수를 정의하고 그 매개 변수는 스타일 안에서 사용할 수 있다. 믹스인 안에 특정 스타일을 정의해서 사용하는 개념 @function은 믹스인처럼 함수이름을 먼저 정의하고 매개변수가 특정한 값을 받아서 @function 내부에서 처리하게 됨 @mixin과 다른 점 : 믹스인은 내부에서 처리되는 것이 어떠한 스타일(속성:값;)이다. 속성:값; 세트로 이루어진 전체적인 스타일을 재활용하기 위해 사용하는 개념이 믹스인이다. @function이 처리하는 것은 결과적으로 특정한 값이다. @function은 스타일이 아닌 특정한 값을 재활용하기 위한 개념이다. 항..

SASS/SCSS 문법 변수 1. !global(전역 설정) 값 뒤에 사용하는 개념 이 플래그를 사용해서 선언해놓은 변수를 유효범위에 종속되지 않고 전체 영역에서 쓸 수 있는 형태로 정의 가능 기존에 선언된 전역변수가 덮어 써질 수 있다.(변수를 재정의하지 않는 이상) 변수가 적용되는 곳을 기준으로 해서 가장 가까운 곳에서 마지막에 선언된 값이 마지막으로 들어간다. 2. !default(초기값 설정) 할당되지 않은 초기값을 설정 할당된 변수에는 새롭게 정의되는 값을 적용하지 않고 기존 할당 값(전역변수 등) 사용 변수와 값을 설정할 때 기존 변수가 있을 수도 있으니 현재 설정하는 변수의 값은 기존에 변수가 있는 경우에는 사용하지 않는다는 의미로 사용 Bootstrap, 기타 CSS, SCSS 상뇽하는 라..