Jeden Tag, aufrichtig und lustig.

> 이번주는 유독 효율적인 학습방법과 시간활용에 대한 고민이 많았던 주였다.. 떨어진 체력으로 인해 원활히 학습이 이뤄지지 않아서 과제 수행이 하나하나 힘들었고 아직도 해결못한 문제들이 많다.. 동기분들에게서 ,,, 조언을 구해봐야겠다고 생각한 한주였다...! 💛 Fact 선배,현직자,CSS 특강 학습내용 CSS box model, box-sizing,text-align,vertical-align,position,normal flow, flex z-index,negative margin,가상 클래스 선택자,가상 요소 선택자,콤비네이터 로그인 화면 구현 과제 수행 1일 1커밋 시행하지 못함 ❤️ Feeling 저번주에 커밋과 til작성에 시간소모가 많아 이번주는 우선순위에서 미뤄놨더니 매일 학습내용 숙지가..

약 5시간 동안 끙끙거리면서 만들어 낸 로그인 화면이다. 마크업하면서 어떻게 시맨틱하게 마크업 할 수 있을지 고민했고, 스타일링하면서는 효율적이고 깔끔한 방법에 대해 고민했다. 고민의 결과, 가독성을 위해 주석을 다는 시도를 해보았다! 구현하면서 봉착했던 큰 어려움은 크게 2가지였다. 1. weniv 로고와 텍스트의 정렬 2. 하단의 패딩 1. weniv 로고와 텍스트의 정렬 아직도 해결을 못한 상태이다. 로고와 텍스트의 부모요소에 아래와 같이 코드입력을 하였지만, 텍스트가 약간 위로 올라와있어 아쉽다. vertical-align: middle; 2. 하단의 패딩 하단 요소들에 padding-bottom값을 부여해도 border와 붙어있어 보기 좋지 않았다. 하단 아이디 / 비밀번호 찾기와 회원가입 요소..

https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io CSS Diner라는 웹페이지를 알게되었다. CSS Selector 개념을 공부할 때 활용하면 좋을 듯하다. 게임처럼 한 단계씩 진행할 수 있고, 총 32단계까지 구성되어 있다. Tip. 한번에 끝까지 깨는 것도 좋지만 나눠서 개념을 곱씹는 것도 좋은 것 같다!

본격적으로 과제를 했던 한주! > 여전히 TIL작성에 시간이 많이 소비된다.(무분별한 TIL작성 하지 않기!) > 시간 활용에 힘쓰기! 💛 Fact 첫 스프린트 회고, 야간 특강 학습내용 OSI 7계층 HTML(페이지 모듈화,dl,dt,dd,form), 절대/상대 경로, Embedded content CSS 우선순위,리셋 CSS,inline-block CSS 1만시간의 법칙, 버킷리스트 과제 수행 ❤️ Feeling 추석연휴기간 동안 동기들과 친밀한 시간을 가져 좋았다. 대체로 성공한 얼리모닝과 인생 첫 새벽요가로 인해 뿌듯했다. CSS 과제를 하면서 배운걸 적용시키는 것이 쉽지 않다는 것을 알았다. 과제를 하면서 학습한 내용을 체득하는 것이 성장의 지름길인 것 같다. 💜 Finding 쉬는시간에 복습하..

복습하고 적응하기 바빴던 한주였다. > 노트정리 및 TIL작성에 시간이 많이 소비된다. > 강의시간에 집중해서 추가적인 시간 소비를 줄이자. > 일일 / 주간 시간을 잘 사용할 수 있도록 계획 세우는 것이 필요하다. 💛 Fact 멋쟁이사자처럼 프론트엔드스쿨 3기 개강 학습내용 Git Hub & Git, 웹의 기초 상식(URL, IP ,Port) HTML(semantic tag), CSS(selector, initial value, inheritance) HTML sectioning, CSS 구현 과제 수행 모던 자바스크립트 책 구매 ❤️ Feeling 고대했던 멋쟁이사자처럼 프론트엔드스쿨이 개강해서 즐거웠다. 좋은 동기들, 회고팀원들과 함께라서 1주차를 잘 보낼 수 있었다. 생각보다 HTML, CSS 개..

for loop & array 반복문과 배열은 현업에서도 자주 함께 사용되는 중요한 개념이다. 빈 배열 myArray에 100부터 110까지 요소를 추가하기 array를 순회한다. =배열의 각 요소에 접근해서 동일한 동작을 진행한다. array각요소를 콘솔에 찍기 ex. for(let i=0 ; i 0; i-=2) { ourArray.push(i); } // ourArray will now contain [10,8,6,4,2] i에 2 빼는 법 i = i-2 i-=2

개발자 도구 개발자도구는 브라우저에 내장된 웹 개발자 도구 모음으로써 개발자가 개발과정에서 사용 한다. (예 : Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구. etc) 특징 1. 웹 사이트를 즉각적으로 수정할 수 있다. 2. 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와 준다. * 특히 프론트엔드 개발자는 개발자 도구를 항시 활용 하며 업무를 진행한다. 자주 사용되는 패널 Elements 패널 웹 페이지 구성과 구성 요소들의 스타일을 확인할 수 있다. 페이지의 구성요소 확인 가능. 웹페이지 구성 확인 수정 가능. 크롤링 시 활용 가능. styles우선순위 확인 가능.(인라인-아이디-클래스-태그선택자) 쉽게 쉽게 스타일 순서도 바꿀 수 있음. 유저..

웹페이지상에서 레이아웃을 구성할 때 사용되는 position과 display 개념에 대해 정리해보고자 한다. position position은 복잡한 레이아웃을 만들기 위해서는 사용되는 속성이다. 포지션 속성을 사용하여 요소를 원하는 위치에 지정할 수 있다. 1. relative relative는 별도의 속성을 지정하지 않는 이상 static과 동일하게 동작한다. top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정된다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것이다. 2. absolute absolute는 가장 다루기 까다로운 위치 지정 값이다. 뷰포트에 상대적으로 위치가 지정되는 게 아니라, 가장 가까운 곳에 위치한 조상 엘리먼트..

position relative position: relative; 자체로는 특별한 의미가 없다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다. absolute position: absolute; 부모 태그 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 된다. * absolute 값을 갖게 되면, 내용의 크기만큼이 가로크기가 된다.

margin-auto .center { margin: 20px auto; } margin 속성에 auto값을 부여하면 중앙정렬을 할 수 있다. 위와 같은 코드를 적용하면center 클래스는 위 아래 20px 마진을 갖게 되고 가로로 중앙 정렬 하게 된다.