본문 바로가기

Web development

 (25)
페어 프로그래밍 & 리액트 강의 시작 ✅ 지난주 회고 지난 주간 페어프로그래밍을 진행하며 42문항의 문제를 함께 풀어나갔다. 우선 네비게이토 & 드라이버를 나눠서 사전에 네비게이토 맡은 항목을 조직화해보고 개인적으로 상세하게 메소드와 코드주석을 작성하며 깊이 있게 이해한 후, 베스트 풀이까지 확인하고 문제를 제시하니 네비게이토 명칭대로 방향성을 분명하게 짚고 문제를 낼 수 있었다. ✅ 리액트 1주차 시작 아침에 잠이 확깨는 코드타카 시간~!! 우선 주어진 1주차 강의를 마무리 하고 My Todo List 1주차 과제에 들어갔다. 아무래도 리액트 강의와 연동된 과제이다보니 강의 후 과제를 진행하며 내용을 깊이있게 다가왔다. ✅ 좀 더 집중할 부분 강의 내용이 리액트에 정말 쌩초보인 나에게는 조금 채워져야 할 내용이 더 있는 것 같다. ✅ Pl..
Javascript 언어 공부 Plan JavaScript 언어 공부 프론트엔드를 선택, 이제 약간씩 개발 언어에 대해 친숙해지고 있는 중 JavaScript 문법 종합반 공부를 하고 우선 1-2 주차 내용은 따라가볼만 했는데, 3주차 내용을 그냥 듣고는 이해가 안되서 이번주에 2회독으로 노트정리하며 다시 이해하고 정리하는 시간을 가졌다. 우선 JS문법 강의는 5주차까지 개발블로그에 노트정리하며 듣는 것으로 하고 확실히 프로그래머스 JS코딩 테스트가 실력을 파악하는 바로미터인 것 같다. 문제를 되도록 메서드를 사용하고 메서드 내용을 정리하는 형태로 공부해야 할 것 같다. [ JavaScript 학습 계획] ✅ JavaScript문법 종합반 5주차 개발블로그 노트정리(Only 3, 4, 5주차) https://webcreastory.tistor..
[starter note] 개발자 과정을 시작하며 고민해 볼 것's ✅ Q1. 개발 공부가 처음이신가요? 처음이 아니라면, 어느 정도 기간을 가지고 어떻게 학습을 하셨나요? 📌 A1. 개발 공부가 처음이라 모든 것이 새롭습니다._ 들은 강의는 웹개발 종합반 강의과 javascript 기초이론, CSS기초강의가 전부 입니다. 특히 이번 웹미니프로젝트에서 git-hub으로 협업하는 과정이 상당히 어렵게 느껴졌습니다. 혹시 잘못 올려서 다른 팀원들의 자료가 날아가면 어떻하나 싶어서 push 과정에서 상당히 긴장했던 이번 첫 미니웹프로젝트였습니다. 개발공부의 시작인만큼 두려움도 있지만 설레이는 첫 시작의 열정을 가지고 함께 스터디하는 다른분들보다 더 열심히 하는 모습 보여드리겠습니다. ✅ Q2. 내가 항해99에 참여한 계기는 무엇인가요? 어떤 역량을 기르고자, 혹은 어떻게 성장..
부트스트랩(bootstrap) : CSS 꾸러미 ✅ 부트스트랩 시작 탬플릿 : index.html 파일 >> meta와 title 사이 코드들 doctype html> 스파르타코딩클럽 | 부트스트랩 연습하기 이걸로 시작! Primary ✅ 부트스트랩 컴포넌트 5.0 https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com body에 넣어준다 >> Primary
포스팅 박스 만들기 1. 우선 색깔 박스로 씌우기 >> 영화URL 영화 감상평 기록하기 닫기 2. 안쪽으로 띄우기: padding: 20px; >> 그림자 효과: box-shadow: 0px 0px 3px 0px gray; > background-color: green; 없애기 .mypost { background-color: green; width: 500px; margin: 20px auto 20px auto; padding: 20px 20px 20px 20px; box-shadow: 0px 0px 3px 0px gray; } .mybtn { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 20px; ..
페이지 박스 만들기_div / CSS doctype html> 스파르타코딩클럽 | 부트스트랩 연습하기 .mytitle { background-color: green; color: white; height: 250px; } 내 생애 최고의 영화들 영화 기록하기 display: flex; flex-direction: column; // 내용물 세로 정렬, row 가로정렬 align-items: center; justify-content: center; div 안 내용물 정렬에 코드 4세트 사용 >> 버튼 투명하게 / 실선 적용 .mytitle > button { width: 250px; height: 50px; background-color: transparent; border: 1px solid white; color: white; borde..
파일 분리 방법 1. 파일 분리 부분이 너무 길어지면 코드를 한눈에 보기가 어렵다. 이럴 땐 파일을 분리해주는 것이 좋다. style.css파일을 만들어 login.html에 있는 style을 style.css파일에 옮겨주고 >> login.html에는 // 넣어준다. Document 2. 라이브러리 : 인터넷에 있는 파일(코드 조각) 가져오기
코드_주석 달기 ✅ 주석 사용 1. 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 .wrap { /* width: 300px; margin: 20px auto 0px auto; */ } 2. 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용! * { /* 폰드 미정입니다 */ font-family: 'Do Hyeon', sans-serif; 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않는다. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것! ✅ 단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시) 또는 //
구글 웹폰트_코드 적용 ✅구글웹폰트 https://fonts.google.com/?subset=korean 원하는 폰트 클릭 >> select Regular 400+ 클릭 >> 오른쪽에 @import 로 code copy >> vs code에 시작 라인에 코드 넣어준다.>> CSS rules to specify families도 >> vs code에 * { } 안에 넣어준다.(*은 모두 다 적용) @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Dongle&family=East+Sea+Dokdo&family=Gugi&family=Hi+Melody&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@700&family..
로그인 페이지 만들기_자주 쓰는 CSS [연습할 것들] h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding - margin은 바깥 여백을, padding은 내 안쪽 여백을 준다. - div에 색깔을 넣고, 직접 사용해서 차이 비교 .mytitle { background-color: green; } 로그인 페이지 아이디, 비밀번호를 입력하세요 background 컬러지정시 한 줄 전체를 다 먹는다. >> 그래서 먼저 박스 사이즈을 정해준다. 사이즈를 맞추고 > 모서리 둥글게 정리 > 글자색도 변경 > 글자를 중앙 정렬(text-align: center)> 위쪽으로 여백(padding)을 주고..

티스토리툴바