CSS Display 속성 처음부터 끝까지 완전 정복

CSS Display 속성 처음부터 끝까지 완전 정복

3,000원

7

CSS Display 속성 처음부터 끝까지 완전 정복

CSS display 속성 입문자를 위한 웹페이지 레이아웃 만들기 기초 강의입니다.

heart icon

찜하기

share icon

공유하기

🚀 강의 목적과 학습 목표

웹 레이아웃의 핵심! Display 속성 완벽 이해하기

웹 페이지를 제작할 때, 콘텐츠의 배치 방식은 매우 중요한 요소입니다. 이를 제어하는 핵심 속성이 바로 display 입니다. 이 강의에서는 block, inline, inline-block 속성을 깊이 있게 학습하여 웹 요소를 어떻게 배치하고, 웹사이트 레이아웃을 만들 때 어떻게 활용할 수 있는지 완벽히 이해할 수 있도록 만들어졌습니다. 이러한 속성들은 페이지의 구조뿐만 아니라 사용자 경험에 직접적으로 영향을 미치기 때문에 반드시 알아두어야 할 중요한 개념입니다. Display 속성과 함께 block, inline, inline-block 요소에 대한 기초 이론을 배우고, 실제 웹사이트에 적용하고 활용하는 방법을 배우는 강의입니다.

단순히 개념을 배우는 것에 그치지 않고, 다양한 실습을 통해 HTML과 CSS의 display 속성을 능숙하게 다룰 수 있게 됩니다. 실무에서 자주 겪는 문제들을 해결하고, 사용자 경험을 향상시키는 효율적인 레이아웃 구성 방법을 터득해보세요.


📍 Display 속성의 개념과 각 값의 특성 및 차이점을 학습합니다
📍 실제 웹사이트 구조(헤더 / 네비게이션 /콘텐츠 영역 등)를 display 속성으로 개발할 수 있게됩니다
📍 상황에 따라 어떤 디스플레이 속성을 사용해야하는지 알게됩니다

👩🏻‍💻 이런 분을 위해 만들었어요

📍 학원에서 display 속성에 대해 배웠지만 아직 이해가 잘 안되시는 분
📍 웹사이트를 만들 때 display 속성을 어떻게 써야하는지 막막하신 분
📍 Block / inline / inline-block 속성의 개념은 이해했지만 막상 활용이 어려우신 분
📍 웹사이트 레이아웃 구조를 잡을 때 display 속성을 어떻게 적용해야하는지 헷갈리시는 분

🎁 강의는 이렇게 구성돼요

📍 핵심 개념 이론 4개 단원 + 명쾌한 실습 해설 풀이 3개 단원
📍 Display 속성의 개념과 각 값(block, inline, inline-block)의 특성 및 차이점 설명
📍 실제 웹사이트 구조(헤더, 내비게이션, 콘텐츠 영역 등)에 display 속성 적용 방법 풀이

Chapter1 - Display: block으로 요소 정렬하기

디스플레이 속성의 역할을 이해하고, 블럭요소를 활용해서 웹사이트 화면에 배치시키는 방법을 배워요.


Chapter2 - Block요소의 너비와 높이 조절

블럭요소의 너비와 높이 조절을 통해, 웹사이트에서 블럭요소의 크기를 결정하고, 화면상에 배치하는 방법을 배웁니다.


Chapter3 - Inline요소의 특징과 사용법

인라인요소의 특징을 블럭요소와 대비해서 배우고, 영화목록처럼 요소들이 나란히 나열된 레이아웃을 만들면서 이해해봅니다.


Chapter4 - Inline-block 요소의 응용법 및 실전 과제 안내

인라인블럭 요소가 생겨난 이유를 이해하고, 웹사이트에 배치된 요소의 역할에 따라 적절한 속성을 선택해서 활용할 수 있는 방법을 배웁니다. 실제 웹사이트의 레이아웃을 만들 수 있는 과제를 진행하고, 풀이를 들으며 이해합니다.


Chapter5 - 레이아웃 구성 방법의 첫단계 실습 풀이

웹사이트의 레이아웃을 처음 만들 때, 레이아웃의 구조를 구상하는 시작 방법부터, 태그를 배치시키는 방법까지 풀이하며 이해합니다.


Chapter6 - 웹사이트의 기본 헤더 레이아웃 실습 풀이

실습사이트인 Weflix 홈페이지의 헤더를 만드는 과제 해설 풀이를 통해, 내가 만든 코드와, 해설 코드를 비교하면서 공부해봅니다.


Chapter7 - 웹사이트의 기본 배너와 메인영역 레이아웃 실습 풀이

실습사이트인 Weflix 홈페이지의 가장 메인 영역을 만드는 과제 해설 풀이를 통해, 실무에서 활용되는 디스플레이 속성코드와 내 코드를 비교하면서 복습합니다.



⭐️ 이 강의만의 특장점

👩🏻‍💻 실제 웹사이트 구조를 바탕으로 한 실전 중심의 학습 접근법

Block요소와 inline요소를 단순한 태그로만 공부하며, 활용이 어렵진 않으셨나요? 😢 단순한 '네모 박스' 예제를 넘어, 현실적이고 복잡한 레이아웃을 직접 구현해보며 display 속성을 확실히 이해해보세요!

westagram_example

👩🏻‍🏫 한땀 한땀 자세히 설명해주는 위코드!

코딩은 단순히 핵심 개념만 설명하고 "알아서 이해하세요"라고 넘기는 것은 불친절한 접근입니다. 간단한 레이아웃을 구축하는 것조차도 다양한 배경 지식과 문맥이 필요하기 때문이죠. HTML태그에 따라 달라지는 디스플레이 속성, 헷갈리지 않게 꼭꼭 짚고가요! HTML개념도 같이 짚고 공부하니까, 당황스럽지 않아요! 위코드는 누구나 쉽게 이해할 수 있도록, 하나하나 친절하고 상세하게 설명하며 학습의 문턱을 낮춥니다. 함께 배우면서 "아, 이거였구나!" 하는 깨달음의 순간을 경험해 보세요!

westagram_example

🔑 실습 프로젝트와 상세한 해설풀이 제공

이론 강의가 끝나면! 직접 아래 페이지를 개발해보는 실습 시간이 있어요! 해설 풀이 강의에는 디스플레이 속성에서 활용할 실전 꿀팁도 가득 담겨있어요! 🍯

🙋🏻 질문이 있으신가요?

어려운 부분이 있으신가요? 도움이 필요하세요? 하단의 링크를 통해 위코드 코딩 질문방으로 오세요!
위코드 스태프들이 직접 친절하게 알려드립니다! 🫡
👉 위코드 코딩 질문방으로 들어가기 (비밀번호: wecode)

💻 쉽게 이해되는 3분할 화면

강의나 수업을 들어도 이해가 안되었던 경험 있으시죠? 여러분의 탓이 아닙니다! 코딩은 원래 이해하는것이 굉장히 어렵습니다. 위코드는 여러분이 최대한 쉽게 이해할 수 있도록 모든것을 준비했습니다. 강의 영상의 핵심 내용을 실시간으로 정리해 드리고, 직접 수정하고 실행해볼 수 있는 코드까지 실시간으로 제공하는 위코드만의 코딩 강의 플랫폼에서 재밌고 쉽게 학습하세요!


📍 모바일에서도 쉽게 볼 수 있는 세로 비율의 강의 영상
📍 강의 내용을 이해하기 쉽도록 실시간 핵심 내용 정리
📍 강의 내용 흐름에 맞추어 실시간 업데이트 되는 코드 에디터
📍 직접 수정해보고 실행도 할 수 있는 코드



커리큘럼

미리보기를 통해 콘텐츠를 확인해보세요.

  • Play IconWeflix 레이아웃을 구성 방법 실습 풀이
  • Play Icon웹사이트의 기본 헤더 레이아웃 실습 풀이
  • Play Icon웹사이트의 기본 배너와 메인영역 레이아웃 실습 풀이