본문 바로가기

개발자 도전기107

공부일지 #6. 영어로 HTML/CSS 기본 공부 (feat. Udemy) 회사에 출근한지 3주가 되었다. 현재로서는 다른 사람이 작성한 코드를 쭉 읽으면서 내용을 파악하는게 주 업무다. 내가 혼자 만들던 HTML태그보다 복잡도가 높다. 요즘 HTML/CSS 강의를 출퇴근 길에 듣고 있는데, 도움이 된다. 대충 알고 있는 태그들의 의미와 용도를 깨닫게 되는 것 같다. 영어 공부를 한동안 안했는데 코딩 강의를 Udemy에서 영어로 들으니, 영어 공부도 되서 좋은 것 같다. 한글로 들으면 지겨울 수 있는 기본적인 내용인데, 영어로 들으니 재미있다. 요즘은 영어 문서도 잘 읽혀지는 것 같다. 이유는? 많이 읽어서, 많이 해봐서, 영어라는 언어에 다시 익숙해지고, 개발 문서들의 기본 구조가 익숙해졌기 때문인 것 같다. 꾸준히 공부하고, 개발하자. 이 과정을 즐기자. 2022. 12. 10.
[HTML/CSS] Block Elements와 Inline Elements 이해 모든 HTML element는 종류에 따라 block 또는 inline과 같은 display 값을 갖는다. 1. Block-level Elements 항상 새로운 line에서 시작한다. 브라우저가 자동적으로 element의 앞 뒤에 space를 추가한다. 가로 전체를 차지한다. 해당 태그 : , 2. Inline Elements 새로운 line에서 시작하지 않는다. 필요한 가로 길이만 차지한다. 해당 태그 : img 태그는 Inline-level Elements이다. 아래 사진 처럼 하단에 공백이 생기는 것을 볼 수 있다. Inline-level Elements이기 때문이다. CSS 속성에서 display: block으로 설정하면, Block-level Elements로 취급하게 된다. img { dis.. 2022. 12. 10.
공부일지 | #6. 패스트캠퍼스 실습 따라하기 현재 활용하고 있는 강의 자료는 두 가지 1. 패스트캠퍼스 프론트엔드 개발 강의(한글) 2. 유데미 프론트엔드 개발 강의(영어) 강의 내용은 비슷하고, 따라할 수 있는 실습 과제가 주어진다. 이 외에도 나 스스로 구글링하면서 개발한 웹사이트가 있다. 개인 공부시간에 나의 웹사이트를 리펙토링하면서 새로운 프레임워크와 라이브러리를 사용하는 연습을 하려고 했다. 오늘 약간 일정을 바꿔야겠다. 일단 완성도 있는 프로젝트는 어떻게 파일을 구성하고, 프로세스를 정의하는지 보고 싶다. 그래서 일단은 강의를 들으며 실습을 통해 연습을 해봐야겠다. 기존의 웹사이트를 개선하는 건 다음에 하고, 일단 내가 배우는 것들을 응용해서 만들 수 있고, 유용할만한 사이트 먼저 만들어 보며 연습하자. 연습은 일단 재미있어야 하고, 배.. 2022. 12. 2.
공부일지 | #5. 새벽 기상 후, 출근 전까지 코딩 요즘은 아기를 재우면서 나도 같이 잔다. (저녁 9시~9시 30분 쯤) 새벽에 눈이 떠진다. 4시 쯤? 30분 정도 QT를 하고, 2시간 정도 코딩할 수 있는 시간이 있다. 출퇴근 시간에 웹개발 관련 강의를 듣고 나면, 코딩을 하고 싶어서 손이 간질간질하다. 새벽까지 참았다고 코딩을 하고 나면 개운하다. 이런 루틴을 꾸준히 가져보자. 목표 1. 새벽 2시간 코딩(04:30 - 06:30) 2. 웹사이트 리뉴얼(2022년 12월 말까지) - Bootstrap 익히면서 - jQuery 익히면서 - 클린코드와 리팩토링, 유지보수 고려하면서 - git 익히면서 2022. 12. 1.
[Bootstrap] 예시(Examples)의 코드를 뽑아내는 방법 부트스트랩(Bootstrap) 예시(Examples) 사용하는 방법입니다. 1. 최상단 메뉴 > Examples 원하는 종류의 예시를 선택합니다. Headers로 예를 들어보겠습니다. 2. 크롬 개발자 도구(단축키 : F12)에서 코드 확인 여러가지 형태의 예시가 모여있습니다. 개발자 도구를 열어서 코드를 확인합니다. 개발자 도구의 왼쪽 상단(빨간색 네모칸)에 보면, 검사할 페이지 요소 선택 버튼이 있습니다. (단축키 : Ctrl + Shift + C) 클릭 후, 원하는 요소에 마우스 커서를 옮기면 해당 코드가 어디인지 확인할 수 있습니다. 해당 코드를 감싸고 있는 2022. 12. 1.
[HTML] 구글 머터리얼(material) 아이콘 사용 방법 웹 개발을 할 때 모든 디자인 요소를 직접 만들 필요 없다. 구글 머터리얼에서 제공하는 기능을 사용하면, 간단히 디자인 요소를 사용할 수 있다. 오늘 설명할 내용은 아이콘을 사용하는 방법이다. (Material Design 2 기준으로 설명. 가장 최신 버전은 Materia Design 3이다) 1. Material Design 웹사이트에서 CDN 설치 설명 확인 다른 디자인 요소도 제공하지만, 아이콘만 사용할 거라면 빨간색 박스 안에 있는 내용만 head 태그 안에 넣어주면 된다. 2. 원하는 아이콘 검색 후 태그 복사 구글 폰트 사이트에서 원하는 아이콘 내용을 검색한다. https://fonts.google.com/icons?selected=Material+Icons&icon.query=arrow M.. 2022. 11. 26.

티스토리툴바