본문 바로가기

전체 글

 (104)
<자바스크립트 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. +, -, *, /(나눗셈), %(나머지) - 단항..

티스토리툴바