Gentleman'study 젠틀맨

웹 폰트(Web font) 웹 페이지에서 사용자 정의 글꼴을 사용하여 보다 다양하게 스타일을 적용하는 방법을 살펴보겠습니다. font-family 값 목록 HTML에 적용된 글꼴은 font-family속성을 사용하여 제어할 수 있습니다. font-family는 하나 이상의 값을 사용합니다. 웹 페이지를 표시할 때 브라우저는 사용할 수 있는 폰트를 찾을 때까지 폰트 모음 값 목록을 다음으로 이동합니다. 위 방법으로 사용해도 정상적으로 잘 작동하지만 폰트 선택이 제한적 입니다. 모든 환경에서 보장할 수 있는 폰트는 수소에 불가합니다. 그래서 등장한 것이 웹 폰트 입니다. 웹 폰트 CSS를 사용하면 웹사이트에 액세스할 때 웹사이트와 합께 폰트를 다운로드 하여 원하는 폰트를 지정할 수 있습니다. 1. CSS에 ..

GRID CSS 그리드 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 요소 간의 관계를 정의하는데 아주 탁월한 속성입니다. 플렉스는 한 방향 레이아웃 시스템이고 그리드는 두 방향(가로, 세로) 레이아웃 시스템이기 때문에 플렉스보다 더 복합적인 레이아웃을 표현할 수 있습니다. grid 기본 문법 구조 div .container가 부모 요소가 되고 하위 요소인 div. item은 자식 요소가 됩니다. grid 속성 grid-area grid item의 크기와 위치를 설정해 grid를 배치합니다. grid-auto-columns grid container의 크기가 설정되지 않은 열에 대한 기본 크기를 설정합니다. grid-auto-fl..

레이아웃 배치를 목적으로 만들어진 기능 컨테이너에 적용되는 속성과 아이템에 적용되는 속성이 있다 컨테이너에 적용되는 속성 display: flex 각 아이템(요소)들의 width값과 height값만큼 크기가 변경되고 가로 방향으로 정렬한다 { .container { display: flex; display: inline-flex; } } flex-direction 아이템들이 배치되는 축의 방향을 결정한다, 메인축(정렬된 아이템의 축 기준)의 방향을 가로, 세로로 할지 결정한다 { .container { flex-direction: row; // 아이템들의 방향이 행(가로)으로 정렬된다 flex-direction: column;// 방향을 열(세로)으로 정렬한다 flex-direction: row-reve..

닷닷닷닷 픽셀이란? 픽셀은 사각형의 점으로, 디지털 화상을 구성하는 기본적인 단위이다. 이 점 하나에 해당 색의 정보가 담겨져 있으며, 이는 곧 그림의 용량과 직결된다. 대표적인 포맷은 JPG, PNG, GIF이 있으며, 이를 비트맵 이미지라 한다. 요즈음 대표적인 픽셀은 크롬의 이스터 에그로, 공룡이다. 몰랐지만 엔딩이 있다고 한다 벡터 벡터 이미지는 수학적으로 계산된 경로로 구성된 무한 확대 가능한 디지털 그래픽이다 벡터는 기본적으로 필요에 의해 늘어나거나 구부러질 수 있다 벡터의 점은 좌표계(x,y)로 구성되기 때문에 비트맵의 픽셀과 달리 이미지의 크기 조절이나 변형 때문에 해상도가 깨지지 않는다 또한, 벡터에는 수학이 포함되어 있고, 디자이너는 어도비 일러스트레이터와 같은 프로그램 도구를 사용해 ..

예시 마우스오버를 하면, 서서히 밑줄이 생긴다 구성요소 footer영역으로, h3에는 레이아웃 영역이란 제목이, li목록에는 레이아웃 유형01, 02, 03 등등이 있다. li목록에는 a태그를 주어서, 클릭할 수 있게 만들었다. 방법 li > a에 포지션 relative를 주고, transition을 0.3으로 자연스럽게 한다. 마우스 오버와 마우스 오버하지 않을 때의 차이를 주기 위하여 미세하게 컬러를 바꿔주었다 .footer_menu >div li a { color: rgb(57,57,57); transition: all 0.3s; } .footer_menu >div li a:hover { color: #000; } 가상요소를 주기 위하여 li > a 에 position:relative를 주고, 가상..

개요 가끔, 제목이 길거나 적당히 띄어주지 않으면 내 레이아웃을 넘어서 저 어딘가로 글이 나아가고 있다 그 때 주는 것이 한줄 효과 즉, 한 줄로 나타내는 것인데 이것을 분해해보겠다 분해 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } overflow: hidden; 글이 넘치는 걸 숨겨준다! 정해진 크기에 맞게 딱 없었던 것 처럼 잘라 쓰기 편하다 white-space: nowrap; white-space란, 공백 문자를 처리하는 방법이다. nowrap을 하게 되면 줄글이 밑으로 가지 않게 한다 text-overflow: ellipsis; 출처 : https://aboooks.tistory.com/382 text-overflow는..

마진(Margin) margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다. 이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않습니다. CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있습니다. 마진(margin) 속성 CSS에서는 HTML 요소의 마진 영역을 설정하기 위해 다음과 같은 속성을 제공합니다. 1. margin-top 2. margin-right 3. margin-bottom 4. margin-left margin 속성값을 음수로 설정하여 해당 요소를 다른 요소의 위에 겹치게 할 수도 있습니다. margin 속성값을 inherit로 설정하면, 부모(parent) 요소의 m..

패딩(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..

색상 이름으로 표현 색상 이름으로 표현이 가능하다. W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같다. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow RGB 색상값으로 표현 모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현한다. 따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다. 16진수 색상값으로 표현 16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다. 따라서 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가진다.

절대길이 단위 단위 이름 다음과 동일함 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/16th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 이러한 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. 일반적으로 화면에 사용하는 값은 px입니다. 상대 길이 단위 단위 관련 사항 em 요소의 글꼴 크기 ex 요소 글꼴의 x-heigth ch 요소 글꼴의 glyph"0"의 사전 길이(너비) rem 루트 요소의 글꼴 크기 lh 요소의 라인 높이 vw viewp..

벤더 프리픽스란? 벤더 프리픽스(vendor prefix)란 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉, 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. -ms- -webkit- -moz- -webkit- -o- 크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용합니다.

float 속성 float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. clear 속성 clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 줍니다. 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다. 따라서, float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 합니다. overflow 속성 float 속성이 적용된 HTML 요소가..

IR효과 IR (Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말합니다. 웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 합니다. 단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적입니다. pm(Phark Method) 의미있는 이미지의 대체 텍스트를 제공하는 경우 사용합니다. .ir_pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } wa 의미있는 이미지의 대체 텍스트로 이미지가 없어도 텍스트를 보여주고자 할 때 사용합니다. .ir_wa { display: block; overfl..

CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성되어 집니다. 그리고 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있습니다. 애니메이션 장점 CSS 애니메이션은 기존에 사용되던 자바스크립트를 이용한 애니메이션보다 다음 세 가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대..

CSS 텍스트 CSS에서 사용할 수 있는 대표적인 text 속성은 다음과 같습니다. color direction letter-spacing word-spacing text-indent text-align text-decoration text-transform line-height text-shadow color 속성 color 속성은 텍스트의 색상을 설정합니다. 웹 페이지에서 텍스트의 기본 색상은 검정색입니다. 태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용됩니다. 하지만 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 태그에 명시된 속성값보다 우선 적용됩니다. direction 속성 direction 속성은 텍스트가 써지는 방향을 설정합니다. 웹 페이지에서..

CSS 문법 CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다. CSS 내의 문법은 다음과 같이 정의됩니다. 선택자는 CSS를 적용하고자 하는 HTML 요소(element)를 가리킵니다. 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다. 각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다. 이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다. CSS 선택자 스타일을 적용할 HTML 요소를 가리키는 데 사용하는 선택자는 다음과 같습니다. HTML 요소 선택자 아이디(id) 선택자 클래스(class) 선택..