기술 스택/HTML5

HTML 모바일에서 전화걸기 예제(초간단) (How to Create a Click to Call Link Using HTML)

핸드폰에서 웹사이트를 이용할 때 아래와 같이 전화번호를 누르면 바로 핸드폰 기본 전화걸기 창이 뜨는 것을 본적이 있을 것입니다. 이번 포스팅에서는 HTML a 태그를 활용해서 전화걸기 기능을 간단히 구현하는 방법에 대해서 소개하도록 하겠습니다. HTML a태그를 활용해서 전화거는 방법 HTML a태그를 활용해서 전화거는 기능을 구현하는 방법은 굉장히 간단합니다. 코드는 아래와 같습니다. href 속성값에 url을 넣는 대신 tel:전화번호 형식으로 넣으면 끝! // 예제 전화번호: 123-1234-1234 // 실제 사용 예시 전화번호: 123-1234-1234 전화번호: 123-1234-1234 동작 예시 위에서 예시로 기입한 코드의 동작 원리는 아래와 같습니다. PC에서 href에 tel:전화번호 값..

기술 스택/HTML5

DTD(Document Type Definition) - 문서 형식 정의

doctype이 무엇을 하는지 표준모드(standard mode)와 관용모드(quirks mode)의 차이 두 가지를 정의해보고자 한다. DTD란? 문서 형식 정의(DTD: Document Type Definition)는 마크업 문서의 요소와 속성등을 해석하는 기준을 명시하는 것이다. 문서 형식에는 HTML5, XHTML, HTML 3가지 유형이 존재한다. 이전 버전의 HTML(HTML2 ~ HTML4)은 SGML에 기반을 두어 만들어졌기 때문에 상세한 DTD 참조가 필요하며, 이 때문에 DOCTYPE을 선언하려면 공개 식별자와 시스템 식별자가 포함된 긴 문자열을 작성해야 한다. HTMl 4.01 Strict 모드로 문서 형식을 정의할 경우 DTD를 정의하지 않으면, 관용모드(quirks mode)로 렌..

기술 스택/HTML5

inline vs block vs inline-block 차이점 알아보기

inline vs block vs inline-block 속성을 비교해보자. display: inline ? 대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다. width/height 적용불가 margin/padding-top/bottom 적용불가 line-height를 원하는대로 사용할 수 없다. display: block ? block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 div가 있다. display: inline-block ? inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다. 기본적인 특징은 inline 속성과 비슷한데 (줄바..

기술 스택/Bootstrap

[Bootstrap] 부트스트랩의 그리드 시스템을 쉽게 사용하는 방법 (bootstrap - grid system)

부트스트랩5 알파가 런칭되었습니다! 아래에서 확인해봐요! 부트스트랩 5(Bootstrap 5) 알파버전 출시! 남들보다 빠르게 공부해보자! 🎉 Bootstrap 5 Alpa 드디어 부트스트랩 5 알파버전이 나왔습니다. 제가 학부시절에 부트스트랩 관련 글을 썼던게 엊그제 같은데 벌써 부트스트랩 5 알파가 나오다니.. 정말 세월이 빠른 것 같습니다 webruden.tistory.com 부트스트랩 (Bootstrap) 부트스트랩은 트위터의 웹 디자이너와 개발자가 만든 오픈형 UI 플러그인이라고 할 수 있습니다. 전 세계의 웹제작자들에게 편리성을 주고자 만들어졌으며 보다 편리하고 빠르게 레이아웃을 구성하고 다양한 인터페이스를 사용할 수 있습니다. 부트스트랩은 미리 정의된 스타일시트와 자바스크립트로 구동하는 플러..

블로그/티스토리 팁

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

하루에 적지않은 양의 글들(주로 웹페이지)을 읽게 되는데 이따금씩 글꼴의 중요성을 실감하게 됩니다. 저는 글꼴 중에도 "나눔바른고딕"을 선호하는데요. 티스토리 블로그를 시작하면서 블로그 디폴트 폰트로 나눔바른고딕으로 설정했습니다. 웹폰트로 폰트를 적용시켰고, 적용시키는 법에 대해서 이설명하도록 하겠습니다 ! 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 문법은 물론, 웹 디자인을 위한 기초 골격을 만드는 부분에 대한 개념까지 어느정도 확립할 수 ..

기술 스택/Javascript

자바스크립트 호이스팅(javascript hoisting)

자바스크립트를 공부하다보면 다른 언어와 다른 점이 몇 가지 있습니다. 그 중 호이스팅 (Hoisting)이라 불리는 것이 있는데 이 포스팅은 호이스팅에 대해 알아보는 것에 중점을 두고 있습니다. 호이스팅(hoisting) Hoisting은 hoist라는 단어에서 출발합니다. “끌어 올리는 장치”, “끌어 올리기”라는 뜻입니다. 자바스크립트에서도 호이스팅은 마찬가지로 끌어 올린다는 것이 포인트입니다. 그렇다면 끌어올려지는 것은 무엇일까요? 바로 변수(Variable)입니다. 간단하게 말해서 JavaScript에서의 호이스팅의 의미는 변수 선언문을 끌어올린다는 뜻으로 이해하면 됩니다. 좀 더 이해를 돕기위해 아래의 코드를 준비했습니다. 위의 코드는 호이스팅을 설명하기 위한 간단한 예제입니다. 위 코드를 보시..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Get the Middle Character

You are going to be given a word. Your job is to return the middle character of the word. If the word's length is odd, return the middle character. If the word's length is even, return the middle 2 characters.Examples:Kata.getMiddle("test") should return "es" Kata.getMiddle("testing") should return "t" Kata.getMiddle("middle") should return "dd" Kata.getMiddle("A") should return "A"InputA word (..

기술 스택/Javascript

[자바스크립트] String을 Number 타입으로 바꾸기

자바스크립트는 명시적인 데이터타입 정의가 없습니다. Int나 String같이 타입을 명시해서 변수를 정의하지 않고 그냥 var 타입으로 정의하면 자바스크립트가 알아서 적절한 타입을 지정합니다. 명시적인 타입이 없다는 것은 때론 타입 때문에 헷갈리기도 하고 원치 않은 결과가 나오기도 합니다. 그래서 보통은 약간 편법적인 방법으로 String을 number로 바꾼다던지 Number를 String으로 바꾼다던지 합니다. 위의 방법이 가장 간단하게 형변환을 하는 방법입니다. 쉽게 말해서 자바스크립트의 자동형변환을 이용해서 처리한 것입니다. 숫자타입에 문자열을 더하면 결과가 문자열이 되고 문자열에 숫자를 곱하면 숫자타입이 되는 특성을 이용해서 결과는 달라지지 않게 타입만 변환되도록 처리한 것입니다. 예제를 해본 ..

기술 스택/Javascript

[자바스크립트] 배열 요소 중 최대값 최소값 찾기

자바스크립트에는 숫자로 이루어진 배열 내에서 가장 큰 숫자 혹은 가장 작은 숫자를 찾아야 할 경우 for문을 돌리는 단순한 방법 외에 더 간단한 방법이 존재합니다! 먼저 Math 객체를 사용하는 방법이 있습니다. Math 객체에 가장 큰 숫자, 가장 작은 숫자를 구하는 max, min 메서드가 존재하는데 여기에 apply 메서드를 사용하면 숫자로 이루어진 배열을 파라미터로 전달할 수 있게 됩니다. 아래의 예시를 보면 이해하기 쉬울겁니다. 한 가지 조심해야할 부분이 있는데, 배열 내에 비교 불가능한 값이 있다면 결과는 NaN으로 나오게 됨을 주의해야 합니다.

Computer science/알고리즘

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

In this little assignment you are given a string of space separated numbers, and have to return the highest and lowest number.Example:highAndLow("1 2 3 4 5"); // return "5 1"highAndLow("1 2 -3 4 5"); // return "5 -3"highAndLow("1 9 3 4 -5"); // return "9 -5" Notes:· All numbers are valid Int32, no need to validate them.· There will always be at least one number in the input string. · Output stri..