크롬, 인텔리제이 사용시 발생한 문제점에 대해서 작성합니다. 부트스트랩 테일윈드 CSS 파일 적용안되는 이유 인텔리제이가 자잘한 버그가 존재하며 타 CSS 파일들을 적용할 경우 인식을 하지 못하는 경우가 있다. 나 또한 이런 경우가 있어서 정리해 보았다. 이에따라 할 수 있는 방법 2가지가 있다. 1. Reload from disk resources 우클릭 -> Reload from disk 2.Build 설정 최상단의 Build -> Build project 3. 브라우저 캐시 리로드 크롬 기준 -> 내장되어있는 캐쉬 삭제하거나 컨트롤 + 쉬프트 + R을 통해 캐쉬를 날려버린다. 혹시 더 좋은 방법이 있다면 댓글로 피드백 부탁드리겠습니다! 감사합니다.

드코엘 강좌를 보다가 CSS로 서로 다른 상황에 대한 이해가 안 가는 부분이 있었다. 한참을 고민하다가 사용법에 대해 이해하고 익혀서 까먹지 않기 위해 작성한 포스팅이다. #1 요구사항 왼쪽의 썸네일 이미지를 클릭하면 오른쪽과 같이 보이도록 만들어야 했다. 조건은: 클릭 했을 때, 2줄이 한 줄로 보이도록 만드는 것. 위 이미지에 해당하는 코드 일부분을 가져왔다. 어떻게하면 위처럼 이미지를 클릭했을 때 다른 레이아웃이 보이는지 코드를 분석해 보자 import React from "react"; import styles from "./video_item.module.css"; //video>item>snippet const VideoItem = ({ video, video: { snippet }, onVi..

이전에 만든 웹사이트에서 캡쳐한 부분이다. 빈곤해결, 교육보장, 질병예방, 환경보호의 각 아이템들을 어떻게하면 4개를 가지런히 보여줄까? 란 고민을 했다. -분할 예시를 보자 이 당시 내가 만들었던 방법은 분할을 위해 빨간 네모들을 자식item이라고 생각했고, 각 자식들을 div로 나눴고, 자식들마다 className을 매겼다. 작업은 모 div를 기준으로 css를 넣어줬고 부모 아래있는 자식들을 위와 같이 분할 할 수 있었다. 이렇게 하다보니 발생한 문제점이 수정에 있어서 전체적인 HTML 구조를 이해하고 있어야 했고, 레이아웃 수정하는데 많은 번거로움이 있었다. 그래서 리액트를 이용하여 컴포넌트 형식으로 만들리라 다짐했고, 추후 리액트 강의를 들으며 css 부분도 [부모 div에 대한 css] wid..

하루 4시간 자면서 마감 기간을 지키기위해 달렸던 지난 나날.. 짧은 기간동안 빡세게 배우면서 내가 느낀 것들을 정리한 내용이다. 시행착오는 없을 수가 없다... 한 화면을 구성할 때 font-size = rem -> 모바일 및 웹에서 글자 크게 보기 설정을 해뒀거나, 작게 보기 설정 시 핸드폰 설장에 맞게 크기 변화 padding, margin = em -> 상위(root)의 사이즈에 맞게 변화한다. (비약적인 예시로: 상위의 font-size: 4 rem이고, padding: 1em이라면 우리 눈에 1cm가 준다, 상위의 font-size: 2 rem이고, padding: 1em 일 경우 0.5cm가 줄어들며 이는 반응형에 유리하다. image = px px=절대값 으로 어떠한 모니터 사이즈에도 일정..

웹을 제작하다가 모니터 내에 헤더를 포함하고, 딱 맞게 화면 구성을 하고 싶었습니다. 스크롤 시 다음 section으로 보이게 하는것이 요구사항이었습니다. 여기서 스크롤 한 번만 하면 아래 footer가 보이게 하는 것이죠 다시 본론으로 와서 모니터에 화면이 꽉 차게 구성하는 방법은 1. header의 height를 알아낸다 2. main화면에 넣을 이미지든 동영상이든 이를 묶고 있는 상위의 root태그를 찾는다. 4. calc ☆를 이용하여 계산해 준다. (calc는 계산기로 이용하는 CSS function입니다.) 5. 부모태그에 중괄호를 열고 넓이는 %, 높이는 100vh(모든 모니터에 100%로 보여주겠다) calc를 이용하여 header의 height를 빼준다. (보통 다른 웹사이트는 80px,..

웹 사이트 제작 중에 파일 이미지를 변경해야 하는 일이 생겼다. 밤에 제작하느라 뇌가 굳어버려서 한참을 고민했는데 손쉽게 해결하는 방법을 발견하여 글을 적게 되었다. 디자이너 혹은 프런트 개발 연습을 위해 웹 사이트를 만드는 사람에게 도움이 되었으면 좋겠다. 내가 만들고 있는 웹 사이트의 Vision과 Mission이미지이다. 첫번째 시도 body에 검정 배경을 주어 img마다 background-color: white 를 주었다. 그러나 사진과 같이 흰 배경이 마음에 들지 않았다. 한참을 찾아보니 fill: 속성을 이용하여 수정 하는 방법이 있었는데 내가 원하는 색을 줄 수 있다곤 하지만 적용에 실패했다 두 번째 시도 반전 속성 filter: invert(100%); 이것을 이용하면 내가 원하는 검정배..

flex-grow 컨테이너를 꽉 채우기 위해 늘어난다. flex-grow를 사용하지 않으면 페이지가 작아지던 커지던 일정한 사이즈를 유지하지만, flex-grow를 사용하면 페이지에 맞춰 그에 해당하는 사이즈를 유지한다. item1에 flex-grow:3 item 2에 flex-grow:1 item3에 flex-grow:1 적용된 모습 item 1은 3배만큼 커진다. flex-shrink 페이지가 작아지면 어떻게 적용할지 지정한다. 페이지가 줄어들 때 flex-shrink: 숫자만큼 주어 줄어들 경우 어떠한 사이즈로 줄어들지 정해준다. 기본값은 0이다. 페이지가 줄어들 때 flex-shrink:3으로 준 item1은 3배로 줄어든다. flex-basis 아이템들이 공간을 얼마나 차지해야 하는지 세부적으로..

justify-content: 중심축에서 아이템들을 어떻게 배치할지 결정한다. 1. justify-content: flex-start: 왼쪽을 기준으로 배치 2. justify-content: flex-end 오른쪽을 기준으로 배치 flex-direction: row-reverse와 유사하지만 배치 순서가 바뀌지 않는다는 차이점이 있다. 3. justify-content: center 가운데 배치 4. justify-content: space-around 각 박스마다 spacing이 들어가 있다 ▶ 1번과 10번이 벽 쪽에 붙어있다. 5. justify-content: space-evenly 각 박스마다 동일한 spacing이 들어가 있다. ▶ 1번과 10번도 똑같이 떨어짐 6. justify-conte..