본문 바로가기

분류 전체보기

 (109)
[제로베이스] 한달 동안 프론트엔드 스쿨을 수행하면서 제로베이스 프론트엔드 스쿨 25기를 진행한지 한달째입니다. 4주동안 열심히 배웠고, 마크업 부분에서 어느정도 성과를 보았다고 생각하고 있습니다. 마크업 디자인 부분이 아직은 서투르고, 확실하게 이해하지 못했던 지난달에 비해 position, flex 와 grid layout, 시멘틱 웹 등의 지식들을 많이 배울 수 있었다고 생각하고 있고, 그 외에도 sr-only, ARIA 등의 스크린리더 사용자를 위한 마크업 설계 등 프론트 엔드 개발자로서의 시야를 넓힐 수 있었던 점이 좋았다고 생각합니다. 사실 완전하게 잘 따라가고 있느냐 라는 질문에는 그렇다 라고 대답하기는 힘들것 같습니다. 주어진 미션에 대해 고민하느라 조금씩 밀렸고, 이 때문에 마지막 4주차 강의가 좀 밀렸거든요. 하지만 최대한 빠르게 따라잡아..
제로베이스 프론트엔드 스쿨 - HTML/CSS프로젝트를 수행하면서 프론트엔드 스쿨을 신청한 뒤 수행한 첫번째 과제입니다. 총 5개의 미션이 있었고, 강의를 들은 것들을 다시한번 활용하면서 부족한 부분을 채울 수 있던 것 같습니다. 이번 미션을 하면서 가장 많이 든 생각은 react나 vue를 사용하고 싶다는 것이었습니다. 반복되는 태그를 하나하나 수정해야 했고, div 지옥에서 벗어나고 싶은 생각이 많이 들었습니다. 미션을 수행하면서 이부분을 컴포넌트로 만들면 더 깔끔하게 작성될 수 있을텐데 라는 생각이 자주 들었습니다. 그러면서도, HTML과 CSS 만으로 구현할 수 있는 범위가 꽤 넓다는 생각 또한 들었습니다. 이번 미션을 진행하면서 이전에 고민했던 부분을 이렇게 해결할 수 있었구나 라는 생각이 자주 들었습니다. 제가 가장 부족하다고 생각한 부분이 마크업 디자인 부..
Sass(Scss) 더 알아보기 Sass 7-1 패턴 - 7개의 폴더, 1개의 파일 이란 뜻으로, 7개의 폴더를 나눠 최종 산출물을 한 파일로 만든다는 뜻입니다. - 다른 프레임워크에서는 프레임워크에 맞춰 작업하기도 합니다. - 7 folder 1) base/ : 가장 기본이 되는 스타일이 들어가있습니다. 2) components/ : 버튼이나 드롭다운 등 각각의 스타일을 정의합니다. 3) layout/ : header, footer, sidebar 등의 레이아웃 스타일을 관리합니다. 4) pages/ : component와 layout을 묶어 페이지의 스타일을 관리합니다. 5) themes/ : 다크모드 등의 테마를 관리합니다. 6) abstracts/ : Sass 함수, 변수 등을 관리합니다. 7) vendors/ : bootstr..
SASS https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com Sass 란? Syntactically Awesome StyleSheets 의 약자로, 컴파일에서 Css 파일을 만드는 스타일 시트 언어입니다. Sass를 사용함으로서, 가독성, 유지보수, 성능, 중복코드 방지 등 다양한 면에서 이점을 얻을 수 있습니다. - nesting 구조 /* css */ p{ color: red; } p span { color: blue; } a:hover, a:..
CSS 반응형 디자인 PC와 모바일의 화면 비율은 다릅니다. 따라서 PC에 맞춘 웹 디자인은 모바일에서 보기 적합하지 않습니다. 반면, 모바일에 맞춘 웹 디자인 또한 PC에서 사용하기는 적합하지 않은경우가 많습니다. 따라서 화면의 비율에 따라 디자인이 바뀌는것을 반응형 디자인이라고 합니다. 다른 디자인 방법으로는 적응형디자인이 존재하는데, 적응형 디자인 같은 경우는 디바이스에 따라 웹 페이지를 따로 만드는 한편, 반응형 디자인은 웹의 크기에 따라 디자인이 변화합니다. Media Query - @media @media media-type and {media-feature-rule} { /* CSS rules */ } /* 예시 */ body{ background-color: blanchedalmond; } @media scre..
CSS Grid - 단위 fr - fraction, grid의 가로 길이와 세로의 길이를 비율로 나눌때 사용합니다. - 1:3:2 의 비율로 grid를 구성하려면 1fr 3fr 2fr 의 형식으로 만들 수 있습니다. - 절대길이와 함께 명시한다면, 남은 길이를 나눠갖게 됩니다. 예를 들어 100px 1fr 2fr 이라고 하면 100px을 제외한 나머지 길이를 1:2 로 나눠갖게 됩니다. min-content - 최소 content, 가장 최소한으로 차지할 수 있는 길이값입니다. - 내부 item의 크기에 딱 맞는 크기의 값만큼만 할당됩니다. mas-content - 최대 content, 차지할 수 있는 최대한의 크기를 지정할 때 사용합니다. - 부모값에서 가장 최대한으로 차지할 수 있는 값을 얻습니다. grid-template-..
CSS Grid - 단일 아이템 속성 grid-row & grid-column /* 1행부터 3행까지 차지하는 item */ grid-row-start : 1; grid-row-end: 4; /* 4행까지 늘어나는 item */ grid-row-start: span 4; /* grid 이름을 이용한 확장 */ grid-row-start: [grid_name] 2; - grid-[ row | column ]-start 와 grid-[ row | column ]-end 의 단축속성입니다. - grid의 선을 기준으로 작동합니다. grid-row-start & grid-column-start - 행/열 내 item에 설정하는 옵션입니다. - 지정한 숫자의 선이 item의 시작을 의미합니다. - n 번째 행/열부터 시작하는 item을 지정하려면 n..
내가 회사를 선택하는 기준 제가 회사를 선택하는 기준은 근무 환경, 위치, 회사의 방향성 이렇게 세가지입니다. 가장 먼저 보는것은 위치입니다. 좋은 회사여도, 제가 갈 수 없는 회사면 의미가 없기 때문에, 위치를 먼저 보게 됩니다. 현재 살고있는 곳 근처에 있는지, 회사 위치가 접근하기 편한 곳인지, 그리고 새롭게 집을 구하기 쉬운 곳인지를 먼저 고민하게 됩니다. 두번째로는 근무 환경입니다. 크게 근무 시간과 같이 일하는 직원들이 어떤지를 찾아보게 됩니다. 사실 시간은 크게 신경을 쓰지는 않지만, 같이 일하는 직원들은 어떤지 등은 이직자, 퇴사자의 근무 후기 등을 찾아서 보게 되는것 같습니다. 일이 고되어도 같이 일하는 사람이 좋으면 할 수 있지만, 일이 편해도 같이 일하는 사람이 좋지 않으면 일하기가 쉽지 않다고 생각하기 때문에..

티스토리툴바