Web-app
-
CSS property overflow 알아보기 & 실습Web-app/CSS 2023. 10. 8. 19:15
overflow property란? 컨텐츠를 담고 있는 부모의 element가 컨텐츠를 다 담지 못할 때 어떻게 표현할 것인가를 지정해주는 옵션 value의 종류 visible (default) 초과된 컨텐츠는 클리핑(마스킹)되지 않고 부모 element 밖으로 나와 볼 수 있는 상태. 부모는 스크롤되는 element가 아님. hidden 초과된 컨텐츠가 부모의 컨테이너 박스에 클리핑(마스킹)되며 가려져서 보여지지 않는 상태. 스크롤되지 않으며 가려져 보여지지 않는 것이지 컨텐츠는 그대로 보이게 됨. clip 초과된 컨텐츠는 overflow-clip-margin property를 이용해서 클리핑 (마스킹)됨. default 값은 0px이며, px을 조절하면 초과될 범위에서 특정 px만큼 더 보이게 됨. ..
-
CSS position property 알아보기Web-app/CSS 2023. 10. 8. 10:35
position propery란? element를 html document내 어떻게 배치하는지 설정하는 property value : static(default) / absolute / relative / fixed / sticky 실습해보기 1. static default 옵션, position과 함께 많이 쓰는 z-index의 경우 default는 0으로 지정되어 있음. 2. absolute 부모 중 position이 정의되어 있는 element를 기준으로 어디에 위치할지 지정할 수 있으며, 현재 document flow에서 벗어나게 됨. 아래 예제에서 만약 content class에 position relative가 없으면, position fixed로 정의되어 있는 navigation bar를 기..
-
CSS 기초, 기본 구성과 결합자 종류 알아보기Web-app/CSS 2023. 9. 28. 15:33
CSS 코드의 기본 구성 Selector는 tag, id, class 등 바꾸고자 하는 타겟 Properties는 바꾸고자 하는 옵션, Value는 그 옵션의 값 일반적으로 CSS는 부모의 스타일이 자식에게 상속 (inheritance) 여기에 다양한 Rules를 추가하면서 자연스럽게 충돌하게 되는데, 이걸 잘 설계해서 스타일이 잘 적용될 수 있도록 하는 것이 핵심 반영 순서 1) tag 2) class 3) id 4) inline style (html 코드에 직접 style 코드 넣기) 4로 갈수록 가장 먼저 적용 하지만 inline style의 경우 코드 유지 보수하기 힘듬 결합자 (Combinators) See the Pen CSS practice by woongwoongs (@woongwoongs..
-
CSS hover시 채워지는 메뉴 버튼 구현하기Web-app/CSS 2023. 9. 24. 14:49
React에서 Main Navigation을 구현 하던 중, menu 버튼에 마우스를 대면 색깔이 채워지는 효과를 만들고 싶었읍니다. React에서는 a태그 대신 NavLink를 넣으면 css에서 자동으로 a태그로 인식이 되어 사용하믄 됩니당 1. box shadow + inset을 활용한 구현 box shadow를 transition하면서 색을 채우는 방식, 어디서 부터 shadow를 채울지 지정해주고 shadow의 색을 원하는 색으로 채워줍니다. See the Pen a css hover example by woongwoongs (@woongwoongs) on CodePen. 2. css before 를 사용한 구현 See the Pen Untitled by woongwoongs (@woongwoon..
-
ERR_OSSL_EVP_UNSUPPORTED, digital envelope routines::unsupported 오류 해결, Window에서 node JS 버전 관리하기Web-app/React 2023. 8. 5. 15:36
오류 이름 : npm start 후 digital envelope routines::unsupported 해결 방법 1. 윈도우의 경우 nvm을 설치해서 node js 버전 관리를 해줘야 함. (Node js 18-> 16 downgrade, react-script : "3.2.0") 2. package.josn에 react-script를 5.0.1로 바꿔서 npm install 후 npm start 실행 3. package.json에 script항목에 --openssl-legacy-provider start를 쓰라고 함 오늘도 오류 천국 오늘은 어떤 오류가 나타났을까요 Udemy에서 선상님이 만들어 놓은 리액트 프로젝트를 열려고 npm start를 누르니까 Error: error:0308010C:dig..
-
PSSecurityException 스크립트 실행 정책 오류 해결Web-app/React 2023. 8. 5. 14:46
npm start로 만들어진 리액트 프로젝트를 실행시키려고 했던 나.. 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다. Category Info : 보안오류 PSSecurityException 빨간글씨로 무시무시하게 뜨는 것이 아니겄읍니까 그래서 시키는 대로 해보았읍니다. 실행 정책 정보 - PowerShell PowerShell 실행 정책을 설명하고 이를 관리하는 방법을 설명합니다. learn.microsoft.com 이 오류를 해결하기 위해서는 윈도우 PowerShell 의 정책에 대해 알아야 합니다. PowerShell을 관리자 권한으로 열고 Get-ExecutionPolicy를 입력합니다. Get-ExecutionPolicy -List 를 실행했을 때 모두 Undefine..