Web Club

CSS line-height

이 포스팅에서는 CSS 의 line-height에 대해 알아보도록 합니다. 행간(leading)이란? 오래 전 글자를 손으로 배열하여 활판 인쇄하던 때의 활자 인쇄물은 독립적으로 만들어진 활자 블럭을 가로로 이어 붙여서 만들어 냈습니다. 그리고 행간(leading)은 각 글줄들 사이에 적절한 공간을 주기 위해 조각블럭을 넣는 방법으로 추가되었습니다. 이러한 행간과 같은 표현을 CSS에서는 line-height 를 사용하여 글줄 사이의 수직 여백을 조정할 수 있습니다. line-height 사용 방법 브라우저들은 1.0 에서 1.2 의 값을 line-height 의 초기 기본값으로 사용하고, CSS 의 line-height 속성을 다음과 같이 지정할 수 있습니다. CSS p { line-height: 14..

StyleSheet/CSS 2019. 2. 8. 09:11

Sass 코딩 컨벤션

Sass Coding Convention Sass 작성을 위한 컨벤션에 대해 알아봅니다. Table of Contents 폴더 구조 [Folder structures] 파일 구조 [File structures] 인코딩 [Encoding] 중첩 [Nesting] 들여쓰기 및 선언 순서 [Style Rules] 띄워쓰기 [Spacing words] 주석 [Comments] 네이밍규칙 [Naming] 8.1. placeholder selector 8.2. mixin 8.3. 변수 믹스인 [Mixin] @extend [Extend] 10.1. %(place holder) 의 확장 10.2. % 선언시, 축약형 지양 제어구문 (@if, @each, @for 등) [Control Statements] 11.1@if..

StyleSheet/SASSㆍSCSS 2019. 1. 31. 07:23

브라우저의 역할과 스크립트의 로드 시점

브라우저는 어떻게 동작하는가? 사용자가 연결된 주소의 서버에 데이터 요청을 하게 되면 서버로부터 데이터를 다운로드 받은 것을 가지고 웹브라우저가 그것을 해석해서 사용자가 보는 UI 를 완성해 주게 됩니다. 그래서 웹은 네트워크가 상당히 중요합니다. 여기서 서버에서 다운로드 받은 HTML, CSS, JS를 브라우저가 해석할 때 원리를 알 필요가 있는데 이 내용에 대해 다뤄보도록 하겠습니다. 웹 브라우저 동작과정 간단히 알아보기 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있습니다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해집니다. 브라우저는 HTML..

Web Tech 2019. 1. 28. 11:49

#11 CSS Gradients, box-shadow

CSS3 의 그레디언트, 박스 그림자에 대한 속성에 대해 알아봅니다. CSS 그레디언트(Gradients) 그레디언트는 한 색에서 다른 색으로 연결되는 중간 단계를 그라데이션이라고 하며, 종류에는 선형(linear), 원형(radial) 그레디언트가 있습니다. 선형, 원형 그라디언트에 대해 학습해 보도록 합니다. 선형(Linear) 그레디언트 선형 그레디언트는 그레디언트 라인(gradient line)이라는, 각각의 점이 다른 컬러값을 갖는 하나의 축으로 정의할 수 있습니다. 그레디언트 라인은 그레디언트를 포함하는 box 형태의 영역 중심좌표와 각도로 정의됩니다. 그레디언트의 컬러값은 시작점(starting point), 종료점(ending point)과 이 두점 사이에 삽입 가능한 색상점(color s..

HTMLㆍCSS 기초 강좌/CSS 2019. 1. 25. 07:39

#10 3D 트랜스폼(Transforms)

CSS 변형(2D transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 즉, 변형으로써 이동을 시키거나 크기, 회전, 비틀림을 제어하는 경우에 사용했으며 어디까지나 이 트랜스폼은 X축, Y축 좌표만을 조정할 수 있는 2D 였습니다. 이 2D에서 더 나아가 3D에 관련된 CSS 속성을 알아보도록 하겠습니다. 3D transform을 위한 속성 3D 공간에서의 CSS 변환은 좀 더 복잡합니다. CSS 3D transform 은 평면에서의 여러 개 CSS 속성을 조합하고 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함하고 원근감, 관찰자의 위치을 부여해 3D 공간을 만들어 낼 수 있습니다. 그리 3D transform 은 크게 트랜스폼을 적용할 ..

HTMLㆍCSS 기초 강좌/CSS 2019. 1. 25. 07:38

#9 CSS 애니메이션(Animation), 키프레임(keyframes)

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

HTMLㆍCSS 기초 강좌/CSS 2019. 1. 25. 07:37

#8 Transition - 화면 이동을 위한 점진적 효과

transform(변환,변형) 효과도 재미있지만 CSS3의 transition 기능과 같이 결합하면 더 큰 효과, 생동감을 부여할 수 있습니다. transition 의 사전적 의미는 "전이, 이행"이라는 뜻을 가지고 있지만 "화면 이동"이라는 의미로 받아들이는 것이 이해하기 쉽습니다. 트랜지션 개요 화면 이동(transition)은 변형(transform)되는 중간의 상태를 의미한다고 할 수 있습니다. 즉, 어떠한 변형(transform)이 일어나는 동안의 상태를 화면 이동이라고 하고, 이에 대해서 시간을 지정해 줄 수 있습니다. 예를 들어서 마우스를 오버했을 때 어떤 변형을 일으키고 싶은데, 그 상태를 제어할 때 사용한다고 생각하면 됩니다. CSS 트랜지션과 CSS 애니메이션은 어떻게 다를까? CSS ..

HTMLㆍCSS 기초 강좌/CSS 2019. 1. 24. 10:16

#7 CSS 2D 트랜스폼(Transforms)

transform(변형)은 CSS3에 추가된 기능 중 하나로 2D 의 변형을 말합니다. 변형이라는 것은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미합니다. 일반적으로 변형(transform) 효과는 CSS transition(이동효과)와 함께 사용될 때, 또는 3D 기능들과 함께 사용될 때 진정한 효과가 나타납니다. 그렇지만 먼저 가장 기본적인 전환의 형태인 2D 전환에 대해서 이해해야 합니다. 이 챕터에서는 2D 변형(전환)에 대해 학습해 봅니다. CSS3 transform - 2D 변형(전환) transform 테크닉은 2D 환경의 X축, Y축에 대한 변형(전환)을 사용합니다. 이 변형 기술에는 다음과 같은 4가지가 있습니다. rotate(회전 효과) : rotateX(), ..

HTMLㆍCSS 기초 강좌/CSS 2019. 1. 24. 10:16

#6 모던 레이아웃 - 플렉스박스(Flexbox)

플렉스박스(Flexbox) 개요 앞서 학습했던 float, position 만으로도 어느 정도의 레이아웃 구현이 가능합니다. 하지만 데스크탑 시대를 벗어나 모바일 시대에 접어들면서 보다 유연한 형태의 레이아웃 매커니즘의 필요성이 커져버렸습니다. 그에 따른 차세대 모던 레이아웃에는 플렉스박스(Flexbox), 멀티 컬럼(Multi Columns), 그리드(Grid) 가 있으며, 이번 챕터에서는 Flexbox 레이아웃 모듈을 다뤄봅니다. CSS Flexible Box Layout Module 일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원적인 레이아웃 모델로 설계되었습니다. flexbox 를 1차..

HTMLㆍCSS 기초 강좌/CSS 2019. 1. 24. 10:15

#5 Floating, Positioning

뷰포트(Viewport)와 관련하여 레이아웃(배치)을 다루기 위한 float, clear 및 positon 속성 그리고 positon속성과 관련된 top, right, bottom, left, z-index 속성에 대해 알아보겠습니다. 레이아웃 디자인 - 플로팅 레이아웃(float) 대표적인 레이아웃 테크닉인 플로팅(Floating)과 포지셔닝(Positioning)을 알아보고, 모던 레이아웃인 플렉스박스(Flexbox)와 그리드(Grid) 레이아웃에 대해 알아보겠습니다. 먼저 플로팅 레이아웃에 대해 학습해 봅니다. 일반적인 레이아웃 흐름(Normal Layout Flow) See the Pen normal layout by jaeheekim (@jaehee) on CodePen. CSS 가 미반영된 화..

HTMLㆍCSS 기초 강좌/CSS 2019. 1. 24. 10:14

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch

CSS Unit (CSS 7가지 단위) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단할 수 있지만 새로운 문제에 봉착하게 되면 해결하기 어려울 수 있습니다. 웹은 항상 성장,변화하고 있고 새로운 해결방안 역시 계속 성장하고 있습니다. 그렇기 때문에 웹 디자이너와 프론트 엔드 개발자가 습득한 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다. 특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다. 이 글에서는 이전엔 알지 못했던 몇 가지의 CSS 방법에 대해 알아보고자 합니다. 몇몇 수치 단위들은 픽셀이나 em과 비슷하지만 다른 방법에 대해 살펴보도록 합니다. rem(root em) 여러분에게 조금 익숙할 수..

StyleSheet/CSS 2019. 1. 24. 10:13

디바이스별 픽셀 밀도 이해하기

Device Pixel Density 모바일을 포함한 반응형 웹 디자인과 밀접한 관련이 있는 장치 별 픽셀 밀도에 대해 알아보도록 하겠습니다. 오늘 날과 같은 발빠르게 다변화하고 있는 환경, 즉 수많은 디바이스를 접하는 시대에 디바이스마다 각각 픽셀을 어떻게 처리하고 있으며, 이에 대응하는 방법이 무엇인지를 알아야 합니다. 픽셀 밀도(Pixel Density) 픽셀 밀도란 공간(대부분 inch에서 사용)에 픽셀이 들어가는 물리적인 수치를 말합니다. (국내에서는 센치미터나 밀리미터를 사용하지만 해외에서는 인치를 사용하기 때문에 인치가 기준) 제록스에 의한 연구결과로 나온 첫 번째 맥킨토시 컴퓨터(애플2)는 인치당(inch) 72픽셀이었습니다. 첫 번째 맥킨토시 컴퓨터인 Apple 2에서는 인치당 픽셀의 갯..

Dev Environment 2019. 1. 22. 16:30

#4 Lists 스타일링, Backgrounds

리스트(목록)를 스타일하는 방법과 CSS background 속성에 대해 자세히 살펴보겠습니다. Lists 스타일링 HTML 목록과 관련된 속성 HTML 목록에는 , , , , , 이 있는데 이와 관련된 스타일에 대해 알아보겠습니다. 목록과 관련된 속성은 다음과 같습니다. list-style-type : upper-alpha | korean-hangul-formal ... list-stye-position : outside | inside list-style-image : url("star.svg") list-style : square url("star.svg") inside [속기(shorthand) 유형 작성법] HTML 속성을 사용한 순차 목록(리버스,항목) 설정 HTML list-style-typ..

HTMLㆍCSS 기초 강좌/CSS 2019. 1. 21. 08:48

#3 CSS Box Model, Dimension, overflow

CSS 박스 모델에 대한 이해와 margin, border, padding 등 박스를 구성하는 속성과 width, height 와 같은 수치 속성을 사용해 박스의 크기를 설정하는 방법에 대해 알아봅니다. CSS 를 사용해 HTML 요소를 레이아웃(배치)을 조작하기 위해서는 박스 모델에 대해 이해하고 있어야 합니다. CSS 박스 모델(Box Model) block vs inline vs inline-block 요소간 특성에 대한 이해 박스 모델을 이해하기 위해서는 block 요소와 inline 요소 그리고 inline block 요소에 대해 알고 있어야 합니다. block level 요소 (Flow Contents) 블록 박스는 다른 블록 박스에 포함되거나, 포함할 수 있고, 너비(width) / 높이(h..