CSS Position, 기초부터 응용까지 탄탄하게

CSS Position, 기초부터 응용까지 탄탄하게

3,000원

6

CSS Position, 기초부터 응용까지 탄탄하게

CSS 포지션 속성을 익히고, static, relative, absolute, fixed, sticky를 활용하여 6가지 웹 페이지 레이아웃을 만들어봅니다. 실전 예제로 쉽게 이해하고 바로 적용해보세요!

heart icon

찜하기

share icon

공유하기

🚀 강의 목적과 학습 목표

CSS 포지션과 레이아웃의 기초를 배웁니다.

웹 디자인과 개발을 시작하다 보면, 요소의 위치를 다루는 방법이 얼마나 중요한지 깨닫게 됩니다. CSS 포지션(position) 속성은 웹 요소를 배치하고 정렬하며, 다양한 레이아웃을 만드는 데 핵심적인 역할을 합니다. 하지만 이를 프로젝트에 적용하려 하면 relative, absolute, fixed, sticky와 같은 속성 간의 차이를 명확히 이해하지 못해 혼란스러울 때가 있죠. 요소를 어디에 배치해야 할지, 배경 위에 텍스트를 어떻게 겹치게 할지 고민이 많아질 수 있습니다. 걱정하지 마세요!
이 강의는 CSS 포지션 속성을 명확히 이해하고, 실전 웹사이트 레이아웃에서 이를 활용하는 방법을 체계적으로 배울 수 있도록 도와드립니다.
기본 개념부터 배너, 팝업, 고정 헤더와 같은 실제 UI 구성 요소의 구현 사례까지 함께 학습하며, 여러분의 프로젝트에 바로 적용할 수 있는 자신감을 키워보세요! 😊


📍 CSS 포지션의 기본 개념 이해: HTML 요소의 위치를 결정하는 CSS 포지션(position) 속성의 기본 동작을 학습하고, static, relative, absolute, fixed, sticky가 어떻게 사용되는지 이해합니다.
📍 포지션 속성의 실전 적용 방법: 요소를 배치하고 레이아웃을 조정하기 위해 포지션 속성을 효과적으로 사용하는 방법을 배웁니다.
📍 실전 프로젝트에서의 포지션 활용: 배너 텍스트 위치 조정, 고정 헤더, 팝업 창 등 실제 웹사이트 UI 요소를 통해 포지션 속성을 실전에서 적용하는 역량을 키웁니다.

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

📍 HTML과 CSS의 기본 개념은 알고 있지만, CSS 포지션 속성을 실전에서 활용하는 방법을 배우고 싶은 분
📍 relative, absolute 등 포지션 속성을 이해는 하지만, 실제 웹사이트 레이아웃에서 어떻게 적용할지 고민 중인 분
📍 기본적인 웹 디자인을 넘어, 포지션 속성을 활용해 배너, 팝업, 고정 헤더와 같은 UI를 설계하고 싶은 분
📍 포지션 속성을 통해 깔끔하고 사용성 높은 UI를 만들며, 실무 웹 개발 역량을 강화하고 싶은 분

🎁 강의는 이렇게 구성돼요

📍 웹 개발에서 가장 많이 사용되는 CSS 포지션(position) 속성의 실전 활용법에 집중해요!
📍 포지션 속성을 활용해 배너, 팝업, 고정 헤더 등 실제 웹 페이지 요소를 설계하는 방법을 배울 수 있어요!
📍 요소의 위치를 조정하여, 반응형 디자인에서도 깔끔하고 안정적인 레이아웃을 구현할 수 있어요!

Chapter 1: CSS 포지션 기초를 활용한 웹사이트 header와 footer 만들기

HTML 요소의 기본 배치를 담당하는 static 속성과 기본 레이아웃 구조를 학습합니다. 헤더와 푸터를 설계하며, 웹 페이지의 전반적인 구조를 설정해봅니다.


Chapter 2: 배너를 활용한 relativeabsolute 속성 이해하기

배너 디자인을 통해 relativeabsolute 속성의 관계를 학습합니다. 배경 이미지 위에 텍스트를 올리고, 부모와 자식 요소 간의 배치 방식을 실습합니다.


Chapter 3: 포지션 속성을 활용한 텍스트와 버튼 겹치기

이미지 위에 텍스트와 버튼을 겹치는 디자인을 구현합니다. absolutez-index를 사용하여 요소를 시각적으로 배치하고, 깔끔한 레이아웃을 설계합니다.


Chapter 4: 포지션 속성을 활용한 팝업창 만들기

fixedz-index를 활용해 화면 중앙에 고정되는 팝업창을 설계합니다. 팝업 배경(오버레이)과 콘텐츠의 계층 구조를 이해하고, :target 선택자를 통해 팝업을 열고 닫는 방법을 학습합니다.


Chapter 5: 고정 푸터와 스크롤 동작을 구현하기

stickyfixed 속성을 사용해 스크롤 시에도 상단에 고정되는 푸터를 설계합니다. 사용자가 편리하게 페이지를 탐색할 수 있도록 실전 UI를 구현합니다.


Chapter 6: 반응형 디자인과 최종 프로젝트 완성하기

지금까지 배운 static, relative, absolute, fixed, sticky 속성을 종합적으로 적용해 최종 프로젝트를 완성합니다. 반응형 웹사이트와 다양한 레이아웃을 포함해 실제로 사용 가능한 웹사이트 구조를 만들어 봅니다.


⭐️ 이 강의만의 특장점

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

코딩은 단순히 핵심 개념만 설명하고 "알아서 이해하세요"라고 넘기는 것은 불친절한 접근입니다. 간단한 배열을 적용하는 것조차도 다양한 배경 지식과 문맥이 필요하기 때문이죠. 위코드는 누구나 쉽게 이해할 수 있도록, 하나하나 친절하고 상세하게 설명하며 학습의 문턱을 낮춥니다. 함께 배우면서 "아, 이거였구나!" 하는 깨달음의 순간을 경험해 보세요!

🛠️ 실제 웹사이트 구조를 바탕으로 한 실전 중심의 학습 접근법

이 강의에서는 실제 웹사이트 구조를 기반으로 한 실전 중심의 학습 접근법을 제공합니다. 가상의 예제가 아닌, 현업에서 실제로 사용되는 기능들을 예제로 들어 박스모델의 모든 것을 가르쳐 드립니다.


🙋🏻 질문이 있으신가요?

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

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

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


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




커리큘럼

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

  • Play Icon고정 푸터와 스크롤 동작을 구현하기
  • Play Icon반응형 디자인과 최종 프로젝트 완성하기