본문 바로가기

TIL

 (92)
<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. +, -, *, /(나눗셈), %(나머지) - 단항..
<자바스크립트 Javascript> 데이터 타입 자바스크립트의 데이터 타입은 크게 두 가지로 나뉜다. 원시 타입과 객체 타입이 그것이다. 1. 원시 타입 1) 숫자 타입 : 정수, 실수의 구분이 없음(C, 자바 언어와의 차이점). 대신 모두 실수로 처리함. *NaN 산술 연산 불가(not-a-number) 2) 문자열 타입('', "", `` 기호로 감쌈) 3) 불리언(boolean) 타입 : 참과 거짓을 나타냄 4) undefined 타입 : var 키워드에 자동으로 할당됨 5) null 타입 : 값이 없음을 의도적으로 명시할 때 사용(대소문자 구별 필요) 6) 심벌(symbol) 타입 : ES6에서 새로 추가된 타입. 변경 불가능하다는 특징을 가짐 2. 객체 타입 원시 타입의 6가지 항목 이외의 값은 모두 객체 타입이다. 3. 정적 타입과 동적 타..
<자바스크립트 Javascript> 자주 사용되는 용어 알기 자바스크립트에서 자주 사용되는 용어와 그 의미를 정리한 것이다. 내용은 아래와 같다. 1) 값 식(표현식)이 평가되어 생성된 결과이다. 평가는 식을 해석해서 값을 생성하거나 참조한 것이다. ex. 10 + 20 -> 평가되어 30이라는 값 생성 2) 리터럴 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 혹은 약속된 기호('', "", ., [], {}, // 등)를 사용해 값을 생성하는 표기법이다. 자바스크립트는 리터럴을 평가해 값을 생성한다. 3) 표현식 값으로 평가될 수 있는 문(statement)이다. 표현식이 평가되면 새로운 값을 생성하거나 기존의 값을 참조한다. 리터럴도 값으로 평가되기 때문에 표현식이 된다. ex. 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출..
<CSS> 페이지 전환 효과 - CSS 페이지 전환 효과 페이지 이동 시 슬라이딩으로 다음 화면이 나타나는 효과를 구현하였다. 기능은 CSS의 animation을 이용하여 transform 속성 값에 슬라이딩 효과처럼 보이도록 코드를 작성하였다. 코드는 아래와 같다. 1) HTML 먼저 인덱스 페이지(첫 페이지)의 코드를 아래와 같이 작성한다. Welcome Home About CSS는 외부 파일로 연결하였고, a 링크의 About 폰트가 있는 버튼을 클릭 시(버튼 태그는 아니고, 버튼처럼 모양을 만든 a 링크 태그이다) 다음 페이지로 이동하도록 작성하였다. 다음 페이지인 About 페이지의 HTML 코드도 똑같이 작성한다. id명과 버튼 클릭 시 다시 첫 페이지인 인덱스 페이지로 이동되는 것 외에는 모두 동일하다. Welcome ..
<자바스크립트 JavaScript> 변수 1) 컴퓨터의 작동 방식 역할 - CPU : 연산 / 메모리 : 데이터 기억 *메모리 : 데이터를 저장할 수 있는 메모리 셀(cell)의 집합체. 메모리 셀 하나의 크기는 1바이트(8비트). 컴퓨터는 메모리 셀의 크기인 1바이트 단위로 데이터를 저장, 읽음. ex. 10 + 20 의 계산 - 코드를 계산(평가)하고, 10,20,+라는 기호(리터럴과 연산자)의 의미를 알고, 10+20이라는 식(표현식)의 의미를 해석(파싱)한다. 2) 메모리 주소 메모리 셀의 각 셀은 고유의 메모리 주소를 갖는다. 메모리 크기만큼 정수로 표현되며, 메모리에 저장되는 데이터는 모두 2진수로 저장된다. 3) 변수 메모리 주소를 통해 직접 값에 접근하는 것은 치명적 오류를 발생시킬 가능성이 있어 매우 위험하다. 따라서 자바스크립..
<자바스크립트 JavaScript> 배경과 역사 - 자바스크립트의 탄생배경과 역사 코딩 공부하는데 왠 탄생배경과 역사냐, 할수도 있겠다. 그런데 자바 웹 프로그래밍을 공부할 때에 책을 통해 Servlet과 JSP의 탄생배경을 배우게 되었는데, 그러고나니 덕분에 두 기능의 차이점이 보이고 웹 프로그래밍에서 어떤 역할을 하는지 이해하게 되면서 드디어 전체적인 흐름을 이해하여 코드를 작성하는 것이 가능해지더라. 그래서 자바스크립트를 사용하고 배워가면서 동시에 이런 역사적인 흐름도 알고 있는 것이 좋겠다, 라고 생각하여 기본서를 천천히 읽어보고 있다. 다만, 탄생한 시기라던가 만든 회사명까지 일일이 기억해야 하고 그런 것은 물론 아니다. 어디까지나 더 깊은 이해를 통한 개발을 위해서다. 따라서 위 주제에 대해 간단히 핵심만 짚고 가자면 다음과 같다. - 탄생..
<CSS> Flexbox 레이아웃 (2) + Flexbox Froggy 풀이 2. 자식 요소 flex item 자식 요소인 flex item를 정렬할 수 있는 속성에는 여러가지가 있는데, 다음과 같다. *유의점 : CSS 기존 속성 중 float, clear, vertical-align 속성은 flex item에 영향을 주지 않는다. 1) order flex container에 추가된 순서를 기준으로 각 flex item에 번호를 부여하여 순서를 바꿀 수 있다. ex. order:정수값; 2) flex-grow 각 flex item들에 대해 설정한 값으로 너비를 준다. 화면이 늘어나면 같이 늘어난다. *기본값은 0 ex. flex-grow:양의 정수값; 3) flex-shrink 각 flex item들에 대해 설정한 값으로 축소된다. 화면이 줄어들면 설정한 값만큼 축소된다(숫자가..

티스토리툴바