연구하는 안씨의 기록

웹페이지를 아름답게 만드는 CSS(Cascading Style Sheets) CSS Beginner(1) 1. ~ 3. | 목차 1. CSS 적용 2. CSS 구성(구조, 선택자, 주석) 3. CSS 특성 4. BOX model 5. BOX sizing 6. CSS 단위 7. 이미지 다루기 8. Overflow 9. 폰트 꾸미기 10. 테두리 꾸미기 11. 배경 이미지 설정 12. 요소 정렬하기 1. CSS 적용 이전 챕터 7에서 만들었던 html 파일 안에서 폴더 안에 style. css 파일을 생성한다. 폴더 안에 style.css 파일을 생성하였다. 이번에는 해당 style.css 파일 안에서 h1 헤더의 색을 갈색으로 바꾸어 보자. h1{ color: brown; } style.css 의 코드를 ..

목차 1. OG Tag 2. Layout(레이아웃) 3. Github Pages 배포 1. OG Tag 공유한 링크로부터 웹 페이지의 정보를 미리 보여줄 수 없을까? → Open Graph Protocol : 웹페이지의 미리보기 데이터를 볼 수 있음 썸네일 이미지, 타이틀, 디스크립션(설명) head 태그 안에 meta 태그를 사용해서 만들 수 있음. property: meta 데이터의 종류 작성 content: 실제 들어갈 텍스트 내용이나 리소스의 위치 작성 → 이런 정보가 잘 적용되었는지 확인하려면 로컬 저장소에서만은 확인할 수 없다. 웹에 html 파일이 공개가 되어야 확인이 가능해진다! (아래의 3. Github Pages 배포 챕터에서 깃허브를 사용해 확인해보자.) ./ ← 내가 위치한 곳의 폴..

* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하였으며, 그 외의 자발적 학습 활동을 진행한 것을 토대로 작성되었습니다. | 목차 1. HTML 구성 1. (1) HTML이란? 1. (2) HTML 요소(element) 1. (3) HTML 속성(attribute) 1. (4) HTML 주석(comment) 1. (5) HTML 문서구조(document type) 2. HTML 3. 블록 요소(Block Element)와 인라인 요소(Inline Element) 4. HTML 5. HTML 실습 이번 챕터에서는 위와 같은 HTML의 요소 및 기초에 대해서 공부하기로 한다. 1. HTML 구성 1. (1) HTML이란? Hyper Text Markup Language HyperTex..

* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하였으며, 그 외의 자발적 학습 활동을 진행한 것을 토대로 작성되었습니다. 이전 포스팅 chapter 05. Git & Github (1) 터미널 사용법, 로컬 git 저장소 생성(이전 포스팅 바로가기)에 이어, chapter 05. Git & Github (2)에서는 github를 사용하는 소스 반영 및 협업, GUI에 대해 소개한다. |목차 chapter05.(1) 1. Git & Github의 등장과 역할 2. Git 설치 및 세팅 3. Git 동작 흐름과 구성요소 4. 로컬 Git 저장소 생성 *추가: 참고하기 좋은 사이트 chapter05.(2) 5. Github에 소스 반영 6. Github로 협업하기 7. Git GUI 활..

* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하였으며, 그 외의 자발적 학습 활동을 진행한 것을 토대로 작성되었습니다. 깃허브 사이트에 로그인만 해두고 지금까지 정작 어떻게 쓰는지는 몰랐다. 거의 아무것도 모르는 백지 상태로 강의를 듣고 이리저리 헤매면서 정리한 내용이 많아 이번 챕터 05는 게시물을 두 개로 나누어 정리하기로 했다. |목차 chapter05.(1) 1. Git & Github의 등장과 역할 2. Git 설치 및 세팅 3. Git 동작 흐름과 구성요소 4. 로컬 Git 저장소 생성 *추가: 참고하기 좋은 사이트 chapter05.(2) 5. Github에 소스 반영 6. Github로 협업하기 7. Git GUI 활용하기 1. Git & Github의 등장과 역할..

* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하여 작성하였습니다. | 목차 1. Visual code 2. Codepen 3. Replit 이번 챕터에서는 개발 환경을 간단하게 세팅하였다. 1. Visual code 아래는 html을 vs code에서 보다 편리하게 사용하기 위해 설치하기 좋은 확장 프로그램이다. 비주얼 스튜디오(Visual studio)를 설치하는 방법 대신, 아래의 Codepen 및 Replit등의 사이트를 활용하여 웹상에서도 간편하게 프로그래밍을 할 수 있다. 2. Codepen >> 링크 바로가기: CodePen 3. Replit >> 링크 바로가기: Replit

* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하였으며, 그 외의 자발적 학습 활동을 진행한 것을 토대로 작성되었습니다. | 목차 1. 강의 내용 학습 1.(1) HTML 1.(2) CSS 1.(3) JavaScript 2. 학습 후기 1. 강의 내용 학습 1.(1) HTML HTML(* .html)(HyperTect Markup Language) (구조, 내용) HyperText: 정적인 활동에서 벗어나 다른 페이지에 접속할 수 있는 ‘링크’ Markup: 텍스트의 구조 혹은 의미를 부여하는 것 의미 부여 방법: 어쩌고 저쩌고 1.(2) CSS CSS(Cascading Style Sheets) (* .css) (모양, 스타일) Cascading: ‘폭포처럼 떨어지는, 계단식의’ ..

* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하였으며, 그 외의 자발적 학습 활동을 진행한 것을 토대로 작성되었습니다. | 목차 1. 강의 내용 학습 1.(1) web 의 등장 1.(2) 클라이언트(client)와 서버(server) 1.(3) HTTP와 URL 1.(4) 쿠키와 세션 1.(5) 네트워크란? 1.(6) IP와 IP address 1.(7) port와 DNS 2. 추가 학습 활동 3. 학습 후기 1. 강의 내용 학습 1.(1) web의 등장 *팀 버너스 리: 1989년에 World Wide Web의 하이퍼텍스 시스템을 고안 PC 통신 Web 폐쇄 개방 저속 고속 전화선/모뎀 광랜(FTTH) Web 1.0 1990년대 후반~ 2000년대 어느 누구나 프로그램을 대중에..