html ・ css
-
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. 이리저리 활용해..
-
HTML CSS 8일 완성하기 : 4일차 CSS 디자인 가이드라인html ・ css 2023. 2. 8. 21:00
힘들었다 ... (내가 듣는 강의는 여기) 심지어 이번에는 직접 코드를 짜는 거보다 설명이 많아서 더 힘들었다 .... 근데 내용 자체는 재미있었다. 디자인 ... 에 천부적인 재능(?)이 없다는 걸 저번에 만들면서 절절하게 느꼈기 때문에(ㅋ) 이런 식으로라도 지식을 집어넣고!! 만들 때 고려하면서 만들면 되겠다 싶었다. 좋은 사이트도 많이 알게 되어서 기쁘다 ^_____^ 오늘은 나름 빨리 기록을 끝낼 수 있을 듯!! 그럼 시작~ 디자인은 디자이너만의 일? 디자이너 분이 디자인을 만들어주시고 그걸 내가(개발자) 그대로 구현하고 사용자에게 전해진다. 가 일반적이라고 생각했는데 요즘에는 그렇지도 않다고 한다. 개발을 하는 디자이너도 많아지고, 디자인을 하는 개발자도 많아지는 추세라고. 개발하는 "디자이너"..
-
HTML CSS 8일 완성하기 : 3일차 CSS Layouthtml ・ css 2023. 2. 8. 13:46
3일 차! 내가 듣는 강의는 여기 사실 강의는 어제 다 들었는데 ... 일정 때문에 늦게 듣기 시작해서 포스팅을 못하고 잤다 >_ 그 구조에 콘텐츠들을 넣는 것! 레이아웃을 정하는 세 가지 방법 레이아웃을 정하는 방법은 총 세 가지가 있다. 첫 번째, float 두 번째, flex box 세 번째, grid 로 모두 block box인 요소에 display 속성을 추가하여 사용할 수 있다. css의 레이아웃은 css의 뼈대를 잡는 것과 비슷하다고 느꼈다. 뼈대라면 더더욱 잘 알고 있어야 하는 법 ! 망각곡선을 다시 끌어올리기 위해 (ㅎㅎ) 세 가지 방법에 대해 기록하고자 한다. float MDN float는 옛날에 css 레이아웃을 구성할 때 사용하던 방법으로 지금은 flex box, grid에 의해 대..
-
HTML CSS 8일 완성하기 : 1일차 OT, HTMLhtml ・ css 2023. 2. 5. 19:29
최근 html css 기초지식이 부족하고, 아주 간단한 것도 나에게 설명하지 못하는 현상에 많은 충격을 받았다. 때문에 기초부터 탄탄하게 지식을 쌓고 싶어서 강의를 찾아보기로 마음먹었다. 찾아보다가 유데미 강의들이 가성비가 좋고 질이 좋다고 들었기에! 도전!! 8일 완성이라는 건 그냥 나의 목표로, 오늘(2/5)에 시작했으니 오늘을 포함해서 2/12에 완강하는 게 목표이다. 기록은 나의 자산 ^_____^ 아주 간단하게라도 그날그날 공부한 기록을 남겨두기로 했다. 내가 듣는 강의는 여기 오늘은 총 두 개의 섹션을 수강했다. 섹션 1은 오리엔테이션과 다름없고, 섹션 2는 HTML 섹션이었다. 이상! 내용은 밑에 기록한다. 🧑💻 이 문서가 HTML 문서라는 것을 브라우저에게 알려준다. (즉, 문서 유형을 ..