콘텐츠기획자의 IT입문서

포트폴리오를 위해 작업했던 팀프로젝트 2개 모두 백엔드 중심에다가 실제로 배포가 되지 않았다 보니 스스로 얼만큼 작업을 할 수 있는지 역량 파악이 어렵다는 피드백을 받았다... 그래서 급 작업해보는 중인 도너츠샵 페이지 한 4시간 작업한 것이라 index 틀 잡고 script만 작성해보았다. 리소스들은 다 구글링해서 조합한 것들이고 오늘까지 한 것은 총 5시간 정도 소요되었음. (그중 원하는 이미지 찾는데만 1시간 30분 넘게 소요된듯..) 반응형 괴로운데 재밌음.. 아무래도 내가 모바일 사용이 높다보니 반응형 포기 못해~!~!

이미지 업로드시 썸네일이 큰 이미지에서 작은이미지로 축소되다 보니 화질 깨짐 + 쪼그라드는 현상이 발생..! 그래서 구글링을 해서 코드를 적용했는데 Scalr이 먹지 않아서 뭐지??? 한 30분 동안 뭐가 문제인지 몰랐음ㅎㅎ 없으니까 못 쓰지 바보야......ㅠ build.gradle 에 아래 내용을 추가해준다 ^^ implementation group: 'org.imgscalr', name: 'imgscalr-lib', version: '4.2' implementation group: 'net.coobird', name: 'thumbnailator', version: '0.4.17' 만약 maven이라면, 아래의 의존성을 추가하면 된다고 한다. org.imgscalr imgscalr-lib 4.2 그리..

현재 작업중인 프로젝트에서 이미지 파일 업로드 기능을 추가했는데 팀원들이 다 윈도우 유저들이라 properties에서 이렇게 경로 설정을 해주었다. file.dir=C:/upload/ file.imageDir=C:/imageUpload file.regFiledir=C:/upload/reg_file/ 그런데 맥북을 쓰는 나에게는 C드라이브가 없기 때문에 (D드라이브도 동일) 이미지 업로드를 하려하면 이런 짜증나는 에러가 뜸...ㅜ 더보기 Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'fileServiceImpl': Injection of autowired dependencies..

- 문제점 - 은 파일 선택 버튼과 파일명이 출력되는 부분이 하나로 되어있기 때문에 스타일을 변경하고자 해도 생각한대로 잘 안된다. 이럴 경우 을 통해 스타일링을 해주면 된다! 1. label과 input을 연결한다. 2. input을 hidden 처리한다. 3. 스타일을 label에 적용한다. 나는 추가적으로 파일명을 노출 시키고 싶어서 이 부분은 스크립트로 작동되게 했다. jQuery만 썼더니 자바스크립트로 어떻게 작성해야할지 너무 헷갈린다..^_ㅠ (리액트 공부 전 다시 자바스크립트부터 공부해야겠다.) 에 변화가 있을 경우 에 파일명을 노출 시킬 것이라 에 onchange로 기능을 주었고 스크립트는 아래와 같이 작성해주었다. function addImg(){ var fileName = documen..

그동안 생각만 해두었던 감정 기록 SNS를 만들어 보기 시작했다. 고작 index 한페이지 마크업 하는데 반나절 걸림 ^_ㅠ 모든 페이지 마크업하고 스크립트 짜려면.... 얼마나 더 걸리려나 시간이 된다면 백엔드까지 해보고 싶었는데 지금 속도면... 너무 오래 걸릴듯 하다ㅎㅎ (분발하자....)

2022년 UI/UX 트렌드를 검색하다 글래스모피즘, 클레이모피즘 이란 단어를 보게 됐다. 글래스? 클레이? 그게 뭔데.... UI/UX랑 어떤 연결고리가 있는데... 글래스모피즘은 이미 2021년도부터 트렌드였던 것 같고, 클레이모피즘은 메타버스의 출현과 NFT의 3D에 대한 인기가 상승하면서 부상하고 있다고 한다! 글래스모피즘 클레이모피즘 흐릿하고 약간의 투명도가 있는 불투명한 유리와 같은 모습으로 떠 있는 느낌을 주는 기법. 웹 기술의 발전으로 디자이너가 작업한 것과 매우 흡사한 정도의 수준까지 사이트에 반영이 가능해졌기 때문에 많이 이용 될 것으로 예상됨. 해당 효과를 통해 텍스트나 이미지 등의 가독성에 문제를 주지 않고, 영역의 색상을 달리하는 등으로 페이지 영역의 디자인 사용성이 높아지게 되었..

김버그의 HTML & CSS 강의를 결제하고 강의 극초반에는 내용에 비해 비싸다고 생각했는데 26% 들은 지금 시점에서 드는 생각은 잘 선택했다는 것!!! HTML, CSS 기본이야 어디서든 무료로 배울 수 있지만 본 강의는 +어떻게 제대로 사용하는지 알려줘서 도움이 된다 :) 👇 내가 듣고 있는 강의는 요고! 👇 이미지를 사용할 때도 그 의미를 파악하는 것이 좋다. 단순하게 이미지를 넣으려면 태그를 쓰면 되지 않나? 라고 생각할 수 있지만 정말 의미가 있는 이미지가 아니라면 태그를 사용하기 보단 CSS에서 이미지를 넣어주는 것이 더 의미에 부합하다는 것! 가령 아래와 같은 카드 뉴스 형태를 제작해야 한다고 할때 어떤 방식으로 코드를 짤 것인가? 가장 먼저 생각나는 코드는 단순하게 태그를 쓰는 것인데, ..

CSS 길이 단위는 생각보다 많다..! 그래서 실제로 뭘 써야할지 잘 모르겠다ㅜ 우선 고정은 px, 반응형에 따라 사이즈 변화가 필요할 경우 %, em을 쓰고 있긴한데 (이유도 모른체 폰트 사이즈도 px로 주는 나란 사람..ㅎ) 그외 다양한 단위들은 왜 있는 것이며... 어떤 경우에 써야하는지 문득 궁금해져서 서치 후 정리해본다. CSS 길이 단위 1. 절대 단위 단위 사이즈 (px 기준 반올림 적용) 설명 cm 37.8px mm 3.8px in 96px px 1px - 모니터에 따라 상대적인 크기를 가짐 - PC버전 코딩에서 주로 사용 pt 1.3px - 인쇄용 단위 - 주로 문서에서 많이 사용하는 단위 - 크로스 브라우저 결과가 매우 다를 수 있어 웹에서는 사용하지 않는 편 pc 15.6px 2. 상..