일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Flutter
- javscript
- Session
- graphQL
- pug
- API
- 자바스크립트
- NextJs
- DART
- 리액트
- Component
- MongoDB
- nodejs
- ECMAScript
- CSS
- frontend
- backend
- ES6
- form
- HTML
- TypeScript
- express
- CLONE
- react
- clonecoding
- Mongoose
- heroku
- JavaScript
- GRID
- node.js
- Today
- Total
목록CSS (61)
Enjoy Programming
react에서 styling해주는 방법은 css파일을 만들어 한번에 import 해주거나 또는 각 컴포넌트들과 묶어서 css를 import해주는 방법이 있다. react는 각 부분부분을 나누어 쓰는 컴포넌트화 시키는 것에 의미가 있기에 이런식으로 index.js파일을 포함한 폴더를 만들어서 default로 내보내주면 인식이된다. 음 .. index라는게.. 의미가 크구나 싶다. 아직 잘 이해는 안간다 계속 봐야 할듯 하다. 그런데 css를 하다보면 class명을 주기가 참 까다롭다. class명이 중복되지 않도록 코드를 짜는게 상당히 성가시다. 물론 같은 class를 줘서 함께 prop을 주기는 좋지만~ 코드가 방대해지다 보면 다른 부분과 겹칠 가능성도 농후한데 react에서는 css모듈이라는 것을 이용..
오늘은 나에게 휴식을 준날이다~ 요 몇일 하루 두~세시간 잤더니 머리도 멍하고 다리도 풀리는거 같고 ㅋㅋㅋ 휴식을 준 김에 우리 세 가족 가까운 바닷가 가서 모래 놀이도 하고 좀 쉬다 왔다 마냥 쉬긴 그래서 간단히 자바스크립트를 이용해서 시계를 만들어 보았다. 먼저 html은 초침 시침 분침으로 나눈 박스 그리고 전체를 감싸는 시계 테두리 박스 요렇게 구성되어있다 css는 특이점이라면 transform-origin인데~!~! transform-origin으로 시게바늘 세개의 시작점을 바꿔준? 것이다 이건css 포스팅에서 따로 다루자 자바스크립트는 우선 세계의 시계바늘이 될 태그를 쿼리셀렉터로 선택해주고 시간을 적용해줄 함수를 만든다. crretnDate에 new Date()로 시간을 담아주고 각각 get..
자바스크립트가 es6로 넘어오면서 기본값 함수 매개변수(default function parameter)를 사용하면 값이 없거나 undefined일 경우 이름 붙은 매개변수를 기본값으로 초기화 할 수 있게 되었다. mutiply라는 함수에 a, b 두개를 매개변수로 주고 함수를 실행시 인자가 하나만 들어가거나 아에 안들어가는 상황이 생기면 NaN이 리턴되었다 default값이 없었던 시절에는 저걸 해결할 방법이 있었나 모르겠지만 es6에서는 위처럼 a= 2, b= 3이라는 기본값을 주고 만약 인자가 정상적으로 두개가 들어온다면 들어온 인자값으로 return 구문을 실행하지만 만약 위처럼 5하나만 들어온다면 b의 default값인 3이 기본 인자로 전달 되어 5 * 3이 리턴된다. mdn을 살펴보자 jav..
자바스크립트로 키보드 드럼만들기를 하던중 data-key속성을 접하게 되었다. 이를 알아보려고 mdn을 뒤지니 아에 data-로 시작하는 속성이 있어서 포스팅한다. HTML5는 특정 요소와 연관되어 있지만 확정된 의미를 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었다. data-*속성은 표준이 아닌 속성이나 추가적인 DOM속성, Node.setUserData()와 같은 다른 조작을 하지 않고도 의미론적인 표준 HTML요소에 추가 정보를 저장할 수 있도록 해준다. 문법은 간단하다. 어느 element에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 화면에 안보이게 글이나 추가정보를 element에 담아 놓을 수 있다. 이런식으로 추가정보를 저장한다. 이것을 자바스크립트에서 접..
이번 과제 완성작이다. 이것도 반응형이고~~~ 역시 grid와 flex-box를 활용해서 만들었다. 주요한건 바디에서 grid-templat-columns, rows를 이용해서 3X4그리드를 만들었고 최소는 max-content, column은 1fr row는 33%씩주고 빨간 부분은 span2를 주고 리스트 부분은 grid-row: span3을 줘서 할당했다. 특별히 많이 활용한건 grid-column과 grid-row를 많이 활용했다. 코드를 보자~ 이렇게 보니 복잡하긴 하다.. 근데 나름 layout에 대한 느낌을 더 많이 생각하게된? 계기였다 참고로 챌린지서 처음으로 내 작품이 올라왔다 ㅋ 기분이 좋았다 ㅋㅋㅋ 나이가 먹어도 이런건 기분이 좋다.
4번쨰 css 레이아웃 챌린지는 이렇게 레이아웃을 잡는 챌린지였다. 짧게나마 코드 리뷰를 해야지.. 중점은 반응형으로 며개의 칼럼이 생기더라도 아래로 계속 이어 나갈수 있게 만드는 ? 암튼 반응형 페이지 만드는것 전체적으로 grid를 활용했다. html 코드는 반복반복이다 어짜피 같은 그리드가 계속 반복되니까 css 코드를 보면 챌린지 당시에는 이렇게 줬다는게... 멍청했다... 그냥 바디에 그리드 주고 auto-fit주면 되는건데... auto-fill과 auto-fit을 잘 이해하지 못했었다. 다시 짠다면 바디에 grid-template-columns를 repeat(auto-fit, minmax(Xxxpx, 1fr)요렇게 주고 로우는 필요한만큼 주고 auto-rows를 다시 주면 되고 헤더는 grid..