본문 바로가기

Language

 (101)
<CSS 기초> 10. Typography 이번 장에서 배울 내용은 텍스트를 디자인 하는 것이다. 속성들을 알아보기 전에 먼저 텍스트 디자인에서의 요소들을 알아보자. 위에서 왼쪽부터 글자의 크기를 나타내는 폰트사이즈, 글자의 자간을 나타내는 레터스페이스, 글자의 베이스라인, 줄간격이다. 1. Font-size 가장 먼저 알아볼 속성은 역시 글자의 크기이다. 폰트사이즈는 다음과 같이 사용한다. font-size : 12px ; 위는 폰트 사이즈를 12px로 하라는 의미이다. px는 절대단위인데 em과 rem 과 같은 상대단위도 사용할 수 있다. em 은 equal to capital M이라는 의미인데, 부모나 자신에게 주어진 절대단위의 사이즈를 1em 으로 받고 사용한다. rem은 root em 으로써 html을 기준으로 한다. html에 폰트사이..
<자바스크립트 기초> 07. 배열 * 배열이란 - 배열(Array)은 한 변수에 여러개의 데이터를 담을 수 있는 형식이다. * 배열의 생성 - 배열은 대괄호를 이용하여 만든다. var students = ['harry', 'iu', 'suzy']; alert(students[0]); alert(students[1]); alert(students[2]); // harry // iu // suzy - 배열에 각각의 원소(Element)를 담으면 이는 각각 식별자를 가지게 된다. 프로그래밍에서 첫번째는 0을 의미한다. 이 때 이러한 식별자를 색인(Index)라 한다. - 배열의 각 원소를 불러오기 위해 변수뒤에 인덱스를 대괄호에 넣어 불러올 수 있다. * 배열과 반복문 - 위의 배열에서 하나의 원소가 추가되거나 여러 개의 원소가 추가되었을 때..
<CSS 기초> 09. Media Query 이번 장에서 배울 내용은 미디어 쿼리이다. 이는 반응형 웹에서 필수적인 속성이다. HTML에서 view port를 메타데이터로 선언해야만 사용 가능하다. @media screen and (min-width : 768px) { } 위와 같은 방식으로 사용 가능하다. 위는 768이상에서의 스타일을 작성하겠다는 의미이다. 참고로 미디어쿼리를 쓰며 자주 width를 100%를 주는 경우가 많아지는데 이 때 height를 100vh 로 선언하면 보이는 viewport 의 높이만큼 크기를 선언 가능하다. 미디어쿼리는 작은 사이즈(모바일)부터 대응하는게 정석이다. 사이즈별로 수정하고 싶은 부분에 대해서만 미디어쿼리를 선언하고 작성하면 되는데, 위에서 bottom : 0; 에서 선언한 것을 특정 사이즈에서 top : ..
<자바스크립트 기초> 06. 함수 * 함수 - 함수(Function)는 자주 사용하는 로직을 정리하여 필요할 때 마다 재사용하도록 돕는 것이다. - 이는 반복문과 마찬가지로 코드의 재사용성을 매우 높여줄 뿐만아니라 코드 곳곳에서 사용하더라도 함수부분만 보수하면 다른 부분까지 영향을 미치므로 유지보수도 용이하다. - 함수를 사용함으로써 코드가 간단해지고 이는 가독성을 높여준다. - 반복문은 한 곳에서 여러작업을 반복할때 사용한다면 함수는 여러곳에서 비슷한 작업을 반복할 때 사용한다. * 함수의 사용 function sumtwo(a, b){ return a + b; } alert(sumtwo(20, 80)); // 100 - 함수의 정의 : 함수는 먼저 fuction 을 써서 정의를 해야한다. 그 뒤에는 임의의 함수명을 사용한다. - 함수의..
<CSS 기초> 08. Flex Box 이번 장에서 알아볼 내용은 드디어 Flex box 이다. 지금까지 배웠던 박스 타입들은 위치를 잡기가 매우 힘들고 번거로웠지만 Flex box가 있으면 매우 편해진다. Flex box는 크게 4단계의 step을 생각하자. 첫 번째는 선언이다. 플렉스박스를 쓰겠다고 선언하는 것이다. 두 번째는 가로로 정렬할 것인지 세로로 정렬할 것인지를 결정하는 것이다. 세 번째는 반드시 한줄로 나타낼 것인지 사이즈가 모자라면 다음 라인으로 보낼 것인지 결정하는 것이다. 반드시 한줄로 나타낸다면 사이즈가 자동으로 조절될 것 이다. 마지막 네 번째는 예쁘게 사용하는 것이다. 이제 단계별로 하나씩 알아보자. 1. 선언 - 플렉스 박스를 사용하려면 부모에게 display값을 flex 또는 inline-flex로 주면된다. di..
<CSS 기초> 07. Position Position은 요소의 위치를 잡기위해 사용하는 속성이다. 타입은 총 5가지가 있다. static, relative, absoulute, fixed, sticky 이다. 이 중 sticky는 지원하는 브라우저가 적으므로 나머지 4개를 알아보자. 타입에 따라 기준점을 무엇으로 하느냐가 달라진다. 타입을 준 후 속성값으로 top right bottom left를 줄 수 있는데, 4가지를 모두 사용하기보다 가로 중 하나와 세로 중 하나를 쓰는 게 효율적이다. 1. Static static은 별도의 지정없이 모든 요소의 기본 상태이다. 2. Relative relative의 기준점은 원래 있던 자리이다. .class01 { position: relative; top: 20px; right: 5px; } 위와 ..
<자바스크립트 기초> 05. 반복문 * 반복문이란 - 반복문은 비슷한 작업을 반복해야할 때 프로그래밍을 통해 컴퓨터에게 반복적 작업을 지시하는 구문이다. 이러한 의미로 반복문은 주로 loop라고 불린다. - 반복문은 while문과 for문으로 나뉜다. * while - while문은 if문과 같이 불린값이 오는 조건을 적고 이 조건이 true일때 반복이되는 구문이다. - 이 때 무한루프가 생성될 수 있으므로 주의해야한다. var i = 0 ; while(i < 5){ document.write('Welcome to My Blog' + i + ''); i ++ } - 위는 i를 통해 무한루프가 생성되지 않도록 제어하였다. i++ 를 통해 i는 1씩 커지게되었고, i가 5보다 작아졌을 때 비로소 while문을 탈출한다. * for 문 - fo..
<자바스크립트 기초> 04. 조건문 * 조건문 - 조건문은 프로그래밍의 꽃으로써 조건이 만족할 때에만 실행시키도록 제어하는 구문이다. * Boolean - 조건문에 앞서 불린 형식이 필수이다. 이는 앞서 비교연산자에서 봤었던 true와 false를 의미한다. 조건문에서 조건이 바로 이 불린이다. * 문법 - 조건문은 if로 작성한다. if(1 > 0) { alert('large'); } // large - 위의 조건은 true 이므로 if문이 실행된다. 이 때 조건이 false라면 이는 실행되지 않는다. if(1==2){ alert('two'); } else { alert('not two'); } // not two - if문은 if else 구문으로 확장이 가능하다. else는 if에 작성한 조건이 false일 경우 실행되는 구문이다. ..
<자바스크립트 기초> 03. 변수와 비교 1. 변수 * 변수란 - 자바스크립트는 변수를 이용하여 좀 더 효율적인 연산이 가능하다. 변수는 어떤 숫자나 문자를 우리가 원하는 변수에 지정하겠다는 뜻이다. * 변수의 선언 - 변수를 사용하기위해 먼저 변수를 선언해야한다. var x = 1; alert(x + 9); // 10 - 변수는 위와 같이 var로 시작하고 원하는 변수를 지정한다. 이 때 var은 생략이 가능한 경우도 있으나 정확한 이해없이는 생략을 권하지 않는다. var x = "Harry", y="Blog" ; alert(x); alert(y); // Harry // Blog - 위와 같이 가장 앞에 var을 쓰고 여러 변수를 선언하는 것도 가능하다. 2. 비교 * 동등연산자와 일치연산자. - 동등연산자(Equal Operator) : 값..
<자바스크립트 기초> 02. 숫자와 문자 1. 숫자 * 분류 - 자바스크립트는 따옴표 없이 숫자만 쓰일 경우 숫자로 인식한다. 그러나 숫자에는 크게 두 종류가 있다. - 정수 : 정수는 소숫점이 없는 -1, 3, 13 과 같은 숫자들을 말한다. - 실수 : 실수는 소숫점이 있는 1.1, 2.7 과 같은 숫자들을 의미한다. * 연산 - 숫자는 우리가 익히 알고있는 연산자들로 바로 계산이 가능하다. alert(20+5); - 위를 실행하면 25가 출력된다. 참고로 곱하기는 *(Asterisk)를 사용한다. - 이 외에도 자바스크립트는 아래와 같은 다양한 연산들도 가능하게 한다. Math.pow(2,4); // 16, 2의 4제곱 Math.round(3.7); // 3, 3.7을 반올림 Math.ceil(1.2); // 2, 1.2를 올림 Math...

티스토리툴바