'HTMLㆍCSS 기초 강좌/CSS' 카테고리의 글 목록

#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

#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..

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

#2 타이포그래피(Typography) 디자인

Typography Design 타이포그래피은 말 그대로 typo(형체)를 가지고 그래픽을 하는 것, 즉 읽기 용이하도록 글자(텍스트) 디자인을 꾸며주는 것을 말합니다. CSS 에는 타이포그래피를 위해 크게 폰트(Fonts) 스타일 속성과 텍스트(Text) 레이아웃 속성으로 크게 두가지 속성을 가지고 있습니다. 폰트(Fonts) 스타일 속성 폰트에 영향을 주는 속성으로 적용되는 모양(family), 크기(size), 굵기(weight), 기울임(style) 등을 지정해 줄 수 있습니다. font-family : 폰트의 종류를 지정 font-size : 폰트의 크기를 지정 font-weight : 폰트의 굵기(두께)를 지정 font-style : 폰트의 스타일(이탤릭체)을 지정 글자 색상은 font-col..

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

#1 CSS 개념, 스타일 선언 방식, 선택자, 캐스케이딩

CSS 개념 CSS(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML 과 XHTML 에 주로 쓰이며, XML에서도 사용할 수 있습니다. 다시 말해, HTML 문서를 스타일링 하는 언어( W3C 의 표준)로 HTML 문서에서 link 요소를 사용해 CSS 파일을 읽어들이면 HTML 문서의 구조를 CSS를 통해 스타일링 하게 됩니다. HTML은 구조(모델)에 해당하고, CSS는 비주얼(표현)에 해당한다. 그리고 이러한 구조,비주얼은 분리되어야 합니다. 자바스립트까지 포함한다면 크게 구조,표현,제어가 분리되어 사용되어야 하는 것입니다. CSS 를 사용해야 하는 이유 명확환 구조적 디자인과 표현적 디자인을 분리할 수 있습니다. 다양한 장치에서 접근이 좀 더..