오늘 배운 내용은 웹 개발 분야에서 매우 중요한 세 가지 주제에 초점을 맞추었습니다: 영화 포스터 하단에 영화 제목을 위치시키기, 별점을 위치시키기, 그리고 후기 데이터를 가져오는 기술입니다. 이러한 과정을 통해, 웹 페이지 내에서의 요소 배치, CSS를 이용한 스타일링, 그리고 비동기적 방식으로 데이터를 불러오는 방법을 실습하게 되어, 이론뿐만 아니라 실제적인 적용 능력도 향상시킬 수 있었습니다.
-
영화 포스터 하단에 제목 위치시키기: 이 섹션에서는 영화 포스터 이미지 바로 아래 영역에 영화 제목을 어떻게 효과적으로 배치할 수 있는지에 대해 상세히 배웠습니다. HTML의 구조를 설계하고, CSS를 활용하여 요소들이 원하는 위치에 정확하게 나타나도록 하는 방법에 대한 실습을 진행했습니다. 이 과정에서는 특히, 제목의 크기, 폰트, 색상 등을 조정하여 사용자의 시선을 끌 수 있는 디자인 요소에 대해서도 깊이 있게 다루었습니다.
-
별점 위치시키기: 이 부분에서는 영화의 평점을 사용자에게 효과적으로 전달하기 위해 별점을 어떻게 디자인하고 위치시킬 수 있는지 배웠습니다. 별 모양의 아이콘을 사용하거나, 숫자로 평점을 표시하는 두 가지 방법에 대해 학습했으며, 각각의 방법이 가진 시각적 효과와 사용자 경험에 미치는 영향에 대해서도 논의했습니다. CSS를 이용해 별점의 위치, 크기, 간격 등을 세밀하게 조절하는 방법에 대한 실습을 통해, 보다 전문적인 웹 페이지 디자인 기술을 익혔습니다.
-
후기 데이터 가져오기: 영화 후기 데이터를 비동기적으로 불러오는 과정은 웹 개발에서 매우 중요한 부분입니다. JavaScript의
fetch함수를 사용하여 외부 API로부터 후기 데이터를 가져오는 방법을 배웠으며, 이 데이터를 웹 페이지에 실시간으로 표시하는 방법에 대해 실습했습니다. 후기 텍스트의 색상, 크기, 폰트 스타일 등을 CSS를 통해 조절함으로써, 사용자에게 보다 읽기 쉽고 이해하기 쉬운 형태로 정보를 제공하는 방법에 대해서도 학습했습니다.
오늘 배운 내용을 통해, 웹 사이트의 사용자 경험을 향상시키고, 사용자가 원하는 정보를 보다 쉽고 빠르게 접근할 수 있도록 하는 웹 개발의 핵심 요소들에 대한 이해를 한층 더 깊게 할 수 있었습니다. CSS와 JavaScript의 강력한 기능을 활용하여, 웹 페이지를 보다 동적이고, 시각적으로 매력적인 대상으로 변모시키는 방법을 배울 수 있어 매우 유익한 시간이었습니다.
