Gentleman'study 젠틀맨

패딩(padding) padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다. 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다. 패딩(padding) 속성 CSS에서는 HTML 요소의 패딩 영역을 설정하기 위해 다음과 같은 속성을 제공합니다. 1. padding-top 2. padding-right 3. padding-bottom 4. padding-left 패딩 축약 표현(padding shorthand) 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다. 예제 4개의 padding 속성값을 가질 때는 t..

HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다. 엔티티(entity)의 이름은 대소문자를 구분합니다. HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같습니다. 엔티티 문자엔티티 이름16진수 엔티티 숫자설명 줄 바꿈 없는 공백 > > 보다 큰 & & & AND 기호 " " " 큰따옴표 ' ' ' 작은따옴표 발음 구별 부호(diacritical marks) 발음을 나타내..

const sliderWrap = document.querySelector(".slider__wrap");// 이미지 전체 박스 const sliderImg = document.querySelector(".slider__img");// 이미지 박스 const slider = document.querySelectorAll(".slider");// 슬라이더 할 이미지들 let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯수 setInterval(() => {// 정해진 시간뒤에 반복해서 실행한다 let nextIndex = (currentIndex + 1) % 5;// 5로 나눈 나머지값(0~4)으로 표현 slider[cu..

JavaScript / 반복문 / while, do - while 자바스크립트 반복문에는 while, do - while, for 세가지가 있습니다. while 문 기본 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 계속 0이므로 무한 반복을 하게 됩니다. do - while과 for도 마찬가지입니다. while을 이용하여 1부터 10까지 출력하는 예제입니다. do while 문 기본 문법 var i = 0; do { // do something i++; ..

const cssProperty = [ {num: 5, name: "all", desc: "all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {num: 2, name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {num: 3, name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {num: 9, name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {num: 1, name: "animation-duration", de..

그리드 시스템이란? 그리드 시스템(Grid System)에서 ‘Grid’는 격자나 바둑판 모양의 눈금을 뜻하며 일반적으로는 수직과 수평으로 면이 분할된 것을 의미합니다. 1970년대 중반부터 본격적으로 사용된 그리드 시스템은 디자인의 레이아웃에 규칙을 부여하는 수단입니다. 편집디자인(인쇄물)에서 시작해 현재 웹 개발 분야에도 적용하여 웹 페이지를 제작하는 기초 단계에서 그리드 시스템을 사용하면 제작을 쉽고 빠르게 진행할 수 있습니다. 그리드 시스템의 장점 디자인 레이아웃은 모든 측정값이 동일한 규칙을 따르면 자동으로보다 일관된 UI를 얻게 됩니다. 그리드 시스템은 균일한 요소와 간격을 사용하여 플랫폼, 환경 및 화면 크기에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 도와줍니다. 또한 협업의 목적으로..