여행/스페인

[스페인] 마드리드 근교 쿠엥카 여행기

여행/스페인

[스페인] 마드리드 근교 아빌라 여행기

여행/스페인

[스페인] 마드리드 근교 엘에스꼬레알 여행기

[

여행/스페인

[스페인] 마드리드(madrid) 여행기 3

여행/스페인

[스페인] 마드리드(madrid) 여행기 2

추천받은 현지 맛집스페인은 점심에 메뉴델디아를 먹으면 가격이 정말 착합니다. 여기 어딘지 아시죠?아틀레티코 마드리드 홈구장 비센테 칼데론입니다 ! ㅎ 친구는 코케 팬이라서 코케 유니폼을 구매했습니다. 마무리는 타파스와 샹그리아로

여행/스페인

[스페인] 마드리드(madrid) 여행기

설레는 마드리드로 가는 길 스페인 도착하자마자 오렌지폰에서 스페인 USIM을 갈아끼워서 사용했어요ㅎ 다시봐도 설레는 솔광장!!진짜 광장이 예술이에요. 도착하자마자 감탄사를 연발했던 기억이 아직도 생생합니다. 스페인 가게 직원과 재밌게 놀았던 기억도 있어요스페인에서 첫끼였는데, 정말 성공적이었습니다ㅋㅋ 그 유명한 마요르광장 ! 시장도 다녀오고 유명한 츄러스 가게도 있길래 먹어봤습니다. 제가 단걸 그렇게 좋아하는 편은 아니라서 저는 별로 안좋아했던 기억이 있네요 비야광장?을 들렸다가 레알왕궁쪽으로 가는데, 이 때 무슨 행사를 하고 있더라구요 ㅋㅋ

개발/Javascript

기초부터 배우는 자바스크립트 1강 (변수)

1강 변수 변수란? 변수는 물건을 보관했다가 필요할 때 다시 꺼내 사용하는 일종의 창고입니다.창고와 변수의 차이점은 바로 보관하는 내용이 물건 대신 데이터라는 점만 다릅니다. 간단히 정리해 보면 변수는 아래와 같습니다. 1. 변수는 데이터를 저장하는 장소2. 변수는 데이터를 읽고 쓰고 할 수 있는 장소 위 그림과 같이 하나의 창고라고 생각하면 이해하기 쉬울껍니다. 그럼 이제 위에서 소개한 변수가 무엇인지 알아봤으니 이제 실제 변수(창고)를 한번 만들어볼게요. var 변수이름 = 값; 변수를 만드는 가장 일반적인 방법입니다.우리가 사용하는 언어로 이 문법을 번역해보면 "자바스크립트 엔진에게 변수를 하나 만든 후 여기에 값을 저장해 주세요"라고 작성한 것과 같습니다. 그렇다면 여기서 var는 무엇일까요? 사..

개발/SASS

[2강] 효율적인 CSS작업을 위한 SASS 강의

Sass 강의 변수(Variables) 프로그래밍 언어에서 가장 많이 사용되는 부분이 바로 변수입니다. 변수를 이용하면 변수값만 변경함으로써 결과를 다르게 만들 수 있듯이, SASS에서도 반복적으로 많이 사용되는 부분, 예를 들어 font 모양이나 색상들을 변수로 지정해 놓고 이 변수값만 변경해 주면 CSS를 정말 간단하게 제어할 수 있습니다. SASS에서는 변수를 정의할 때 $ 기호를 사용합니다. 변수의 이름은 사용자에 의해서 지정할 수 있지만, 속성은 CSS의 속성을 지정해 줘야 합니다. 밑에 예제를 보도록 하겠습니다. 위 예시를 보면 $font_stack 이라는 변수와 $primary_color 라는 변수가 있습니다.각 변수들에는 CSS의 속성을 적용했습니다. $font_stack에는 Helveti..

개발/SASS

[1강] 효율적인 CSS작업을 위한 SASS 강의

Sass 강의 Sass는 Syntactically Awesome Style Sheet라는 단어의 줄임말이며, 한글로 번역하자면 “문장 구성적으로 끝내주는 스타일 시트”라는 의미를 지닌다고 볼 수 있습니다. "문장 구성적으로 끝내준다?"라는 의미는 사스를 학습하게 되면서 무슨 말인지 알게 될 것입니다.웹사이트를 디자인할 때 가장 필수 요소 중 하나가 바로 스타일시트인데요.이 스타일시트는 생각보다 단순하지만 웹사이트 규모가 커지게 되면, 소위 '노가다'하는 느낌이 들며, 심지어 코드 길이가 1000줄이 넘어가면 뭐가 뭔지 알 수 없는 경우도 생겨 버립니다. 하지만 사스를 활용하면 스타일시트 작업이 마치 프로그래밍하는 것처럼 체계적이고, 구조적으로 개발할 수 있게 됩니다. 사스에 대한 소개는 간단하게 여기서 ..

블로그/티스토리 팁

[웹폰트] 티스토리 블로그 나눔바른고딕 폰트 적용

하루에 적지않은 양의 글들(주로 웹페이지)을 읽게 되는데 이따금씩 글꼴의 중요성을 실감하게 됩니다. 저는 글꼴 중에도 "나눔바른고딕"을 선호하는데요. 티스토리 블로그를 시작하면서 블로그 디폴트 폰트로 나눔바른고딕으로 설정했습니다. 웹폰트로 폰트를 적용시켰고, 적용시키는 법에 대해서 이설명하도록 하겠습니다 ! HTML / CSS를 모르는 초심자를 대상으로 쉽게 설명할 예정이니 이 글을 쭉 따라서 적용하시면 쉽게 적용하실 수 있을 겁니다. 왼쪽 중간쯤에 있는 HTML / CSS 편집을 들어가면 이렇게 HTML/ CSS을 편집할 수 있는 에디터를 보실 수 있습니다.이제 여기서 몇 가지 코드를 적용을 시켜야 되는데요. 오른쪽 HTML 문서 파일에 부분이 있을겁니다. 그 바로 위에 아래에 코드를 집어 넣도록 하겠..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] IQ Test

Bob is preparing to pass IQ test. The most frequent task in this test is to find out which one of the given numbers differs from the others. Bob observed that one number usually differs from the others in evenness. Help Bob — to check his answers, he needs a program that among the given numbers finds one that is different in evenness, and return a position of this number. ! Keep in mind that you..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Exes and Ohs

Description: Check to see if a string has the same amount of 'x's and 'o's. The method must return a boolean and be case insensitive. The string can contains any char. Examples input/output: XO("ooxx") => true XO("xooxx") => false XO("ooxXm") => true XO("zpzpzpp") => true // when no 'x' and 'o' is present should return true XO("zzoo") => false

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Find the next perfect square!

Description: You might know some pretty large perfect squares. But what about the NEXT one? Complete the findNextSquare method that finds the next integral perfect square after the one passed as a parameter. Recall that an integral perfect square is an integer n such that sqrt(n) is also an integer. If the parameter is itself not a perfect square, than -1 should be returned. You may assume the p..

개발/Javascript

[자바스크립트] 객체 (Javascript - Object)

이번 글은 자바스크립트의 핵심이기도 하지만, 이해하기 어려운 객체에 대해서 다뤄보려고 합니다.자바스크립트는 객체 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것들이 객체로 존재합니다. 그렇기 때문에 자바스크립트를 공부할 때 꼭 정복해야 해야 하는 것이 바로 “객체”이기도 합니다. 한마디로 객체는 자신의 정보를 가지고 있는 독립적인 주체입니다.객체를 이해하려면 '프로퍼티'와 '메소드'를 이해하고 있어야합니다.객체란 것은 결국 포장을 이루는 말이고 실제 객체를 완성시켜주는 것은 프로퍼티와 메소드라는 구성요소이기 때문입니다.이해하기 쉽게 아래 그림으로 객체에 대해 쉽게 설명해 보겠습니다. 우리가 객체라고 부르는 것은 바로 컴퓨터 케이스에 해당하는데요. 실제 컴퓨터를 구성하는 것은 메모리, 그..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Isograms

Description: An isogram is a word that has no repeating letters, consecutive or non-consecutive. Implement a function that determines whether a string that contains only letters is an isogram. Assume the empty string is an isogram. Ignore letter case. isIsogram( "Dermatoglyphics" ) == true isIsogram( "aba" ) == false isIsogram( "moOse" ) == false // -- ignore letter case 같은 문자가 나오면 false를 return..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Credit Card Mask

Description: Usually when you buy something, you're asked whether your credit card number, phone number or answer to your most secret question is still correct. However, since someone could look over your shoulder, you don't want that shown on your screen. Instead, we mask it. Your task is to write a function maskify, which changes all but the last four characters into '#'. Examples maskify("455..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Descending Order

Description:Your task is to make a function that can take any non-negative integer as a argument and return it with it's digits in descending order. Descending order means that you take the highest digit and place the next highest digit immediately after it.Examples:Input: 145263 Output: 654321Input: 1254859723 Output: 9875543221 Number 데이터 타입을 String 데이터 타입으로 변환 후 배열로 정렬하고 내림차순으로 정렬한 다음 다시 Numb..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Vowel Count

Description:Return the number (count) of vowels in the given string.We will consider a, e, i, o, and u as vowels for this Kata. 모음을 체크하는 로직을 간단하게 구현했다. 아직은 허접하기 그지없는 코드다.좀 더 개발자답게 코드를 개선해보면 아래와 같다. 매우 간단하지 않은가?이와 같이 코드의 가독성과 효율성까지 생각하면서 짤 수 있는 개발자가 될 수 있도록 노력해야겠다. 참고로 /[aeiou]/ 와 같은 경우는 정규표현식으로 aeiou 중 1개가 포함되는지 체크해주는 것이다. 뒤에 ig의 경우 대문자/소문자를 구별하지 않게 해주는 수식어다.

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Mumbling

Description:This time no story, no theory. The examples below show you how to write function accum: Examples:accum("abcd"); // "A-Bb-Ccc-Dddd"accum("RqaEzty"); // "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy"accum("cwAt"); // "C-Ww-Aaa-Tttt" The parameter of accum is a string which includes only letters from a..z and A..Z. 제가 작성한 코드보다 아래 코드가 훨씬 가독성이 좋은 모범 사례입니다.

개발/CSS3

[CSS3] Position : Float

이야기에 앞서 웹 문서가 포함하는 모든 요소의 위치를 잡는 포지셔닝(Positioning)은 사실 웹 디자인의 모든 것이라고 표현 할 수 있습니다. 집을 지을 때도 그에 맞는 Frame을 잘 설계를 해야 원하는 모양의 집을 잘 지을 수 있습니다. 웹사이트도 마찬가지 입니다. 만들고자하는 웹사이트의 Layout을 잘 잡아놔야 그 다음 세부적인 디자인을 쉽게 적용시킬 수 있습니다.하지만 포지셔닝은 꽤 다양한 개념을 이해하고 그것을 복합적으로 잘 사용해야만 원하는 결과를 얻을 수 있을뿐더러, 현재의 기술로 포지셔닝을 하는데 있어서 부딪히는 한계와 버그들에 대한 이해도 필요합니다. 이 글에서는 포지셔닝을 통해 HTML 문법은 물론, 웹 디자인을 위한 기초 골격을 만드는 부분에 대한 개념까지 어느정도 확립할 수 ..