Jeden Tag, aufrichtig und lustig.

1. Progress bar? 성격유형 검사지를 만들면서 테스트 진행도를 사용자가 알면 사용자 경험에 좋을 것 같아 프로그레스바를 작업해봤다. 구현 할 때 시맨틱하게 마크업을 하고 싶어서 관련 태그가 존재하는지 찾아봤는데, progress라는 태그가 있다는 것을 알게 됐다. 아래 사이트를 참고했다. https://www.w3schools.com/w3css/w3css_progressbar.asp W3.CSS Progress Bars W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScrip..

프로젝트를 진행하면서, 사용자의 만족도를 높이기 위해서는 빠른 렌더링 속도가 중요하다는 것을 느끼게 됐다. 렌더링 속도를 높이기 위해서 어떤 것을 고려해야하는지 공부하던 도중 리플로우와 리페인트에 대해 알아보게 되었다. 1. 개념 리플로우는 레이아웃이 변경 될 때 이로인해 영향을 받는 모든 DOM 노드들의 수치가 다시 계산되고, 레이아웃 트리가 재생성되는 것을 의미한다. 레이아웃이 변경 될 때 발생하기 때문에 width, height, padding, margin, float, position 등이 변하면 발생한다. 리페인트는 리플로우가 끝난 후에 발생하는 현상으로, 다시 만들어진 레이아웃 트리를 레이어에 다시 그리는 작업을 의미한다. 또한 리페인트는 가시적인 속성에 의해 발생한다. ex. color,b..

Sass로 css파일을 컴파일하며 작업하던 도중 레포로 push하려고 했다. 명령어를 입력하려고 했는데 터미널에 입력이 안 돼서 당황했었다. ctrl + c 입력 후 명령어를 무사히 입력할 수 있었는데 그 이유는 ctrl + c가 Sass 감시를 중단시키는 기능을 하였기 때문이다. Sass 활용 중 push하고 싶을 때 ctrl + c를 통해 먼저 감시를 중단시키자!

길이 단위는 CSS 작업을 할 때 중요한 요소 중 하나이다. 유지보수와 연관되어 있기 때문이다. CSS에서 사용할 수 있는 단위는 절대 길이와 상대 길이로 분류 될 수 있다. 절대 길이 단위 : cm, mm, px 등 상대 길이 단위 : em, rem, vw, vh, % 등 절대 길이 단위 ( px 등 ) -> 절대적인 길이 그대로를 화면에 구현하고, 변동되는 값에 부여하는 경우 유지보수가 어렵다. 참고) 대부분 폰트 크기를 지정안했을 때 폰트크기의 기본 값은 16px이다 상대 길이 단위 ( em, rem, vw, vh, % 등 ) -> 가변적인 길이 단위이며 상대적으로 유지보수가 쉽다. 1. em 부모 요소의 폰트 크기가 기준이 된다. hello1 : 20px hello2 : 10px hello3 : ..

IR (Image Replacement) 기술 웹페이지상 사용자입장에서는 볼 수 없지만, 스크린리더나 브라우저를 위해 텍스트를 기재하는 방법이다. 웹접근성 향상과 SEO최적화 하는데 영향을 끼치므로 중요한 개념이다. 이전에는 웹페이지 문서 구조상 필요한 제목이지만, 화면상에는 나타날 필요가 없을 때 아래 속성을 사용했었다. visibility:hidden 하지만 공부해보니 위와 같은 속성은 스크린리더가 읽어주지 않고 무시하기 때문에 웹접근성을 감소시켜 사용해서는 안되는 속성이었다. 위 속성을 대신해서 아래와 같은 코드를 사용 할 수 있다. position: absolute; clip-path: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow..

> 벌써 4주차가 지났다! 여름에 수업을 듣기 시작했는데 이제 가을을 넘어 때때로 초겨울처럼 너무 춥다. 금방 한달이 또 지날테니 시간을 더욱 잘 활용해야겠다. 4주차는 멋사와 멋사 동기들의 따뜻함에 대해 알게 된 한주였고 개인적으로는 많은 일정을 온전히 소화하지 못해서 아쉬웠다. 하지만 그래도 배운것들을 일부 활용하여 과제를 수행하고 git push를 성공하여 살짝 뿌듯함을 느꼈다. 5주차는 책집필, 이력서작성, 과제, 수업 등 5마리 정도의 토끼를 잡아야하니 매시간에 집중하고 회고조 조장님이 추천해주신 공부법과 일정관리 방법을 최대한 활용하는 것이 목표이다! 💛 Fact CSS 지그재그 특강 학습내용 CSS (grid, transition, transform, animation, perspective..

> 이번주는 유독 효율적인 학습방법과 시간활용에 대한 고민이 많았던 주였다.. 떨어진 체력으로 인해 원활히 학습이 이뤄지지 않아서 과제 수행이 하나하나 힘들었고 아직도 해결못한 문제들이 많다.. 동기분들에게서 ,,, 조언을 구해봐야겠다고 생각한 한주였다...! 💛 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작성에 시간이 많이 소비된다. > 강의시간에 집중해서 추가적인 시간 소비를 줄이자. > 일일 / 주간 시간을 잘 사용할 수 있도록 계획 세우는 것이 필요하다. 💛 Fact 멋쟁이사자처럼 프론트엔드스쿨 3기 개강 학습내용 Git Hub & Git, 웹의 기초 상식(URL, IP ,Port) HTML(semantic tag), CSS(selector, initial value, inheritance) HTML sectioning, CSS 구현 과제 수행 모던 자바스크립트 책 구매 ❤️ Feeling 고대했던 멋쟁이사자처럼 프론트엔드스쿨이 개강해서 즐거웠다. 좋은 동기들, 회고팀원들과 함께라서 1주차를 잘 보낼 수 있었다. 생각보다 HTML, CSS 개..