본문 바로가기

전체 글93

[Git] 생활코딩 Git1 내용정리 (Git은 무엇인가?) 목차 Git1 (1~7) Git1 - 1.수업소개 - YouTube 본 글은 유튜브 무료 강의 생활코딩의 내용을 정리하는 글 본격적인 코딩 공부에 앞서 Git이 무엇인가에 대한 기초적인 상식을 쌓기 위해 강의를 학습. 1. Git 1.1. Git의 주요 기능 버전관리 백업 협업 2. 버전관리 일을 하는 과정에서 수많은 파일을 만드는 일이 있음. 문서 작업을 하면서 예전 버전의 파일이 필요할 때 그것을 일일히 찾기 어려울 때 Git이 있다면 해결 가능. git을 활용하면 .git이라는 폴더안에 각각의 버전이 저장이 됨. 1. 각각의 버전 사이의 차이점을 손쉽게 볼 수 있음. 2. 파일이 여러번 수정을 거친 History도 확인 가능 3. 파일 하나씩 따로따로 버전으로 관리할수도 있고 통째로 하나의.. 2023. 3. 16.
[CSS] 그리드 예제 연습 CSS를 공부하면서 그리드를 배워봤는데 그리드를 통해서 레이아웃을 짜보는 연습이 필요한 것을 느껴 이를 연습해보고자 함. 목차 그리드 예제 현재 가장 해보고 싶은 건 위 이미지를 보면 제목,카테고리, 작성 글들이 저런 식으로 레이아웃 되어 있는데 기초적인 레이아웃을 구성해보고 실제 웹을 꾸밀 때 적용해보고 싶어 이를 실제로 짜보면서 그리드에 대한 이해도를 높이고자 함. CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes) - Web Standard (tistory.com) CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes) 이 포스트는 Learn CSS Grid in 5 Minute 를 한글로 번역한 글입니다. CSS 그리드 5분만에 배우기 .. 2023. 3. 16.
[JavaScript] 생활코딩 Web2 내용정리 (함수, 객체, 라이브러리 등) 목차 WEB2 (24~37) WEB2 JavaScript - 24.함수예고 - YouTube 본 글은 유튜브 무료 강의 생활코딩의 내용과 검색해서 이해한 내용을 정리하는 글 1. 함수(function) - ★ 1.1. 함수 특정 일을 하는 명령어들의 묶음. → 코드 하나에 이름을 붙여서 반복되는 코드를 줄일 수도 있고 효과적으로 코드 작성 → 관리하기도 용이하고 효율성을 갖는 코드를 만들 수 있음. 1.1.1. 함수의 문법 (fuction, method) 더보기 function two() {} → two라는 함수를 만들고 {}안에 있는걸 실행하겠다는것을 의미뒤에서 two; 만 하면 {}안에 있는 걸 실행 1.2. 매개변수(parameter)와 인자(Argument) - 입력 데이터가 입력이 되면.. 2023. 3. 14.
[JavaScirpt] 생활코딩 Web2 내용정리 (조건문, 반복문) 목차 WEB2 (14~23) WEB2 JavaScript - 14. 조건문 예고 - YouTube 본 글은 유튜브 무료 강의 생활코딩의 내용과 검색을 통해 이해한 것을 정리한 글임을 밝힘. 1. 조건문 하나의 프로그램의 하나의 순서대로 가는 것이 아니라 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것 if 1.1. 비교연산자, 불리언(자료형) 1 == 1 >>> 좌항과 우항이 같다면 true라는 불리언 값을 가짐 1 == 2 >>> 좌항과 우항이 다르다면 false라는 불리언 값을 가짐. 즉 비교연산자로 좌항과 우항을 비교해서 그 값이 참인지 아닌지에 대한 데이터가 나타남. 1.2. 조건문 더보기 if () {} else {} if 문 뒤에 따라오는 괄호 안에는 불리언 데이터 타입이 .. 2023. 3. 13.
[JavaScript] 생활코딩 Web2 내용정리 (JavaScript-기초) 목차 WEB2 (1~13) WEB2 JavaScript - 1.수업소개 - YouTube 본 글은 유튜브 무료 강의 생활코딩의 내용과 검색을 통해 이해한 것을 정리한 글임을 밝힘. 1. JavaScript intro. HTML으로 웹을 구성했을 경우 출력된 후 변하지 않음. 이를 JavaScript를 이용해서 사용자와 상호작용할 수 있도록 기능을 추가할 수 있다. 즉 JavaScript가 활용된 것과 상호작용을 하면 HTML문서가 동적으로 변하는 것을 관찰할 수 있음. 1. 1. JavaScript 1.1.1. HTMl과 JavaScript의 차이 예시) html로 1+1을 출력한다고 하면 문서상에서 1+1로 출력 JavaScript는 동적임 1+1을 출력한다고 했을 때 2로 출력 1.1.2. .. 2023. 3. 10.
[CSS] 티스토리 블로그 제목 폰트 바꾸기 블로그 제목 폰트가 마음에 들지 않아 이번에 배운 CSS를 통해 변경을 해 볼려고 함. 구글 폰트에서 나눔고딕 폰트를 import하는 코드를 CSS에 추가 Browse Fonts - Google Fonts CSS에서 H1 태그 선택자에서 font-family:Nanum Gothic;으로 변경 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com CSS를 실제로 적용하면서 이상해지면 어쩌지 걱정이 계속 있었지만 잘 맞아들어가니 다행이다라고 생각함. 2023. 3. 9.
[CSS] 생활코딩 Web2 내용 정리 (박스 모델, 그리드, 미디어 쿼리, 코드의 재사용) 목차 WEB2 (8~15) WEB2 CSS - 8. 박스 모델 - YouTube 본 글은 유튜브 무료 강의 생활코딩의 내용을 정리하는 글 1. 박스 모델 block element : 화면 전체 크기를 갖는 태그 inline element : 자기 자신만의 크기를 갖는 태그 더보기 Home ">A home page (or homepage) is the main web page of a website.[1] The term may also refer to the start page shown in a web browser when the application first opens.[2] Usually, the home page is located at the root of the website's.. 2023. 3. 8.
[CSS] 생활코딩 Web2 내용정리 (CSS, 기초 문법, 선택자, 속성) 목차 WEB2 (1~7) WEB2 CSS - 1. 수업 소개 - YouTube 본 글은 유튜브 무료 강의 생활코딩의 내용을 정리하는 글 중복된 코드를 제거하고 작성하는 것이 효과적임! 1. CSS 웹사이트의 디자인을 하기 위해 여러 HTML 태그를 추가해서 활용하려고 했지만 코드가 너무 길어지고 중요한 정보를 찾기 어려워진 단점이 존재 → CSS의 등장 ex. WEB CSS → CSS 코드 해석 : a라는 태그가 있으면 그걸 red 컬러로 지정해줘 ;(세미콜론) : 하나의 descryption이 끝나는 것을 구분시켜주기 위한 구분 더보기 JavaScript → Html 태그의 CSS의 속성을 추가한 것으로 해석 2. 속성과 선택자 다양한 선택자, 속성, Value를 공부하는 것이 필요!! ⓐ. .. 2023. 3. 8.
[HTML] 생활코딩 WEB1 부록 코드의 힘 내용 정리 목차 WEB1 (코드의 힘) WEB1 부록 - 코드의 힘 - YouTube 본 글은 유튜브 무료 강의 생활코딩의 내용을 정리하는 글 1. 동영상 삽입 Youtube 동영상에 공유 퍼가기, embed 버튼 클릭 → 태그를 볼 수 있음. 본문에 삽입 2. 댓글 기능 데이터베이스 및 백엔드 기술이 필요! → 댓글 기능을 제공하는 곳에서 Html 코드를 붙여넣으면 해결! ※ 단 웹 서버를 거쳐야지만 작동! (보안 상의 이유) Disqus - The #1 way to build an audience on your website Disqus – The #1 way to build your audience Disqus offers the best add-on tools for websites to in.. 2023. 3. 6.

티스토리툴바