본문 바로가기
반응형

전체보기

깃git, 깃허브 | 소스트리 사용법 | mac 맥버전 커밋하는 방법, 토큰주소
git 2023. 6. 12. 깃git, 깃허브 | 소스트리 사용법 | mac 맥버전 커밋하는 방법, 토큰주소 공부한 내용을 깃허브에 올리기위해 혼자 터미널방식으로 독학을 시도했었다... ㅎ 깃허브 올리는 방법 git init git remote add origin 원격 저장소 URL -> 저장소 리셋 git remote remove origin git add . -> 파일경로 안쓰면 전체파일 git commit -m "커밋 메시지". git push origin -> 혹은 git push origin main duseul.tistory.com 하하.. 정말 난리도 아니였다. 잘못누르면 모든파일이 또 복사되기도 하고 다 올라가 버리기도 하고,, 블로그에는 짧게 올렸지만 유튜브,구글링해서 똑같이 따라해도 에러가 나고 에러가 난걸 챗gpt에게 물어봐도 해결이 안됐다. 어쩌다가 올라가도 내가 원하는대로 올라가는법이 없..
[Spotify] 스포티파이 프리미엄 클론코딩 (미완성본) Box레이아웃
Project/mini 2023. 6. 11. [Spotify] 스포티파이 프리미엄 클론코딩 (미완성본) Box레이아웃 보기에만 번지르르한 무에서 유를 창조한 나의 첫 결과물이다ㅎㅎ 처음에는 술술 잘풀리기에 너무 기분이 좋았는데 몇가지 문제점 때문에 그냥 새로운 웹사이트를 클론코딩해보려고 한다ㅎㅎ... 내가 이 작업을 시작할때 박스레이아웃과 플렉스 레이아웃 살짝 만을 안채로 시작했는데 그리드레이아웃에 대해 새롭게 순간,, 아 이건 크게 잘못되었구나 라고 인지하게 되었다.. 문제점 .section2 .text2-1{ font-size: var(--font-l); text-align: center; font-weight: bolder; margin-bottom: 40px; padding-top: 120px; } .section2 .text2-2{ font-size: var(--font-m); margin-bottom: 40p..
[McDonald] 맥도날드 홈페이지 클론코딩 | 그리드 레이아웃 반응형 웹
Project/mini 2023. 6. 11. [McDonald] 맥도날드 홈페이지 클론코딩 | 그리드 레이아웃 반응형 웹 이번 맥도날드 크론코딩에서 핵심은 ' 그리드레이아웃을 이용한 반응형 웹 ' 을 구현하는 것이다. 주요코드 설명 #conteiner { width: 100vw; height: 100vh; display: grid; grid-template-rows: 0.5fr 1fr; grid-template-columns: 1fr; grid-template-areas: "header" "content"; } 웹의 전체 넓이와 높이를 각각 100vw, 100vh로 설정하여 전체를 사용하게했고 헤더와 컨텐츠를 그리드레이아웃을 이용해여 구획하였다. header #nav { display: flex; justify-content: center; align-items: center; position: fixed; backgrou..
grid그리드 레이아웃 | repeat(), minmax(), grid-area
HTML | CSS 2023. 6. 11. grid그리드 레이아웃 | repeat(), minmax(), grid-area 기본 그리드 레이아웃 display: grid; grid-template-columns: 1fr 1fr 1fr; 반응형 그리드 레이아웃 display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); repeat() 함수는 첫 번째 매개변수에 반복 횟수를, 두 번째 매개변수에 반복될 항목의 값 또는 크기를 지정. ex) repeat(3, 1fr) : 3번 반복되며 각 반복에서 1fr의 너비를 갖는 열을 생성. auto-fit 사용 가능한 공간에 맞춰서 그리드 항목들이 최대한으로 확장될 수 있도록 한다. auto-fill 키워드는 사용 가능한 공간에 맞춰서 그리드 항목들을 최대한으로 채우도록 한다. minmax() 최소 크기와 최대 크..
정처기 필기공부를 본격적으로 시작하다... ! (D-28)
it자격증 준비/정보처리기사(필기) 2023. 6. 10. 정처기 필기공부를 본격적으로 시작하다... ! (D-28) 비전공자인 내가 어필할 수 있는 공식적인 요소는 자격증뿐이라고 생각한다. 그래서 정보처리기사 공부를 시작하기로 했다! 두둥 간호학생때부터 암기는 일상이었다ㅎ..ㅎㅎ 의학용어를 하루에 200개씩 외웠었기때문이다.(스펠링까지 서술형으로 시험을 봤었다...🤦🏻‍♀️) 본래 내성격대로라면 최대의 효율로 파워벼락치기모드로 공부했겠지만 이번엔 다르다. 전공지식이 아니기때문이다.ㅜㅜ 구글링을 해서 다운받은 정처기 필기요약본을 뽑아서 읽어봤는데 정말.,,, 머리에 안들어왔다ㅎ..... 비상상황이다. 그래서 ! 두음암기에 바로 들어가기로 했다. 역시 전범위를 빠르게 찍먹하는 공부방법이 나에게 딱 맞았다ㅎㅎ 그리고 바로바로 챗gpt에게 물어봐서 개념을 한번 가볍게 슥 읽어봤다. 그리하여 장장 6시간만에 1회 정독을 끝냈다..
flex 레이아웃을 정복해보자~! 총정리 !! flex-direction/flex-wrap/justify-content/align-items/align-content
HTML | CSS 2023. 6. 9. flex 레이아웃을 정복해보자~! 총정리 !! flex-direction/flex-wrap/justify-content/align-items/align-content flex-direction /* flat:left, 기본값: flex-direction: row*/ display: flex; /* 왼쪽에서 오른쪽 배치 */ flex-direction: row; /* 오른쪽에서 왼쪽으로 배치 */ flex-direction: row-reverse; /* 아래에서 위로 배치 */ flex-direction: column-reverse; row: 왼쪽에서 오른쪽으로 주축을 따라 배치. (기본값) row-reverse: 오른쪽에서 왼쪽으로 주축을 따라 배치. column: 위에서 아래로 주축을 따라 배치. column-reverse: 아래에서 위로 주축을 따라 배치. flex-wrap /* 기본값 flex-direction:row, flex-wrap: nowrap */ di..
Box Layout을 이용해서 야후 홈페이지 만들기
HTML | CSS 2023. 6. 7. Box Layout을 이용해서 야후 홈페이지 만들기 css를 header / main / footer 로 나누어 작업했다. border로 구획을 나누었다. 처음으로 포털사이트같은 느낌을 구현해봐서 기분이 좋았다 ! main부분을 열로 바꾸기만 하면 돼서 보다 수월했다. 빨리 플렉스/그리드 레이아웃 그리고 반응형으로 만들어보고싶다!! main css #content { width: 1000px; margin: 0px auto; border: 0px solid red; overflow: hidden; } #content > #main_nav { border: 0px solid blue; width: 155px; float: left; } #content > #main_nav li { height: 35px; } #content > #main { border:..
[Youtube] 유튜브 클론코딩, 처음으로 막힘없이 따라했다! !! (유튜브 드림코딩)
Project/mini 2023. 6. 6. [Youtube] 유튜브 클론코딩, 처음으로 막힘없이 따라했다! !! (유튜브 드림코딩) 위의 드림코딩님의 영상을 보고 따라해보았다. 클론코딩을 하지마라, 부정적인 시선들이 많지만 초보자 입장에서 공부용으로 최고인것같다 ..! 일단 코드를 많이 치는 환경에 익숙해지고 시니어 개발자들은 어떻게 작업하는지 알 수 있게 되기 때문이다. 내가만든 유튜브~! 흑 뿌듯하다 !! Up next 부분에는 네이버블로그에서 썼던 썸네일과 제목을 빌려왔다ㅎㅎ 드림코딩님과 함께한 완성작에서 변화시킨 점은 1. hover로 액션아이콘 파랑색으로 만들기 2. 구독버튼을 현재 유튜브처럼 3. 댓글창을 추가했다! 난생 처음으로 혼자서 무에서 유를 창조해본 시간이었다. 고작 웹에서 표현되는건 3줄? 정도지만 정말 많이 시간이 소요되었다. 나중에 이 일이 익숙해지면 나도 후루룩 뚝딱 만들 수 있겠지? 이번 클론코딩으로 배운..
왕왕중요한 Box Layout을 완벽하게 이해해보자~! | overflow: hidden; / float: left;
HTML | CSS 2023. 6. 5. 왕왕중요한 Box Layout을 완벽하게 이해해보자~! | overflow: hidden; / float: left; 수업을 열심히 듣고 레이아웃을 만들었다. 그런데 저 MENU부분이 왼쪽에 치우친 것이다ㅜㅜㅠㅠㅠ 해당부분의 CSS를 계속 살펴 봤는데도 문제가 없어서 이유가 뭐지ㅠㅠㅠ 하고 강사님께 여쭤봤는데 ㅋㅋㅋㅋㅋㅋㅋㅋ ㅋㅋㅋㅋㅋ ㅋㅋ ㅋ ㅋ ㅋ 메뉴가 5번까지 있던거랬다~ 애꿎은 css만 들여다보고 있으니 당연히 모를 수 밖에~ 와... 십년묶은 체증이 가시는 기분,,,, 오늘의 교훈: 프로그램은 거짓말을 치지않는다,, 전부 살펴보자~ overflow: hidden; #section{ font-family: 'Pinyon Script', cursive; } #content{ width: 95%; margin: 5px auto; border: 1px solid black; overflow: hidden; /* 내 ..
가상클래스(필터)선택자 ::after, ::before | 가변길이 em, rem, %
HTML | CSS 2023. 6. 5. 가상클래스(필터)선택자 ::after, ::before | 가변길이 em, rem, % CSS 네이버 야후 구글 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nobis molestias quos dicta, libero temporibus quibusdam voluptatum dolores praesentium placeat accusantium cum ea sed inventore. Recusandae doloribus voluptas esse maxime! Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum porro optio, odit autem culpa quia sequi incidunt odio dignissimos beatae conse..
[계산기] 계산기만들기 예제 따라하기 (유튜브 수코딩)
Project/mini 2023. 6. 3. [계산기] 계산기만들기 예제 따라하기 (유튜브 수코딩) CSS *{ margin: 0; padding: 0; box-sizing:border-box; } body{ background-color: #1f1f1f; display: flex; justify-content: center; align-items: center; height: 100vh; } .calculator{ width: 287px; border: 1px solid #333; background-color: #ccc; padding: 5px; } .calculator form{ display: grid; grid-template-columns: repeat(4, 65px); grid-auto-rows: 65px; grid-gap: 5px; } .calculator form input{ borde..
정보처리기사(정처기) 필기 공부하기 | 2022년 2회 기출정리
it자격증 준비/정보처리기사(필기) 2023. 6. 2. 정보처리기사(정처기) 필기 공부하기 | 2022년 2회 기출정리 2022년 2회 인터페이스 구현 시 사용하는 기술로 속성-값 쌍(Attribute-Value Pairs)으로 이루어진 데이터 오브젝트를 전달하기 위해 사용하는 개방형 표준 포맷은? JSON 소프트웨어를 보다 쉽게 이해할 수 있고 적은 비용으로 수정할 수 있도록 겉으로 보이는 동작의 변화 없이 내부구조를 변경하는 것은? 내부구조를 변경하는 것은? Refactoring 속성과 관련된 연산(Operation)을 클래스 안에 묶어서 하나로 취급하는 것을 의미하는 객체지향 개념은? Encapsulation 무결성 제약조건 중 개체 무결성 제약조건에 대한 설명으로 옳은 것은? 기본키는 NULL 값을 가져서는 안되며 릴레이션 내에 오직 하나의 값만 존재해야 한다. 트랜잭션의 상태 중 트랜잭션의 마지막 연산이 실행된 ..
반응형

티스토리툴바