#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..
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 를 사용해야 하는 이유 명확환 구조적 디자인과 표현적 디자인을 분리할 수 있습니다. 다양한 장치에서 접근이 좀 더..
HTMLㆍCSS 기초 강좌/CSS 2019. 1. 21. 08:47

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

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

3D 트랜스폼(Transforms)

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

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

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

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

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

CSS 2D 트랜스폼(Transforms)

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

#5 Interactive, User Interaction, Metadata

인터랙티브(Interactive) 요소들 , , 요소 사용 방법에 대해 알아보겠습니다. 이 Interactive 요소는 사용자와 상호 작용하는(대화 가능한) 요소를 말합니다. details element 이 details 요소는 디스클로저 위젯(disclosure widget, 참고: https://goo.gl/uznvFY)으로 정보를 감추거나, 펼쳐서 보여줍니다. 모든 정보를 일시에 공개하지 않고 사용자의 요구에 맞춰 정보를 공개할 수 있기 때문에 화면의 복잡함을 줄이는 목적으로 사용할 수 있습니다. 아코디언(Accordion) 컴포넌트와 비슷하게 작동하며, 참고로 각주(footnote)에는 적합하지 않습니다. 아코디언(Accordion) 컴포넌트는 브라우저가 자체적으로 지원하고 있지 않기 때문에 자바..
HTMLㆍCSS 기초 강좌/HTML 2018. 12. 26. 11:28

#4 Tables, 폼(양식,Forms) 구성 요소들

Tables – table,caption, col, tr, th, td 등.. 테이블은 X축, Y축으로 정보를 나열할 때 유용하게 사용할 수 있는 구성 요소입니다. 테이블은 반드시 사용자에게 정보를 제공하기 위한 제목인 caption 이 필요하고, 그 아래는 테이블에 해당하는 몸체에 필요한 요소들이 있습니다. 다음의 코드는 간단한 테이블 구조입니다. html 테이블의 제목 table 요소 은 테이블 몸체에 해당되며, 행(row)/열(column) 및 셀(cell)을 포함한다. 복잡한 내용을 x, y축에 따라 이해하기 쉽게 데이터를 구조화하는데 테이블을 사용합니다. 가장 좋은 테이블 디자인은 최대한 단순하게 표를 구성하는 것이고, 테이블 내 테이블을 중첩해서는 안되고 테이블을 레이아웃(배치) 목적으로 사용..
HTMLㆍCSS 기초 강좌/HTML 2018. 12. 26. 11:24

#3 Sections 요소, Main, Text Level, Grouping etc..

html 에서 자주 사용되는 요소와 그 특성에 대해 알아보도록 하겠습니다. HTML 섹션(Sections) 요소들 & 메인(Main) 요소 문서 또는 사이트, 애플리케이션의 각 섹션, 메인 영역을 구조화하는 방법에 대해 알아보겠습니다. 문서 상에서 body 요소는 그 안에 존재하는 모든 요소들의 root(=root section) 가 될 수 있습니다. root section 이라고 부르는 이유는 이 body 안에 존재하는 모든 요소들에 대해 뿌리가 되기 때문입니다. 그리고 이 body section 은 각각 와 를 가질 수 있습니다. 일반적으로 header 내에서는 로고, 내비게이션, 검색 등과 같은 것을 포함하게 되고 사용자가 보는 주요 콘텐츠 페이지의 경우는 이라는 요소를 사용할 수 있습니다. 그리고..
HTMLㆍCSS 기초 강좌/HTML 2018. 12. 26. 11:18