하와이 가는 여정

폰트 종류와 웹 폰트 폰트와 관련된 프로퍼티는 크게 폰트 크기(font-size), 폰트 종류(font-family), 폰트 형태(font-style, font-weight) 가 있다. 폰트 종류(font-family) font-family를 통해 원하는 폰트의 종류를 지정할 수 있다. font-family: '폰트이름1' '폰트이름2'; 일반적으로 한 단어로 구성된 폰트명은 따음표 없이 사용할 수 있다. 하지만 띄어쓰기 또는 하이픈(-)이 들어간 폰트명의 경우 따옴표를 사용하여 하나의 폰트명임을 명시해야한다. /* ✅ 올바른 한 단어 폰트 이름 */ font-family : Arial; /* ✅ 올바른 한 단어 폰트 이름 */ font-family : 'Arial'; /* ❌ 잘못된 두 단어 이상 폰트..

AFAIK - As Far As I Know 내가 아는 한 FYI - For Your Information 참고 GOTCHA - I've Got You i got it, Got it 과 같은 뜻. 알겠다. 해냈다 IMO(IMHO) - In My(Humble) Opinion 내 의견이지만. 내 소견이지만(humble 은 겸손의 표현) LGTM - Look Good To Me okay. 개발 한 시스템과 코드 리뷰를 부탁하거나, 자료의 요약을 확인 갔을 때 문제가 없는 경우에 사용 PTAL - Please Take Another Look Reviewer가 Review를 해주다가 중간에 Stop된 상태에서 review좀 해달라고 부탁할 때 사용 SGTM - Sounds Good to me 나에게는 좋다. SS..

어떠한 어플리케이션이나 서비스를 이용할 때 이렇게 카카오톡이나 페이스북 등등..의 계정으로 로그인을 하는 경험이 있을 것이다. 어떻게 다른 서비스를 이용하는데 다른 계정으로 로그인해서 사용할 수 있을까(안전하게)? 이걸 가능하게 해주는 것이 OAuth이다. OAuth를 살펴보기 전에 먼저 그림으로 쉽게 만나보고 알아가보자. 이렇게 3명의 참여자가 서로 서비스를 상호작용 하는 것을 보다 안전하게 도와주는 역할을 하는 것이 OAuth 이다. 사전적 의미로는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다. 용어 사용자(user)/Resource Owner:..

.gitignore 파일이란? 사용자가 원하지 않는 파일들을 자동적으로 git 커밋 대상에서 제외 시켜주는 것이다. 협업을 하거나 프로젝트를 할 때 github에 용량을 가볍게 하거나, 보안적으로 중요한 내용을 빼야할 때 사용하는 파일이다. 그렇다면 어떠한 내용을 빼야할 지 어려울 것이다. 그것을 도와주기 위해 아래의 사이트를 이용하면 좋다. https://www.toptal.com/developers/gitignore gitignore.io Create useful .gitignore files for your project www.toptal.com [사용방법] 1. 사용하는 언어나 프로그램을 태그처럼 검색한다. 2. 생성된 소스코드 내용을 복사해 자신의 프로젝트에 .gitignore 파일을 새롭게 ..

HTML의 모든 요소는 상자(Box)의 형태를 갖고 있다. 태그 내부에 위치해 실제 표시되는 내용을 Content(내용)라고 한다. 보이지 않지만 이러한 컨텐츠를 감싸고 있는 다른 요소들이 있다. 아래 그림과 같이 박스 형태 전체를 가리켜 박스 모델(Box Model)이라고 부른다. 내용(Content)는 이미지나 텍스트와 같이 우리가 코드 상에서 태그 사이에 담는 내용, 즉 실제로 담고 있는 부분이다. 경계선(Border)은 말 그대로 컨텐츠를 감싸고 있는 테두리이다. 패딩(Padding)은 여백이라는 뜻으로 컨텐츠와 경계선 사이의 여백이다. 마진(Margin)은 경계선 밖의 여백이다. 지금부터 박스 모델에 대해 자세히 알아보자. Content #inner { background-color: pink;..

복합 선택자에 들어가기에 앞서 HTML 요소 사이에 존재하는 부모와 자식이라는 개념에 대해 이해가 필요하다. 부모(article)와 나(div), 자식(p)이란 연결 관계를 가지는 요소들이 존재한다고 하자. 를 기준으로 안에 포함되는 하위 요소 는 의 자식요소(Child Element)이고, 의 상위 요소인 article은 의 부모요소(Parent Element)이다. 부모 - 자식 관계는 상대적이다. 를 기준으로 하면 가 부모 요소가 된다. 부모 요소 나 자식 요소 1 자식 요소 2 자식 요소 3 그리고 그 자식 요소와 그 아래에 포함된 태그들을 아울러 후손 요소(Descendant Element)라고 부른다. 즉 부모 아래의 모든 하위 요소들은 후손 요소인거다. 자식 선택자(Child Selector..

선택자(Selector)는 크게 아래와 같이 분류할 수 있다. 단순 선택자 복합 선택자 가상 클래스 선택자 단순선택자로 사용할 수 있는 것은 다음과 같다. 타입 선택자(Type Selector) 아이디 선택자(Id Selector) 클래스 선택자(Class Selector) 전체 선택자(Universal Selector) 속성 선택자(Attribute Selector) 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 해당 태그를 가지는 모든 요소에 스타일을 적용한다. css 소스코드 p { color: red; } 아이디 선택자(Id Selector) 아이디 선택자(Id Selector)는 아이디 이름으로 스타일을 적용한다. HTML 문서내에서 중복된 아이디는 존재할 수 ..

CSS는 Cascading Style Sheets의 약자이다. Style Sheets는 '스타일 문서들' 이라는 뜻으로 "글자 크기는 13px", "본문 내용 오른쪽에 여백은 13px"와 같이 웹 페이지와 관련한 스타일을 지칭한다. Cascades는 '폭포가 되어 떨어지다'이라는 뜻으로 CSS에서 스타일이 적용될 때 우선순위를 가지고 순차적용이 된다는 특징을 표현한다. CSS의 기본구조 CSS는 웹에 적용할 스타일을 적어둔 일종의 스타일 명세서이다. 선택자(Selector)-속성(Property)-값(value) 의 구조를 가진다. 선택자는 HTML에서 태그를 가리킨다. CSS에서는 ,(콤마)로 선택자 여러 개의 스타일을 한꺼번에 저정할 수 있다. h1, p { color: red; } CSS에서 프로퍼..

HTML Color Chart https://html-color-codes.info/ HTML Color Codes HTML Color Chart Click on any color square to get its HTML color code. HTML Color Codes Theory So you are wondering "Does this weird combination of letters and numbers have any meaning?" Well the answer is "Yes" and this is how it goes:) HTML Codes format: html-color-codes.info HTML Color Names https://www.w3schools.com/colors/colo..

*테이블 태그 는 table heading 는 table data table row 나이 직업 이름 23 대학생 김구름 24 직장인 구우름 테이블을 조금 변형해보겠다. 나이 23 24 직업 대학생 직장인 이름 김구름 구우름 테이블 태그에는 두 행 혹은 두 열을 차지하게 하는 속성이 있다. colspan 과 rowspan이다. colspan="숫자"는 "숫자"만큼 셀이 행을 점유합니다. rowspan="숫자"는 "숫자"만큼 셀이 열을 점유합니다. 나이 23 24 직업 대학생 이름 김구름 구우름 나이 23 24 직업 대학생 이름 김구름 구우름 *목록(List) 목록은 크게 순서가 없는 목록(Unordered List)과 순서가 있는 목록 (Ordered List)로 나뉜다. 순서가 없는 목록(Unordere..