멋쟁이사자처럼 Front-End School

개발과는 거리가 먼 전공을 가진채로 졸업을 하여 방황 끝에 개발자가 되기 위해 혼자서 공부하던 중 멋쟁이 사자처럼에서 3개월간 교육을 듣게 되었다. HTML, CSS도 제대로 모르는 상태이지만 그런 것을 극복하고자 듣기 시작했으니 상관없을 것이라 생각하였다. 개발자들

HTML CSS를 어느정도 배우고나니 어떤 페이지를 레이아웃을 잡고자 할 때 너무 디자인적인 요소만을 고려했던것 같다. 사실 HTML작성은 흰 종이에 검은 글씨만 쓰는 것이 전부인데 그 부분을 잠시 잊고 있었다. HTML은 마크업 언어라는 것을 명심.처음 개발공부를 시

우테코에서 교육을 하시는 메이커준님과의 워크샵을 진행했다. 입문단계에서는 무얼 해야하나 고민의 시간이 많은데 고민을 해결할 뾰족한 플랜을 짜기란 쉽지 않다. 하지만 그건 어제의 나의 이야기이다. 집단지성의 힘을 받아 다음주 월요일까지의 계획을 이미 짰기 때문이다😎아마

테이블을 만들 때 쓰는 태그이다. 기본적인 Table Row, Table Heading, Table Data를 의미한다.emmet을 활용해 빠르게 코딩한다.table>(tr>th\*3)+(tr>td\*3)\*3caption 은 이 테이블이 가지는 의미를 뜻한다.(제목이

기본적으로 여래개의 선택자를 선택하는 방법이 있고, 이는 ,로 각 선택자들을 구분한다.직관적인 이해를 위해 예시를 들어보았다.ul의 자식은 li 3개이다. ul의 자손은 li를 포함한 li, div, p이렇게 된다.ul li {color:red;}자손을 선택하려면 공

CSS 공부를 하면서 대충으로나마 알고있던, 헷갈렸던 부분을 최대한 (내가)이해할 수 있는 선에서 정리하기 위해 쓴다. 부숴버린다.절대적인 크기를 주어서 어떤 환경에서도(화면이 작던 크던) 내가 지정해준 크기로 동일한 사이즈를 보여준다.px : 글씨크기를 지정할 때에

인간의 욕심은 끝이 없고, 같은 실수를 반복한다... ??????!!??????!!??????! > "너 지금 뭐라고했니...? 부숴버린다고? 니가 부서지는건 아니고? 그냥 포기해...👨" '제발,,닥쳐줘 이렇게 빌게,,,🙏' 오늘 배운것을 러프하게나마 정리하지

* 백그라운드 속성에 대해서만 이야기 하고, 결과도 살펴본다. 이제껏, background: red;로 지정해준 것은 background-color를 지정해준 것이다. background-image 배경이미지를 삽입하는 것이며, 예상되는 시나리오는 두 가지이다. >1.

Position⏹ 포지션이란, 말 그대로 위치를 의미한다. 아래는 position의 속성 값들. 1. static 따로 입력을 하지 않은 이상 default로 static이 적용이 된다. 즉, 코드를 입력한 순서대로 주루루룩 위치가 지정된다. 2. relative >

float 이란 요소를 띄우는 개념이다. 최초로 고안이 된 이유는 우리가 매거진에서 흔하게 볼 수 있는 사진을 따라서 글이 흐르는 레이아웃을 웹에서 구현하고자 고안된 개념이다.<img>는 대체 요소입니다. 기본적으로 display는 inline이나, 기본 크기는

What is FLEX??😎 우선 flex란 정렬과 관련된, 박스들의 공간을 나누는 CSS 속성의 집합이다. 나는 이걸 흐름정도로 이해하고 있다. (좌에서 우로 / 우에서 좌로 / 위에서 아래로 / 밑에서 위로) 흐른다😀 > 잊지말자, display: flex;는

What is grid? flex를 흐름이라고 이해했다면, grid는 table이다. 행열이 존재하는 테이블 표의 레이아웃이라고 이해하면 쉽다. 테이블의 구조인만큼, 몇행 몇열인지에 대한 선언이 필수적이다. grid역시 부모를 컨테이너, 자식을 아이템 정도로 이해하면

Hover Active Focus input select 😎New!! 레이아웃 구성시 글들간의 간격은 마진이나 패딩보다는 line-height 를 습관화하자. box-shadow : x y 블러 컬러(투명도까지 가능); 띄어쓰기로 구분! 가상요소와 가상클래스를

1. Transition 1.1 delay 1.2 duration 1.3 property 1.4 timing-function 2. Transform 2.1 scale 2.2 rotate 2.1 translate 2.1 skew 2.1 origin 😎New!!!

What is Animations? 말 그대로 약간의 동적인 느낌을 준다. 자바스크립트의 도움 없이 간단히 구현할 수 있는 동적인 표현으로, 이것만으로도 만들어 낼 수 있는 것들이 매우 많다. 이를 실행하기 위한 규칙을 알아보자. How to use? >css anim

Perspective (원근감) 자식요소를 마치 멀리에서 지켜보는 것처럼 효과를 주기위해 있는 속성이다. perspective 는 부모요소에서 사용해주어야 한다. 거리가 짧을수록 가까이에서 보고있다는 의미이므로, 뭔가 조금만 틀어지면 굉장히 크게 보인다. perspe

1. So many Buttons,,,🤣 마우스 오버 시, 얘가 버튼이라고 확실히 느껴지는 버튼들을 실습해본다. 몰랐고 신기한 버튼들정도만 설명해보고, 직접 아래에서 눈으로 확인!!! >https://ssssssjay.github.io/Front-end-school

인생 첫 코드 수정 ! 어제 직접 작성한 반응형 웹 페이지를 수업에서 직접 다시 작성했다. 새롭게 알게되거나, 해결된 궁금증들을 모아서 작성한다. 1. w3c validation 웹 페이지를 직접 만들었다면, 제일 먼저 거쳐야하는 단계가 있다. HTML과 CSS에 문

웹 페이지에 스타일을 입히기 위해 작성하는 CSS 에는 설계기법이 존재한다.이는 반드시 지키라는 사항이 아니며, 사람마다, 그룹마다, 회사마다 선호하는 방식이 다를 수 있다. 현재 내 수준에서는 이러한 방법의 존재와 느낌을 알고, 직접 손코딩을 통해 불편했던 부분을 개

html에서 제공되는 체크박스의 모양이 아니라, 원하는 이미지를 사용하고 싶을 때 CSS만을 이용해서 체크박스를 구현해보자.기본적인 원리는 이러하다.checkbox타입인 input의 label을 눌러도 체크박스를 클릭한것과 같은 효과를 이용한다.우선 체크박스에 blin

1. Grid 😎 grid를 사용하려면 열갯수와 행갯수를 지정해주어야 한다고 했지만, 그 외에도 사용할 수 있는 방법이 있다. 이렇게 container에 영역을 직접 디자인을 하는 것이다. 여기서 끝이 아니라, 디자인한 이름을 item에다가 선언을 해주어야 한다.

https://getbootstrap.com/Build fast, responsive sites with Bootstrap홈페이지 메인에서 말하는 것처럼, 사이트를 반응형으로 빠르게 만들어주는 툴킷이다. 이미 만들어진 CSS가 있고, 우리는 이를 class를

위와 같은 페이지를 피그마로 확인하여 직접 구현해보았다.필연적으로, 레이아웃을 잡으려면 float, flex, grid 이 셋중에 하나는 선택을 해서 잡아야 한다는 생각이 든다. 그러지 않고서는 도저히 구현 방법이 떠오르질 않는다. 결국, 코드를 짜는 사람만의 명확한

로그인 모달 닫기 버튼과 접근성🥸 로그인 모달에서 닫기버튼을 마크업 구조에서 내리고 포지션으로 올린다_벨로그 닫기버튼을 올릴때 탑0 라이트0으로 해주되, 패딩값을준다. 닫기버튼이 너무 쪼매나니까_근데 박스사이징이 걸려있으니까 컨텐츠박스로 바꿔준다. 편의성 증진!!!

ubuntu 실습을 위해 구름ide를 사용한다.

끝으로 시니어 개발자란 무엇일까?! 개발자에게 국한된 이야기는 아니다. comfort zone을 벗어난 사람이라는 이야기를 들었다. 하고 싶은것만 하는 사람이 아닌, 해야할 일들을 하기 싫어도(?)해야 하고, 결국 스스로 진짜 프로젝트를 만들 수 있는 사람이 되어야 시

1. Why Variables?! >변수를 선언한다 = 값을 일일이 작성하지 않는다 일정한 테마를 가진 웹 이라면, 배경색이나 헤딩의 폰트 사이즈, 본문의 폰트 사이즈 등등등 동일한 스타일을 줄 경우가 생긴다.(아주 많이) 이 때마다 그 값을 어딘가에서 보고 써넣거나

1. Mixin?? 믹스인이란, 코드의 재사용을 위해 만들어진 기능이다. 반복되는 코드를 다시쓰는 작업을 없애기 위해 만들어진 기능이다. (중앙정렬을 위한 flex, justify, align 묶음 정도를 생각하면 좋다) 반복되는 코드를 묶어놓은 것이라고 생각하면 된

본격적인 '언어공부'에 앞서서 언어의 두 가지 종류를 알고가자.(스크립트언어)소스코드 -> 인터프리터 -> CPU / 메모리동적 타입의 인터프리터 언어 런타임에서 오류를 발견할 수 있습니다/.(돌려봐야지만 에러를 확인 가능👽)(컴파일언어)소스코드 -> 컴파일러 ->

1. 산술, 할당 연산 >js // 동일한 값 (10 == '10' 참!) // 동일한 값과 동일한 유형 != // 같지 않음 3. 논리연산 > js false || true >true true && false >false 2.1 false ||false >fal

현재 시간을 가져오는 방법Wed Dec 01 2021 10:35:35 GMT+0900 (한국 표준시) {}이처럼 현재 시간을 출력할 수 있다.(정확히는 불러와서 d에다가 할당)이제 위의 시간을 기준으로 가져올 수 있는 정보를 알아보자.기본형태다차원으로 접어들면 타고타고

데이터(정보)를 받아올 때, 우리의 예상대로만 흘러가지 않는다.가령, 우리는 숫자를 요구했지만 문자열로 온다거나, 숫자와 문자의 합으로 온다거나(이게 결국은 문자열이지만) 다양하게 올 수 있다.우리는 이러한 정보를 숫자로 바꾸어 줄 수 있어야 한다.방법 네 가지.굉장히

굉장히 기초적인 퀴즈를 대하기까지 "이 정도는 여러분이 풀 수 있습니다!" 라는 말이 죄송스럽게도, 퀴즈에 접근조차 어려웠던 내가 (기초중의 기초)배열의 평균을 구해보면서 느낀 점을 우선 적고 간다. >1. 그래도 알아야 하는게 있더라! ->당연하게도 외우고 있어야

위의 배열에서 20, 30을 제거하라.arr\[i]를 이용해서 20과 30과 값을 비교한다.만약 그 값이 20과 같다면, .splice를 이용해서 값을 제거해준다.2.1 만약 20과 같지않지만 30과 같다면, .splice를 이용해서 값을 제거해준다.

문자열의 인덱스를 활용해 str4 + str3 + ... + str0해주면된다.

자바스크립트 객체

함수란 무엇인가? 입력값을 받아서 출력을 해주는 기능이 있다.(출력값이 있다.) 어딘가에서 재사용을 하기 위해 쓰인다. 아키텍쳐를 파악할 수 있다. -> 함수들만 봐도 '아 이런 일을 하는 것이구나'를 파악할 수 있다는 정도로 해석 단순히 선언만 해주면 아무런 일이 일

재귀함수

1. map vs forEach 선언된 배열의 값들(이하 요소라 부름)에 대하여 주어진 함수를 실행시키는 공통점을 가진 map과 forEach의 차이점에 대해 알아보자 위와 같이, forEach를 사용하면 새로운 배열로의 반환이 이루어지지 않는다. 반면 map을 사용하면 새로운 배열로 반환할 수 있다. 단순히 배열안의 값들을 이용한 계산을 해주고 저장만...

repeat(), Array(), Math(), Date(), flat()

JSON => html => table

JSON에서 데이터를 걸러내보기, 정렬시킨 데이터를 렌더링 시키기

객체를 만들어내는 생성자 함수

알고리즘 측정방법 세가지

렌더링 방식인 CSR & SSR (그리고 SPA, MPA에 관하여)