전체 글
-
🍾 HTML, CSS 복습 (1)SOJU 2기 🍾 2023. 4. 10. 15:00
서론 스터디 2주 차(1)를 맞이했다. 이번 주차에서는 HTML, CSS 를 공부한다. 예전에 강의로 HTML, CSS 를 공부한 적이 있는데 그건 👉 여기 이번은 내가 머리로는 알고 있고 실제로 쓰기도 하지만! 말로 표현을 잘 못하는 것들 혹은 한 번 더 짚고 넘어갈 것들을 간단하게 정리했다. HTML? Hyper Text Markup Language Hyper Text 👉 웹 페이지 특정 부분과 연결할 수 있는 기능을 가진 텍스트 (= 링크) Markup Language 👉 정보를 구조적, 계층적으로 표현 가능한 프로그래밍 언어 정보를 공유한다는 목적을 가졌다. 태그, 요소 내용 내용을 포함한 태그 전체를요소 Element라고 한다. HTML 은 태그들의 집합이다. 브라우저가 html 파일 안의 태그..
-
Git, Github 기초 뽀개기 👊 (2)SOJU 2기 🍾 2023. 4. 1. 22:13
서론 스터디 1주 차(2)를 맞이했다. 1주 차(1)에서는 init, add, commit, push ... github 연동까지 알아봤었다. 이번에는 pull, branch, switch, merge, reset ... 등등에 대해 공부했다. 읽어도 읽어도 뭔 소리야 .. 싶은 경우가 많았기 때문에 아래 사이트를 이용하여 실습했다! Git 공식문서 Git / GitHub 안내서 브랜치 연습하기! 역시 실제로 해봐야 이해도 되고 늘기도 하는구나. 그래도 역시 협업을 해보며 부딪혀 보고 싶다는 생각이 들었다. 실습, 공부하며 새롭게 알게된 (이해한) 지식들을 까먹지 않기 위해!! 적어둔다. branch ? 나무에서 여러 갈래로 나누어지는 가지들을 떠올리면 이해가 쉽다. 여러 사람이 동시에 여러 작업을 진행..
-
Git, Github 기초 뽀개기 👊SOJU 2기 🍾 2023. 3. 26. 15:48
🍾 서론 그동안 깃허브를 사용하지 않은 건 아니지만, 확실히 잘 모르고 사용해 왔다. add, push, commit ... 등등등등 여러 용어를 단 하나도 제대로 알지 않은 채 '레포지토리 복제'라는 기능으로 사용해 왔다. 공부해야지!! 하면서도 다른 게 바쁘다는 핑계로 미루기를 몇 달째... 드디어 했다. 깃, 깃허브 기초 공부! Git ? 버전을 편리하게 관리할 수 있도록 도와준다. => 즉, 작업하는 파일들을 원하는 순간으로 다시 돌아갈 수 있게 해 준다. workflow 0. git 초기화 (+ 삭제) 프로젝트의 시작에는 언제나 git을 초기화해주어야 한다. git init + git을 삭제해야 할 때는 git 이 설정되어 있는 디렉토리에서 아래 명령어, 옵션을 사용한다. rm -rf .git ..
-
HTML CSS 8일 완성하기 : 회고록html ・ css 2023. 2. 12. 22:56
목표 1. 2023. 02. 05 ~ 2023. 02. 12 까지 완강할 것 2. 몰아듣지말고 매일 들어야 하며, 꼭 그날 배운 걸 기록할 것 목표 달성 100% !! 완강을 축하하며 ... 사실 누군가 본다면 이거가지고 왜이렇게 난리야 싶을 수도 있겠다. 부끄러운 이야기지만 나는 끈기, 인내심 제로 인간이라 뭘 시작하기도 끝을 내기도 참 힘든 사람이었다. (정말 작은 성취라도!) 그런데 웹 개발 공부를 시작하면서 이런 나의 문제들이 조금씩 나아지고 있다는 걸 확실히 느끼고 있고, 이번 (나만의 작고 소중한...)완강 챌린지는 나의 수확 중의 하나라고 할 수 있다! 그래서 아주아주 기쁘고 솔직히 이 마음을 숨기는 게 어렵다. ㅎㅎ 난 정말 노답인간이었기에 ... 이러한 성취들이 차곡차곡 쌓여 언젠가 목표..
-
HTML CSS 8일 완성하기 : 8일 차 미디어쿼리, 그밖의 효과들html ・ css 2023. 2. 12. 22:28
대망의 마지막 날! 잡다한 소리는 마지막 포스팅에서 하기로. 마지막 두 섹션은 1. 반응형 웹페이지 - 데스크톱 버전으로 만들었던 것을 더 작은 화면 (작은 데스크탑 화면, 태블릿 가로-세로, 핸드폰 화면) 까지 스타일이 깨지지 않고 적용될 수 있도록 하는 과정 2. 그밖의 작지만 적용하면 멋져지는 몇 가지 효과 를 추가 3. 실제로 라이트하우스 기능을 사용해 내가 만든 웹페이지가 배포하기에도 적당한지 알아보는 법 4. 이미지 용량 압축 5. 실제로 (무료로) 배포해보는 법 ... 등 알차게 구성되어 있었다. 여기서 기록해둘 것은 2번까지로 나머지는 기록해 두기 애매해서?? 넘어가기로 했다. 각각의 사이트에 들어가서 하라는대로(ㅋㅋ) 하면 되기 때문에 적어두지 않아도 될 것 같다 (괜찮겠지?) 그럼 시작..
-
HTML CSS 8일 완성하기 : 7일차 최종 프로젝트 (데스크탑 버전)html ・ css 2023. 2. 11. 20:34
고지가 눈 앞! 7일차. 오늘은 데스크탑 버전 html css를 완성하는 데 까지 끝냈다. html, css 코드가 점점 길어질수록 (심지어 영어라서) 눈이 빙빙 돌았다. 이상하게 집중이 안돼서 더 힘들었던 날 ㅠ_ㅠ 하지만 끝냈다!! 장하다 .. 나 .. 멋져 .. 넌 멋진 놈이야 .. 오늘은 프로젝트 예제(?)를 같이 만드는 날이었기 때문에 이론은 거의 없었다. 저저번처럼 새롭게 알게 된 것들을 기록하고 마치려고 한다. 그럼 시작 ~ 🤸🏻 HTML ✔︎ 그때그때 가져오는 아이콘, 한 번에 가져오는 아이콘 팩 🧑💻 저번 섹션 때 했던 것 처럼 아이콘을 그때그때 가져오는(SVG) 방법도 있지만, script 로 아이콘팩을 한 번에 가져오는 방법도 있다. ✨ 참고사이트 https://ionic.io/io..
-
HTML CSS 8일 완성하기 : 6일차 웹페이지 개발 프로세스, 반응형 웹페이지 기초html ・ css 2023. 2. 10. 20:49
6일 차! 섹션 7은 그동안 섹션의 두 배정도라 이틀에 나눠서 듣기로 했다. 최종 프로젝트를 하는 섹션. 오늘 열심히 만들어봤더니 뿌듯하다. 그럼 기록 시작! 웹페이지 개발 프로세스 ? 총 6가지 정도로 나눌 수 있다. 프로젝트 대상, 목표 설정 프로젝트 계획 레이아웃, 디자인 스케치 구현 테스트, 최적화 배포 후 업데이트 및 유지보수 하나씩 차근차근 어떤 일을 하는지 알아보자. 1. 프로젝트 대상, 목표 설정 - 이 웹사이트가 실제로 누구를 위한 것인지 생각하기 ex. 나를 위한 웹사이트인가? 고객 혹은 회사를 위한 웹사이트인가? - 웹사이트의 실제 용도는 무엇인가? 이 사이트의 주요 목적은? ex. 정보 제공, 제품 판매, 오락(사용자를 즐겁게 하기 위한 용도) .. 등 - 프로젝트 대상 청중을 예상..
-
HTML CSS 8일 완성하기 : 5일차 CSS 예제 만들기html ・ css 2023. 2. 9. 21:05
신나는 5일 차! 강의는 여기 오늘은 정말 재미있었다 ... 역시 직접 만들어보는 게 제일 재미있다. 그동안 배웠던 것, 추가로 알려주는 것들을 활용해서 여러 가지 예제를 만들어보는 섹션이었다. 내일부터는 마지막 프로젝트 만들기 섹션만 남았다. 목표인 12일까지. 파이팅! 오늘 예제를 만들면서 새롭게 알게된 것들을 간단히 기록하겠다. 양이 많지는 않을 것 같다. ✨ 이건 기억하자! 모음집 ☝🏻 컨테이너 안에 나란히 줄 서 있는 요소가 있다. 서로 붙어있는 부분에 여백을 주고 싶다면, margin 보다는 gap을 기억하자! border-radius 팁. width와 height가 같은 값이라면 (정사각형!) 50%로 설정했을 때 원이 된다. 정렬할 때 가장 큰 힘을 발휘하는 flexbox. 이리저리 활용해..