일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- node.js(express) + ws(websocket) + react
- usemutation custom hook
- http.createserver
- 티스토리챌린지
- css module classNames
- React
- 리스티웨이브
- next.js
- 이미지 업로드 과정
- type reference cannot be named error
- 오블완
- trigger additional callbacks
- 코드잇 스프린트 FE 1기
- dynamic metadata
- pure functions
- inferred type error
- express react
- components as formulas
- useimperativehandle 사용법
- CSS module 장점
- 프리렌더링
- 리액트로 채팅 기능 구현하기
- useref 타입
- express로 채팅 기능 구현하기
- 특정 dom node만 노출시키고 싶을 때
- 스프린트 여정 마침
- 회고
- useimperativehandle 사용할때
- app.listen
- 리액트 19 useref
- Today
- Total
목록Programming/CSS (4)
Life is connecting the dots .

부트캠프에서 최근 2주 동안은 HTML, CSS를 배우면서 매주 과제로 주어지는 웹사이트를 점진적으로 만들고 있다. 오랜만에 HTML과 CSS만으로 웹사이트를 만들어보니 확실히 리액트처럼 컴포넌트 단위로 만들 때보다는 전체적인 레이아웃을 고려해서 태그와 스타일을 적용해 나가야 한다는 점에서 차이가 느껴진다. 이번 포스팅에서는 지금까지 화면을 구현해 나가면서 고려해서 적용한 점, 미리 생각하지 못해서 아쉬웠던 점, 더 좋았던 방법 등을 토대로 앞으로 비슷한 상황에서 어떻게 좋은 레이아웃을 그릴지에 대해 스스로 정리해 볼 겸 글을 작성하려고 한다. 초기값 설정과 reset.css 보통 css 초기값을 설정할 때 하나의 파일 맨 상단에 넣어주는 경우가 많았는데 각 페이지별로 html파일도 각각 만들어가다 보니..

이번주에 HTML, CSS, JS를 사용해서 슬라이더를 만들었는데, 슬라이더를 좌우로 움직이면 범위에 따라서 가격이 변경되는 기능이고, 범위에 따른 슬라이더 바의 색상을 채우기 위해 CSS의 linear-gradient() 속성을 처음 사용해 보게 되었다. linear-gradient를 사용하면 두 가지 이상의 색상을 사용해서 점진적으로 전환하여 그라데이션 이미지를 만들 수 있게 해 준다. 색상이 시작되는 방향, 색상이 차지하는 비율, 색상이 나아가는 방향(각도)을 정할 수 있고 어떻게 정하냐에 따라 멋진 그라데이션 효과를 줄 수 있다. 내가 만든 슬라이더는 두 가지 색상의 구분만 필요하여 각 색상을 퍼센트로 구분해 주었다. 그럴 때는 다음과 같이 비율을 절반씩만 채워서 초기 상태로 만들고, 슬라이더를 ..

반응형 웹이란 반응형 웹 디자인은 사이트가 데스크탑에서 모바일에 이르기까지 모든 디바이스에서 최적으로 보이고 작동하도록 만드는 데 중점을 둔 웹 개발 개념이다. 대게 데스크탑, 태블릿, 모바일 각각의 디바이스에서 서비스를 문제없이 이용할 수 있는 화면을 보여주며, 뷰포트(viewport) 크기를 변경하는 경우 이에 반응하여 적절한 화면을 제공하는 디자인 접근 방식이라고 할 수 있다. 반응형 웹을 만들기 위한 기술 중 하나로 미디어쿼리가 있고, 화면 크기가 다른 디바이스의 뷰포트를 토대로 미디어 쿼리를 적용하므로 먼저 뷰포트에 대해 이해할 필요가 있다. 뷰포트 뷰포트는 현재 보고 있는 화면의 영역으로, 접속한 기기에서 보이는 실제 영역의 크기를 의미한다. HTML문서는 어떤 기기에 접속하더라도 기본으로 9..

1. 문제 정의 - FrontMento 과제를 하는 중, class 마다 폰트의 색상을 변경해야 했다. - 처음에는 class 마다 color를 지정해 주고 주석으로 컬러명을 표기했었는데, 나중에는 컬러값과 색상을 매치하는 것이 헷갈리게 되었고, : root 에 속성을 정의하여 HTML 문서 전체에 적용할 수 있는 방법을 찾게 되었다. 2. 사용자 지정 속성(custom properties)이란 1) 정의와 특징 - custom properties는 특정한 값을 포함하여 사용자에 의해 정의되는 엔티티이다. - 코드의 재사용성을 높혀주고, 유지보수에 용이하다. - 특정 값(px, rgba, hsl)을 적용하는 것보다 의미를 이해할 수 있게 해 준다. (--main-bg-color: white;) - 미디어..