# Sublime Text

48개의 포스트
post-thumbnail

MacBook 개발환경 설정 가이드

언제나 어디에다가 적어두는 (매번 컨플루언스나 노션에다 적어두다가 .. 공유해두지만.. 매번 업데이트 하는 그런류.. 그렇지만.. 생각외로 이렇게 하드코어적으로 쓰는 사람이 없다라는 것도 놀람의 연속..) 추가적으로 brew 만 잘 사용해도 어마어마하고 또한 최근 1~2년 전부터 떠오르는 https://fig.io 도 참고할만한 곳이기도 하다.. (아직까진 맥 환경에만 주력하는 것 같은데.. 리눅스나. 윈도우 환경에도 지원하려는 듯 하니. 지원하면 설치해서 사용하면 좋을 듯 하다..) 필자는 맥환경을 기준으로 기입을 하나 Ubuntu 환경에서도 유사하게 사용이 가능하니 (참고로 필자의 별도의 개인 서버인 Ubuntu 서버에서 apt 로 유사하게 설치해서 사용중이다.) Homebrew oh-my-zsh zplug ht

2023년 5월 26일
·
0개의 댓글
·
post-thumbnail

[Sublime Text] Java build 설정 방법

백준 알고리즘 문제를 풀면서 java 컴파일을 위해 Sublime-Text를 사용했다. 예전에 써본 적은 있었지만 오래돼서 기억이 안나 인코딩 설정하는데 한참 걸렸음 . . 혹시 나중에 다시 이런 일이 생기거나, 나같은 사람이 있을까봐 정리해보려고 한다 ! ✅ 원인 코드 입력하는 부분은 괜찮은데 컴파일 하면 콘솔창에 한글이 깨져서 출력됐다. ✅ 해결 방법 Prefrences - Browse Packages - User - JavaC.sublime-build 위의 경로로 들어가서 아래와 같이 작성 후 저장해준다. ![](https://velog.velcdn.com/images/hyeoni/post/76440de0-4b6b-4ec6-b

2023년 2월 21일
·
0개의 댓글
·
post-thumbnail

Basic Python - Troubleshooting (sublime text에서 python 실행하기)

우선 chapter3을 나가기전 며칠동안 골머리를 앓게했던 문제에 대해 언급하고자 한다. 크게 윈도우 환경에서 * python을 동작시키는 방법은 2가지*로 나눌 수 있다. > 1. www.python.org 로 들어가서 최신 python을 다운받기. 다운받고 새로 설치된 IDLE (Pthon 3.10 64-bit)를 실행하면 prompt명령창이 뜬다. 가장 간단한 방법이고 .py 확장자를 쉽게 저장할수 있다. (이 범주안에 anaconda prompt라고 하는 또다른 통합버전의 파이썬을 설치할수도 있다. AI스쿨 기초AI과정에서 설치했었는데, 장점은 아나콘다(Anaconda)를 설치하면 대부분의 패키지들이 같이 설치되기 때문에 손쉽게 데이터 분석을 시작할 수 있다. 또한, 아나콘다

2021년 10월 11일
·
0개의 댓글
·
post-thumbnail

#52_JS제어문,전역/지역 변수, 스코프, 호이스팅,반복문 2편

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권45자바스크립트2_210626(2/3) 주제 : html / css / Java script 제어문, 전역/지역 변수, 스코프, 호이스팅, 반복문 반복문 일정한 조건을 만족할때까지 코드를 반복 실행하는 구문. 조건이 true일때 구문을 반복하여 출력하고 조건이 false 도달하면 실행을 멈춘다. 조건의 제한이 없는 반복문은 무한히 구문을 반복 실행 됨으로 조건을 제한할 장치가 필요하다. while반복문 ![](https://images.velog.io/images/hwanginchang/post/00022baf-1806-4bc8-8d39-7575ed076008/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-09-05%20%E1%84%8B%E1%85%A9

2021년 9월 11일
·
0개의 댓글
·
post-thumbnail

#50_ JS변수와 데이터타입 2편

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권43자바스크립트1210623(2/2) 주제 : html / css / Java script Java script null, undefined null : 변수 초기화로 값이 없다는 의미의 null값을 명시적으로 입력 undefined : 변수를 선언만 한상태 null은 object타입 속성을 가지고 있다. null과 undefined는 서로 값이 없다는 속성은 같지만 데이터 타입은 undefined와 object로 서로 다른 타입을 가지고 있음을 알 수 있다. 빈값을 명시했느냐 아니냐의 차이 그리고 데이터 타입의 차이가 있다. 부정문 Java script에서 부정문의 표현은 느낌표(!)를 사용한다. 연속사용으로 2중부정(?)문을 만들 수 있다. null과 undefined의 연산에서는 null은 0과 같은 취급으로 연산이 가능하고

2021년 9월 11일
·
0개의 댓글
·
post-thumbnail

#49_JS 변수와 데이터타입 1편

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권42자바스크립트1210623(1/2) 주제 : html / css / Java script Java script - 변수와 데이터 타입 Java script시작 웹을 프로그래밍 하는 언어 중, html은 구조를 설계, css는 레이아웃과 디자인을 담당하는 언어라고 이해했다. 오늘부터 시작하게된 Java script는 인터렉티브한 효과를 구성하는 언어라고 한다. Java script는 인간에게 친숙한 언어로 High level language라고 이야기 하는데 반대의 개념으로 기계언어, Low level language가 있다. 사실 Java script를 처음 접해보는 것이라 이런 설명이 아직은 전혀이해가 되지 않는 것이 사실이다. > - 인간 친화적 언어 : High level language 기계 친화적 언어 : low level language Java sc

2021년 9월 3일
·
0개의 댓글
·
post-thumbnail

#48_네이버 모바일 페이지(2)

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권41네이버모바일1210619(2/2) 주제 : html / css 네이버 모바일 페이지 카피 네이버 모바일 페이지의 메인, 마무리 과정이다. 광고를 담은 오브젝트들이 채팅창과 같이 배치되는 영역이다. 각각의 오브젝트들이 유사한 디자인을 가지고 있지만 배치된 방향에 따라 디테일한 부분에서 차이가 있다. li태그를 먼저 선택자로 구분하여준다. 좌우

2021년 9월 2일
·
0개의 댓글
·
post-thumbnail

#47_네이버 모바일 페이지

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권40네이버모바일1210619(1/2) 주제 : html / css 네이버 모바일 페이지 카피 이전에 모바일화면에 맞춘 페이지를 작성했었다. 모바일 버전이라기 보다.화면의 크기, 정확히는 브라우저의 크기에 맞춰 변화하는 웹페이지의 여러 형태 중 반응형 웹페이지의 특성에 맞춰 제작하는 실습을 진행했었다. 네이버의 모바일 페이지는 모바일 버전의 css파일을 따로 작성하는 방법을 쓴다고 했다. 웹페이지의 주소앞에 "m."이 붙는 페이지는 이런 방법으로 제작된 모바일에 대응하는 페이지라 할 수 있겠다. ![](https://images.velog.io/images/hwanginchang/post/9e5c9e4a-fd3a-43a0-990d-e9f8059a55d6/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E

2021년 9월 1일
·
0개의 댓글
·
post-thumbnail

#46_유튜브 페이지 실습(4)

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권38 유튜브2_210613(2/3) 주제 : html / css 유튜브 페이지 카피 - 유튜브 채널 유튜브 채널의 페이지 이다. 윗쪽에 배너가 배치되고 채널의 프로필 이미지와 제목이 들어가고 그 밑으로는 채널에 관한 메뉴가 있다. 컨텐트의 영역은 채널의 설정에 따라 나타나게 되는데 일반적으로 가장 최근 업로드된 영상 혹은 인기영상이 배치되고 그 밑으로는 채

2021년 9월 1일
·
0개의 댓글
·
post-thumbnail

#45_유튜브 페이지 실습(3)

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권39유튜브3210613(3/3) 주제 : html / css 유뷰브 페이지 카피 유튜브 페이지의 왼쪽 영역은 그냥 보기에도 많은 오브젝트들이 담겨있다. 아이콘과 메뉴의 텍스트로 구성된 리스트들의 연속이다. 중간에 다른 영역도 섞여 있었지만, margin, padding 그리고 border 속성들이 육안으로 확인했을 때 동일하게 적용된 것을 알수

2021년 8월 31일
·
0개의 댓글
·
post-thumbnail

#44_유튜브 페이지 실습(2)

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권38 유튜브2_210613(2/3) 주제 : html / css 유튜브 페이지 카피 페이지 상단의 nav영역, 그곳을 채우는 여러 오브젝트들의 설계도면, 디자인 작업이다. nav 영역을 유튜브 로고, 검색창 그리고 로그인 3부분으로 나누어 주었다. 각 영역의 배치는 flex속성을 사용해 주었는데 가운데 영역을 차지하는 검색창 오브젝트는 position: absolute;를 사용하는 중앙정렬 방법을 적용해 주었다. 부모태그에 flex의 space-between 속성이 적용되어 있어 중앙으로 정열됨은 물론 속성이 없더라도 중앙으로 위치하는데, 다시금 정렬을 시켜주는 이유는 잘 이해가 되지 않았다. 아마 브라우저의 크기 조절에 맞춰 정렬하기 위해서가 아닐까 생각해 본니다. Review css의 속성의 사용방법에는 같은 결과를 나타내는 코드가 몇몇 있다. 단순히

2021년 8월 30일
·
0개의 댓글
·
post-thumbnail

#43_유튜브 페이지 실습

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권37 유튜브1_210613(1/3) 주제 : html / css 유튜브 페이지 카피 유튜브 페이지 또한 직전에 작업했던 트위치 페이지와 같이 상단영역과 왼쪽 영역이 스크롤에 상관없이 고정되어 있는 것을 알 수 있다. 유튜브 페이지의 경우 y축 스크롤의 범위가 매우 넓기 때문에 왼쪽 영역이 고정되어 항상 메뉴를 확인할 수 있는 이런 구조가 더 적합한것 같다.

2021년 8월 26일
·
0개의 댓글
·
post-thumbnail

#42_CSS추가설명

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권36CSS추가설명_210612 주제 : html / css CSS추가설명 reset.css/ normalize.css | reset.css > [ reset.css ] code website https://meyerweb.com/eric/tools/css/reset/ html코드의 태그들이 가지고 있는 고유의 css속성을 초기화 해주는 코드가 담긴 css파일. 기존 css파일과 같이 link태그를 사용하여 html과 연결해준다. 커스텀 디자인을 적용할 css연결 link태그 보다 상위에 위치하여 캐스케이딩을 활용하여 커스텀 디자인을 적용할 수 있다. normalize.css > [ normalize.css ] code website https://necolas.github.io/normalize

2021년 8월 25일
·
0개의 댓글
·
post-thumbnail

#41_트위치 페이지 실습(4)

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권35 트위치2_210612(2/2) 주제 : html / css 트위치 페이지 카피 트위치 페이지의 메인영역, 공간을 차지하는 콘텐츠 오브젝트들의 대략적인 설계도면 그리고 디자인/ 배치작업을 끝내고 세부적인 부분에 디자인작업을 해주었다. 먼저 메인 컨텐츠의 각 영역을 나누어 주는 경계에 "더보기"라는 버튼을 만들어 주었다. ![](https://

2021년 8월 24일
·
0개의 댓글
·
post-thumbnail

#40_트위치 페이지 실습(3)

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권35 트위치2_210612(2/2) 주제 : html / css 트위치 페이지 카피 트위치의 서비스 컨텐츠가 담긴 메인의 오른쪽 영역은 스트리밍 채널로 연결되는 여러 오브젝트의 배치로 이루어져 있다. 이전에서의 작업처럼 왼쪽 영역을 3차원속성으로 고정시켜줌으로서 독립적인 움직임을 설정하고 오른쪽 영역은 오른쪽 영역대로 공간을 부여하는 속성을 주었다.

2021년 8월 23일
·
0개의 댓글
·
post-thumbnail

#39_트위치 페이지 실습(2)

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권34 트위치1_210612(1/2) 주제 : html / css 트위치 페이지 카피 트위치 페이지에서 눈에 띄는 점은 왼쪽 영역이다. 일반적인 트위치의 컨텐츠가 배치되는 영역과 별개로 스크롤이 적용되어 있어 독립적으로 느껴졌고 트위치라는 플렛폼 사이트의 특성에 잘 맞는 영역이라 생각한다. 추천채널 메뉴는 왼쪽 영역의 핵심적인 부분으로, 사용자

2021년 8월 20일
·
0개의 댓글
·
post-thumbnail

#36_네이버 오디오클립 페이지 실습(2)

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권32 네이버오디오2_210605(2/3) 주제 : html / css 네이버 오디오 클립 페이지 카피 네이버 오디오클립 페이지의 컨텐츠가 담긴 영역을 카피했다. 좌우로 분리되어 있고 컨텐츠의 구조가 유사하여 컨텐츠의 레이아웃 구조를 디자인 하는 속성을 따로 만들어 사용하였다. 각각의 컨텐츠를 구성하는 div태그에 class="audio-section"을

2021년 8월 17일
·
0개의 댓글
·
post-thumbnail

#35_네이버 오디오클립 페이지 실습

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권31 네이버오디오1_210605(1/3) 주제 : html / css 네이버 오디오클립 페이지 카피 네이버의 오디오클립 페이지를 카피해보았다. 상단영역을 작업했는데 상단영역 또한 좌/우로 구분하여 오브젝트를 배치시켰다. "굳이 상단영역의 오브젝트를 좌우로 나누어 다시 배치하여야 했을까?"를 생각해 보았다. > ### 실제 네이버의 오디오 클립 페이지 ![](h

2021년 8월 14일
·
0개의 댓글
·
post-thumbnail

#34_네이버 e스포츠 페이지 실습(3)

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권30 네이버이스포츠_310605(3/3) 주제 : html / css 네이버 e스포츠 페이지 카피 네이버 e스포츠 페이지에서 오른쪽 영역이다. '많이 본 뉴스' 섹션에서는 이미지에 배치된 순위를 표시하는 span태그 그리고 텍스트의 두줄 말줄임 속성이 특징이다. ![](https://images.velog.io/images/hwang

2021년 8월 13일
·
0개의 댓글
·
post-thumbnail

#33_네이버 이스포츠 페이지 실습(2)

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권29 네이버이스포츠_210605(2/3) 주제 : html / css 네이버 이스포츠 페이지 카피 네이버 이스포츠 페이지는 컨텐츠를 담은 오브젝트의 숫자도 많지만 특히 텍스트가 전반적으로 만이 들어가 있는 것이 특징으로 보인다. 텍스트가 많이 배치된다는 것이 기존 작업의 틀에서 크게 벗어 나는 것은 아니지만 예상하건데 여러부분에 말줄임 효과를 내는 속성이 필요해 보인다. > ### 실제 네이버 e스포츠 페이지 ![](https://images.velog.io/images/hwanginchang/post/7ecff6d0-694c-412a-8bbb-fdcc36739d37/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-08-12%20%E1%84%8B%E1%85%A9%E1

2021년 8월 13일
·
0개의 댓글
·