Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn More【한글자막】 CSS 완벽 가이드 (Flexbox, Grid & Sass 포함)
【한글자막】 CSS 완벽 가이드 (Flexbox, Grid & Sass 포함)
CSS의 기초부터 고급 트랙, 더 나아가 전문가 트랙 단계로 나눠서 구성된 완벽 가이드: 이론과 실제 예시를 모두 다룹니다. 강의를 통해 프로젝트 하나를 완전히 구축해보세요!
Highest Rated
Last updated 8/2024
Korean
What you'll learn
- CSS를 쉽게 배우는 방법, 왜 CSS가 대단한지 알게 됩니다.
- CSS의 기본 기능뿐만 아니라 고급 기능까지 학습합니다.
- Flexbox, 그리드, 애니메이션, 트랜지션, 폰트, 미디어 쿼리 등등 CC의 모든 것을 배웁니다.
- CSS와 특정 CSS 기능의 개념과 이론을 이해할 수 있습니다.
- 콘텐츠만큼이나 보기 좋은 웹사이트를 구축해 봅니다.
Explore related topics
Course content
19 sections • 298 lectures • 22h 59m total length
- 강의 소개1:39
Let me introduce you to this course and to what you'll learn inside of it.
- CSS란?2:59
Let's start with the most important question first: What is CSS and why do we need it on our websites?
- 온라인 학습 커뮤니티 가입하기0:35
- CSS의 과거와 현재, 그리고 미래1:50
CSS constantly evolves so let me give you a quick overview of the past and the current development of CSS!
- 강의 개요4:34
You now know what CSS is but what does the course actually offer you? This lecture will answer that question.
- 강의 트랙 선택하기0:30
As noted in the course outline, this course offers multiple tracks. Here's how you reach your favorite one.
- 강의 수강 요건0:43
You know what this courses offers, but what do you need to succeed in this course? Let's have a look at the prerequisites.
- 강의를 최대로 활용하는 방법2:49
There's more than one way of taking a course. Let's find out how you can get the most out of this course in this lecture.
- 추천 도구1:26
Which tools are we using throughout this course? Time to have a quick look at our code editor and the recommended browser.
- 소스 코드의 위치0:10
Find out where you can get the course source code.
- 유용한 리소스 및 링크0:23
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
- 모듈 소개0:55
Let me introduce you to this module and to what you'll learn inside of it.
- 프로젝트 설정 이해2:44
This is a hands-on course, so we will learn CSS in practice. Time to take a closer look at the starting setup for our course project!
- 인라인 스타일로 프로젝트에 CSS 추가하기3:53
We have an index.html file, but how can we add CSS now? Let me show you inline styles and how these allow us to change the look of our website!
- <style> 태그 이해하고 .css 파일 생성하기6:27
We learned that inline styles are probably not the best way to add CSS code. So let's have a look at two other ways to achieve this and also explain which approach we will follow throughout the course.
- 추가 스타일 적용 및 구글 폰트 가져오기6:51
We added CSS and applied some basic styling, but so far the same style is applied to all elements. Time to change that, so let's understand how we can select a specific element and add styles to it. Additionally, we'll import fonts using Google Fonts.
- 이론 - 선택자8:56
We learned how to select elements, but we probably need more selectors to style our website individually. Thankfully, we do have more selectors available in CSS, so let's understand classes, IDs and attribute selectors!
- ‘캐스케이딩’ 스타일과 명시도 이해하기8:14
Our website keeps growing, but why are some styles applied and why is this not true for others? Turns out that there are two important concepts that are mainly responsible for that: The "Cascading" nature of CSS and Specificity. But what is the idea behind these?
- 상속 이해하기5:47
We understood Specificity so the general styling logic is clear now. Unfortunately not, there is one additional core concept we definitely have to understand: Inheritance. Time to add this to our project and to understand it in this video!
- 결합자 추가하기6:16
For the styling of a website it is very important to define the look of the different parts of the website individually, because we definitely do not want our website to have the same style all over. Combinators helps us to achieve that.
- 이론 - 결합자5:42
We added the descendant combinator, but there are more combinators available in CSS. Time to dive into these in this theory lecture.
- 프로퍼티 및 선택자 요점 정리하기3:49
We learned a lot about the CSS core concepts in this module. Let me quickly summarize what we learned so far about selectors, properties and values!
- 선택자 & 결합자
- 실습 - 기본
- 마무리2:02
Let me wrap this module up and summarize what you learned thus far.
- 유용한 리소스 및 링크0:47
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
- 모듈 소개1:19
Let me introduce you to this module and to what you'll learn inside of it.
- CSS 박스 모델 시작하기3:36
One of the most important concepts to understand is the way CSS interacts with elements in HTML. This concept is called the box model, so let's see if we can find such a box in our project!
- 박스 모델 이해하기3:01
Content, padding, border, margin - we found and understood these parts of the box model. Let's now take a closer look at it and also understand the box model concept in connection with parent and child elements.
- 여백 상쇄(margin collapsing) 이해 및 바깥쪽 여백(margin) 기본값 제거3:05
Why could we observe overlapping margins between two elements? Let's understand why margin collapsing causes this behaviour and how we can remove the default margin from the <body>.
- ‘여백 상쇄’ 더 알아보기1:41
Margins of elements can behave unexpectedly - here's a deep dive on the phenomena.
- 이론 - 축약 프로퍼티로 작업하기3:48
Theory time! Throughout this course we already applied a lot of properties. Turns out that we can combine multiple properties in a single one by using a shorthand. Let's understand these shorthands in this video!
- 실습 - 축약 프로퍼티 적용하기2:05
Shorthands seem to make writing CSS code a lot easier. Let's try it out and apply some in practice in our project!
- height(높이)와 width(너비) 프로퍼티 살펴보기6:07
Styling our website also requires to define the size of our elements. In this video, we will apply the "height" and "width" properties and see how we can use these to change the box size according to our needs.
- box-sizing(박스 크기 조정) 이해하기6:43
We changed the "height" and the "width", but what was actually changed? Let's dive into the "box-sizing" property and also learn, how we can use this property to change the default behaviour of the "height" and "width" properties.
- 프로젝트에 헤더(header) 추가하기5:37
Let's apply what we learned so far and dive deeper into our project. In this video, it's time to work on the header!
- ‘display(디스플레이)’ 프로퍼티 이해하기7:12
We have two types of elements in HTML - block-level and inline. But is there a way to change the default behaviour of these elements? Turns out it is, so let's find out how we can achieve this and why this might be helpful in certain situations.
- display: none (디스플레이: 없음)과 visibility: hidden (가시성: 숨김)의 차이0:59
There's more than one way of hiding elements on the page. Let's explore the differences between display: none; and visibility: hidden.
- HTML 복습: 블록 레벨 요소 vs1:35
It's not really a CSS topic (though it's related to it) but it's super important to know. The difference between block-level and inline elements.
- display 프로퍼티 적용 및 내비게이션 바 스타일링하기6:53
After we understood the "display" property it's now time to style our navigation bar. For that we'll also use the advantages of the "inline-block" value of this property.
- 예기치 않은 ‘inline-block(인라인 블록)’ 동작 이해하기2:03
"inline-block" is a really helpful value, but there is one specific behaviour which can cause problems in practice. Let me show you which problem this is and how you can easily solve it.
- ‘text-decoration(텍스트 꾸미기)’ 및 ‘vertical-align(수직 정렬)’ 프로퍼티로 작업하기4:54
Let's continue the work in our project and improve the styling of our navigation. For that, we will style links with "text-decoration" and align elements with "vertical-align".
- 앵커 태그 스타일링하기4:00
Styling links is very important as every website contain such. The default styling is not the most beautiful one though, so let's find out how we can improve that.
- 의사 클래스(Pseudo Class) 추가하기1:47
Pseudo classes are a big help to improve the user experience on our website. Why don't we take the chance and apply some pseudo-classes in our project?
- 이론 - 의사 클래스 및 의사 요소5:38
Time to dive into the theory. We already applied pseudo classes, but which additional values are available and what is the difference between a pseudo class and a pseudo-element? Let's find the answers in this video!
- 그룹화 규칙1:14
Sometimes the same rules should be applied to different selectors. Turns out we can avoid repeating these rules again and again by grouping them. Let me show you how this works.
- 'font-weight(폰트 가중치)’ 및 ‘border(테두리)’ 프로퍼티로 작업하기2:04
We constantly improve the look of our website, so let's use "font-weight" to change the default font style of selected elements. In addition to that, it's also time to add some borders.
- CTA 버튼 추가 및 스타일링하기4:09
Until now we only have list items in our navigation bar. Wouldn't it be great to have a special CTA-button in a different style? I think it would, so let's add one in this video.
- 프로젝트에 배경 이미지 추가하기1:50
The red block level element in the background is ok, but I think a real background image definitely would improve the user experience. Let's learn how we can easily add such an image in this video!
- 기억해 두면 좋은 프로퍼티들1:29
Puh, we worked with a lot of properties so far. Of course we don't have to remember every single property, but you will probably use some properties a lot. This short list will help you remembering these.
- 실습 - CSS 자세히 알아보기
- 마무리2:31
Let me wrap this module up and summarize what you learned thus far.
- 유용한 리소스 및 링크0:47
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
- 모듈 소개0:41
Let me introduce you to this module and what you'll learn in it.
- 다중 CSS 클래스 및 결합된 선택자 사용하기7:09
There are a couple of things we can do with CSS classes and selectors in general.
- 클래스 vs ID4:05
Besides class selectors, we can use ID selectors, tag selectors etc. But which one should you use?
- !important 사용법 (권장하지 않음)3:15
In very, very, very rare cases, you might need to force a certain declaration to overwrite the others, even though it normally wouldn't. Here comes !important.
- :not()으로 반대 클래스 선택하기3:29
Thus far, we always set our rules up to select certain elements. You can also set up rules that DON'T select something.
- CSS와 브라우저 지원3:51
Not all CSS features are supported by all browsers. This lecture explains how you find out what is supported and what's not.
- 마무리1:06
Let me wrap this module up and summarize what we learned thus far.
- CSS의 기본 기능 정리
- 유용한 리소스 및 링크0:30
Attached to this lecture, you find the module resources. In the lecture, you find some helpful links.
- 모듈 소개0:37
Let me introduce you to this module and to what you'll learn inside of it.
- 요금제에 스타일 추가하기8:34
Our page gets more and more beautiful, but there is still a lot of content and styling missing. So let's add our different hosting plans and some basic styling in this video!
- 추천 요금제 배지 작업하기6:33
We want our users to focus onto the recommended plan. Let's use our CSS knowledge to highlight this plan!
- ‘border-radius(꼭짓점 반경)’으로 배지 스타일링하기3:22
The badge on the recommended plan doesn't stand out so far. Time to add some styling to it, to make clear that this is the plan to choose!
- 목록 스타일링하기3:02
All our plans include lists which present the features of the corresponding plan. The bullet points are quite ugly though, so let's remove these and improve the look of our lists!
- 패키지별 제목(Title) 및 요금(Price) 요소 작업하기4:33
Let's continue with the title and the price presented on our plans. So far these look pretty unspectacular, time to change that!
- 액션 버튼 스타일 수정하기6:40
The action button at the bottom of each box will redirect the user to the plan purchasing page. We want to make sure that our users click these buttons, so some nice button style might be a good idea.
- ‘outline(외곽선)’ 프로퍼티 이해하기2:17
We styled our buttons, but if we hover over these we still see an additional blue outline. This is automatically added to the element and definitely something we don't want to be displayed. Let's learn how we can remove it in this video.
- 사용자에게 주요 특징 보여주기1:22
Time to add another (unstyled) section, which presents the core advantages of our hosting service to the user!
- 주요 특징 섹션의 헤드라인 스타일링하기3:38
Let's start styling the new section! A good starting point probably is the headline and the background!
- 주요 특징 영역에 들어가는 콘텐츠 작성하기7:15
Time to style the list which includes our core website features. As these are presented as list items, we can apply our previous knowledge to change the list style. Additionally, we should align the features.
- 푸터(footer) 추가하기6:49
We reached the end of our starting page - time to add a footer. Let's learn how we can easily add one in this video!
- 중간 점검1:46
We finished (at least partially) our starting page. So let's think about what we achieved so far and how we can continue. Because one page probably is not enough...
- Packages 페이지 추가하기6:24
Time to add more content, this time for the packages page. We know how this works, so let's add the HTML code and apply some basic styling to get started.
- 도전 과제!1:31
Now it's your turn! You learned a lot so far, so let's take the chance and practice what we learned. Style the page on your own and try to achieve the result shown in this video!
- 링크 스타일링하기3:55
How did I solve it? Let me show you my solution in this video and let's start with the styling of our links.
- 패키지 박스 스타일링하기7:15
The links look fine, but the different plans also need individual styles. Time to add these in this video!
- 패키지에 ‘float(플로팅)’ 프로퍼티 추가하기5:14
Until now the plans are displayed according to the document flow, but we would prefer to display one plan aligned to the right part of the page. How could we achieve this?
- 마우스 오버 효과 수정하기4:11
With "float" being applied, the free plan is positioned correctly, but the hover effect doesn't work correctly any more. Let me show you how to easily fix that in this video.
- 최종 마무리하기3:01
This was a lot of work, but we now finished two pages - great job! Let's fix some minor issues before we dive deeper into positioning in the next module to further improve the look of our website!
- 유용한 리소스 및 링크0:07
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
- 모듈 소개2:44
Let me introduce you to this module and to what you'll learn inside of it.
- position(배치) 프로퍼티로 웹사이트 외관 개선하기2:32
Before we dive deeper - why is positioning elements important when creating a website? Let's take a look at our website and identify potential areas of improvement for the position of our elements!
- 이론 - position(배치) 프로퍼티 이해하기5:54
How does positioning work? Let's recap the default behaviour of elements and understand how the "position" property can be used to change the default position of elements.
- ‘fixed(고정된)’ 값으로 작업하기9:50
We understood that we can apply different values to the "position" property. Let's take a closer look at the "fixed" value, understand its positioning context and the impact on the document flow it has on the element it is applied to.
- 고정된 내비게이션 바 생성하기3:54
We already have a navigation bar on our website, but as soon as we scroll down the bar disappears. Let's understand how we can stick the navigation bar to the viewport with the "fixed" value.
- 배경 이미지에서 ‘position(배치)’ 프로퍼티 활용하기6:03
The navigation bar works, but we also need a background image for our Packages page. Turns out that the "fixed" value can also be very helpful is this situation, so let's find our more.
- z-index 이해하기6:59
We added the background image but the remaining elements are hidden below it. Why isn't there a property that allows us to change the element order along the z-axis? Thankfully the "z-index" does exactly that, so time to understand and apply it!
- 패키지에 배지 추가하기8:00
The "Plus" plan is the #1 choice for our customers and our recommendation. Why don't we add a badge to this package which indicates exactly what? Let me show you how the "absolute" and "relative" values work together and make the positioning of the badge a breeze!
- ‘absolute(절대적)’, ‘relative(상대적)’ 배치 설정으로 배지 위치 지정 및 스타일링하기3:10
We added the badge but the positioning is not perfect yet and we definitely need to add more style to it. So let's continue!
- 상대적 배치 더 알아보기4:03
The "relative" value was very helpful to position the badge, but did we really understand how it works? Let's dive deeper and find out more about its positioning context and its impact on the positioning context on the element it is applied to.
- ‘배치(position)’ 프로퍼티에 익숙해지셨나요?
- ‘overflow(오버플로우)’와 상대적 배치로 작업하기4:17
With "relative" we can move our element without any limitations - even outside of its parent. In case this is our intention that's ok, but what if we want to make the element invisible once it leaves the parent element? Then we need "overflow"...
- ‘sticky’ 배치 소개6:53
Time to have a look at "sticky" positioning, combining the advantages of "fixed" and "relative". How it works? Let's have a look in an example project.
- 스택 컨텍스트(stacking context) 이해하기5:53
The "z-index" allows us to define the element position along the z-axis. But we should not be able to position children of our parent above our parent's neighbours. With the Stacking Context we can easily control that.
- 실습 - 배치하기
- 마무리4:12
Let me wrap this module up and summarize what you learned thus far.
- 유용한 리소스 및 링크0:46
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
- 선택 섹션 고급 트랙 소개2:22
You already knew the CSS basics before and just wanted to enhance this knowledge? Then this is your starting point for this course, so let me give you a quick overview of what we achieved up to this point in the beginner's track!
- 모듈 소개1:05
Let me introduce you to this module and to what you'll learn inside of it.
- ‘background-size(배경 이미지 크기)’ 이해하기8:41
When working with backgrounds, we often want to change the size of background images. Learn more about the helpful background-size property.
- ‘background-position(배경 이미지 배치)’로 작업하기5:00
Changing the size of a background-image is nice but positioning it would also be awesome, wouldn't it? Let's dive into that topic in this module.
- 이론 - ‘background(배경 이미지)’ 축약2:12
Now that we had a closer look at some background properties, let's explorer a shorter version of defining them.
- 배경 이미지 원점, 배경 이미지 클립, 배경 이미지 스크롤 적용하기5:51
We got more background properties - let's explore them all!
- 프로젝트에 ‘background’ 축약 활용하기2:19
With all background properties explored, it's now time to learn the final form of the background shorthand property.
- 이미지 스타일링하기7:33
We're not limited to styling background images - normal images can be styled, too.
- 웹사이트에 Customers 페이지 추가하기3:19
Time to continue working on the content of our web page. In this lecture, we'll add a brand new page to it: The customers page.
- 이미지 레이아웃 작업하기8:07
With our page growing, let's now continue working on the image layout.
- 선형 그러데이션 이해하기6:16
Enough about images! We can also create gradients in CSS. Let's dive into linear gradients in this lecture.
- 원형 그러데이션 적용하기5:41
Linear gradients aren't everything - time to explore radial ones.
- 다중 배경 이미지 쌓기(stack)4:50
Did you know that you could stack background images in CSS? Let's take advantage of that.
- 필터 이해하기4:00
Gradients, images - so many ways to adjust the visuals of our page. Let's add one additional feature: Filters!
- SVG 추가 및 스타일링하기 - 기본4:20
Thus far, we worked with bitmap images. We can also use and style (!) SVGs. Time for a first introduction.
- 마무리2:14
Let me wrap this module up and summarize what you learned thus far.
- 유용한 리소스 및 링크0:29
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
- 모듈 소개2:35
Let me introduce you to this module and to what you'll learn inside of it.
- 프로젝트에 사용하는 단위에 무슨 문제가 있나요?5:21
Our website doesn't look bad and thus far we only used pixels ("px") and percentages ("%") to define the width, padding, font-size, etc. What's wrong with that approach? Let me show you why we might want to improve that...
- 프로퍼티별 사용 단위6:02
Which additional units do we have and are there any core properties these can be applied to? Let's have a look in this lecture.
- 크기 계산과 단위4:24
So we have a lot more units to apply, but can we categorize these to get a better overview? Yes we can so time to have a look at the categories in this video!
- 기억해야 할 규칙: 고정된(fixed) 배치와 ‘%’4:15
Ok, we applied the "%" unit in our project but apparently we didn't fully understand it. And why is the "position" property important again? A lot of questions, so let's find answers - starting with the "fixed" value!
- 기억해야 할 규칙: 절대적(absolute) 배치와 ‘%’8:14
The "fixed" value and the viewport, we understood that. But what about "absolute", what is the containing block and how does our element behave when we apply "position: absolute"?
- 기억해야 할 규칙: 상대적(relative)/정적(static) 배치와 ‘%’8:53
Two more values left to fully understand the "%" unit. Let's dive into "relative" and "static" and see how these affect the containing block.
- 높이를 100%로 고정할 때의 문제점12:02
"%" are clear now, but why doesn't "height: 100%" work as intended? Turns out that we need a workaround to be able to inherit the height from our parent element in certain situations. Let's have a look!
- 루트 요소에서 폰트 크기 정의하기2:18
Do we have to define a specific font size in our root element (the HTML element)? Let me explain which options we have and which approach we will follow throughout this course.
- ‘min-width/height(최소 너비/높이)’와 ‘max-width/height(최대 너비/높이)’ 사용하기5:27
Our website is not responsive yet, we'll have an entire module to understand and add responsive design. But having a first look at the "min" & "max" properties for "width" and "height" is definitely a good idea to complete our understanding of the "%" unit.
- ‘rem’과 ‘em’으로 폰트 크기 조절하기12:47
Time to introduce new units - "rem" & "em". These always refer to the font-size and therefore allow us to make our styling more dynamic depending on the font-size chosen by our visitors. Let me show you how this works.
- Adding "rem" to Additional Properties8:17
"rem" and "em" depend on the font-size but their application is not limited to this single property. Let's see how we can add "rem" to other properties than "font-size" on our website.
- ‘rem’ 마무리하기5:21
You finished your challenge - so let's have a look at the other .css files and exchange "px" with "rem".
- 뷰포트 단위 ‘vw’와 ‘vh’ 이해하기9:47
Time to introduce the last units - "vw" and "vh" allow us to easily define the size of our element based on the viewport. Let's understand how this works and what we can do with "vmin" and "vmax".
- Windows에서의 뷰포트 단위와 스크롤바1:00
After adding viewport units,, scrollbars are displayed on Windows machines (on Mac this is not an issue). Let me show you how to get rid of these in this article.
- 올바른 단위 선택하기5:30
Puh, these were a lot of new units, but which one should we use in which situation? Let me help you by providing some guidance in this lecture!
- 가운데 정렬한 요소의 바깥쪽 여백에 ‘auto(자동)’를 설정하기1:42
Time for a quick tip: We already used the "auto" value throughout the course, but now it's time to take a closer look and understand why it helped us to center elements easily!
- 코드 정리하기1:06
We are almost done, let's have a final look and see if we have to clean up our code and if all units are applied correctly.
- 마무리4:23
Let me wrap this module up and summarize what you learned thus far.
- 유용한 리소스 및 링크0:13
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
- 모듈 소개1:16
Let me introduce you to this module and to what you'll learn inside of it.
- 모달 추가하기4:13
A modal element is a typically feature to add to a web page. It depends heavily on CSS but also on JavaScript. Learn more about how you can show and hide it via JavaScript in this module.
- JavaScript를 사용한 스타일 선택 및 조정하기10:34
In the end, it's all about manipulating DOM element styles via JavaScript. Let's dive deeper into that in this lecture.
- 이벤트 리스너 추가하기6:05
Often you need to change something on your page upon the occurrence of a certain event. Let's dive into that now.
- 실습 - JavaScript에 스타일 추가하기
- 사이드 내비게이션 바 추가하기7:14
We want to build a responsive website - for that we'll need a side menu. Time to add one - of course with help of JavaScript.
- 햄버거 메뉴 여닫기3:57
The side menu shouldn't always be visible so let's connect that hamburger menu.
- 요소의 클래스 조정하기6:40
What if you don't want to change the inline styles but the classes attached to an element? You can do that, too!
- 프로퍼티 표기법 이해하기3:12
Time for some theory about the property syntax.
- 코드 정리하기5:31
We got some cleanup to do - let's tackle that now.
- 마무리1:15
Let me wrap this module up and summarize what you learned thus far.
- 유용한 리소스 및 링크0:23
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
- 모듈 소개1:45
Let me introduce you to this module and to what you'll learn inside of it.
- 반응형 프로젝트로 만들어야 하는 이유2:25
Our website gets better and better, but we have one problem: We only worked on the styling for desktop devices. Many of our potential users might visit our site using mobile devices, so we should ensure that our site looks great for all users. To achieve this, we need to make our site responsive!
- 하드웨어 픽셀 vs 소프트웨어 픽셀 이해하기10:29
A pixel is not a pixel, sounds strange doesn't it? With the latest smartphones & tablets and their corresponding high pixel density, the traditional 96px = 1inch formula doesn't work anymore, so let's find out how we can solve this problem.
- HTML의 뷰포트 메타 태그와 CSS의 미디어 쿼리 비교하기3:04
Making our website responsive requires both HTML and CSS: In HTML we need to use the "viewport" metatag, in CSS we will add media queries. Let me introduce both concepts to you in this lecture.
- ‘뷰포트’ 메타 태그 이해하기7:22
We understand the basic concept of the "viewport" metatag, but which additional options do we have to control the user actions? Let's find that out in this video!
- ‘모바일에 최적화된’ 웹사이트 디자인하기1:54
We just learned how CSS works, so styling our website "Desktop First" was the right approach. With the basics set, we should change that as "Mobile First" is the modern way to style websites. Time to do that!
- 첫 번째 미디어 쿼리 추가하기12:52
The mobile version of our background image on the starting page looks ok, but now we destroyed the desktop version. Time to understand the basic concepts of media queries and how these allow us to make our site responsive!
- 미디어 쿼리 작업 시 유념해야 할 사항8:09
Media queries are powerful and awesome while applying them is really easy. However, there are some things that we need to know about media queries before we continue styling our website.
- 적절한 분기점(Breaking Points) 찾기3:45
With the incredible amount of different devices available on the market, setting the right breaking points for our media queries is a big challenge. Let me show you one way how to find a good starting point and how to avoid creating unnecessary media queries!
- 모바일에 최적화된 요금제 섹션 디자인 생성하기6:37
Time to turn the design for our different plans on the starting page into a beautiful mobile style!
- 요금제 섹션에 반응형 디자인 적용하기8:35
We have wonderful mobile plans, but the desktop version is not displayed as intended. Time to optimize that!
- 도전 과제!6:06
With the responsive web design basics being set, it's your turn! Make our features responsive and turn them into beautifully styled mobile and desktop versions. Let me also show you my solution in case you are not sure how to approach the problem.
- 실습 - 미디어 쿼리로 반응형 디자인 생성하기
- 논리 연산자로 작업하기8:13
So far our media queries were only based on one condition, but we can do more! Let's have a look at logical operators and understand how these allow us to combine multiple conditions in our media queries.
- Customers 페이지 개선하기14:58
We learned a lot about responsive design, but our customers page has a lot of issues. Time to fix these to make our testimonials shine!
- Packages 페이지 개선하기5:41
The packages page also needs some improvement as the look on wider screens is not the best. Time to add an additional media query to improve that!
- 내비게이션 바 정리하기4:39
Our navigation bar looks fine, but the calculation logic of our logo height is not perfect. Let's make our code leaner and clean up the navigation bar!
- 푸터 정확히 배치하기10:09
We almost did it, but to make our site totally responsive, we need to fix the position of our footer. At the moment it is positioned in the somewhere in the middle of the page, so let's see how we can position the footer at its intended position: At the bottom of each page.
- 마무리2:15
Let me wrap this module up and summarize what you learned thus far.
- 유용한 리소스 및 링크0:32
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Requirements
- 강의 수강에 앞서 HTML과 웹 개발에 관한 기본지식이 있어야 하나, 고급 지식이 필요하지는 않습니다.
- CSS에 대해 전혀 몰라도 괜찮습니다! 이 강의에서 배우면 되니까요!
Description
CSS를 더 깊고 명확히 이해하여 더 완벽하고 멋진 웹사이트를 구축하세요.
CSS 기초부터 고급 트랙, 나아가 전문가 트랙 단계로 나눠서 구성하였습니다.
이론과 실제 예시를 모두 다룹니다. 강의를 통해 프로젝트 하나를 완전히 구축하세요!
[본 강의를 수강해야 하는 이유]
CSS는 Cascading Style Sheets(캐스케이딩 스타일 시트)의 줄임말로서 원시 HTML 페이지를 멋진 웹사이트로 만들 수 있는 ‘프로그래밍 언어’입니다.
본 강의에 모든 내용이 포함되어 있습니다. CSS의 정의, 원리, 사용 방법 같은 아주 기본적인 내용부터 시작해서 점차 심화한 내용을 다룹니다. 본 강의는 실제 예시와 그 이론을 함께 살펴보는 방식으로 진행됩니다.
CSS를 시작하기는 언뜻 쉬워 보일 수도 있으나 사실 CSS는 꽤 깊이 있는 언어입니다. 따라서 본 강의는 여러분의 필요 및 현재의 지식수준을 반영하여 다양한 ‘트랙’ 또는 ‘진입점’을 제공합니다.
[강의 구성]
기본 트랙: 처음부터 시작해서 CSS의 기초부터 다집니다. 강의 1부터 순서대로 끝까지 수강하시면 됩니다.
고급 트랙: 선택자가 무엇인지 어떻게 작동하는지와 같은 CSS의 기본적인 내용을 알지만 좀 더 깊게 알고 싶고 고급 기능과 사용법을 배우고 싶은 분들에게 적합한 트랙입니다.
전문가 트랙: 고급 지식을 갖추었고 Flexbox, CSS 그리드, CSS 변수, Sass. 와 같은 기능에 대해 깊게 파고들고 싶은 분들에게 적합한 트랙입니다.
[본 강의에서 다룰 내용]
#1. 본 강의에서는 이론과 실제 예시를 모두 다룹니다. 강의를 통해 프로젝트 하나를 완전히 구축해 볼 겁니다. 이와 더불어, 다양한 과제, 퀴즈, 도전 과제를 제공해 여러분이 강의 과정에서 배우는 각 개념을 익힐 수 있도록 구성했습니다.
#2. 본 강의의 프로젝트에 대한 설명 - 가상의 웹 호스팅 회사의 프론트엔드 웹을 구축합니다. 여러 부분으로 구성된 시작 화면을 만들고, 사이드 드로어 애니메이션을 활용한 반응형 디자인을 만들어 볼 것입니다. 모달과 폼, CSS 애니메이션, 폰트 스타일 등을 다양하게 활용해 봅니다!
[강의 세부 주제]
강의의 세부 내용은 다음과 같으며 이는 앞서 언급한 강의 프로젝트에도 모두 적용해 볼 겁니다.
선택자와 결합자에 대한 기본 사항, 일반 스타일링 규칙 정하는 방법
프로퍼티와 값 및 선언
명시도와 상속의 원리, ‘캐스케이딩’ 스타일 시트라고 부르는 이유
‘박스 모델’과 같은 주요 이론 개념
요소가 배치되는 기본 설정값을 변경하는 방법
이미지와 배경 이미지 스타일링하기 (예: 그러데이션)
CSS에서 자주 사용하는 단위와 치수 (px, rem, % 등)
JavaScript와 CSS가 상호작용하는 방식
반응형 디자인과 ‘모바일 최적화’의 의미
폼 요소와 폼 입력 요소 스타일링하기
텍스트, 폰트 및 텍스트 스타일 작업
Flexbox! Flexbox의 원리와 사용 방법
CSS 그리드 사용 방법, Flexbox와 다른 점
CSS를 활용한 HTML 요소 변형 및 애니메이션 적용
CSS 변수나 모범 사례가 되는 클래스 이름 등을 활용해 미래에도 사용할 수 있는 CSS 코드를 작성하는 방법
Sass 사용 방법과 설명
[본 강의의 대상]
이런 분들에게 적합합니다
보다 멋진 웹사이트를 구축하고 싶은 웹 개발 초보자
CSS를 알지만 보다 더 깊이 알고 싶은 분
시행착오로 CSS 사용에 지쳐 개선이 필요하신 분 (이제는 바뀌셔야 합니다!)
이런 분들은 좀 더 생각해보시길 바랍니다.
CSS 실력이 전문가 수준이며 CSS 워킹 그룹 드래프트를 잘 이해하고 있는 분
노드나 PHP를 사용하며 HTML이나 프론트엔드 JavaScript는 사용하지 않는 백엔드 전문 개발자
웹 개발을 난생처음 배우며 HTML의 기본부터 배워야 하는 분
이런 점들을 고려하여 본 강의를 수강하기로 결정하신 모든 분을 진심으로 환영합니다!
1강에서 뵙겠습니다.
- Maximilian
Who this course is for:
- CSS를 처음 배우는 분과 이미 보유한 CSS 최신 웹 개발 기술에 관심이 있으신 분
- Flexbox, CSS 그리드 또는 CSS 변수와 같은 최신 CSS 기능을 습득하고 싶은 분
- CSS를 알고는 있으나 좀 더 깊이 공부하고 싶은 초보 개발자 및 취업준비생