개발/HTML5

기초부터 배우는 HTML5 1강

기초부터 배우는 HTML5 (Basic of HTML5) 인터넷이라고 하면 웹이 바로 생각이 나고, 웹과 함께 HTML이나 CSS, Javascript 같은 용어들이 같이 떠오를 겁니다. 웹에 사용되는 이 용어들이 무엇이고, 어떻게 시작이 되었는지 먼저 가볍게 살펴보면서 진행하도록 하겠습니다. HTML이란? HTML은 Hyper Text Markup Language라는 의미를 담고 있는 하나의 언어입니다. 한마디로 hyper text가 담긴 문서를 제작하는 언어라는 의미죠. 그렇다면 하이퍼텍스트가 뭔지 궁금해 하셔야겠죠? Hyper Text(하이퍼 텍스트)란 하나의 Text(문서)로 두는 것이 아니라 문서와 문서를 서로 연결시켜, 도시의 복잡한 도로처럼 상호 연결하여 접근 방식을 다양화시킨 문서를 가리킵..

개발/SASS

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

주석 처리 SASS 파일 내부에 주석을 처리하는 방법은 두 종류가 있습니다. 일반적으로 CSS와 동일하게 이런 방식으로 처리하는 방법과 이런 방식으로 처리하는 방법이 있습니다. 결론적으로 말하면 첫번째 방식은 SASS 컴파일의 결과물인 CSS 파일에도 그대로 반응되는 반면, 두번째 방법은 CSS 파일에 전혀 나타나질 않습니다. 그렇기 때문에 첫번째 방식은 CSS 파일에 저작권 또는 CSS 파일 버전 등을 표시할 때 사용하고, 두번째 방식은 SASS의 속성을 지정하여 유지보수 할 때 편합니다. 왜냐하면 CSS 파일 내부에 텍스트가 많으면 많을수록 브라우저가 사이트를 렌더링 하는 속도가 더뎌지게 될 것이고, 또한 CSS 속성에 대해서 굳이 개발자 이외의 사용자들에게 보여 줄 필요가 없다고 보기 때문입니다. ..

개발/SASS

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

Sass 강의 CSS 확장(CSS Extensions) 앞에서 Nested Rules라고 중첩하는 방법에 대해서 다뤄봤는데요. 다시 한번 설명하면, 중첩이란 하나의 선택자의 하위 선택자 또는 자식 선택자가 있는 경우 중첩을 활용하면, 적은 코딩으로 효율적이게 각 선택자에 속성을 지정해 줄 수 있습니다. 특히 사이트가 복잡해지기 시작하면, 하위 또는 자식 선택자들이 상당히 많아지게 되며, 각각의 하위 또는 자식 선택자를 지정하기 위해 부모 선택자까지 전부 CSS 코드에 넣기 시작하면 정말 코드가 복잡해집니다. 하지만 중첩을 이용하면 각 선택자들은 한 번만 입력하면 모든 것이 해결되는 아주 편리한 기능입니다. CSS 확장에는 중첩뿐만 아니라 태그 선택자와 연계된 클래스 또는 아이디 선택자끼리 쉽게 묶어주는 ..

개발/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줄이 넘어가면 뭐가 뭔지 알 수 없는 경우도 생겨 버립니다. 하지만 사스를 활용하면 스타일시트 작업이 마치 프로그래밍하는 것처럼 체계적이고, 구조적으로 개발할 수 있게 됩니다. 사스에 대한 소개는 간단하게 여기서 ..

개발/Javascript

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

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

개발/CSS3

[CSS3] Position : Float

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

개발/Javascript

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

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

개발/Javascript

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

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

개발/Javascript

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

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