본문 바로가기

전체 글198

JS 공부는 다다익선 - 3. 변수 1. 원시 타입 (primitive data type) 원시 타입의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 이다. 1.1 number 64비트 부동소수점 형(double-precision 64-bit floating-point format : -(2^53^ -1) 와 2^53^ -1 사이의 숫자값) 을 따른다. 정수만을 위한 타입이 없고 모든 수를 실수를 처리한다. 정수로 표시된다해도 사실은 실수다. ※ 프로그래밍 언어에서 실수는 일반적으로 소수를 가리킨다. 2진수, 8진수, 16진수 리터럴은 메모리에 동일한 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다. 자바스크립트는 2진수, 8진수, 16진수 데이터 타입을 제공하지 않기 때문에 이들.. 2023. 9. 20.
JS 공부는 다다익선 - 2. 브라우저 동작 원리 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다. 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다. 제어 권한을 넘겨 .. 2023. 9. 20.
JS 공부는 다다익선 - 1. 자바스크립트 이해 1. 자바스크립트의 탄생 1995년 당시 넷스케이프 커뮤니케이션즈가 정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어를 만들기 위해 브렌던 아이크(Brendan Eich)가 자바스크립트를 개발했다. 2. 자바스크립트의 파편화와 표준화 1996년 8월, 마이크로소프트는 자바스크립트의 파생 버전인 "JScript"를 Internet Explorer 3.0에 탑재하였다. 그런데 문제는 JScript와 자바스크립트가 표준화되지 못하고 적당히 호환되었다는 것이다. 이후 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작하며 브라우저에 따라 웹 페이지가 정상 동작하지 않는 크로스 브라우징 이슈로 인해 모든 브라우저에서 동작하는 웹 페이지를 개발에 어려움이 생겼다. 이에 자바스크립트의 파편화를.. 2023. 9. 19.
CSS 이론 채워 넣기 - 10. flex box 1. flex-box Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다. 2. Flexbox container 속성 2.1 flex-direction flex 컨테이너안의 flex item 들의 배치 방향을 설정한다. 기본값은 row 이다. 속성 설명 flex-direction: row; 좌에서 우로(ltr) 수평 배치된다. flex-direction 속성의 기본값이다. flex-direction: row-reverse; 우에서 좌로(rtl) 수평 배치된다. fl.. 2023. 9. 19.
CSS 이론 채워 넣기 - 9. 반응형 웹 디자인(Responsive Web Design) 1. 반응형 웹 디자인이란? 반응형 웹디자인(Responsive Web Design) 은 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다. 2. viewport meta tag viewport meta tag는 브라우저의 화면 설정과 관련된 정보를 제공한다. meta tag에서는 px단위를 사용하며 단위 표현은 생략한다. 복수개의 프로퍼티를 사용할 때는 쉼표(,)로 구분한다. 일반적으로 viewport meta tag는 모바일 디바이스에서만 적용된다. 프로퍼티 Description 사용예 width viewport 너비(px). 기본값: 980px width=240 height viewport 높이(px) height=800 initial-scale view.. 2023. 9. 19.
CSS 이론 채워 넣기 - 8. 트랜스폼(Transform) 1. 트랜스폼이란? 트랜스폼(Transform) 은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다. 2. 2D 트랜스폼 (2D Transform) transform function 설명 단위 translate(x,y) 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다. px, %, em 등 translateX(n) 요소의 위치를 X축으로 x만큼 이동시킨다. px, %, em.. 2023. 9. 18.
CSS 이론 채워 넣기 - 7. 애니메이션 1. 애니메이션이란? 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다. transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다. :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다. 즉 transition 프로퍼티는 단순히.. 2023. 9. 18.
CSS 이론 채워 넣기 - 6. 트랜지션 (transition) 1. 트랜지션 (transition) 이란? 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 상태 변화에 따라 CSS 프로퍼티가 변경되면 프로퍼티 변경에 따른 표시의 변화(transition)는 지체없이 즉시 발생한다. ※ 모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다. div 셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)와 마우스가 내려올 때(hover off) 모두 트랜지션이 발동한다. 하지만 div:hover 셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)는 트랜지션이 발동하지만 마우스가 내려올 때(hover off)는 트랜지션이 발동하지 .. 2023. 9. 18.
CSS 이론 채워 넣기 - 5. CSS 속성의 상속과 적용 우선 순위 상속 상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. ※ 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다. 상속되지 않는 경우(상속받지 않는 요소 또는 상속되지 않는 프로퍼티), inherit 키워드를 사용하여 명시적으로 상속받게 할 수 있다. property Inherit width/height no margin no padding no border no box-sizing no display no visibility yes opacity yes background no font yes color yes line-height yes text-align .. 2023. 9. 15.
CSS 이론 채워 넣기 - 4. text 관련 CSS 속성 1. font Shorthand font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory) font: italic small-caps bolder 16px/1.2 monospace; 2. letter-spacing 글자 사이의 간격을 지정한다. 3. text-align justify ( 양쪽 정렬 ) 양쪽 모두를 가지런하게 맞추기 위해서 띄어쓰기 간격이 조금씩 달라진다. 특히 영어의 경우 단어가 길면 간격이 많이 이상할 수 있는데, word-break 속성으로 조정할 수 있다. 4. white-space white s.. 2023. 9. 15.
CSS 이론 채워 넣기 - 3. background 관련 속성 1. background-image 요소에 배경 이미지를 지정한다. body { background-image: url("http://poiemaweb.com/img/bg/dot.png"); } 2. background-repeat 배경 이미지의 반복을 지정한다. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다. 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우게 된다. 이것은 background-repeat 프로퍼티의 기본값이 repeat 이기 때문이다. 속성 설명 repeat-x x축으로만 배경 이미지를 반복한다 repeat-y y축으로만 배경 이미지를 반복한다. no-repeat 반복하지않는다. background-image에 복수개의 이미지를 설정 b.. 2023. 9. 14.
CSS 이론 채워 넣기 - 2. 다양한 CSS 단위 1. 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px은 절대값이고 em, %는 상대값이다. 1.1 px px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미하고 픽셀은 디바이스 해상도(resolution) 에 따라 상대적인 크기를 갖는다. 이와 같이 디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다. 따라서 대부분의 브라우저는 1px을 1/96 인치의 절대단위로 인식한다. 1.2 % % 는 백분률 단위의 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. 1.3 em em은 배수(倍數) 단위로 상대 단위이다. 요소에 지정된 사.. 2023. 9. 14.

티스토리툴바