분류 전체보기

[CSS] Position 속성

Position 속성 Position 속성은 문서 안 요소들을 정하는 속성이다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다. static 아무 값도 넣지 않으면 되는 디폴트값으로, top, left, bottom, right 값을 전부 무시한다. relative 원래 있어야 하는 자리를 기준으로 위치를 지정한다. absolute relative 한 부모 요소를 찾아 위로 이동한다. 부모에 relative 가 없다면, 상단 위 0,0 기준으로 목표값이 정해지고 변경된다. Fixed 브라우저의 최상단에 고정. 마우스 스크롤을 따라 다니는 요소로, z-index 를 이용해 최상위 개체에 있는 것이 좋음. sticky 문서 요소 따라 배치되나, 가장 가까운 부모 el..

[CSS] SCSS 에 대하여

css : Cascading Style Sheets Sass : Syntactically Awesome Style Sheets SCSS : Sassy CSS Sass css 의 단점을 보완하기 위해 나온 확장 언어이자, 전처리기로 css 에 존재하지 않는 기능들을 가지고 css 를 다루는데 도움을 주는 툴이다. Sass 가 제공하는 기능은 다음과 같다 Variable(변수) : 자주 사용하는 색이나 폰트 등을 변수로 지정하여 재사용할 수 있음 Nesting(중첩) : 상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성가능. Modularity(모듈화) : @use를 사용하여 파일을 분할하고 모듈화 할 수 있음 Mixins(믹스인) : 함수처럼 defalut parameter를 지정할 수 있고, pa..

[CSS] 반응형 웹사이트 란 무엇인가 ( Feat. 적응형 웹 사이트 )

반응형 웹 사이트 vs 적응형 웹 사이트 최근 10년간 모바일 유저는 계속 증가해서 현재는 모바일 시장이 PC 웹 시장의 2배 가까이 되는 규모까지 증가했다. 지금 우리가 사용하는 웹 사이트를 모바일에 크기까지 그대로 옮기면 사용하는 사람은 아무도 없을것이다. 그래서 모바일 유저들의 접근성을 늘리기 위해 사용하는 방법으로, 반응형 웹과 적응형 웹을 주로 사용한다. 이 두개를 간단하게 소개해볼까한다. 반응형 웹 사이트 반응형 웹 사이트는 웹 페이지의 디자인과 레이아웃이 전부 화면 크기에 자동으로 맞춰지는 웹을 의미한다. 하나의 템플릿이 크기가 늘었다 줄었다 하면서 적응되면서 다른 도메인으로 변경되지 않고 계속 같은 화면에서 진행되는 웹을 의미한다. 인스타그램이 가장 대표적인 예시라고 할 수 있다. 그렇다면..

[HTML/CSS] px, em, rem, vw, vh 에 대하여

용어 정리 px ( pixel ) : 픽셀 em ( element ) : 엘리멘트 rem ( root - element ) : 루트 엘리멘트 vw ( Viewport Width ) : 뷰포트 길이 vh ( Viewport Height ) : 뷰포트 높이 절대 길이 단위 px px 는 고정 값을 쓰는 절대 길이 단위이다. 특정 뷰가 늘어나건 줄어들건에 관계없이 지정한 사이즈를 계속 보여준다 참고로 96px 는 1 인치라고 한다. 상대 길이 단위 em, rem, vw, vh 는 상대 길이 단위이다. em, rem em 과 rem 은 폰트에 비례한 크기로 em은 element 의 폰트 사이즈, rem은 root 의 element 사이즈이다. em, rem 둘다 디폴트 값은 16px 이다. rem em 라고 했..

코드트리 연탄 기부 이벤트 참여

https://www.codetree.ai/christmas 산타의 은밀한 연탄배달 코딩으로 따스함을 선물하세요🎁 www.codetree.ai 코드 트리에서 하는 이벤트 코테에 참여했습니다. 저는 총 3문제 풀었습니다. 오랫만에 풀어서 그런가 많이 풀지는 못했지만, 다음엔 더 열심히 풀어서 전부 풀어보는걸 목표로 하겠습니다.

[ JavaScript ] 자바스크립트 ES6, 그 이후 시리즈 02. ES8 (JS2017)

이전 글 2022.10.02 - [Javascript] - [JavaScript] ES5 vs ES6 차이 2022.12.22 - [Javascript] - [ JavaScript ] 자바스크립트 ES6, 그 이후 시리즈 01. ES7 (JS2016) 오늘은 ES8에 대해 알아보자. 참고로 정보는 https://www.w3schools.com/js/js_2017.asp 여기를 가장 많이 참고하고 있다. JavaScript ECMAScript 2017 W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS..

[ JavaScript ] 자바스크립트 ES6, 그 이후 시리즈 01. ES7 (JS2016)

2022.10.02 - [Javascript] - [JavaScript] ES5 vs ES6 차이 자바스크립트 버전은 ES6 이후로 매년 새로운 문법이 추가되어 왔다. 오늘은 그 첫 번째 버전인 ES7을 소개해볼까 한다. Exponentiation Operator (제곱 연산자) 원래는 Math.pow 를 써서 표현하였으나 Math.pow(2, 3); // 8 ES7에서는 이렇게 간단하게 표현이 가능해졌다. 이 식은 첫번째 연산자에 두 번째 연산자를 제곱하는 방식이다. 2 ** 3; // 8 Exponentiation Assignment Operator (제곱 할당 연산자) let a = 2; a **= 3; // 8 // a = a ** 3 Array.prototype.includes() 배열의 요소가..

항해를 돌아보며

몇주간의 항해를 돌아보며 많은 일들이 있었다. 처음에 항해 시작할때는 언제쯤 끝날려나 했지만 역시 돌아봤을때는 금방 가있는게 시간인거같다. 리더 지원을 해서 리더로 프로젝트를 진행하면서 팀원들과 이야기 하며 많은 것들을 배운것같다 특히 css 는 계속해서 새로운것을 배우는것같다 Styled Component 에도 div 값에 class 를 넣어서 그 클래스명으로 변경을 한다는것과 스타일 컴포넌트가 지원하는 다른 라이브러리가 있다는것도 알았다 ( 캐로셀 라이브러리라던가, 여러가지 라이브러리를 쓸수있었음) 같이 팀을 짜서 코딩을 하니 서로 모르는것도 배우고, 공유한다는점이 너무 좋았다 옛날에 학교 다닐때 만들어둔 개발 디스코드를 다시 활성화 해서 열심히 공유해보고싶다는 생각도 들었다.

항상 새로운 프론트엔드( Feat. 잡념 )

저번 팀프로젝트에선 항해에서 배운 Redux-Thunk랑 Redux, RTK 를 사용해서 전역 관리와 통신을 했는데 이번 팀프로젝트에서는 새로운 것을 배워보자는 마음에 ( 시간도 상대적으로 길어서 ), React-Query, Recoil 을 써봤는데 확실히 리덕스에 비해 보일러 플레이트가 많이 줄어드는듯한 느낌을 받았다. Query 를 선택하게 된 가장 큰 이유는 보일러 플레이트도 있지만 데이터 패칭, 캐싱 등 서버 업데이트 등 상태의 사용을 용이하게 이용 가능했기 때문이다. 아직은 완벽하지는 않지만 이것저것 배우는 과정이 재밌는거같다. 이번에는 Carousel 라이브러리도 새로 배우고, 여러가지를 배우면서 새로운 걸 배우는 재미가 엄청 쏠쏠하다. Svelt 도 요즘 뜬다는데 한번 배워보고 싶은 욕심이 ..

WIL 11월 3주차

라이브러리를 하나하나 배워나가고 있다 React Query 부터 해서 Slick, nivo 등 이것저것 배우는데 원래는 강의를 주로 찾아봤었는데 docs를 점점 많이 찾게 되는거 같다. 저번에 디스코드 클론때 뭔가 좀 느린거같은 느낌을 받아서 성능에도 신경을 많이 써보고 싶어서 Lighthouse 보는 방법도 배우고 있는 중이다. 이것저것 배우는게 생각보다 재밌어서 만족하고 있다. 다음 WIL 에는 더 많은것을 배웠으면 하는 마음이 있다