본문 바로가기

분류 전체보기

 (104)
<국비지원 개발자 과정> 마지막 프로젝트 - 소회 마지막 프로젝트를 마친지 2주정도 지났다. 소회를 계속 쓰고 싶었는데 여러일로 바빠지고, 생각이 정리가 안됐던 터라. 국비지원 교육에서는 총 2개의 프로젝트를 진행하고, 모두 팀 과제로 진행되는 것으로 알고 있다. 그런데 나는 이번 마지막 프로젝트는 개인으로 진행했다. 이유는, 중간 프로젝트 때의 경험으로 보아... 아무래도 비대면으로 계속 진행되었어서 같이 만나서 프로젝트를 진행하지도 못했었고, 각자 역할만 분담하고 계속 그냥 개인으로 진행하는 느낌이었어서. 그리고 나중에 맡았던 부분들을 합칠 때에만 잠깐 팀 프로젝트구나- 하는 느낌이었어서 그런 부분들이 여러모로 아쉬웠었기 때문. 강사님은 개인보다 팀으로 하기를 좀 설득하시고 권하시는 느낌이었지만, 중간 프로젝트가 만족스럽지 않은 부분도 컸고 뭣보다 ..
<자바스크립트 Javascript> 객체 리터럴 - 자바스크립트에서의 객체 원시 값을 제외한 나머지 모든 것이 객체라고 봐도 무방하다. 또한 원시 타입의 값과 달리 변경 가능한 값(mutable value)이라고 할 수 있다. 객체는 0개 이상의 프로퍼티로 구성되며, 프로퍼티는 키와 값으로 구성되어있다. 프로터피 값이 함수일 경우에는 일반 함수와의 구분을 위해 메서드라 지칭한다. - 객체 생성 C++이나 자바와 달리 자바스크립트의 객체 생성은 클래스와 new 연산자가 필요하지 않다. 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법인 리터럴을 이용하면 된다. 중괄호 내에 이를 표현하는데, 이 때의 중괄호는 코드 블럭이 아니므로 닫는 중괄호 뒤에는 세미콜론을 써주어야 한다. var person = { name : 'Lee',..
영화 <아이언맨 3> 中 - 기술자의 삶이란 스파이더맨 노 웨이 홈 보고나니 아이언맨3의 그 감성이 또 그리워져서(...). 곧 크리스마스라 마음이 들뜨기도 하고! 해서 오랜만에 봤다. 내 기준 마블에서 그 캐릭터만의 어떤 고유한 감성이 묻어나는 히어로를 꼽자면, 아이언맨이 1위, 그리고 스파이더맨이 2위인 것 같다. 이번에 스파이더맨을 보고 느낀 건, 확실히 스파이더맨은 성장 서사의 느낌이고(어린 소년의), 아이언맨은 그간의 시리즈를 통해 히어로이면서도 가장 인간다운(뭐 인간이니까) 면모를 잘 보여줬단 생각. 특히 아이언맨3에서. 그리고 로버트 다우니 주니어가 다했지 뭐.... 아무튼 개인적으로는 눈 휘날리는 설경에 토니 스타크가 혼자만의 싸움을 해나가는 그 장면이 제일 기억에 남고, 제일 와닿아서 아이언맨3를 제일 좋아한다. 그리고 개발자로의 ..
<자바스크립트 Javascript> 타입 변환 - 타입 변환 자바스크립트에도 다른 언어들과 마찬가지로 데이터 타입이 존재한다. 그리고 이 데이터 타입을 변경하는 방법으로는 크게 두 가지가 있다. 1) 명시적 타입 변환(explicit coercion) 타입 캐스팅(type casting)이라고도 한다. 개발자의 의도에 따라 타입을 변경하는 것이다. 방법으로는 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하거나, 빌트인 메서드 사용, 그리고 암묵적 타입 변환을 이용하는 것이 있다. 단, 타입 변환 시 타입을 변환한 변수의 '값'의 타입이 변하는 것은 아니다. var x = 10; var str = x.toString(); console.log(typeof str, str) // 결과 // string ..
<CSS> 반응형 웹 디자인 - 메뉴바 (2) 3) 메뉴 바(햄버거) 클릭 시 주메뉴 출현 앞서 가로 너비가 625px 이하일 경우 메뉴 바(햄버거)가 나타나면서 중앙의 주메뉴는 사라지도록 설정하였다. 따라서 이 때에는 메뉴 바(햄버거) 클릭했을 때 주메뉴가 다시 나타날 수 있도록 구현하였다. 코드는 아래와 같다. - CSS 우선 첫 번째로 미디어 쿼리에 관계없이 모두 적용되는 내용이다. 위 사진처럼 주메뉴가 하단에 나타나는 스타일에 클래스로 'hidden'을 주고 display 속성을 none 값으로 설정하였다. 이로써 사용자가 행동을 취하지 않는 한 하단에 나타나는 주메뉴는 나타나지 않는다. 그리고 이 주메뉴의 id명은 minimenu로 설정하였다. 이것은 가로 너비가 625px 이하일 때만 나타나는 부분이므로, 미디어 쿼리의 중단점을 625px..
<자바스크립트 Javascript> 제어문 - 제어문(control flow statement)이란? 조건에 따라 코드 블록을 실행하거나 반복 실행함으로써 기본적인 코드의 실행 순서(위->아래)를 변경한다. 따라서 코드의 실행 흐름을 인위적으로 제어할 수 있다는 특징을 갖는다. 1) 블록문(block statement/compound statement) 중괄호로 묶은 코드가 실행되는 영역을 나타낸다. 보통 종결의 의미로 세미콜론을 사용하지만, 블록문은 그 자체로 코드 블록 내의 실행을 마치면 종결의 의미를 가지므로 세미콜론을 사용하지 않아도 무방하다. 2) 조건문(conditional statement) 조건에 따라 평가하여 실행되는 문이다. 불리언 값으로 평가되는 표현식을 조건식으로 갖는다. - if... else 문 : 조건식을 통해 출력된 ..
<CSS> 반응형 웹 디자인 - 메뉴바 (1) - 반응형 웹 디자인 CSS의 미디어 쿼리를 이용하여 반응형 웹을 만들어보았다. 그 중에서도 많은 웹 사이트들에서 흔히 볼 수 있는, 화면 크기 변경 시 메뉴바의 디자인이 달라지는 부분을 구현해보았다. 처음엔 JS를 통해 이벤트로 구현해야하나 잠시 고민했는데, 이벤트가 아니라 브라우저의 크기를 가져와서 JS로도 할 수는 있다는 걸 배웠다. 하지만 미디어 쿼리가 보다 보편적인 방법이고, 미디어 쿼리 기능의 목적 자체가 이번에 구현하려는 반응형 웹에 맞는 것이어서 미디어 쿼리로 구현하였다. 1) 기본 화면 구성 기본 화면의 디자인은 다음과 같다. 가장 왼편에 브랜드 로고가 있고, 중앙에 메뉴가 inline으로 나열되어있으며, 가장 오른편에는 SNS 로고가 위치하고 있다. 2) 웹 브라우저의 가로 너비가 지정..
<CSS> <a>태그 밑줄없애기, 색상 변경하기 - 태그 밑줄 없애기, 색상 변경하기 HTML에서 태그는 클릭 시 다른 페이지로 이동할 수 있도록 하는 기능을 가진 태그이다. 이 때, 태그를 넣어주면 자동으로 해당 값에는 밑줄과 색상이 변경되는 효과가 적용된다. 이것을 CSS 스타일시트를 이용하여 밑줄을 없애고, 색상을 변경할 수 있다. 1) 태그 적용 전 HTML BRAND CSS .title { font-size: 2em; } 2) 태그 적용 후 HTML BRAND 3) 태그 밑줄 없애기 text-decoration 속성에 none의 값을 주면 적용되어있던 효과가 사라진다. CSS a { text-decoration: none; } 4) 태그 색상 변경하기 태그를 적용하기 전의 색상으로 다시 바꿔주었다. 처음의 스타일과 같지만, 링크 태그는 적용되..
<CSS> 미디어 쿼리 - 미디어 쿼리란? 다양한 모바일 기기가 늘어나면서 각 기기에 따른 화면 구성의 중요성이 커진지 꽤 오래되었다. 미디어 쿼리(Media Queries)는 바로 이러한 다양한 조건에 따라 CSS 스타일을 사용할 수 있도록 해주는 기능이다. 미디어 쿼리의 기본 구문은 다음과 같다. @media [only | not] 미디어 유형 [and 조건] * [and 조건] 미디어 쿼리는 적용할 미디어의 유형을 지정해야 하며, 적용 시 충족시키고자 하는 조건이 있다면 and 연산자와 함께 작성하면 된다. - 미디어 쿼리의 연산자 미디어 쿼리에서 사용가능한 연산자는 다음과 같은 것들이 있다. *and : 조건을 계속 추가할 수 있도록 함 *,(쉼표) : 동일한 스타일 유형을 사용할 미디어의 유형 및 조건이 있어 추가하려..
<자바스크립트 Javascript> 연산자 - 연산자 언어마다 꼭 포함하고 있는 개념인지라, 당연히 잘 알거라 생각하고 공부했는데 미처 몰랐던 부분이 적지 않았다. 자바스크립트만 가지고 있는 특징이 특히 개발을 해나갈 때 유용하면서도 핵심적일 것 같았다. 아래 그 내용을 정리한다. 1) 연산자의 정의 하나 이상의 표현식(값으로 평가할 수 있는 문)을 대상으로 연산을 수행하여 값을 만드는 것이다. 연산의 대상은 피연산자라 칭한다. 피연산자라는 용어 속에 이미 연산자와의 관계성이 내포되어있다. 따라서 피연산자는 연산자와의 관계성에서 갖는 그 필요성에 의해 값으로 평가되어야 한다는 속성을 갖는다. 2) 연산자의 종류 1. 산술연산자 - 이항 산술 연산자 : 2개의 피연산자를 연산하여 값을 만듦 ex. +, -, *, /(나눗셈), %(나머지) - 단항..

티스토리툴바