Web Club

#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

자바스크립트 비공개 프로퍼티와 메서드

JS 비공개(private) 멤버 및 특권(privileged) 메서드 자바 등 다른 언어와는 달리 자바스크립트에는 private, protected, public 프로퍼티와 메서드를 나타내는 별도의 문법이 없습니다. 객체의 모든 멤버는 public, 즉 공개되어 있습니다. 자바스크립 객체의 모든 멤버는 공개되어 있다 위에 언급했듯이 다른 언어와 달리 별도의 문법이 없기 때문에 일반적으로 객체의 모든 멤버는 공개되어 있습니다. 다음의 예제를 살펴봅니다. javascript var myObj = { myProp : 1, getProp: function () { return this.myProp; } }; console.log(myObj.myProp); // myProp 에 공개적으로 접근할 수 있다. co..

JavaScript/JS 객체지향 프로그래밍 2018. 12. 25. 21:06

#2 HTML Element

html 에서 자주 사용되는 요소와 그 특성에 대해 알아보도록 하겠습니다. 문서에서 사용되는 주 언어 설정 html 루트 요소에 lang 속성을 사용하여 문서에 사용되는 언어(language)를 설정할 수 있습니다. html 그리고 이에 대한 언어 코드는 ISO 639(전 세계 언어 명칭에 고유 부호를 부여하는 국제 표준)를 참고하여 언어를 설정하도록 합니다. 한국어 - ko 또는 ko-KR(Korea of Republic) 영어 - en 중국어 - zh 일본어 - ja 이러한 속성은 장애인을 위한 장치인 화면 낭독 프로그램인 스크린 리더기 통해서 위와 같은 속성을 읽게 해줌으로써 음성이 어떻게 출력될 지를 결정해 줄 수 있습니다. Headings, Paragraphs, Lists, Links, img,..

HTMLㆍCSS 기초 강좌/HTML 2018. 12. 20. 14:24

#1 HTML 이란 무엇인가?

HTML 이란 무엇인가? HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다. 그렇다면 웹 페이지는 무엇일까? 웹 페이지(web page)는 월드 와이드 웹 상에 있는 개개의 문서를 가리킵니다. .gif, jpg, .Ai, .pdf, .doc, .hwp 이와 같은 확장자 포맷이 있듯이 HTML 은 .htm, .html 확장자 포맷을 가지고 있습니다. 이 html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서..

HTMLㆍCSS 기초 강좌/HTML 2018. 12. 20. 13:28

디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점

Throttle, Debounce & Difference 스로틀(Throttle)과 디바운스(Debounce)란 무엇일까? 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 방법입니다. 예를 들어, 웹/앱 사용자가 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅 한다고 가정해 봅니다. 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅을 하게 되면 사용자는 크게 느끼지 못할 수 있으나 이 행위로 인해 수많은 스크롤 이벤트가 발생하게 됩니다. 즉, 사용자가 아래로 5000픽셀 정도의 스크롤 다운을 한다면 100 개 이상의 이벤트가 발생될 가능성이 큽니다. 이러한 스크롤(scr..

JavaScript/JS 활용 & etc.. 2018. 12. 17. 18:02

Pure CSS : Layer-popup Auto center box #2

레이어팝업을 CSS만으로 자동 중앙 정렬하기 #2이전 포스팅에서 CSS 만으로 가상요소 및 기타 테크닉을 이용하여 레이어 팝업을 중앙정렬 하는 방법에 대해 알아보았습니다.이번에는 display: table 을 이용하여 중앙정렬시키는 방법에 대해 알아보도록 합니다. Pure CSS - layer Auto align Box다음의 코드뷰를 통해 살펴보도록 합니다.See the Pen layer auto align box by jaeheekim (@jaehee) on CodePen. css /** * ==========================================================+ * Layer-popup Center Box - http://http://webclub.tistory.co..

StyleSheet/CSS 2018. 12. 14. 17:10

Pure CSS : Layer-popup Auto center box #1

레이어팝업을 CSS만으로 자동 중앙 정렬하기이번 글에서는 CSS 만으로 레이어팝업 콘텐츠를 가로,세로 중앙정렬하는 방법에 대해 알아봅니다.일반적으로 레이어팝업을 중앙정렬 시키는 방법은 팝업 콘텐츠에 고정(fixed) 또는 절대(absolute) 위치를 정의하고 left: 50%; top:50%; 를 선언한 후 팝업 콘텐츠 너비,높이값에 따라 스크립트로 너비, 높이의 1/2 값을 margin-left, margin-top 에 음수값으로 정해주는 방법을 많이 사용합니다.하지만 여기서는 스크립트 제어가 필요없이 그리고 레이어 콘텐츠 너비,높이에 상관없이 중앙 정렬시키는 방법에 대해 알아보도록 하겠습니다. Pure CSS - layer Center Box간단하게 레이아웃을 구성하고 레이어팝업에 대한 마크업이 다..

StyleSheet/CSS 2018. 12. 14. 17:10