3개의 프로젝트를 통해 HTML, CSS, JavaScript 기술을 스페인어로 연습하기

_PROJECT BUILDING_는 코딩 배우는 것에 매우 중요합니다. 프로젝트를 만들면 포트폴리오를 확장하고 기술을 새로운 상황에 어떻게 적용하는지 배웁니다.

우리는 _freeCodeCamp.org Spanish YouTube channel_에 2시간의 코스를 공개했는데, HTML, CSS, JavaScript로 3개의 프로젝트를 만드는 것을 단계별로 안내합니다. 반응형 네비게이션 바와 드롭다운 메뉴, 슬라이더, 커스텀 모달을 갖춘 랜딩 페이지를 만드는 과정에서 기술을 연습할 수 있습니다.

스페인어를話하는 친구들이 있다면 이 기사의 스페인어 버전을 공유해주시기 바랍니다.

이 강의를 주는 Jordan Alexander Cruz Garcia는 웹 개발자로, 지식을 공유하고 CSS의 놀라운 세계에 대해 다른 사람들을 가르치는 것을 사랑합니다.

💡 팁: 코스는 HTML과 CSS에 중점을 둔다는 것에 유의하시고, 상호 작용을 구현하기 위해 JavaScript의 기본 지식이 필요합니다.

HTML, CSS, JavaScript

HTML은 HyperText Markup Language을 의미하고 CSS는 Cascading Style Sheets를 의미합니다. HTML은 웹사이트의 구조와 콘텐츠를 제공하는 반면, CSS는 콘텐츠가 어떻게 표시되는지 결정합니다. 폰트, 색상, 레이아웃, 스페이싱, 애니메이션과 같은 웹사이트의 시각적 요소를 제어합니다.

CSS로 다양한 화면 사이즈에 대応하는 스타일과 레이아웃을 쉽게 생성할 수 있으며, 이를 사용하면 데스크톱, 태블릿, 모바일 기기에서도 멋진 웹사이트를 만들 수 있습니다.

💡 팁: 다양한 화면 사이즈에 대응하는 웹사이트는 “대응型 웹사이트”라고 불립니다.

usually CSS를 외부 파일로 쓰고, 이를 “스타일시트”라고 부릅니다. 그리고 HTML 파일에 이 스타일시트를 연결하여 CSS 선택자와 속성 기반으로 모든 스타일을 HTML 요소에 적용합니다.

웹사이트의 내용과 표현을 분리하는 것은 매우 유용합니다. 이는 프로젝트 구조를 더 유지하고 rendering process를 더 효율적으로 실행할 수 있습니다. BROWSER는 구조를 더 빨라게 렌더링하며 백그라운드에서 CSS 스타일을 다운로드합니다.

기본적으로, CSS는 오늘날 보이는 美学적, 시각적, 사용자 riendly 웹사이트를 생성하는 중요한 도구입니다.

JavaScript는 웹사이트의 인тераctivity를 추가합니다. 평범한 요소를 인터랙티브 요소로 만들어 魅力있는 사용자 经验를 생성합니다.

HTML, CSS, and JavaScript Projects in Spanish

Awesome. Now that you know more about HTML, CSS, and JavaScript, let’s check out the projects that you will build during the course.

You will start by building a navigation bar with dropdown menus. This navigation bar will be responsive, so it will expand or shrink to fit the size of the screen. If the screen is too small, it will automatically transform into a sidebar.

💡 팁: 주요 옵션은 항상 표시됩니다. 사용자가 “정보” 또는 “프로젝트”를 클릭하면 추가 옵션이 있는 드롭다운 메뉴가 표시됩니다.

데스크탑 버전

여기에서 데스크탑 버전을 볼 수 있습니다.