지금 티스토리로 개발 관련 내용을 정리하고 기록하고 있지만, 누구나 아는 기업들은 github로 블로그를 만들어서 사용한다고 합니다. 그래서 github로 당장 이사 가지는 못하지만 혹시 나중에 이사 갈 수도 있다는 생각으로 미리 github 블로그를 만드는 방법을 공부했습니다. github 블로그의 장점으로는 자유롭게 커스텀마이징을 할 수 있다는 점입니다. 또한 개발이 아니더라도 포스팅 시 커밋 내역이 남아서 잔디를 심을 수 있습니다. 그리고 io라는 멋진 주소를 가질 수 있습니다. 이번 시간에는 다른 프레임워크보다 간단하게 사용할 수 있는 HEXO를 이용해서 github 블로그를 만들어보겠습니다. 1. 사전 준비 먼저 https://nodejs.org/ko/에서 node를 설치해줍니다. 다음에 htt..

AT&T Bell에서 unix를 개발하였습니다. 1973년 데니스 리치와 켄 톰슨이 C를 개발한 뒤, C 기반 unix를 재작성하였습니다. 1984년 리차드 스톨먼이 오픈 소프트웨어 자유성 확보를 위한 GNU 프로젝트에 돌입했습니다. 하지만 GNU 프로젝트에는 터미널이 없었습니다. 하드웨어와 응용프로그램을 이어주는 운영체제의 핵심 시스템 소프트웨어인 터미널이 없다는 것은 GNU의 큰 단점이었습니다. 헬싱키 대학생이던 리누스 토발즈는 앤디 타넨바움의 MINIX를 개조한 Linux를 발표했습니다. 터미널이 들어있는 형태였습니다. 다시 정리하자면, 리누스 토발즈가 작성한 커널 혹은 GNU 프로젝트의 라이브러리와 도구가 포함된 운영 체제를 리눅스라고 합니다. 자유롭게 튜닝을 할 수 있고 다양한 공간에서 사용될 ..

git commit을 하는데 잔디가 안 심어져서 이유를 찾아봤습니다. 1. fork한 레포지토리는 커밋을 해도 잔디가 안 심어집니다. 학원에서 fork한fork 한 레포지토리에 열심히 공부한 내용을 커밋하고 뿌듯한 마음으로 잔디를 확인한 결과... 나오지 않습니다. 하얗습니다.. 왜 그러나 했더니 fork 한 레포지토리는 잔디가 안 심어진다고 합니다. 해결방법으로는 새로운 레포지토리를 만들어서 거기에 다시 커밋을 진행하는 거밖에 없다고 합니다... 2. branch에서는 커밋을 해도 잔디가 안 심어집니다. 커밋을 했는데... 역시 잔디가 안 심어집니다. 이것도 이유를 찾아보니까 branch에서 커밋을 한거는 잔디에 안 나타난다고 합니다. 해결 방법으로는 master로 merge를 시키면 자신이 해왔던 커..

제목(Header) h1부터 h6까지 제목을 표현할 수 있습니다. # 제목 1 ## 제목 2 ### 제목 3 #### 제목 4 ##### 제목 5 ###### 제목 6 마크다운은 표준이 없기 때문에 제목 1과 제목 2는 다음과 같이 표현할 수도 있습니다. 제목 1 ====== 제목 2 ------ 아래와 같은 동작을 지원하지 않는 플랫폼도 있을 수 있지만 위의 동작은 대부분 돌아갑니다. 강조 밑줄을 입력하고 싶다면 태그를 사용해서 표현할 수 있습니다. 이탤릭체는 *이탤릭체* 혹은 _이탤릭체_로 표현할 수 있습니다. 표준이 아니기 때문에 동작하는 환경이 다를 수 있지만 * 아니면 _(언더바) 바로 표현할 수 있습니다. 볼드 글씨는 **두껍게** 혹은 __두껍게__를 통해 표현할 수 있습니다. **_이탤릭체..

네이버 블로그나 다음 카페 같은 곳에서 글을 작성할 수 있습니다. 다양한 에디터를 사용하게 되는데, 기본적으로 이미지 여백, 글자 크기 등을 사용자 입맛에 맞게 변경할 수 있습니다. 그런데 이러한 에디터는 글을 쓰는데 집중하는 것이 아니라 글을 꾸미는 것에 집중이 됩니다. 그래서 글의 내용에 좀 더 집중할 수 있도록 제공되는 방법 중 하나가 MarkDown입니다. HTML에서 제공되는 문법보다 쉽게 배울 수 있습니다. 또한 관리도 쉽고 지원 가능한 플랫폼과 프로그램이 다양하다는 장점을 갖고 있습니다. 하지만 표준화 된 문법이 없어 사용자마다 문법이 상이할 수 있고, 모든 HTML 마크업을 대신하지는 못한다는 단점을 갖습니다. 정리해보자면, 간단하게 제공되는 문법을 통해서 요소를 빨리 만들기 위해서 사용되..

과 은 강조를 해주기 위해서 사용이 됩니다. 그런데 확실하게 '이럴 때 을 사용해야 돼!' 혹은 '아니야! 태그를 사용해야 돼!'라고 구분을 하기에는 모호한 부분이 있습니다. 어떻게든 차이점을 찾아서 구분을 해보자면 아래 예시를 보겠습니다. 10월 11일에 00학교에서 국어시험이 있습니다. 문제는 총 10문제입니다. 위에서 누구에게나 중요한 정보가 있습니다. 언제, 어디서, 무엇을 보는지는 누구에게나 중요한 정보입니다. 이에 을 사용하였고, 10문제의 경우 기획자가 국어 문제가 10문제인 것을 강조하고 싶다라는 부탁이 있을 때 주관적인 강조로 을 사용해봤습니다. 나름 mdn, 블로그 등을 찾아보고 제 나름대로의 해석을 해봤는데 레퍼런스 해석과 함께 좀 더 자료를 찾아봐야될 부분이 있는거 같습니다.

[attribute] See the Pen 속성 선택자1 by 석금용 (@gmyong) on CodePen. 해당 attribute를 갖고 있는 요소에 스타일이 적용됩니다. [attribute="value"] See the Pen 속성 선택자2 by 석금용 (@gmyong) on CodePen. 해당 attribute 값이 value인 요소에 스타일이 적용됩니다. 다른 클래스랑 같이 쓰인 요소는 불가능하고 value 값이 똑같아야 됩니다. [attribute~="value"] See the Pen 속성 선택자4 by 석금용 (@gmyong) on CodePen. 해당 attribute 값이 value인 요소에 스타일이 적용됩니다. 여기서는 다른 클래스랑 같이 쓰인 요소도 스타일이 적용되는 것을 볼 수 있..

IR 기법이란 이미지 대체 텍스트 제공을 위한 CSS 기법으로, 다양한 CSS 기법을 사용하여 이미지 대체 텍스트를 제공할 수 있습니다. 종류 1. padding-top 사용 width와 hegiht 속성을 적용하고 overflow 속성을 적용합니다. 그리고 box-sizing: border-box;를 적용해야지 padding-top 속성을 적용했을 때 대체 텍스트가 숨김 처리됩니다. 2. text-indent 사용 padding-top을 사용할 때와 똑같이 width와 height 속성을 적용하고 overflow 속성을 적용합니다. 그 후 text-indent 속성을 사용하여 대체 텍스트를 숨길 수 있습니다. 대체 텍스트를 해당 width의 값만큼 들여 쓰기를 하면서 텍스트가 숨겨지는건데, 만약 높이값..

개발자나 특정 기업이 코드 소스를 오픈한 것이 오픈소스입니다. 모든 오픈소스를 무료로 사용할 수 있는 것은 아닙니다. 오픈소스가 무엇이고 라이선스는 어떤 종류가 있는지, 어떻게 활용할 수 있는지에 대해서 알아보겠습니다. 1. 오픈소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것을 말합니다. 시간과 수고를 줄일 수 있도록 도와주는 오픈소스가 많습니다. 하지만 오픈소스에는 저작권과 같은 라이선스가 붙어있습니다. 그래서 오픈소스는 무조건 무료로 쓸 수 있다는 생각은 잘못된 생각입니다. 2. 라이선스 종류 Apache License 개인적 혹은 상업적으로 이용이 가능합니다. 또한 배포, 수정, 특허 신청도 가능합니다. MIT License 개인 소스에..

1. 비트맵 픽셀이 모여 만들어져서 레스터 이미지라고도 불립니다. 정교하고 다양한 색상을 자연스럽게 표현할 수 있지만, 확대하거나 축소할 때 깨지는 현상이 있습니다. JPG (JPEG) Full-color와 Gray-cale의 압축을 위해 만들어졌으며 압축률이 좋습니다. 손실 압축 방식을 사용하는데 이미지를 손상시키면서 저장을 합니다. 이미지 용량을 줄일 수 있지만, 이미지가 손상이 된다는 단점이 있습니다. 그래서 보통 JGP 원본이 있으면 그것을 다시 다른 JPG 파일로 저장하는 것은 추천하지 않는다고 합니다. (여러번 저장하는 것을 조심해야 함) 그리고 24비트 컬러를 지원하기 때문에 고해상도 표시장치에 적합합니다. 또 이미지의 품질과 용량을 쉽게 조절 가능합니다. 인터넷에도 JPG 파일을 자르고 편..