본문 바로가기

Language & Framework

구글 폰트? TTF? WOFF? 웹 폰트 적용하는 방법, 그림으로 간단하게
Language & Framework/HTML CSS 2022. 2. 5. 구글 폰트? TTF? WOFF? 웹 폰트 적용하는 방법, 그림으로 간단하게 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 일단 완전 편리한 구글 폰트부터 빠르게 보고 가도록 하자. 구글 폰트를 이용하면 파일 업로드 다운로드 과정이 없기 때문에 직접 업로드하는 방식보다 조금이나마 쾌적하고 무엇보다 굳이 파일을 준비하거나 미리 설정할 게 없어서 굉장히 편하다. 너무너무 쉽고 편해서 따로 설명할 것이 없다. 나는 스크린샷을 두 번 찍기 귀찮아서 html에서 바로 style을 지정해줬을 뿐 css파일에서 font-family를 지정해주는 것이 일반적이다. 그리고 그냥 폰트 한 개만 적용해놓고 굵기를 조절하는 것과 애초에 해당 굵기에 맞는 파일을 준비해놓..
HTML의 <table> 태그를 이용하여 네이버 장바구니 페이지 만들기
Language & Framework/실습 2022. 2. 3. HTML의 <table> 태그를 이용하여 네이버 장바구니 페이지 만들기 html의 table 태그를 배운 김에 네이버 쇼핑 장바구니를 만들어봤다. 정말 앱등이스러운 장바구니다. table 태그를 활용하는 게 주 목적이라 글씨체나 다른 부분들은 크게 신경쓰지 않았는데 그래도 얼핏 보면 그럴듯해서 만족스럽다. 그런데 css 작성해놓은 걸 보면 전혀 그럴듯하지 않다.. 처음에 너무 쉽게 생각하고 html을 후다닥 만들고 시작했는데, 한 칸 안에 들어가야하는 스타일 요소가 많아서 각 td에 class를 지정해주지 않은 것이 가면 갈수록 짐이 되어 css파일을 지저분하게 만들었다. 모든 td에 class를 주면 html이 너무 지저분해질 것 같아서 그렇게 하지 않은 것이였는데 완전히 오판이였고, 뒤늦게 바꾸려니 이미 css를 거의 작성한 뒤라 모두 갈아 엎어야하는 상태라 결국 포기하..
드림코딩 엘리 선생님의 포트폴리오 웹사이트 클론코딩 완강 및 후기
Language & Framework/실습 2022. 2. 2. 드림코딩 엘리 선생님의 포트폴리오 웹사이트 클론코딩 완강 및 후기 강의의 총 시간은 316시간이고 엘리 선생님께서 완강하라고 제시하고 있는 기간은 2~3주 정도다. 나는 없는 시간을 만들어서 하는 처지라 4주 정도 걸렸다. 바로 시작하는 강의의 장단점 나열 장점 1. 포트폴리오를 만드는 여러 강의들을 봤지만 그 중 드림코딩의 포트폴리오가 기본적으로 제일 예뻤다.(주관적 기준) 2. 내가 유튜브에서 엘리 선생님의 강의 & MDN으로 기초를 다졌기 때문에 내가 배운 부분들 위주로 직접 활용할 수 있었다. 3. 대단한 커리어를 가진 현실에서는 말 한 번 섞어보기 힘든 분의 3주짜리 강의를 고작 7만원 내외로 들을 수 있다. 4. 야매로 어떻게든 하면 됩니다~~!~!~!하는 강의가 아니라 정공법으로 문제를 해결하는 법을 가르쳐주신다. 단점 : 정공법을 배우는 것이 길게 봤을 ..
구시대의 유물? float과 inline-block 활용하여 레이아웃 구성하기
Language & Framework/HTML CSS 2022. 1. 29. 구시대의 유물? float과 inline-block 활용하여 레이아웃 구성하기 위와 같이 아주 간단한 구조를 가진 레이아웃을 만들어보기로 하자. 사람에 따라 생각하는 위치와 크기에 약간씩 차이는 있겠지만 시멘틱 태그(Semantic tag)를 알고 있다면 보자마자 대충 어떤 형태인지 떠오를 것이다. 모른다면 여기서 보고 오자. 먼저 float을 활용하여 구현해보자. .container { width: 650px; background-color: wheat; } .header { width: 100%; height: 100px; background-color: blue; } .sidebar { width: 20%; height: 250px; background-color: burlywood; float: left; } .main { width: 80%; height: 250px; b..
자바스크립트 기초. JSON
Language & Framework/JavaScript 2022. 1. 21. 자바스크립트 기초. JSON JSON ? - Java Script Object Noation (자바 스크립트 객체 표기법) - Java Script에서 객체를 만들 때 사용하는 경량의 표현식 { key : value }를 의미한다. (자바스크립트 문법에서 파생) - 텍스트 형식이 Java Script와 유사할 뿐 독립적인 형태로 되어 있어 프로그래밍 언어에 종속되지 않고 대부분의 언어와 호환 가능하다. - 서버와 클라이언트의 데이터 교환 목적으로 주로 사용한다. - XML과 비교했을 때 더욱 가볍고 읽기 편하다. 1) 자바스크립트에서 Object를 JSON으로 변환하는 방법. const baby = { name: "ddoddi", sex: "male", size: "big(?)", birthday: new Date(), crying..
자바스크립트 기초. Array (2) - 배열 API
Language & Framework/JavaScript 2022. 1. 19. 자바스크립트 기초. Array (2) - 배열 API 워낙 종류가 많고 하나하나 자세하게 설명하면서 넘어가면 몇 날 며칠이 걸릴 것 같아서 이번 글은 수박 겉핥기처럼 빠르게 지나가려고 한다. 아래의 두가지 배열을 가지고 모든 API들을 찍어 먹어 보도록 하자. const Animal = ["lion", "dog", "mouse", "ddoddi", "cat"]; const Num = [2, 4, 6, 8, 10]; *API간의 연관성은 전혀 고려하지 않고 ECMAScript(2015)에 작성되어 있는 순서 그대로 한글로 간소화하여 옮겼다. => 이후는 원본이 아닌 내가 설명을 위해 혹은 그냥 사족으로 남긴 글이다. 1 ) length : number : 배열의 길이를 가져오거나 설정한다. 이것은 배열의 가장 높은 숫자를 가진 인덱스보다 하나 더 높은 숫자이..
자바스크립트 기초. Array (배열) (1)
Language & Framework/JavaScript 2022. 1. 17. 자바스크립트 기초. Array (배열) (1) Array ? 1) 연관된 내용을 그룹핑하여 하나의 변수로 모아서 관리하는 것이 배열이다. 2) 하나의 인덱스에 한 개의 값이 저장된 순차적 자료구조의 형태를 띄고 있다. 3) 인덱스는 0부터 시작한다. 1. Array decalaration 배열 선언 const cafe1 = new Array("starbucks", "twosome"); const cafe2 = ["starbucks", "twesome"]; console.log(cafe1); // (2) ['starbucks', 'twosome'] console.log(cafe2); // (2) ['starbucks', 'twosome'] 변수명에 바로 선언할 경우에는 대괄호를 사용하고 new 연산자를 사용할 경우에는 소괄호를 사용할 수 있다. 그러..
자바스크립트 기초. Object
Language & Framework/JavaScript 2022. 1. 15. 자바스크립트 기초. Object Object? => object(객체) = { key(property) : 값(value) }의 집합체 1. 객체 초기화 방법 ( literals와 propertys ) // 1) literal 객체 초기화 const object1 = {}; // literal const babyddoddi = { name: "ddoddi", age: 7 }; console.log(babyddoddi); // {name: 'ddoddi', age: 7} // 2) property 객체 초기화 function Adultddoddi(name, age) { this.name = name; this.age = age; } adultddoddi = new Adultddoddi("ddoddi", 29); console.log(ad..

티스토리툴바