본문 바로가기

전체 글88

[포스코x코딩온] 풀스택 부트캠프 1차 프로젝트 회고록-1 231110 1. 주제선정 : 요리 레시피 공유 사이트 2. 메인 페이지 레이아웃 구성 회의 3. breakpoint: sm, md, lg까지 설정하기 - 햄버거는 sm부터 설정하기 4. 레시피 새로 등록할 수 있는 로직 구현 (css에서 미리 li 만들어놓고 display: none 설정 후 display 보이게 설정) *이렇게 할 필요 없이 그냥 js나 j쿼리로 요소를 만들어서 append하면 훨씬 편하고 제약사항도 없다.. 5. 햄버거 아이콘 구현 (ul, li, span) 6. 추천 수별로 레이아웃 순서 바뀌는 로직 생각 (flex의 order) * 다만 순위가 나오는 것도 아니고 슬라이드에서 한칸만 왼쪽으로 가도 마지막 슬라이드가 나오기 때문에 레이아웃 순서가 의미 없을 것 같다. 231114 .. 2023. 11. 15.
[포스코x코딩온] 풀스택 부트캠프 3주차 정리 -3 (mediaQuery) media Query 반응형 웹을 만들 수 있는 쿼리로 특정 높이나 너비에 도달하면 css를 활용하여 레이아웃을 바꿀 수 있다. /* all: 모든 경우 */ @media all and (max-width: 600px) { .all { font-size: 2rem; } } /* print : 인쇄, 인쇄 미리보기 */ @media print and (max-width: 600px) { .print { font-size: 2rem; } } /* screen: 인쇄, 인쇄 미리보기를 제외한 모든 css 적용 */ @media screen and (max-width: 600px) { .screen { font-size: 2rem; } } /* 미디어 유형 작성하지 않을 경우 default인 all로 적용됨. .. 2023. 11. 9.
[포스코x코딩온] 풀스택 부트캠프 3주차 정리 -2 (Github) branch -- 독립적을 어떤 작업을 하기 위해 필요한 개념으로 default로는 main(master) branch가 있다. branch 생성 (cmd or bash 등에서 입력) git branch (현재 local branch 목록 확인) git branch 브랜치명 ('브랜치명'이라는 이름의 branch 생성) git checkout 브랜치명 ('브랜치명'이라는 이름의 branch로 이동) git checkout -b 브랜치명 (branch를 생성하고 그 branch로 이동 -b는 branch인 듯) git branch -d 브랜치명 (branch 삭제, -d는 delete인 듯) *만약 삭제할 브랜치가 현재 branch에 merge되어있지 않은 상태라면 git branch -D 브랜치명으로 해.. 2023. 11. 7.
[포스코x코딩온] 풀스택 부트캠프 3주차 정리 -1 (JQuery) JQuery란? 자바스크립트 라이브러리로 더 적고 간편하게 적을 수 있는 3자 패키지. 작동방식 $('.className') .method(); $('.className') 이 부분은 variableName = document.querySelectorAll('.className') 과 같다고 보면 되겠다. 다만 여기서 해당 부분은 일회용 변수로 여러 번 사용하려면 따로 변수를 할당해줘야한다. ex) let variableName = $('.className') 그래서 console.log( $('.className') )를 하면 clacssName이라는 이름의 class를 가지고 있는 하나의 객체(배열)가 나온다. 만약 하나만 반환하고 싶다면 $('.className')[0] 처럼 배열 인덱스를 넣으면 .. 2023. 11. 7.
[포스코x코딩온] 풀스택 부트캠프 2주차 정리 -2 (javascript) String: JS또한 string slicing이 가능하다. // str은 method를 execute할 문자열이다. str.slice(startIndex, endIndex); str.slice(startIndex); => (to end) str.replace('a', 'b'); // 처음오는 하나만 바꾸기 str.replaceAll('a', 'b'); // 모두 바꾸기 str.repeat(3); // 문자열 3번 반복 str.split(''); //매개변수로 들어온 문자열을 기준으로 str을 쪼개서 배열로 저장. //해당 경우에는 아무것도 들어가 있지 않기 때문에 한 글자를 기준으로 자른다. str.split(' '); 의 경우 처음과 마지막에 공백이 있다면 [ex)' a b c '] 이를 기준으로 .. 2023. 11. 3.
[포스코x코딩온] 풀스택 부트캠프 2주차 정리 -1 (javascript) 변수 선언법: dash-case HTML, CSS 만 사용 ( js에서는 변수명이 - 기호라고 인식할 수 있기 때문) snake_case HTML, CSS 사용, (js도 사용가능하지만 위와 비슷한 이유로 꺼림.) camelCase JS (주로 사용) PascalCase JS (특별한 경우만 사용) js는 자료형이 달라도 할당 가능하다. (한 변수에 number값을 줬다가 string으로 재할당 가능하다.) like python let variable = value; - 중복선언 불가능하지만 재할당 가능, 할당 안하면 undefined 할당. const VARIABLE = value; 선언할 때 할당 피수, 재선언 불가, 재할당 불가 선언할 때 대문자로 선언하는 것이 예의 var variable = va.. 2023. 11. 1.

티스토리툴바