Home
Videos uploaded by user “빔캠프 veamcamp”
CSS EM의 유래 이야기  | EM과 REM 특집 | CSS 갈증해소 프로젝트 OACSS | 빔캠프
 
08:23
우리가 무심코 이엠이라고 발음하는 em(엠)단위에 대하여 알아봅시다! 타이포그래피 이론에서 원래 쓰이던 em(엠)이라는 단위의 유래와 어원에 대해 이야기 합니다. em과 rem의 차이점이라는 주제로 시리즈를 만들고 있습니다. 해당 영상은 1편입니다! ### CSS EM과 REM 시리즈 #1 CSS EM의 유래와 어원편 https://www.youtube.com/watch?v=VT_qa7h51pg #2 CSS EM단위로 만들 수 있는 3가지 예제 https://www.youtube.com/watch?v=47xHPFQ1Ll4 #3 CSS REM단위로 만들 수 있는 반응형 예제 https://youtu.be/AfxL9OKBBCU 🚩 오프라인 강의는? https://veamcamp.com
Views: 1080 빔캠프 veamcamp
생각처럼 동작하지 않는 height: 100% | CSS 갈증해소 프로젝트 OACSS | 빔캠프
 
12:39
가끔가다 만날수 있는 상황이지요! 좀 처럼 말을 듣지 않는 %단위에 대해서 짧게 알아봅니다 :) -추가 연구내용 자식에게 설정한 height: 100%는 부모 height의 100%를 의미 부모의 height는 기본값 auto. 즉, 자식의 height 총합 즉 부모는 자식을, 자식은 부모를 기준으로 높이를 잡는 아이러니한 상황 결론! 부모의 height가 auto가 아닌 명시적인 값이 되어야 자식의 height %값이 성립 링크 호환성체크 사이트: http://caniuse.com 🚩 오프라인 강의는? https://veamcamp.com
Views: 2953 빔캠프 veamcamp
CSS 가로 정렬?  inline-block과 float중 어떤 것을 써야 할까?  | CSS 갈증해소 프로젝트 OACSS | 빔캠프
 
19:20
🚩 오프라인 강의는? https://veamcamp.com 요소를 가로배치하기 위한 여러 방법중 inline-block과 float속성에 대한 짧은 영상입니다. inline-block과 float의 본질을 알아보고, 이에 따른 주의사항을 이야기합니다. 또한 최신 속성인 display: grid에 대한 언급도 합니다 :) 🚩 오프라인 강의는? https://veamcamp.com
Views: 4242 빔캠프 veamcamp
[ㅂ] 버티컬얼라인 vertical-align | 코딩가나다 | 빔캠프
 
17:11
CSS로 타이포그래피를 할 때 가장 다루기 까다로운 vertical align 속성에 대하여 알아봅니다. vertical-align: middle과 baseline은 브라우저, 운영체제, 폰트에 따라 매우 변수가 많은 기준점이므로, 비교적 변수가 적은 vertical-align: top을 이용하는 방법을 제안하고 있습니다. 🚩 오프라인 강의는? https://veamcamp.com
Views: 1794 빔캠프 veamcamp
티티하우스 강의 시리즈 소개 | 빔캠프
 
01:30
완성형의 예제를 다 같이 따라 만들어 보면서 나만의 것으로 만드는 튜토리얼 기반의 강의 시리즈입니다 :) #티티하우스 페이스북 그룹 http://ask.tthouse.kr 🚩 오프라인 강의는? https://veamcamp.com
Views: 1323 빔캠프 veamcamp
반응형웹에서 div의 너비높이 비율을 유지 시킬 수 있나요? | CSS 갈증해소 프로젝트 OACSS | 빔캠프
 
13:46
여러분들의 CSS에 대한 갈증을 해결해 줄 스크린캐스트 - OACSS 코너입니다. 이번 시간에는 반응형웹에서 div가 가지고 있는 비율을 유지하면서 사이즈 조절이 되게 만드는 기법을 배웁니다. 또한 iframe으로 제공되는 비디오 컨텐츠 (youtube또는 vimeo)를 반응형으로 제작 하는 방법 또한 다루어 봅니다. padding-top의 %유닛이용이 핵심입니다. 차분히 보다보면 어떤 이슈이고, 어떻게 해결했는지 파악 할 수 있습니다 :) 여러분들을 응원합니다 🚩 오프라인 강의는? https://veamcamp.com
Views: 4046 빔캠프 veamcamp
[ㅅ] 상속 inheritance | 코딩가나다 | 빔캠프
 
21:01
CSS의 가장 기초라고 할 수 있는 상속 개념을 둘러싼 여러 이야기입니다. 🔵목차 ▶ 00:23 상속이란 무엇인가? 기본개념 ▶ 04:28 상속이 안되는 경우 ▶ 05:20 inherit 키워드 ▶ 11:20 상속 개념을 잘 활용한 예제 알아보기 ▶ 17:20 em단위는 계산된 값(computed value)이 상속된다! 🚩 오프라인 강의는? https://veamcamp.com
Views: 1355 빔캠프 veamcamp
img태그 하단에 생기는 알 수 없는 빈 공간 파헤치기 | CSS 갈증해소 프로젝트 OACSS | 빔캠프
 
09:58
img요소 하단에 생기는 알 수 없는 빈공간에 대한 짧막한 영상입니다! img뿐만 아니라 모든 inline-block요소에 동일하게 적용 할 수 있습니다 :) 코딩 질문과 답변 페이스북 그룹 https://www.facebook.com/groups/1944272809164687/?source_id=966052393405713 🚩 오프라인 강의는? https://veamcamp.com
Views: 1001 빔캠프 veamcamp
CSS 선택자 우선순위 이모저모 | CSS 갈증해소 프로젝트 OACSS | 빔캠프
 
25:02
방심하면 한번씩 문제가 되는 CSS 선택자 우선순위 이슈에 대하여 이야기 해봅니다. 🚩 오프라인 강의는? https://veamcamp.com
Views: 1766 빔캠프 veamcamp
[ㄹ] 라인하이트 line height | 코딩가나다 |  빔캠프
 
17:29
[ㄹ] CSS 타이포그래피를 하는데 꼭 빠지지 않는 주제인 line-height 속성에 대한 영상입니다!. line-height에 적절한 단위는 무엇인가? em단위와의 관계 leading영역에 대한 이해 CSS 타이포그래피의 한계 등을 이야기 하고 있습니다. 시간관계상 vertical-align에 대한 내용은 빠져있습니다 코딩 질문과 답변 페이스북 그룹 https://www.facebook.com/groups/19442... 🚩 오프라인 강의는? https://veamcamp.com
Views: 1290 빔캠프 veamcamp
여러 div를 몽땅! 가로 가운데 정렬 | CSS 가운데 정렬 특집 | 빔캠프
 
11:03
가운데 정렬 두번째 시간입니다! display: inline-block으로 가운데 정렬 구현하기! 영상에는 설명이 빠졌지만 inline-block을 IE6~7에서 쓰려면 그냥 display: inline하면 됩니다 :) 잘못된 정보는 꼭 알려주세요! 더불어 같이 공부하면 좋겠습니다 :) 코딩 질문과 답변 페이스북 그룹 https://www.facebook.com/groups/1944272809164687/?source_id=966052393405713 🚩 오프라인 강의는? https://veamcamp.com
Views: 2938 빔캠프 veamcamp
반응형 타임라인 따라 만들기 미리보기 | 스피드 코딩 | 티티하우스 티저 | 빔캠프
 
01:54
🚩 천천히 진행하는 강의 동영상 (2018년 10월 31일 오후 6시 공개) https://www.youtube.com/watch?v=-aOLzc7C3QU 🚩 완성페이지 https://veam.me/example/timeline/ 🚩 오프라인 강의는? https://veamcamp.com
Views: 2567 빔캠프 veamcamp
향수 반응형 웹페이지 예제 | 스피드 코딩 | 빔캠프
 
02:02
작업과정을 들여다 보는 것은 언제나 즐거운 일입니다! 코딩의 전 과정을 빠른속도로 간접 경험 해보세요! 🚩 오프라인 강의는? https://veamcamp.com
Views: 1031 빔캠프 veamcamp
[ㅇ] 오버플로우 overflow | 코딩가나다 | 빔캠프
 
39:24
단순한 듯, 비밀을 안고 있는 의문의 속성 overflow에 대한 이야기입니다! 🔵목차 ▶ 01:45 overflow란 무엇인가? ▶ 04:15 float개념 다시정리하기 ▶ 13:23 overflow와 BFC(Block Formatting Context) ▶ 22:00 overflow를 활용한 추가예제 2가지 ▶ 31:00 키노트 정리 ▶ 34:30 MDN에서 좀 더 공부하기 🚩 오프라인 강의는? https://veamcamp.com
Views: 2043 빔캠프 veamcamp
CSS EM단위로 만들 수 있는 3가지 예제 | EM과 REM 특집  | CSS 갈증해소 프로젝트 OACSS | 빔캠프
 
14:28
전 영상에 이어 em단위로 만들 수 있는 실용적인 예시를 3가지 정도로 보여 드립니다 :) ### CSS EM과 REM 시리즈 #1 CSS EM의 유래와 어원편 https://www.youtube.com/watch?v=VT_qa7h51pg #2 CSS EM단위로 만들 수 있는 3가지 예제 https://www.youtube.com/watch?v=47xHPFQ1Ll4 #3 CSS REM단위로 만들 수 있는 반응형 예제 https://youtu.be/AfxL9OKBBCU 🚩 오프라인 강의는? https://veamcamp.com
Views: 999 빔캠프 veamcamp
div 가로세로 모두 가운데 정렬 with position | CSS 가운데 정렬 특집 | 빔캠프
 
15:16
position속성을 이용한 가로세로 가운데정렬 기법입니다. 두가지 방법을 소개하고 있는데요. 두가지 방법 모두 width, height가 적용되어 있어야 가운데 정렬이 가능한 방법입니다. 🚩 오프라인 강의는? https://veamcamp.com
Views: 2652 빔캠프 veamcamp
inline-block으로 가로 배치시 정렬이 이상하게 틀어져요! | CSS 갈증해소 프로젝트 OACSS | 빔캠프
 
14:58
inline-block으로 가로 배치시 세로 정렬이 위 아래로 틀어지는 현상을 겪으신 분 있으신가요? vertical-align속성이 이 문제를 해결 하는 키워드인데요! 초심자분들이 자주 실수하는 vertical-align의 사용부터, 문제 해결까지 차근차근히 설명하는 스크린 캐스트입니다. 🚩 오프라인 강의는? https://veamcamp.com
Views: 1162 빔캠프 veamcamp
브라켓스 설치와 작업 환경 설정하기
 
06:38
코딩을 처음 시작하는 분들을 위한 영상이에요~~ 영상 내용 중 궁금한 부분이나 질문은 댓글로 남겨주세요^^
Views: 657 빔캠프 veamcamp
div 가로 가운데 정렬 | CSS 가운데 정렬 특집 | 빔캠프
 
09:11
가장 많이 사용하는 가운데 정렬 기법인 margin: 0 auto와 text-align: center를 알아봅니다. 가운데 정렬 기법은 상황에 따라 매우 다양하기 때문에 여러편으로 나누어 촬영중입니다 :) 코딩 질문과 답변 페이스북 그룹 https://www.facebook.com/groups/1944272809164687/?source_id=966052393405713 🚩 오프라인 강의는? https://veamcamp.com
Views: 2704 빔캠프 veamcamp
[ㄴ] 네거티브 마진 negative margins | 코딩가나다 | 빔캠프
 
15:13
[ㄴ] 마진값을 음수(마이너스)로 지정하는 네거티브 마진 기법을 배웁니다! 코딩 질문과 답변 페이스북 그룹 https://www.facebook.com/groups/1944272809164687/?source_id=966052393405713 🚩 오프라인 강의는? https://veamcamp.com
Views: 1504 빔캠프 veamcamp
스퀘어 그리드 레이아웃 따라 만들기 | 티티하우스 | 빔캠프
 
53:38
# 본 예제 보기 및 다운로드는? http://t.veam.me/square-grid/ 🚩 오프라인 강의는? https://veamcamp.com
Views: 3591 빔캠프 veamcamp
[ㄱ] 가운데정렬 centering in css | 코딩가나다 | 빔캠프
 
11:36
[ㄱ] 가장 기초적인 레이아웃인 margin을 이용한 가운데 정렬 기법입니다. 코딩 질문과 답변 페이스북 그룹 https://www.facebook.com/groups/1944272809164687/?source_id=966052393405713 🚩 오프라인 강의는? https://veamcamp.com
Views: 2537 빔캠프 veamcamp
높이를 알 수 없는 div 세로 가운데 정렬 | CSS 가운데 정렬 특집 | 빔캠프
 
12:54
display: table속성을 이용한 높이를 알 수 없는 div의 세로 가운데 정렬 기법입니다. 근간이 되는 table요소를 크롬의 검사기능으로 천천히 살펴 봅니다 🚩 오프라인 강의는? https://veamcamp.com
Views: 1813 빔캠프 veamcamp
우리가 강의를 시작하게 된 계기 | 웹부부쇼 | 빔캠프
 
29:09
네 번째 시간! 이번 영상의 주제는 우리 부부가 강의를 시작하게 된 계기에 대해서 이야기해보았어요~~ 영상 보시고 댓글도 달아주시고 같이 소통하는 시간 가져보아요^^ 디자인하는 남편과, 코딩하는 아내가 같이 만들어 나가는 코딩&디자인 방송! 🚨 강의 아님 주의 🚨
Views: 368 빔캠프 veamcamp
[빔버거] 패딩과 마진의 차이
 
07:15
오프라인 강의를 많이 하다보니 입문자가 가장 많이 헷갈려하는 부분이 패딩과 마진이란 것을 느끼게되어 짧게 동영상으로 정리를 해보았습니다. 조금이나마 도움이 되었으면하는 바람입니다 :) 영상에 있는 내용을 천천히 공부하고 싶은 분들은 아래 링크를 클릭해주세요!~ https://veamcamp.com/cookbook/padding_margin/ 🚩 오프라인 강의는? https://veamcamp.com
Views: 1003 빔캠프 veamcamp
[ㄷ] 디스플레이 display property | 코딩가나다 | 빔캠프
 
16:28
[ㄷ] HTML태그요소의 시각적 표현 방식의 분류라고 할 수 있는 display에 대한 짧막한 설명입니다. inline과 block의 차이점에 대해서도 설명합니다 코딩 질문과 답변 페이스북 그룹 https://www.facebook.com/groups/19442... 🚩 오프라인 강의는? https://veamcamp.com
Views: 1810 빔캠프 veamcamp
가상요소를 활용한 5가지 예제 | CSS 갈증해소 프로젝트 OACSS | 빔캠프
 
35:49
깔끔한 마크업을 유지하면서 창의적인 CSS 디자인을 할 수 있는 가상요소! ::before, ::after를 이용한 5가지 사례를 소개합니다. 🔵목차 ▶ 00:15 가상요소는 무엇인가? (기본지식) ▶ 05:05 가상요소 용어 정리 (::before와 :before의 차이점) ▶ 08:30 가상요소로 만드는 툴팁 예제 (content: attr() 활용) ▶ 15:15 가상요소를 활용하여 마크업 량 줄이기 ▶ 22:40 가상요소로 브레드크럼 만들기 ▶ 27:36 가상요소로 말풍선 만들기 (feat. border) ▶ 31:34 가상요소로 div의 디자인 발전 시키기 예제 🚩 오프라인 강의는? https://veamcamp.com
Views: 2326 빔캠프 veamcamp
[ㅁ] 마진병합 margin collapsing | 코딩가나다 | 빔캠프
 
10:25
기초이지만 쉽게 놓칠 수 있는 마진병합(겹침, 상쇄, 붕괴) 현상에 대해 이야기 합니다. 🚩 오프라인 강의는? https://veamcamp.com
Views: 1126 빔캠프 veamcamp
아코디언 커버 따라 만들기 | 티티하우스 | 빔캠프
 
01:14:11
# 본 예제 보기 및 다운로드는? http://t.veam.me/accordion-cover/ 🚩 오프라인 강의는? https://veamcamp.com
Views: 2153 빔캠프 veamcamp
HTML+CSS로 할로윈 캐릭터 만들기! | 스피드 코딩 | 빔캠프
 
29:32
HTML+CSS만을 이용하여 캐릭터만들기. 10월 할로윈에 맞는 테마로 귀여운 호박 캐릭터를 만들어 보았습니다! 스피드코딩영상 이후에 설명영상이 진행됩니다 :) 다같이 만들어보아요! 궁금 하신 사항은 댓글로 문의해주세요! ◑ Codepen 소스보기 https://codepen.io/veamcamp/pen/YrNOWe 코딩 질문과 답변 페이스북 그룹 https://www.facebook.com/groups/1944272809164687/?source_id=966052393405713 🚩 오프라인 강의는? https://veamcamp.com
Views: 2096 빔캠프 veamcamp
반응형 타임라인 레이아웃 따라 만들기 | 티티하우스 | 빔캠프
 
01:21:59
# 스피드코딩 미리보기 https://www.youtube.com/watch?v=PziTUhtAUtc # 본 예제 보기 및 다운로드는? http://t.veam.me/timeline/ 🚩 오프라인 강의는? https://veamcamp.com
Views: 2437 빔캠프 veamcamp
block 요소 가운데 정렬 | 웹 이야기하는 여자 | 빔캠프
 
10:17
block 요소가 가운데 정렬되는 작동 방식에 대해서 생각해봤습니다. 🚩 오프라인 강의는? https://veamcamp.com
Views: 483 빔캠프 veamcamp
CSS 황금 개 그리기 Hello, 2018 | 스피드 코딩 | 빔캠프
 
01:18
작업과정을 들여다 보는 것은 언제나 즐거운 일입니다! 코딩의 전 과정을 빠른속도로 간접 경험 해보세요! 🚩 코드보기: https://codepen.io/veamcamp/pen/NBrQdo 🚩 오프라인 강의는? https://veamcamp.com
Views: 765 빔캠프 veamcamp
웹사이트 제작 과정 빠르기 체험하기 | 스피드 코딩 | 빔캠프
 
01:26
작업과정을 들여다 보는 것은 언제나 즐거운 일입니다! 코딩의 전 과정을 빠른속도로 간접 경험 해보세요! 🚩 오프라인 강의는? https://veamcamp.com
Views: 2803 빔캠프 veamcamp
반응형 웹페이지 제작 과정 | 스피드 코딩 | 빔캠프
 
01:21
무엇인가 만들어지는 것을 보는 것은 언제나 설레이지요 :) 🚩 오프라인 강의는? https://veamcamp.com
Views: 1518 빔캠프 veamcamp
웹 사이트 사용자 경험 | 웹 이야기하는 여자 | 빔캠프
 
02:33
나도 모르게 익숙해져 있는 웹 사이트 사용자 경험!! 여러분이 익숙해져 있는 편리한 기능은 무엇인가요??
Views: 368 빔캠프 veamcamp
크롬은 최소 폰트사이즈가 10px이다 | CSS 갈증해소 프로젝트 OACSS | 빔캠프
 
05:38
크게 중요하다고 볼 수는 없지만, 알아두면 나중에 당황하지 않습니다 :) 🚩 오프라인 강의는? https://veamcamp.com
Views: 502 빔캠프 veamcamp
CSS 텍스트 요소 가로, 세로 가운데 정렬 | OACSS 가운데 정렬 특집 | 빔캠프
 
14:43
텍스트요소, (inline, inline-block) 가로, 세로 가운데 정렬법입니다 :) 간단히 CSS타이포그래피 이론 keynote도 강의해 보았습니다. 🚩 오프라인 강의는? https://veamcamp.com
Views: 2137 빔캠프 veamcamp
빔캠프 웹사이트 제작 과정 | 스피드 코딩 | 빔캠프
 
01:41
작업과정을 들여다 보는 것은 언제나 즐거운 일입니다! 코딩의 전 과정을 빠른속도로 간접 경험 해보세요! 🚩 오프라인 강의는? https://veamcamp.com
Views: 832 빔캠프 veamcamp
그라디언트 배경만들기 | 웹 이야기하는 여자 | 빔캠프
 
06:35
브라우저 호환성 문제 없이 그라디언트 배경 만들기! 질문은 댓글로 남겨주세요^^
Views: 326 빔캠프 veamcamp
웹사이트 캡쳐하기 | 웹 이야기하는 여자 | 빔캠프
 
06:10
웨일 브라우저의 편리한 기능을 소개합니다. 긴~ 웹 사이트를 한 번에 캡쳐할 수 있는 편리한 기능입니다. 질문은 댓글로 남겨주세요^^
Views: 301 빔캠프 veamcamp
#1 웹부부쇼 로고 디자인편 | 웹부부쇼 | 빔캠프
 
01:06:02
디자인하는 남편과, 코딩하는 아내가 같이 만들어 나가는 코딩 방송! 그 첫 시작을 알리는 "웹부부쇼 로고 디자인편" 입니다 :) 재미있는 컨텐츠를 만들기 위해 노력을 해볼까 하는 그런 컨셉입니다 ㅎㅎ 🚨 강의 아님 주의 🚨 1. 아바타 만들어주는 서비스 링크 https://getavataaars.com 2. 한글폰트 검색 - 프로젝트 눈누 http://noonnu.cc 3. 영문폰트 검색 - 구글폰트 https://fonts.google.com/
Views: 1945 빔캠프 veamcamp
인터렉티브 웹사이트 제작 과정 | 스피드 코딩 | 빔캠프
 
01:40
작업과정을 들여다 보는 것은 언제나 즐거운 일입니다! 코딩의 전 과정을 빠른속도로 간접 경험 해보세요! 🚩 오프라인 강의는? https://veamcamp.com
Views: 883 빔캠프 veamcamp
반응형 웹사이트 제작 과정 | 스피드 코딩 | 빔캠프
 
01:26
작업과정을 들여다 보는 것은 언제나 즐거운 일입니다! 코딩의 전 과정을 빠른속도로 간접 경험 해보세요! 🚩 오프라인 강의는? https://veamcamp.com
Views: 1052 빔캠프 veamcamp
웹사이트 제작 과정 빠르게 보기 | 스피드 코딩 | 빔캠프
 
01:02
작업과정을 들여다 보는 것은 언제나 즐거운 일입니다! 코딩의 전 과정을 빠른속도로 간접 경험 해보세요! 🚩 오프라인 강의는? https://veamcamp.com
Views: 1711 빔캠프 veamcamp
할로윈 특집! CSS 캐릭터 그리기 | 스피드 코딩 | 빔캠프
 
01:07
작업과정을 들여다 보는 것은 언제나 즐거운 일입니다! 코딩의 전 과정을 빠른속도로 간접 경험 해보세요! 🚩 오프라인 강의는? https://veamcamp.com
Views: 1484 빔캠프 veamcamp
display 속성에 따른 텍스트 가로 정렬 | 웹 이야기하는 여자 | 빔캠프
 
12:32
display 속성에 따라 달라지는 정렬 방법에 대한 이야기입니다. [ block / inline / inline-block ] 어떨 땐 되다가... 또 어떨 땐 안되다가.. 영상을 보시고 이제 헷갈리는 일 없이 사용해보세요^^
Views: 416 빔캠프 veamcamp
수강생 리뷰를 리뷰하다! | 웹부부쇼 | 빔캠프
 
17:02
빔캠프 오프라인 11월 클래스가 마무리 되었습니다 짝짝짝! 수강생 분들의 후기를 보면서, 클래스를 마무리합니다 :) 🔥 HTML+CSS 첫 걸음 클래스 자세히보기 https://veamcamp.com/camp/htmlcss-firststep
Views: 250 빔캠프 veamcamp
구독자 4000명 돌파기념 무료특강!  | 웹부부쇼 | 빔캠프
 
09:56
하루만 진행하는 맛보기 무료 강의가 아닌, 현실적으로 여러분들의 작업에 도움을 줄 수 있는 3시간씩 5강 일정을 잡았습니다! 이번 강의 장소는 신촌 코워킹 카페 "히브루스"입니다. 관심 있으신 분들은 아래 내용을 참고해 주세요 🔔 내 용 | 웹사이트 제작을 위한 HTML + CSS 입문 🔔 대 상 | 비전공자 또는 디자이너 대상의 입문강의 (누구든지!) 🔔 일 시 | 2019년 1월 / 17일 , 22일, 24일, 29일, 31일(총 5강) 🔔 시 간 | 오후 2:00 ~ 오후 5:00 🔔 정 원 | 30명, 선착순 마감 🔔 장 소 | 서울특별시 마포구 서강로 144 동인빌딩 10F 🔔 선착순 신청하기 https://veamcamp.com/camp/1000
Views: 422 빔캠프 veamcamp