오늘은 드디어 Bootstrap을 마지막으로 CSS를 끝내고, JavaScript를 배우기 시작했다. JS는 예전에 배울 때에도 어렵다고 생각했던거라 걱정했는데, 예전보다 더 많고 깊은 내용을 앞으로 배우게 될거라 생각하니 조금 두렵다. 꾸준한 연구와 실험으로 두려움을 극복해야겠다 다짐하면서, 오늘의 학습내용을 정리해보자!(JS와 관련된 부분은 나중에 내가 찾아보기 편하도록 예전에 배운 내용도 같이 기록해두었다.)Bootstrap웹사이트를 쉽게 만들 수 있도록 도와주는 HTML, CSS, JS 프레임워크.반응형 웹 애플리케이션 및 웹사이트를 개발하기 위해 사용되는 오픈소스 무료 도구. 💡 여기서 잠깐!'프레임워크'와 '라이브러리'는 모두 [문제를 쉽게 해결하기 위해 다른 개발자들이 작성한 재사용 가능한..

오늘은 CSS의 Transform, Transition 속성과 미디어쿼리에 대해서 배웠다. 오늘 배운 속성들도 예전에 배워서 일부는 알고 있었음에도 다양한 기능들을 한번에 배우다보니 헷갈리는 것들이 많아서, 블로그에 기록하면서 개념을 확실하게 정리하려고 한다. CSS 속성 - Transform (변환)요소에 확대, 축소, 회전, 이동 등 효과를 추가하는 속성이다. 여러가지 효과를 한번에 주고 싶은 경우에는 띄어쓰기로 구분하여 입력한다.img:hover { transform: skew(30deg, 30deg); transform: skewX(30deg); /* 요소 기울이기 */ transform: scale(0.5, 2); transform: scaleY(2); /* 요소 확대와 축소 */..

예전에 배운 내용 블로그에 다시 기록하는 중..✍이번 포스팅에서는 웹페이지를 배포하는 방법에 대해 기록하려고 하는데, 그 전에 서버와 클라이언트의 관계를 알아야하기 때문에 그것부터 설명하고, 추가적으로 git 자격증명을 받는 방법까지 서술하도록 하겠다.서버와 클라이언트 우리가 브라우저에서 특정 웹페이지로 이동하기까지는 우리가 모르는 수많은 과정이 존재한다.예를 들어, 티스토리에 들어오기 위해 'tistory.com'이라는 주소를 브라우저에 입력했다고 가정해보자.1. 브라우저는 tistory.com 의 ip주소를 찾기 위해 DNS를 조회한다.2. DNS 서버는 tistory.com 이라는 영문 주소를 IP 주소로 변환해서 브라우저에 제공한다.3. 브라우저가 DNS 서버에게 받은 IP 주소를 가지고 웹 서버..

오늘은 드디어 CSS 속성 중에 상당히 자주 사용하는 Flex 속성에 대해서 배웠다. 사실 CSS의 Flex 속성과 관련해서는 (예전 포스팅에도 적었듯) 내일배움카드로 일부 배워서 알고 있었지만, 이번에 더 많은 속성값을 알게 되면서 머릿속이 매우 혼란스러워져서 블로그에 기록하면서 개념을 제대로 정리해보려고 한다.CSS 속성 - FlexFlex 속성은 요소의 위치를 유연하게(flexible) 만들어 내가 원하는 위치에 둘 수 있게 만드는 기능이다.컨테이너(부모) 요소에 지정하는 속성과 아이템(자식) 요소에 지정하는 속성이 따로 존재하는데, 보통은 컨테이너에 지정하는 속성을 많이 사용한다고 한다.Flex - for containerdisplay - 웹 페이지의 레이아웃을 결정하는 속성. 피그마의 오토 레이..

오늘은 길었던 설날 연휴가 끝나고 첫 수업이었는데, 지난주에 이어 CSS 속성 중에 Background와 Position에 대해 배우고, 오후에 잠깐 현업 개발자이신 학습처 대표님의 특강이 있었다. 업계 선배이자 인생 선배로서의 유익한 이야기들 좋았지만 여기는 학습기록을 남기는 공간이기 때문에 특강 내용까지 기록하지는 않을 생각이고, 오늘 배운 CSS 속성 중에 개인적으로 약간 헷갈렸던 부분들에 대해서 블로그에 기록하며 정확하게 개념을 이해하려고 한다.CSS 속성 - Backgroundbackground { background: linear-gradient(red, blue); /* 배경색에 그라데이션 주는 방법*/ background-image: url("./img.png") /* 배경..

우선, 이렇게 새로운 카테고리를 만들고 글을 작성하게 해주신 동기 Y님께 심심한 감사를..!😆README.md가 뭘까?github의 모든 repo에는 README.md 라는 파일을 작성할 수 있다.README 파일은 github에서 특정 repo를 선택했을 때 가장 먼저 미리보기가 가능한 파일이며, 개인 프로필 작성이나 해당 repo를 설명하기 위해서 사용한다. 개인 프로필이라면 자신이 어떤 사람인지를 소개할 수 있는 도구가 될 것이고, 특정 프로젝트를 담는 repo라면 해당 프로젝트에 대한 사용설명서 같은 역할을 할 것이다.README.md 라는 파일의 확장자명은 git에서만 사용하는 것인데, 마크다운 언어의 문법으로 작성했음을 의미한다. (일반 윈도우나 맥 운영체제에서는 메모장인 .txt 확장자를 ..

월요일에 CSS 입문이 끝나고, 이 날부터는 CSS 속성의 종류에 대해 공부하기 시작했다. CSS가 웹페이지에 보여지는 요소들을 디자인하는 언어이기 때문에 속성도 정말 매우 다양해서 하루에 다 배우지 못했는데, 아마 이 날 배운 내용의 2배 정도를 설날 연휴가 끝나고 돌아가면 배우게 될 것 같다.🙂속성의 종류에 대해 논하기 전에, 크기 단위와 블록/인라인 요소에 대한 개념부터 정리했다.블록/인라인 요소이 부분에 대해서는 HTML 태그를 배울 때 이미 짧게 언급되었던 내용이지만, 둘의 차이점이 CSS로 디자인을 할 때 중요하게 작용하기 때문에 정확하게 개념 정리를 했다.1. 블록 요소(block element) - 대표적으로 태그가 있다.화면 전체를 차지하는 요소라서, 가로/세로 길이 지정이 가능하다...

지난주 후반 1.5일 정도만에 HTML 수업을 마무리하고, 드디어 CSS에 대해서 배우기 시작했다. 예전에 배운 내용보다 몰랐던 내용이 많았고, 오랜만에 다시 보니까 헷갈리는 내용도 많아서 집에 오자마자 정리하려고 컴퓨터를 켰다.🙂우선 지난번 1차 프로젝트 당시에도 사용했던, 크롬 브라우저의 '개발자 도구'에 대해서 짚고 넘어갔다.'개발자 도구'는 브라우저에서 개발의 편의를 위해 제공하는 도구로, 현재 오픈되어있는 웹 페이지의 HTML/CSS/JS 코드를 확인할 수 있다. 단축키는 키보드의 F12 키 (Windows 운영체제)- 코드를 수정/추가하면 해당 내용은 내 컴퓨터에서만 보이는거라 새로고침하면 없어진다.- '개발자 도구'로 확인한 코드에서 웹 페이지에 적용되지 않은 기능은 취소선이 그려져 있다...

지난 월요일과 수요일에 Git과 Github 관련한 내용이 끝나고, 드디어 HTML에 대해서 배우기 시작했다. 이 부분은 예전에 배운 내용이 있어서, 한 눈에 찾아보기 편하도록 당시 배운거랑 최근에 학습한 내용을 합쳐서 정리할 예정이다.👍일단 본론으로 들어가기 전에 프론트엔드 필수언어 3대장의 역할을 한 단어로 설명하자면→ HTML는 뼈대, CSS는 디자인, JavaScript는 기능이다.HTML 문서의 구조은 ‘아래 문서는 html이다’ 라는 의미, 어떤 버전으로 해석하면 되는지도 포함. (최신 버전은 html5)는 문서의 모든 정보가 들어있는 부분. 실제 브라우저에서 보이지 않음. 는 언제나 head 태그 위치에 들어간다. 검색 최적화에 사용되고 검색결과에 반영되는 메타데이터. → meta char..

git과 vscode에 관련해서 14일차 오후에 잠깐 배우고, 15일차에 나머지 내용들을 학습해서 여기에 함께 기록하기로 했다.드디어 1차 프로젝트가 끝나고 전체 교육과정의 두번째 파트인 프론트엔드 분야로 넘어왔다.🙌가장 먼저 git에 대해서 배우고 github 가입, 코드 에디터인 vscode를 설치했다. 프론트엔드 기초 상식은 이번 교육과정을 신청하기 전인 작년 10월에 내일배움카드로 예습을 했던 분야라서, 오랜만에 당시 수업을 들으며 필기했던 자료를 꺼내보았다. Git, GitHubgit은 프로젝트 파일의 버전 관리가 가능한 도구(Version Control System)이고, 이걸 통해 하나의 프로젝트를 여러 개의 컴퓨터에서 관리할 수 있다.→조금 더 쉽게 말해서, 우리가 코딩을 한다는건 하나의..