728x90
반응형
CSS Normalize & CSS Reset 포스팅 썸네일 이미지

개발/CSS3

CSS Normalize & CSS Reset

모든 웹 브라우저는 HTML 엘리먼트들에 자체적으로 설정된 스타일을 반영합니다. 이 말은 브라우저마다 HTML 엘리먼트 스타일에 대한 처리과정이 조금씩 다르다는 것을 의미합니다. 예를 들어, 사파리와 크롬은 동일한 HTML 문서를 다르게 보여줍니다. 이러한 차이점은 내장된 브라우저 스타일링 때문입니다. 브라우저 간 스타일 불일치를 피하기 위해 내장된 브라우저 스타일링을 제거함으로써 브라우저마다의 스타일링 차이점을 없앨 수 있습니다. 이렇게 내장된 브라우저 스타일링을 초기화하기 위해 사용하는 방법이 CSS Reset과 CSS Normalize입니다. CSS Reset CSS Reset 스타일시트는 모든 HTML 요소에 대한 내장 스타일링을 제거합니다. CSS Reset은 보편적으로 Eric Meyer가 제..

2019.08.01 게시됨

vue.js Event Bus를 통해 컴포넌트간 통신하기 (Event Bus in Vue.js) 포스팅 썸네일 이미지

개발/Vue

vue.js Event Bus를 통해 컴포넌트간 통신하기 (Event Bus in Vue.js)

✨ 들어가며 vue.js에서는 일반적으로 부모/자식간의 이벤트 통신하는 방식을 사용합니다. 하지만, 경우에 따라서는 서로 관련없는 독립적인 컴포넌트끼리 이벤트를 통신해야할 때가 생깁니다. 이 경우를 좀 더 편하게 도와주는 vuex라는 state 관리 라이브러리도 있지만 규모가 작을 경우에는 단순히 EventBus를 활용해서 간단하게 처리할 수 있습니다. ✍️ 사용방법 이벤트버스 초기화 이벤트버스를 구현하는 것은 매우 쉽습니다. 단지 아래와 같이 하나의 vue 인스턴스만 생성해주면 됩니다. 이 인스턴스를 독립적인 각 컴포넌트끼리 통신할 때 중간지로 활용합니다. vue component -> EventBus -> vue component // event-bus.js import Vue from "vue"; ..

2019.07.26 게시됨

[UI 개발] css3 - tab menu 제작(간단한 탭메뉴 제작) 포스팅 썸네일 이미지

개발/UI개발

[UI 개발] css3 - tab menu 제작(간단한 탭메뉴 제작)

🖐 들어가기 전에 이번에는 간단한 탭메뉴를 자바스크립트를 통해 구현한 코드를 공유하도록 하겠습니다. 아래에 예시처럼 동작하는 UI를 개발하는 것이 이번 포스팅의 목표입니다. 💻 HTML 시멘틱마크업 How to develop a tab menu with jQuery 제작자 : 박경두 고려대학교 경영정보학과 멋쟁이 사자처럼 4기 About Portfolio Contact Travel About Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer ..

2016.10.18 게시됨

개발/UI개발

[UI 개발] css3 - overlay side navigation 제작(오버레이 사이드 네비게이션)

Side Navigation(overlay) 이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내고, 컨텐츠 부분의 배경을 오버레이하는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

2016.10.18 게시됨

개발/UI개발

[UI 개발] css3 - push-content side navigation 제작(사이드 네비게이션)

Side Navigation(push content) 이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

2016.10.18 게시됨

개발/UI개발

[UI 개발] css3 - full-width side navigation 제작(풀 사이드 네비게이션)

Side Navigation(full-width) 이번에 준비한 사이드 네비게이션은 페이지 전체를 덮는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

2016.10.18 게시됨

[UI 개발] css3 - side navigation 제작(사이드 네비게이션) 포스팅 썸네일 이미지

개발/UI개발

[UI 개발] css3 - side navigation 제작(사이드 네비게이션)

Side Navigation 안녕하세요. 오늘부터 UI 개발한 코드를 블로그에 공개하려고 이렇게 글을 쓰게 되었습니다. 꾸준히 개발하면서 나온 결과물을 포스팅하겠습니다. ㅎ 혹시 필요한 기능이 있으시다면, 자유롭게 사용하시고, 개선사항이 있으면 알려주시면 고맙겠습니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작..

2016.10.18 게시됨

[웹폰트] 티스토리 블로그 나눔바른고딕 폰트 적용 포스팅 썸네일 이미지

블로그/티스토리 팁

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

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

2016.09.22 게시됨

[자바스크립트로 구현한 알고리즘] IQ Test 포스팅 썸네일 이미지

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..

2016.09.21 게시됨

[자바스크립트로 구현한 알고리즘] Find the next perfect square! 포스팅 썸네일 이미지

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..

2016.09.21 게시됨

[자바스크립트] 객체 (Javascript - Object) 포스팅 썸네일 이미지

개발/Javascript

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

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

2016.09.21 게시됨

[자바스크립트로 구현한 알고리즘] Isograms 포스팅 썸네일 이미지

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..

2016.09.20 게시됨

[자바스크립트로 구현한 알고리즘] Credit Card Mask 포스팅 썸네일 이미지

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..

2016.09.20 게시됨

[자바스크립트로 구현한 알고리즘] Descending Order 포스팅 썸네일 이미지

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..

2016.09.20 게시됨

[자바스크립트로 구현한 알고리즘] Vowel Count 포스팅 썸네일 이미지

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의 경우 대문자/소문자를 구별하지 않게 해주는 수식어다.

2016.09.19 게시됨

[자바스크립트로 구현한 알고리즘] Mumbling 포스팅 썸네일 이미지

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. 제가 작성한 코드보다 아래 코드가 훨씬 가독성이 좋은 모범 사례입니다.

2016.09.19 게시됨

[CSS3] Position : Float 포스팅 썸네일 이미지

개발/CSS3

[CSS3] Position : Float

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

2016.09.19 게시됨

자바스크립트 호이스팅(javascript hoisting) 포스팅 썸네일 이미지

개발/Javascript

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

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

2016.09.19 게시됨

[자바스크립트로 구현한 알고리즘] Get the Middle Character 포스팅 썸네일 이미지

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 (..

2016.09.18 게시됨

728x90
반응형