float 프로퍼티가 선언된 두개의 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제이전에는 table을 이용해 레이아웃을 만들기도 했으나 html과 css의 본연의 취지와도 맞지 않을 뿐더러 반응형 웹 페이지 작성이 곤란하며 코드의 양 또한 많아져 현재는 거의 사용하지 않는다. 모던한 웹 페이지는 style과 layout을 담당하는 CSS를 사용하여 layout을 구성하는 것이 바람직하다. layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다. 모바일 사용자가 데스크탑 사용자보다 많은 상황을 감안하여 화면의 크기에 따라 적절히 화면 구성을 변화시키는 반응형 웹 디자인(Responsive Web Design) 또한 모던 웹 사이트의 필수 사항이 되었다. CSS를..

HTML 삽입 미리보기할 수 없는 소스 변수 string(문자열)은 ' 혹은 " 혹은 `(backtick / 숫자1 좌측)로 감싸주기 ex) name = "Sander"; number(숫자) 표현은 ex) age = 29; 예약어는 사용할 수 없다. (class, let 등...) ex) let let = 99; 변수의 중복 사용을 방지하기 위해 변수를 선언할 땐, 변하지 않는 값(상수)는 const, 변할 수 있는 값은 let 으로 선언. const : 가급적 상수는 변수 이름을 대문자로 표기 ex) const MAX_SIZE = 100; / const PI = 3.14; / const BIRTH_DAY = '2020-01-01'; let : let 없이 작성 시엔 가장 최근에 쓴 것으로 적용됨. ex..

웹 폰트는 사용자가 웹페이지에 요청한 순간 CSS에 기술된 필요 폰토가 서버에서 클라이언트로 전송된다. 좀 더 구체적으로 말하면 매번 다운로드 되는 것은 아니고 클라이언트에 해당 폰트가 존재하지 않을 경우 전송된다. 1. CDN(Content Delibery Network) 링크 방식 웹폰트를 사용하는 방법 중 가장 간단한 방법은 CDN 링크를 사용하는 것이다. 다음은 구글에서 제공하는 웹폰트를 사용하는 방법이다. Google Font 에서 사용하고자 하는 웹폰트를 선택한다. 아래 구문을 CSS 파일에 추가한다. @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); * { font-family: 'Nanum Gothic', sans-..

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes)들로 이루어진다. transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다. :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적인 액션에 의해 발동된다. 즉 transition 프로퍼티는 단순히 요소의 프로퍼티 변화..

트랜지션은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 예를 들어, div 요소는 기본 상태에서 hover 상태 시 CSS 프로퍼티 border-radius와 background 프로퍼티의 값이 변화하게 설정해 놓았을 때, 상태 변화에 따라 CSS 프로퍼티가 변경되면 그에 따른 표시의 변화(transition)는 지체없이 즉시 발생한다. 트랜지션은 상태 변화에 동반하여 변경되는 CSS 프로퍼티값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티값의 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신 그 프로퍼티값의 변화가 일정시간(duration)에 걸쳐 일어나도록 하는 것이다. transition은..

텍스트나 요소에 그림자 효과를 부여하기 위한 프로퍼티를 선언한다. 1. text-shadow 텍스트에 그림자 효과를 부여하는 프로퍼티이다. 선택자 { text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; } - Horizontal-offset (단위: px) : 그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다 (필수값) - Vertical-offset (단위: px) : 그림자를 텍스트의 아래로 지정값만큼 이동시킨다 (필수값) - Blur-radius (단위: px) : 그림자의 흐림정도를 지정한다 (생략 가능) - Shadow-color (단위: color) : 그림자의 색상을 지정한다 (생략 가능) 2. box-shadow..