# 개발공부

452개의 포스트
post-thumbnail

[04/10/2022] Today, I Learned

자바스크립트 ES5에서 나온 strict mode 를 공부 했다. 자바스크립트 특성 상 문법의 오류가 있어도 정상 실행되는 것을 단점으로 삼아 오류를 발생시키고 알려주는 역할이라고 생각하면 된다. 잠재적인 오류를 발생시키기 어려운 개발 환경 을 만들고 그 환경에서 개발

약 4시간 전
·
0개의 댓글
·
post-thumbnail

Strict mode : 보다 안정적인 자바스크립트 개발 환경을 위한 Strict mode

foo 함수 내에서 선언하지 않은 변수 x 에 값 10을 할당하였다. 이때 변수 x 를 찾아야 x 에 값을 할당할 수 있기 때문에 자바스크립트 엔진은 변수 x가 어디에서 선언되었는지 스코프 체인 을 통해 검색하기 시작한다.자바스크립트 엔진은 foo 함수의 스코프에서 변

약 9시간 전
·
0개의 댓글
·
post-thumbnail

Typography : image 요소 아래에 패딩 된 여분의 공간 제거하기

컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다.image 요소는 inline 요소이다. 다시 말해 image 요소는 텍스트 로 취급된다.위 그림과 같이 image 요소에도 디센더 가 적용되어 여분의 공간이 발생한다. 첫

약 9시간 전
·
0개의 댓글
·
post-thumbnail

Horizontal & Vertical Centering : 수평/수직 중앙 정렬

정렬 대상 요소의 부모 요소에 text-align: center;를 지정한다.정렬 대상 요소에 너비를 명시적으로 지정 하고 margin-right 와 margin-left 프로퍼티에 auto 를 지정한다. 정렬 대상 요소에 너비를 명시적으로 지정하지 않으면 너비는 fu

약 9시간 전
·
0개의 댓글
·
post-thumbnail

Flexbox Layout : 플렉스 박스 레이아웃

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다

약 9시간 전
·
0개의 댓글
·
post-thumbnail

Responsive Web Design : 반응형 레이아웃

사용자가 어떤 디바이스 로 웹사이트를 방문할 지 알 수 없다. layout 은 방문자의 화면 해상도를 고려 하여야 한다. 가로폭이 너무 큰 layout을 작성하면 작은 해상도 모니터로 방문하였을 때 가로 스크롤이 생겨서 사용이 불편할 수도 있다. 또한 스마트폰이나 태블

약 9시간 전
·
0개의 댓글
·
post-thumbnail

Layout : 레이아웃

웹 페이지는 style 과 layout 을 담당하는 CSS를 사용하여 layout을 구성하는 것이 바람직하다. 블록 레벨 요소들을 원하는 위치에 배열 레이아웃https://poiemaweb.com/img/layout-samples.png화면의 크기에 따라 적절

약 11시간 전
·
0개의 댓글
·
post-thumbnail

Web Font : 웹디자인 타이포그래피

웹디자인 관점에서 폰트의 선택 은 중요한 의미를 갖는다. 대부분의 정보는 텍스트와 이미지로 전달되고 아직은 텍스트가 주 를 이루기 때문에 더욱 그러하다. 이전에는 웹에서 사용할 수 있는 아름다운 한글 폰트가 적어 포토샵 등으로 로컬 폰트를 사용하여 텍스트를 이미지로 만

약 11시간 전
·
0개의 댓글
·
post-thumbnail

Transform : 트랜스폼

트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다.애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다.트랜스폼(Transf

약 11시간 전
·
0개의 댓글
·
post-thumbnail

Animation : 애니메이션

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다.애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다. tr

약 11시간 전
·
0개의 댓글
·
post-thumbnail

Transition : 트랜지션

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration) 에 걸쳐 일어나도록 하는 것이다.div 요소는 기본 상태에서 hover 상태로 변화할 때, CSS 프로퍼티 border-radius와 backgroun

약 11시간 전
·
0개의 댓글
·
post-thumbnail

Gradient : 그라디언트

그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다.CSS3가 이 기능을 제공하기 이전에는 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작하여 사용하였다. 그러나 이러한 방법은 이미지 다운로드 에

약 11시간 전
·
0개의 댓글
·
post-thumbnail

Shadow : 그림자

텍스트에 그림자 효과를 부여하는 프로퍼티이다.요소에 그림자 효과를 부여하는 프로퍼티이다.

약 11시간 전
·
0개의 댓글
·
post-thumbnail

Vendor Prefix : 벤더 프리픽스

CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용하여야 한다. Can I use?에서 제공하는 브라우저별 CSS 지원 정보를 보면 텍스트와 요소의 선택을 방지하는 user

약 11시간 전
·
0개의 댓글
·
post-thumbnail

Inherit & Cascading : 스타일의 상속과 적용 우선 순위

상속 이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는

약 12시간 전
·
0개의 댓글
·
post-thumbnail

Float : 요소 정렬

float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가

약 12시간 전
·
0개의 댓글
·
post-thumbnail

Position : 요소의 위치 정의

position 프로퍼티는 요소의 위치를 정의한다. top bottom left right 프로퍼티와 함께 사용하여 위치를 지정한다.static 은 position 프로퍼티의 기본값으로 position 프로퍼티를 지정하지 않았을 때와 같다.기본적인 요소의 배치 순서에

약 13시간 전
·
0개의 댓글
·
post-thumbnail

Font & Text : 폰트와 텍스트

텍스트의 크기를 정의한다.폰트를 지정한다. 컴퓨터에 해당 폰트가 설치되어 있지 않으면 적용되지 않는다.폰트는 여러 개를 동시에 지정이 가능하다. 첫번째 지정한 폰트가 클라이언트 컴퓨터에 설치되어 있지 않은 경우, 다음에 지정된 폰트를 적용한다.마지막에 지정하는 폰트는

약 13시간 전
·
0개의 댓글
·
post-thumbnail

Background : 백그라운드

1. background-image 프로퍼티 >요소에 배경 이미지를 지정한다. #2. background-repeat 프로퍼티 >배경 이미지의 반복을 지정한다. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다. 설정된 이미지의 크기가 화면보다 작으면

약 13시간 전
·
0개의 댓글
·
post-thumbnail

Display : display / visibility / opacity 프로퍼티

display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다.모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. HTML 요소는 block 또는 inline 특성을 갖는다. display 프로퍼

약 13시간 전
·
0개의 댓글
·