일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- ES6
- Component
- Session
- TypeScript
- nodejs
- NextJs
- Flutter
- heroku
- pug
- MongoDB
- form
- javscript
- CLONE
- frontend
- ECMAScript
- HTML
- clonecoding
- 자바스크립트
- CSS
- API
- Mongoose
- node.js
- 리액트
- graphQL
- DART
- express
- JavaScript
- GRID
- react
- backend
- Today
- Total
목록web (5)
Enjoy Programming
역시 바쁜나날이다. 개발을 하며 생긴 이슈가 여럿이고 그 중에 아직 완벽하게 해결이 되지 않은 부분이 있는데 이슈는 이렇다 개발 후 deploy -> 하나의 컴퓨터에서 크롬에 dev도메인이 열려있는 상황 -> 배포 완료 되기 전 컴퓨터를 끄고 -> 배포 완료 후 reboot 이전 브라우저 복원 -> blanck 된 화면 자 이걸 해결하기 위해 많은 시도를 했다. 개발자 도구에는 uncaught syntaxerror 요게 뜨고 chunck load 에러가 발생한다. base tag 설정 meta cache-control 설정, pakcage json homepage 설정 등등 진짜 많은 걸 해봤다.. 코드 스플릿이 잘못 되었나? 아님 내 가 뭘 잘못 설정했나? .. 하.. 아무튼 nginx설정으로 어느정도..

이번엔 more 페이지를 작성 해보자 역시 find.html의 코드를 모두 복사해서 붙여넣자 그리고 필요없는 코드를 지우자~ 메인 태그안에 모든 요소 삭제! 하고서 헤더에 뮤직 아이콘 추가~~~ 이제 메인 태그를 꾸며 보자~ 어디서 봤다~ friends페이지에 user-component부분이다. user-component부분을 복사해서 붙여넣기 하자~ 다른 점이 있다면 이름 아래 서브타이틀이 달려있고 두번째 칼럼에 메세지 아이콘이 있다 두번째 칼럼에 아이콘은 역시 쉽다 그냥 fontawesome에서 적당한거 하나 갖다 붙여넣기 끝! ㄱ리고 서브타이틀에 전화번호를 넣고 아이콘을 넣자~ 서브타이틀 마진탑과 폰트사이즈 조절해주고 투명도 조절~ 빨간 느낌표 아이콘은 옆으로 패딩값 조절해주고 컬러는 색상 조절 해..

자 이제 user-component부분인 이 부분을 만드는 시간이다. 크게 보면 비슷한 레이아웃이다. 다른 페이지도 비스꾸리하다. 이미지가 들어가고 이름이나 채널명 같은게 들어가고 다른 페이지 보면 서브로 상태메세지나 설명 같은게 이름 밑에 들어간다. 다 비슷하게 만들어지니 일단 중간 크기로 만들어 보자. 우선 큰 섹션으로 div하나를 만들어주고 그 안에 왼쪽과 오른쪽 두개의 칼럼을 만들어 준다. 그리고 첫 번째 칼럼에 이미지와 텍스트가 들어갈 박스를 생성 해주고 텍스트 박스에는 다시 h태그 두개를 사용해서 텍스트를 집어 넣어준다. 이미지는 일단 폴더하나 만들어서 넣어 줬고, 사이즈 조정해주고 뭐 마진이나 이런거 다듬어 주면 끝난다. 그리고 텍스트의 정렬인데, 일단 칼럼 두개를 인라인으로 바꾸기 위해 부..

not연산자가 나온다. 앞선 포스팅에서 의문점을 여기서 교육적으로 해결 해 주신다. awesome! developer.mozilla.org/ca/docs/Web/CSS/:not :not() - CSS | MDN :not() La pseudo-class CSS :not() representa elements que no coincideixen amb una llista de selectors. Atès que impedeix que es seleccionin elements específics, es coneix com a pseudo-class de negació. :not(p) { color: blue; } Notes: Els selectors inú developer.mozilla.org 간단하게 n..