hahagarden의 블로그

인터넷과 웹 인터넷은 전세계적으로 연결된 컴퓨터 네트워크 통신망이다. 웹 뿐만 아니라 온라인 게임, 이메일, 모바일 앱을 포함한다. 웹은 문서, 이미지, 영상 등을 볼 수 있는 공간이다. 웹은 인터넷에 포함되어 있다. 이 공간은 인터넷 익스플로러, 크롬, 파이어폭스, 오페라 등 다양한 웹 브라우저가 있다. 그런데 2000년대 초에 어떤 사이트가 어떤 웹브라우저에서는 작동을 하고 어떤 브라우저에서는 작동을 안하거나, 어떤 브라우저에서는 버튼이 보이고 어디에서는 안보이는 등의 호환성 문제가 있었다. 그래서 개발자들이 동일한 서비스를 만드는데 브라우저별로 구현을 해주어야 했다. 힘들었을 것 같다. 😰 이러한 브라우저 호환성 문제를 해결하기 위해 웹 표준이 등장했다. 웹 개발 형식을 통일시킨 것이다. 그래서 생..

피그마로 GNB를 만드는 실습을 해보았다. click interaction을 주고 change to로 컴포넌트 프로퍼티를 변환해주는 기능을 이용하였다. 그런데 change to는 상태를 전환할 때(호버효과나 아코디언 컴포넌트처럼 펼침, 접힘을 구현할 때) 주로 사용하고, GNB의 메뉴와 같이 아예 페이지를 전환하는 경우에는 각각 프레임화하여 click interaction은 Navigate to를 이용하는 것이 적합해보인다.

토글 버튼 배경 색을 슬라이드처럼 가로로 미는 애니메이션을 주고 싶었다. 쉽지 않았다. 😨 react와 styled-components를 사용했다. inner div 만들기 토글 자체에서 배경색에 변화를 주는 애니메이션을 주는 것이 아니라 일종의 눈속임을 하는 것이다. 토글 안에 div(.toggle-inner)를 하나 더 만든다. 그리고 토글을 on/off할 때마다 각각 .toggle--checked가 추가되거나 삭제된다. overflow: hidden; > .toggle-container { width: 60px; height: 32px; border-radius: 30px; background-color: #8b8b8b; overflow: hidden; > .toggle-inner { display..

모달창 중앙 배치 모달 창처럼 가장 상위 레이어에 가로, 세로 모두 중앙에 배치할 경우가 많은데 방법을 자꾸 잊어버려서 기록을 하려고 한다. position을 주고, top과 left를 각각 50%으로 위치시킨 다음, x축과 y축으로 다시 각각 -50%씩 옮기면 된다. position: fixed; // 또는 absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 또는 배경에 모달창이 자식으로 있을 경우 배경 div에 display:flex, justify-content, align-items를 모두 center를 주어도 가능하다. div 가운데 정렬 margin: 0 auto; 다음과 같이 텍스트를 포함한 div를 가운데정렬을 하고 싶을 때에..

grid Flexbox와 마찬가지로 가장 많이 쓰이는 CSS 레이아웃 방법이다. Flexbox는 1차원의 행 또는 열의 레이아웃에 주로 쓰이고, grid는 행x열 2차원의 레이아웃을 배치하는데 적절하다. !codepen[hahagarden/embed/vYzNyyb?default-tab=css%2Cresult&theme-id=light"] container와 item 부모요소를 grid container라고 하고 grid의 영향을 받는 전체 공간이다. 자식요소를 grid item이라고 하며 설정된 속성에 따라서 아이템들이 배치된다. 그리드 형태 정의 container에 정의 열, 행 분할: grid-template-columns, grid-template-rows 셀 간격 지정: row-gap, colum..

와이어프레임과 목업 와이어프레임 웹 또는 어플리케이션의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 가장 큰 목적은 화면의 영역을 분할하여 구성을 나타내는 것이다. 이 와이어프레임을 보면 어떤 프로그램(POS기(상품 주문 시스템))을 계획하고 있는지 알 수 있다. 특정 목적을 잘 유추할 수 있는 성공적인 와이어프레임이다. 목업(Mock-up) 대부분의 산업에서 목업이란 실물크기의 모형을 뜻한다. 휴대폰 대리점에 가면 화면 이미지를 붙여놓고 겉모양은 실제 휴대폰과 같은데 내부가 비어있는 모델들이 있다. 휴대폰 목업이다. 이와 같이 웹과 앱의 목업도 실제로 작동하는 것과 같이 화면을 HTML로 하드코딩한다. 작성자:hahagarden 작성일시:2023-02-16 00:00 내용:개발은 재밌다 ! 위 코드처..

첫 페어 프로그래밍, 첫 개인 작품으로 계산기 목업을 만들었다. 아직 JavaScript를 배우지 않았기 때문에 HTML과 CSS만을 이용했다. 컨셉 좋아하는 바다를 배경으로 만들어 보았다. 시원한 바다나 푸르른 풀숲을 보면 기분이 좋아져서 종종 모니터 배경화면을 바꾸곤 한다. 배경이미지를 추가하고, CSS공부를 하던 중에 재미있는 셀렉터:target를 발견해서 사용해보고자 🏞이모지가 있는 버튼을 추가했다. 버튼 정렬 방법 이번 과정에서 배운 Flexbox를 사용했다. Mdn에 따르면 Flexbox는 일차원의 행 또는 열 형태로 항목 무리를 배치하는 것을 염두에 두고 설계된 레이아웃 메서드이고, grid는 행과 열 모두 염두에 둔 2차원적 레이아웃을 고려해서 설계되었다. 그래서 계산기와 같이 버튼들이 행..

CSS 웹의 스타일링을 하는 언어이다. 더 나은 사용자 경험(UX, user experience)를 제공하기 위해 직관적이고 쉬운 사용자 인터페이스(UI, user interface)를 만드는 것이 프론트엔드의 역할이다. HTML로 구조가 짜인 웹 페이지를 CSS를 통해 더욱 사용하기 쉽고 보기 편리도록 스타일링할 수 있다. 절대단위와 상대단위 절대단위(px, pt 등) 센티미터(cm)처럼 1px은 절대적인 값이다. 옛날에는 절대단위인 px을 많이 사용했지만 상대단위를 쓰도록 해야 한다. 고해상도의 모니터의 한 점보다도 1px이 더 크기 때문에 정교한 스타일링을 못하고, 절대값이기 때문에 스마트 기기의 화면, 노트북 등등 다양한 크기의 브라우저에 알맞게 변화하지 못한다. 상대단위(%, em, rem, c..