[W7D1] | HTML, CSS, 자바스크립트 웹프론트엔드분석 | 코드 스테이츠 PMB10

웹프론트엔드분석이미 PM부트 캠프 7주째에 들어갔다.6주째의 데이터 분석 실무에 이어이번 주는 PM에 필요한 개발 지식을 배우고 있다.웹 사이트를 디자인 또는 개발할 때 꼭 알아야 할 3가지, HTML, CSS, JavaScript입니다.유능한 PM이라면 개발에 대해서 잘 몰라도, 3개 기술의 차이를 알고 있으면 개발 과정에서 일어나는 것에 대한 이해가 훨씬 쉽겠지.HTML, CSS, JavaScript의 차이가 궁금하다!웹 사이트는 일종의 내용이 유동적으로 움직이는 문서로 크게 3가지 기술, HTML, CSS, JS로 나뉜다.각각의 기술을 사람의 몸에 비유하면 HTML은 문서의 뼈대인, CSS는 문서를 만드는 피부, JS는 문서를 작동시키는 근육과 신경으로 볼 수 있다.HTML vs CSS vs JavaScriptHTML의 역할:구조 작성(HTML:Hypertext Markup Language)컨텐츠의 레이아웃 제어 Web페이지 디자인을 위한 구조 제공 모든 Web페이지의 기본 빌딩 블록 CSS의 역할:Web사이트 스타일 지정(CSS:Cascading Style Sheets)Web페이지 요소로 스타일 적용 JavaScript의 역할:상호 작용 증가 Web페이지에 상호 작용 더 복잡한 기능 및 기능 처리 기능을 향상시키는 프로그래밍 코드 프론트 엔드에 관련된 개발 직무 이번 과제는 분석하고 싶은 Web베이스 서비스를 하나 선택하여 해당하는 내용입니다.이번 과제의 타깃은 넷플릭스요!넷플릭스 랜딩 페이지HTML 요소 HTML은 어떤 내용이 어떤 요소로 구성되는지 각 요소의 이름을 붙인 문서를 표현하는 뼈대다. <요소명> 내용</요소명>과 같은 형태로 문서를 이루는 내용이 어떤 요소인지를 나타낸다.처출 – https://javascript.oopy.io/web-basic넷플릭스 랜딩 페이지 HTML 구조입니다.1)Doctype(DTD)-문서의 HTML버전 지정->표준은 HTML52)html-문서의 전 범위 지정->HTML문서의 시작과 종료를 브라우저에 알리는->속성 lang에서 지정하는 문서의 언어 명시(en, ko)3)head-문서의 정보를 나타내는 범위->Web브라우저가 해석할 제목, 설명, 사용할 파일의 위치, 스타일(CSS)등의 보이지 않는 정보를 작성한다.4)body-문서 구조를 나타내는 범위->사용자 화면을 통해서 보이는 로고, 헤더, 바닥 글, 내비게이션, 메뉴, 버튼, 이미지 같은 웹 페이지의 보이는 구조를 작성한다.예)img태그(화면에 이미지 출력), a태그(클릭하면 페이지 이동), CSS요소 분석 CSS는 HTML이 어떤 모습으로 표현되거나 각 요소의 표시 방식을 정의한 일종의 피부이다.요소 이름{내용} 같은 형태로, 각 요소 이름 또는 규칙에 의해서 어느 요소는 어느 정도 크기에서 어떤 배경을 가지고 어떤 위치에 표시되는지를 명시할 수 있다.fontsize를 조절해 본(16->30에서) 글꼴이 커진 것을 알 수 있다. CSS 요소를 삭제하면 이렇게 변신.. 지켜주지 못해서 미안해.넷플릭스 랜딩 페이지CSS 요소를 삭제한 넷플릭스 랜딩 페이지자바스크립트 요소 분석 웹페이지에 상호작용이 일어나는 활동으로 복잡한 기능을 처리한다. 넷플릭스로 로그인해보니 뭔가 돌아간다. 자바스크립트와 자바는 햄과 햄스터처럼 다르다는 것을 기억해둬.. 더 자세한 이야기는 나중에결론은!! 1. 먼저 HTML을 통해 기본적인 element(텍스트, 링크 등)를 적용한다. 2. CSS를 이용해 element에 디자인을 입혀 색상, 크기, 배치 등을 결정한다. 3. 이미지를 다운로드 할 4. 화면이 로딩될 때 내 페이지 정보를 API 서버에 요청하고 버튼을 클릭하면 button에 적용된 자바스크립트 코드가 실행된다. 이렇게 브라우저 화면에 웹을 그리는 전체적인 과정을 브라우저 렌더링이라고 한다. 기억해 둘 것! HTML:골조를 하고 CSS:디자인을 한 후 자바스크립트:웹의 모든 동작을 처리한다.과제를 마치면서.. 개발자, 기획자, 디자이너와 함께 일하는 PM이 가져야 할 기본적인 개발 지식에 대해 배울 수 있어서 좋았다. F12 개발자 툴로 이것저것 눌러보니 의외로 재미있었다. 다음주는 어떤 데일리 과제가 나올지 기대된다 하하하개발자/기획자/디자이너 2행시HTML, CSS, 자바스크립트를 사용하여 간단한 웹 사이트를 구축하다HTML, CSS 및 자바스크립트를 사용하여 간단한 웹 사이트 구축 – Visual Studio Code를 사용하여 웹 개발을 시작하고 HTML, CSS 및 자바스크립트를 사용하여 웹 사이트를 구축하고 브라우저 내 개발자 도구를 사용하여 work.docs.microsoft.com 을 확인합니다.웹의 기초 설명입니다.웹 기반 설명 기초 설명은 프로그래밍을 모르는 편이 봐도 이해할 만큼 간단한 설명을 명시하는 것을 목적으로 하고 있습니다.그 후 이 프로젝트를 통해서 공부하려는 분을 위한 정보도 함께 정리됩니다.컴퓨터와 코딩은?HTML과 CSS란?컴퓨터가 개발된 뒤 인터넷이 개발되고, 그 인터넷은 컴퓨터와 컴퓨터를 연결하는 데 성공했습니다.현재도 이 인터넷은 브라우저를 통해서 Google 같은 웹 사이트에 접속하는 형태로 사용되는데, 우리가 자주 쓰는 Chrome, 엣지 Whale, InternetExpl···javascript.oopy.io#코드스테츠 #PMB10 #웹프론트엔드 #HTML #CSS #자바스크립트