티스토리

개발자와 화가

검색하기

블로그 홈

개발자와 화가

mj73.tistory.com/m

mj73 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

JS 프로젝트 TS로 리팩토링 하기 0. 개요 - 타입스크립트 초기설정 - NavBar.tsx로 리팩토링 1. 작업 상세 내용 0) tsconfig.json 기본 설정 { "compilerOptions": { "allowJs": true, "target": "ES5", "outDir": "./dist", "moduleResolution": "Node", "lib": ["ES2015", "DOM", "DOM.Iterable"] }, "include": ["./src/**/*"], "exclude": ["node_modules", "dist"] } 1) jsconfig.json 파일 삭제, tsconfig.json에 내용 추가 { "compilerOptions": { "jsx": "react", "baseUrl": "./src", "allow.. 공감수 0 댓글수 0 2023. 10. 25.
[메인프로젝트] Button component 구현 Modal창에 쓰일 버튼 컴포넌트 스타일을 정의해봤습니다. Figma의 오른쪽 상단에 있는 Dev Mode를 클릭해서 구현 예정인 컴포넌트의 CSS 코드를 구할 수 있었습니다. 피그마 CSS 코드 /*버튼 공통 코드*/ .custom_button { display: inline-flex; height: 50px; padding: 23px 30px; justify-content: center; align-items: center; gap: 10px; border-radius: 15px; font-weight: bold; } /*확인버튼*/ .confirm_button { background-color: #8DC693; border: none; color: white; margin-right: 20px; }.. 공감수 1 댓글수 0 2023. 8. 30.
[메인프로젝트] Redux 사용하여 NavBar 컴포넌트 구현 Redux를 사용하여 상태를 관리하는 기능을 가지고, 좌측에 위치해서 메뉴 네비게이션 바의 역할을 하는 컴포넌트를 만들어봅시다. 1. 리액트라우터 설치 npm install react-router-dom 2. 브랜치 정리 main / dev / fe / feat/NavBar 순서로 됩니다 fe에서 pull 하려면 현재 작업하던 브랜치(feat/NavBar)에서 git pull origin fe 하면 됩니다. main ㄴdev ㄴ fe | - feat/NavBar ㄴ be 3. Redux 개념 Redux를 사용하려면 redux와 @reduxjs/toolkit( 줄여서 RTK ) 패키지, 리액트에서 사용할 거라면 react-redux 패키지를 설치해야 합니다. 1) Provider 컴포넌트 리덕스 기능을 사.. 공감수 0 댓글수 0 2023. 8. 30.
[메인프로젝트] 개발규칙 확인 및 리액트 폴더 초기설정 프로젝트 개발 관련 규칙 커밋 자주 하기 PR 자주 하기 메인 브랜치에 직접 커밋하지 말기 dev fe feat: ㅇㅇ기능 feat: ㅁㅁ기능 be feat: ㅇㅇ 기능 feat: ㅁㅁ기능 (브랜치 네임에 /가 안들어가져서 fe/feat: ㅁㅁ기능 => feat: ㅁㅁ기능 으로 변경하기로 했어요~) 커밋 메시지 양식 통일 feat : 새로운 기능에 대한 커밋 fix : 버그 수정에 대한 커밋 build : 빌드 관련 파일 수정에 대한 커밋 chore : 그 외 자잘한 수정에 대한 커밋 ci : CI관련 설정 수정에 대한 커밋 docs : 문서 수정에 대한 커밋 style : 코드 스타일 혹은 포맷 등에 관한 커밋 refactor : 코드 리팩토링에 대한 커밋 test : 테스트 코드 수정에 대한 커밋 P.. 공감수 0 댓글수 0 2023. 8. 29.
[메인프로젝트] Figma로 프로토타입, 디자인 하기 🌿프로토타입 팀원들과 상의 후에 만들어진 프로토타입 화면의 일부분 입니다. 메인컬러를 팀 주제에 맞게 색상을 뽑아 골라달라고 하였고 투표 결과 2번, 6번 색상이 나와서 우리팀의 로고 또한 2번 색상으로 가기로 결정되었습니다. 로그인 했을 때와 하지 않았을 때의 헤더가 다른 부분, 각 페이지마다 어떤 화면이 들어올지를 대략적으로 구성하였습니다. 팀원 중 한 분이 상세게시물 페이지에서 수정/삭제 버튼을 통해 이어지는 새로운 화면을 저렇게 표시하였는데 시각적으로 이해가 잘 되어서 좋았습니다. 🌿초기 디자인 해당 프로토타입 화면을 바탕으로 디자인 입히기 작업을 했습니다. 로고를 1) 삽 모양 2) 나뭇잎 모양 이렇게 두개를 작업했고 메인 컬러를 1)위에서 투표한 색상 2) 색 팔레트에서 가져온 색상 이렇게 두.. 공감수 0 댓글수 0 2023. 8. 29.
[메인프로젝트] 친환경과 제로웨이스트에 관한 커뮤니티 기획 🌱팀명 그린어스포어스 (Green Earth For Us) 🌱친환경 실천 로그 오늘 친환경 관련해서 어떤 실천 행동을 했는지 로그 공유 가능 공개 여부: 나만 보기/모두 공개, 언제든지 변경 가능 마이페이지: 캘린더 / 나의 모든 게시글 열람 및 편집 가능 하루 실천 → 1 도장 게시글 작성하면 캘린더에 그 날 제로웨이스트했다는 스템프 표시 땅(0개) → 새싹(1개) → 조금 더 자란 새싹(5개) → 꽃봉오리(10개) → 꽃(20개) 캘린더 아래에 월별 n일 표시 게시판 (공유 피드) 전체 게시판: 모든 유저의 모든 게시글 모아둔 게시판. 인기순/최신순 정렬 가능. 자유 게시판: 모든 유저의 공개 게시글 모아둔 게시판. (인증 게시글은 별도) 챌린지 인증 게시판 좋아요❤️ 기능 정보성 정적 데이터 제공 .. 공감수 0 댓글수 0 2023. 8. 29.
[부트캠프] 코드스테이츠 FE45 Section3 회고 🌿 23/06/12 - 07/06 : Section3 🌿 사용자 친화적이고 안전한 web app을 만들 수 있다. - [자료구조/알고리즘] 재귀 - [사용자 친화 웹] UI/UX - [React] Custom Component - [React] 상태관리 - [사용자 친화 웹] 웹 표준 & 접근 - [네트워크] 심화 - [Backend] 인증 / 보안 - Coz' Mini Hackathon 코드스테이츠의 세 번째 단위기간인 Seciton3가 종료되었다. 벌써 한 달이 지났다니 믿기지가 않는다 ... ^^ ㅠ 시간이 참 빠르다. Section4가 마지막이고 이후엔 두 달동안 프로젝트를 진행하는데 벌써 프로젝트가 성큼 다가온 느낌이라 무섭다. 목표 상기 - 리액트, 타입스크립트 기술스택 사용하는 회사 취업하기.. 공감수 0 댓글수 0 2023. 7. 6.
[Figma] To-Do APP 기획하기! (이름은 To-Do Today, TDT) To-Do List CRUD가 가능한 APP의 디자인 및 기능을 기획하는 시간을 가져봤다. 심플함을 강조하며 메인 팔래트의 색상을 파란색, 회색으로 지정해서 해당 색상들을 이용하여 작업했다. 약 3-4시간 동안 한 결과물인데... 속도가 좀 더 빨랐으면 모든 인터렉션을 구현 할 수 있을 거라는 생각에 아쉽다는 느낌도 든다. 🌱피그마 내용 🌱시연동영상 완성 🌱잘한 점 - header, footer 컴포넌트화 잊지않고 활용 - 햄버거 버튼 눌렀을때 모션 부드럽게 나온다 - 하단에 카피라이트 써서 뭔가 더 완성된 것처럼 보이는 부분 - 목록 아래로 스크롤 했을 때 목록 부분만 스크롤이 되는 부분 ( -> 목록을 컴포넌트화하고 사이즈 맞춰서 프레임을 씌워서 해결했다. 예전에 했던 건데 기억이 안나서 다시 찾아보.. 공감수 0 댓글수 0 2023. 7. 6.
[Section3] 기술면접 준비 재귀 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요. 재귀함수는 자기 자신을 호출하는 함수로 주어진 문제를 비슷한 구조의 작은 문제로 나눌 수 있는 경우 사용하기 좋다. UI/UX UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요. UX는 user experience로 사용자가 서비스를 이용하면서 느끼고 생각하는 모든 경험을 의미한다. UI는 user interface로 사람과 컴퓨터가 상호작용하는 시스템을 뜻한다. UX는 UI를 포함하는 관계이다. 그러나 항상 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다. Custom Component Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요. 기존에 HTML, C.. 공감수 0 댓글수 0 2023. 7. 6.
[Figma] 컴포넌트 구현, 모바일 유튜브 App 클론 구현! 🌱컴포넌트 구현 Figma 툴에서 자주 사용하는 GNB+ 컴포넌트 4가지 + 2가지를 구현하였다. 기본: GNB(Global Navigaion Bar) 4가지: 모달, 토글, 탭, 아코디언 2가지: 드롭다운, 자동완성 알게된 점 GNB 인터렉션 구현할 때 Line의 이름을 전부 같게 하고 smart animation 설정을 주면, 해당 Line들이 동일한 Line으로 인식되어 애니메이션 처럼 움직이도록 구현이 가능하다. 어려웠던 점 - GNB에서 밑줄을 하나씩 다 그려서 그었는데 그렇게 안해도 된댄다. 코드스테이츠 모닝 세션 때 알려주셨는데, 굉장히 쉬운 방법으로 해결할 수 있었다. 각 글씨를 프레임으로 만들어서 프레임 하단만 검은색 선을 두껍게 표시하면 된다. 그거를 컴포넌트로 만들어서, 글씨가 on인.. 공감수 0 댓글수 0 2023. 6. 15.
[부트캠프] 코드스테이츠 FE45 Section2 회고 ✨ 23/05/11 - 06/08 : Section2 ✨ - [JS] 고차함수 - [JS] 객체지향 프로그래밍 - [JS/Node] 비동기 - [React] SPA, State & Props - [HTTP/Network] 기초, 실습 - [React] 클라이언트 Ajax 요청 - [Web server] node js, express js - Coz' Mini Hackathon 코드스테이츠의 두 번째 단위기간인 Seciton2가 종료되었다. 5월 내내 아파서 고생도 하고, 배우는 것도 어려운 것 투성이었는데 나름 잘 버텨준 내 자신이 너무 기특하고 고생했다. 오늘은 여러 회고 방법 중 현업에서도 활발하게 이용된다는 KPT 회고 기법으로 회고를 진행해보고자 한다. KPT를 기반으로 한 개인 회고 1. 목표 .. 공감수 0 댓글수 0 2023. 6. 8.
[Section2] 기술면접 준비 1. JavaScript Promise의 기능과 필요한 이유에 대해서 설명해주세요. 콜백 중첩을 해결하기 위해 등장한 것이 Promise입니다. Javascript 에서는 대부분의 작업들이 비동기로 이루어집니다. 이전에는 콜백 함수로 처리하면 되는 문제였지만 요즘에는 프론트엔드의 규모가 커지면서 코드의 복잡도가 높아지는 상황이 발생하였습니다. 이러면서 콜백이 중첩되는 경우가 따라서 발생하였고, 이를 해결할 방안으로 등장한 것이 Promise 패턴입니다. Promise를 사용하면 비동기 작업들을 순차적으로 진행하거나, 병렬로 진행하는 등의 컨트롤이 보다 수월해집니다. 또 예외처리 구조가 존재하기 때문에 오류 발생에 대해 더 쉽게 관리할 수 있습니다. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여.. 공감수 0 댓글수 0 2023. 6. 8.
[CS 지식] REST API 🌱REST Representational State Transfer REST 는 하나의 아키텍쳐에 가깝다. 그래서 몇 가지 주요 원칙들이 존재하며, 이를 잘 지킨 API를 "REST ful" 하다고 표현한다. RESTful은 REST를 REST답게 쓰기 위한 방법으로, 누군가가 공식적으로 발표한 것이 아니다. 즉, REST 원리를 따르는 시스템은 RESTful이란 용어로 지칭된다. HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기 위해서 알아보기 쉽게 작성해야할 필요가 있다. 🌱구성요소 REST API 는 자원, 행위, 표현으로 구성된다. API 만으로도 HTTP 의 요청을 직관적으로 이해할 수 있다. 🌿자원 : URL 자원은 서버에 저장되어 있으며, 해당 자원에 접근할 수 있는 URI .. 공감수 0 댓글수 0 2023. 6. 2.
[CS지식] OSI 7계층, 주요 프로토콜 OSI 7계층? 개방형 시스템 상호 연결 모델의 표준 실제 인터넷에서 사용되는 TCP/IP 는 OSI 참조 모델을 기반으로 상업적이고 실무적으로 이용될 수 있도록 단순화한 것이다 7. 응용계층 인터페이스 역할을 하는 계층 HTTP: 웹에서 HTML, JSON 등 정보를 주고 받는 프로토콜 FTP: 파일 전송 프로토콜 SMTP: 메일을 전송하기 위한 프로토콜 SSH: CLI 환경의 원격 컴퓨터에 접속하기 위한 프로토콜 RDP: Windows 계열의 원격 컴퓨터에 접속하기위한 프로토콜 WebSocket: 실시간 통신, push 등을 지원하는 프로토콜 6. 표현 계층 데이터를 어떻게 표현할지 정하는 역할을 하는 계층 5. 세션 계층 통신 장치 간 상호작용 및 동기화를 제공하는 계층 4. 전송 계층 종단 간 신.. 공감수 0 댓글수 0 2023. 5. 23.
[CS 지식] HTTP vs HTTPS / 대칭키 암호화 vs 공개키 암호화 🌱포트 (Port) 운영체제 통신의 종단점, 논리적인 접속장소 TCP/IP를 사용할 때는 클라이언트가 네트워크 상의 특정 서버 프로그램을 지정하는 방법으로 사용한다. 하나의 컴퓨터에서 여러 개의 서버가 실행될 수 있고, 만약 그렇다면 어느 서버에 접속해야 하는지 컴퓨터에게 알려주어야 한다. 이때 사용되는 것이 포트 번호이다. 포트 번호는 서버를 구분짓기 위한 16비트의 논리적 할당이다. 컴퓨터에 있는 웹서버는 기본적으로 80포트이며, 아래 주소는 모두 같은 구글 주소를 뜻한다. 80포트는 생략이 가능하다. http://www.google.com/ http://www.google.com:80/ 🌿URL Uniform Resource Locator의 약자 http://www.domain.com:1234/pa.. 공감수 0 댓글수 0 2023. 5. 17.
[JS] Fetch API 의사코드 작성해보기 1. fetch() 함수란? 원격 API를 간단하게 호출할 수 있도록 브라우저에서 제공하는 함수이다. 첫번째 인자로 URL, 두번째인자로는 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 반환된 객체는 API 호출이 성공하면 response를 resolve하고, 실패한 경우 reject를 한다. fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 2. basicChaining.js Todo: fetch를 사용해 작성한다. 여러개의 promise를 then으로 연결하여 작성한다. //뉴스와 날씨 데이터를 가져오는 함수 1. n.. 공감수 0 댓글수 0 2023. 5. 17.
[CSS] 가운데로 정렬하는 방법 flexbox 사용 부모엘리먼트는 display:flex를 사용해서 flex container가 된다. 자식 엘리먼트는 flex item이라고 부른다. justify-content: center; align-items: center; flex-direction: column; //배열 구조를 column으로 함 공감수 0 댓글수 0 2023. 5. 11.
[Node.js] 백준 실버5 2751 수 정렬하기2 https://www.acmicpc.net/problem/2751 2751번: 수 정렬하기 2 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄부터 N개의 줄에는 수가 주어진다. 이 수는 절댓값이 1,000,000보다 작거나 같은 정수이다. 수는 중복되지 않는다. www.acmicpc.net 0. 시도 처음 풀었던 방법으로는 버블정렬 알고리즘을 이용하였는데 이렇게 하니까 시간 초과 에러가 났다. 버블 정렬 쓴 코드는 아래와 같다.. temp라는 변수를 하나 만들어서 swip 하는 방식으로 버블 정렬을 사용했다. const fs = require('fs') const filePath = process.platform === 'linux' ? '/dev/stdin' : './예.. 공감수 0 댓글수 0 2023. 5. 11.
[JS] DOM 다루기, 유효성 검사 I. DOM 다루기 1. create 아무것도 연결되어 있지 않는 노드 그리기 const tweetDiv = document.createElement('div') 2. append 부모 노드에 포함하기 이때부터 엘리먼트 요소 확인 가능 document.body.append(tweetDiv) 3. read querySelector로 선택자를 조회한다. id가 container인 엘리먼트의 마지막 자식 요소로 tweetDiv를 추가한다. const container = document.querySelector('#container') const tweetDiv = document.createElement('div') container.append(tweetDiv) 4. update const oneDiv =.. 공감수 0 댓글수 0 2023. 5. 2.
Koans 문제 풀이 오답노트 2. Types-part1.js it('expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.', function () { expect(1 + '1').to.equal('11'); }); it('expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.', function () { expect(123 - '1').to.equal(122); }); 자바스크립트에서는 + 연산자는 문자열 연산을 수행하기에 1+'1'을 하면 '11'이라는 문자열이 반환된다. 반면 - 연산자는 123 - '1' 에서 숫자와 문자열 간의 연산이므로 문자열 '1'이 자동으로 숫자 1로 형변환이 되어 표현식이 계산된다. 3. LetConst.js const obj =.. 공감수 0 댓글수 0 2023. 5. 1.
[JS] 알고리즘 문제 풀이 1. 객체를 입력받아 number 타입의 값을 갖는 속성을 모두 제거해야 합니다. 개념 const object1 = { a: 'somestring', b: 42 }; for (const [key, value] of Object.entries(object1)) { console.log(`${key}: ${value}`); } // Expected output: // "a: somestring" // "b: 42" 코드 function removeNumberValues(obj) { for (const [key, value] of Object.entries(obj)){ if(typeof value === "number"){ delete obj[key]; } } } 2. 문자열을 입력받아 문자열을 구성하는 각 .. 공감수 0 댓글수 0 2023. 4. 27.
[JS] 전화번호 형식의 문자열을 리턴하는 알고리즘 풀이 1. 문제 0-9 사이의 정수를 요소로 갖는 배열을 입력받아 전화번호 형식의 문자열을 리턴해야 합니다. 인자 1 : arr number 타입을 요소로 갖는 배열 arr[i]는 0 이상 9 이하의 정수 배열의 길이는 8 또는 11 출력 string 타입을 리턴해야 합니다. 주의 사항 반복문(for, while) 사용은 금지됩니다. 배열의 길이가 8인 경우, 앞에 [0, 1, 0]이 있다고 가정합니다. 예시 let output = createPhoneNumber([0, 1, 0, 1, 2, 3, 4, 5, 6, 7, 8]); console.log(output); // --> '(010)1234-5678' output = createPhoneNumber([8, 7, 6, 5, 4, 3, 2, 1]); cons.. 공감수 0 댓글수 0 2023. 4. 25.
[WSL2] 명령어 정리 windows + wsl2로 개발환경을 설치했다. I. 기본 명령어 1. explorer.exe . 현재 위치를 GUI로 실행. 온점을 반드시 붙여야 함. 2. pwd 현재 폴더가 위치한 경로 확인 3. mkdir 새로운 폴더 생성하는 명령어 4. touch 새로운 파일을 생성하는 명령어 5. cat 파일의 내용을 터미널로 출력하는 명령어 6. rm 폴더 or 파일을 삭제하는 명령어 6-1. rm -rf "폴더명" 폴더를 삭제하기 위해서는 -rf 라는 옵션이 필요하다. r은 폴더를 지우는 것, f는 강제로 지운다는 뜻이다. 7. mv 폴더 or 파일 위치 변경하기 my "파일명" "폴더명" 8. cp 폴더 or 파일 복사하기 II. NVM node.js 다양한 버전을 설치하고 사용할 수 있는 프로그램이다.. 공감수 0 댓글수 0 2023. 4. 24.
[JS] 계산기 프로그램 구현하기 HTML, CSS, Javascript를 사용하여 계산기 프로그램을 구현하였다. 0.사칙연산 각 사칙연산의 경우의 수를 나누어서 parseFloat로 실수 연산도 가능하게 하였다. 마지막에 출력할 때는 String으로 변환하여 화면에 출력되도록 하였다. function calculate(n1, operator, n2) { let result = 0; n1 = Number(n1); n2 = Number(n2); if(operator === '+'){ result = parseFloat(n1)+parseFloat(n2); console.log(result); } else if(operator === '-'){ result = parseFloat(n1)-parseFloat(n2); console.log(res.. 공감수 0 댓글수 1 2023. 4. 22.
[CSS] 문서에 CSS 파일 추가하기 안에 넣어주면 된다. 공감수 0 댓글수 0 2023. 4. 21.
[JS] 함수선언문과 함수표현식 차이 1. 함수선언문 function으로 함수를 선언한다. function test1 () { console.log('hello world'); } 2. 함수표현식 변수에 함수를 할당해서 표현한다. 변수에 할당하는 거라서 let으로 시작한다. let expression = function () { console.log('함수표현식'); } 3. slice 문자열의 일부를 추출하면서 새로운 문자열을 반환 예시 str.slice(beginIndex[, endIndex]) 참고문헌 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slice 공감수 0 댓글수 0 2023. 4. 20.
[JS] 직각삼각형인지 판단하는 알고리즘 문제 삼각형의 세 변을 입력받아 직각삼각형(pythagorean)인지 여부를 리턴해야 합니다. 주의사항 삼각형의 각 세 변은 무작위로 입력됩니다. 자바스크립트에서 x의 제곱(x squared)을 구하는 방법은 3가지 입니다. 세 가지 방법을 모두 사용해야 합니다. arr.sort 사용은 금지됩니다. 제곱을 구할 때는 입력으로 주어지는 변수를 그대로 사용해야 합니다. 풀이 피타고라스 정리에 의하면 직각삼각형은 제일 큰 변의 제곱은 나머지 두 변의 제곱의 합과 같다. 의사코드 (pseudocode) 1. 삼각형의 세 변의 값을 side1, side2, side3로 입력 받는다. 2. 각각의 변을 제곱한 값을 구한다. 3. side1이 큰 경우, side2가 큰 경우, side3가 가장 큰 경우를 나누어서 각.. 공감수 0 댓글수 0 2023. 4. 19.
[JS] type, variable, 네이밍 컨벤션 js 실행 명령어 node (파일명).js 타입 확인하는 연산자 typeof 100; // number 문자열 길이 세는 법 console.log('안녕하세요.', length); //6 변수에 값 할당해서 구구단 출력하기 let num; // 변수 선언 num = 5; // 값의 할당 console.log(num * 1); console.log(num * 2); console.log(num * 3); console.log(num * 4); console.log(num * 5); console.log(num * 6); console.log(num * 7); console.log(num * 8); console.log(num * 9); 네이밍 컨벤션 1. 카멜 표기법 식별자 표기 시에 여러 단어가 이어지면.. 공감수 0 댓글수 0 2023. 4. 18.
[CSS] 기본 셀렉터, 컬러 팔레트 정리 기본 셀렉터 정리 문서 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index CSS reference - CSS: Cascading Style Sheets | MDN Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Al developer.moz.. 공감수 0 댓글수 0 2023. 4. 17.
[HTML, CSS] 아이폰 계산기 목업 작업하기 아이폰 계산기 목업을 html과 css만을 사용해서 만들었다! 다음은 코딩 결과 화면이다. 신경쓴 부분 1. 제일 상단 input 값에 해당 css 값 주기 클릭했을 때 테두리 없어지게, 평소에도 input 테두리가 없게 하였으며 배경과 어우러지게 배경 색을 투명으로 없애버렸다. border: none; //평소에도 테두리없게 outline: none; //클릭했을 때 테두리 없게 background: transparent; //배경 색 투명하게 2. 전체 button은 grid layout으로 작업 flexbox로 작업하다가 1열과 2,3,4열이 정렬되지 않아서 깔끔하게 정렬되도록 grid를 선택했다. 3. 0번 button은 다음 속성을 부여하여 2칸을 차지하도록 했고, grid-column: 1 /.. 공감수 0 댓글수 0 2023. 4. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.