Written by nodejs-style
on 

HTML, CSS 및 자바스크립트 웹개발의 완전한 초보자 가이드

HTML, CSS 및 자바스크립트 웹개발의 완전한 초보자 가이드

이 글은 React, NodeJS와 같은 보다 발전된 주제로 넘어가기 전에 HTML, CSS, 자바스크립트를 익혀 웹 개발을 시작하고자 하는 사람들을 위한 것이다.

프로그래밍 지식이 없다고 가정하겠습니다. 또한 웹 페이지 프로그래밍 방법 대신 그 이유에 대해 알아보도록 하겠습니다. 더 깊은 지식을 원하거나 이 기사에서 명확하게 설명되지 않은 것이 있다면 W3Schools 사이트에서 더 많은 것을 배울 수 있습니다.

이 글의 마지막에, 더 어려운 주제를 다루고 싶다면 몇 가지 링크를 드리겠습니다.

HTML은 Hypertext Markup Language의 약어이며 웹 페이지를 만드는 표준입니다. HTML은 CSS가 웹 페이지의 스타일이나 모양을 정의하고 자바스크립트가 웹 페이지에 더 많은 상호작용을 추가하는 웹 페이지의 구조를 설명한다.

HTML 요소는 웹 브라우저에게 무엇을 기대해야 하는지 알려준다. 예를 들어, "이것은 단락입니다. 이것은 테이블이고, 이것은 이미지입니다." 태그와 속성을 사용하여 이 작업을 수행합니다.

HTML 태그는 두 부분(일부 예외 포함)으로 구성되며 요소를 정의합니다. 시작 태그와 끝 태그입니다. 태그는 끝 태그에도 슬래시가 있는 삼각형 괄호 사이에 단어를 사용하여 만들어집니다.

이 예에서는

와

가 태그이고, 이것이 내용입니다. 태그 간의 내용 자체는 새로운 요소일 수 있습니다. 우리는 이것을 보금자리라고 부릅니다.

매우 기본적인 HTML 문서에는 상용구 코드가 있습니다. 예시를 보고 모든 것이 무엇이고 무엇을 조심해야 하는지 알아보자.

첫 번째 행은 그러한 예외 중 하나입니다. 은 브라우저가 HTML5 문서를 보고 있음을 알려줍니다. 끝 태그가 없습니다.

이 문서를 자세히 살펴보면 페이지 시작을 정의하는 태그 내에 <제목>과 <본문>이 있는 것을 볼 수 있습니다.

HTML 문서의 <머리>는 웹 페이지의 메타데이터를 정의합니다. 사용자가내의 대부분의 코드를 볼 수 없습니다. 그러나 사용자가 <제목>을 볼 수 있다. Google Chrome, Microsoft Edge, Firefox 및 기타 모든 브라우저는 탭에서 이 제목을 사용합니다.

다음으로, <본문> 요소는 페이지의 모든 시각적 요소를 정의합니다. 그 안에서 우리는

를 사용한 간단한 단락과 함께

참고: 처음부터 끝까지 모든 태그와 그 사이에 있는 모든 태그가 요소입니다.

HTML 문서는 간단한 기본 메모장을 사용하여 만들 수 있지만 올바른 IDE를 사용하는 것이 좋습니다. 통합 개발 환경. 기본적으로 자동 완성 및 코드 강조 표시와 같은 개발자를 위한 도구를 갖춘 텍스트 편집기입니다.

웹 개발을 위한 좋은 옵션은 Visual Studio Code 및 Notepad++입니다. 지금은 학생증이 있는 웹스톰을 사용하고 있지만, 이런 간단한 프로젝트에는 다소 무리가 있을 수 있습니다.

이 중 하나를 설치하고 index.html라는 새 파일을 만듭니다.

위의 코드 조각에서 코드를 복사하여 파일을 어딘가에 저장하면 HTML 파일을 두 번 클릭하여 원하는 웹 브라우저에서 열 수 있습니다.

정적 콘텐츠를 제공하기 때문에 웹 서버 없이도 HTML 파일을 실행할 수 있습니다. 실행할 서버측 코드가 없기 때문에 서버가 필요하지 않습니다.

앞서 언급했듯이 요소에는 태그와 속성이 포함될 수 있습니다. 속성이란 무엇이며, 어떻게 속성을 추가할까요?

속성은 요소가 가질 수 있는 추가 속성입니다. 이것은 요소에 따라 스타일, href, alt, 그리고 많은 다른 것들이 될 수 있습니다. 속성의 가장 일반적인 예 중 하나는 앵커 태그입니다.

하이퍼링크에는 태그가 사용됩니다. https://google.com과 같은 다른 웹 페이지로 이동합니다. 이 정보는 href 속성을 사용하여 추가할 수 있습니다.

본문 요소에 이 코드줄을 추가하고 페이지를 다시 로드합니다. 이제 Google로 이동할 링크를 볼 수 있습니다.

요소에 스타일을 추가할 수도 있습니다. 이것은 따옴표 사이에 일부 CSS 코드가 있는 스타일 속성을 사용합니다.

이것들은 HTML 개발의 기본이다. 이 웹사이트에서 더 많은 것을 읽을 수 있다. 또한 HTML과 함께 기본 CSS, 자바스크립트와 같은 고급 주제로 넘어갈 예정이므로 이 기사로 넘어가도 됩니다.

모든 주요 웹 브라우저에는 개발자가 예기치 않은 동작이나 버그에 직면했을 때 사용할 수 있는 도구가 있습니다. 이러한 도구를 개발자 도구라고 하며 웹 페이지를 마우스 오른쪽 단추로 클릭하고 "인스펙트 요소" 또는 "인스펙트"를 클릭하여 액세스할 수 있습니다. 일반적인 바로 가기는 키보드에서 F12를 누르는 것입니다.

첫 번째 탭인 "Elements"는 웹 페이지의 앞 끝을 개발하는 데 유용합니다. "콘솔" 탭은 주로 자바스크립트와 백엔드 개발에 사용된다. 다른 탭은 아직 유용하지 않으며 네트워크 및 성능과 관련이 있습니다.

요소 탭에서 HTML 구조의 표현을 볼 수 있습니다. 이를 DOM 또는 문서 개체 모델이라고 합니다. 이 항목은 JavaScript에 대해 이야기할 때 더 자주 언급됩니다.

이미지 오른쪽에는 웹 페이지의 스타일과 CSS를 확인할 수 있는 도구가 있습니다. 이것은 웹 디자인에 유용합니다.

개발자 도구를 사용하여 영구적으로 변경할 수는 없지만 임시 변경은 가능합니다. 일부 CSS 값을 변경하거나 DOM에서 요소를 삭제/변경해 보십시오. 페이지를 다시 로드하면 페이지가 다시 정상으로 돌아갑니다.

웹 페이지의 시각적 구조는 대부분 다른 컨테이너 또는 일부 요소가 배치된 영역으로 구성됩니다. 맨 위에 검색 기능이 있는 막대, 링크가 있는 사이드바 또는 가장 중요한 콘텐츠가 들어 있는 기본 컨테이너를 생각해 보십시오. 이것들은 대부분 div 요소로 이루어져 있다.

왼쪽에는 웹 페이지를 위한 간단한 레이아웃이 있습니다.

맨 위 표시줄, 사이드바 및 기본 내용 정사각형.

이 모든 항목은 동일한 웹 페이지의 [본문] 요소에 있습니다. 하지만 그들은 다르다. 그래서 우리는 <본문>에 여러 요소를 넣지만, 이 내용들을 나누기 위해 어떤 요소를 추가해야 할까요?

이것은 대략 우리의 뼈대, 우리의 컨테이너 목록일 것입니다. 우리는 단지 그것들을 올바른 순서로 만들기 위해 약간의 기본적인 스타일링만 더하면 됩니다. 왜냐하면 반환되는 페이지를 체크 아웃하면 모든 div 요소가 서로 아래에 있기 때문입니다. div에는 디스플레이 값이 있습니다. 검사 요소를 사용하여 이 값을 확인할 수 있습니다. 기본값은 블록이며, 이는 상위 요소의 전체 너비에 걸쳐 블록을 작성함을 의미합니다. 상단 표시줄에는 이러한 기능이 있어야 하지만 사이드바 및 컨텐츠는 인라인 또는 인라인 블록으로 구성되는 것이 더 나을 수 있습니다. 스타일 속성을 사용하여 두 개의 하위 요소가 서로 옆에 존재할 수 있도록 인라인 블록으로 표시 값을 설정합니다. 상단 표시줄은 기본적으로 블록으로 유지됩니다. 또한 모든 요소에 배경색을 제공하여 위의 이미지와 비슷해 보입니다. 보셨겠지만, 원소가 정확하게 정렬되지 않았습니다. 그들은 틈을 남긴다. 이는 요소 내부에 있는 요소의 기본 여백과 패딩 값 때문이다. 이것은 우리가 CSS를 사용하여 우리의 요소들을 좀 더 깊게 스타일링할 필요가 있다는 것을 의미한다. # CSS를 사용하여 웹 페이지 스타일 지정 우리는 이미 스타일 속성을 사용하여 코드에 일부 CSS를 사용했습니다. 하지만 보시다시피 스타일 속성을 사용하여 모든 스타일을 "인라인"으로 작성하면 곧 흉해질 수 있습니다. 이것이 우리가 CSS 파일로 이동하고자 하는 이유이다. Visual Studio Code와 같은 IDE를 사용하는 경우 style.css라는 HTML 파일과 동일한 폴더에 파일을 추가할 수 있습니다. 이 파일에서는 동일한 유형의 모든 요소에 적용되는 스타일을 정의하거나 클래스 및 ID를 사용하여 특정 요소에 적용할 수 있습니다. HTML 파일의 머리 부분에 다음 줄을 추가합니다. 이렇게 하면 두 파일이 함께 연결되므로 HTML 파일의 스타일시트에 있는 스타일을 사용할 수 있습니다. 이제 몇 가지 기본 CSS와 웹 페이지에서 이를 사용하는 방법을 살펴보겠습니다. 참고: 별도의 CSS 파일 대신, 머리에 스타일 요소를 사용할 수 있습니다. 스타일 요소와 별도의 파일에 동일한 방식으로 CSS를 쓸 수 있습니다. ## 기본 CSS 구문 CSS 구문은 매우 쉽고 많은 차이가 없지만 기억해야 할 사항이 있습니다. ```js ## CSS .h1 {...} /* This is applied to a class called "h1" */ h1 {...} /* This is applied to the h1 element */ #h1 {...} /* This is applied to an element with "h1" as id */ ## HTML ## This is with a class This is without a class or id This is with an id ## CSS syntax element { key: value; key: value; } ``` CSS는 점이나 해시태그를 사용하여 클래스나 ID를 나타냅니다. 태그 대신 대괄호 {}을(를) 사용하여 중간에 원하는 항목을 열고 닫습니다. ```js /* Sample styled class */ .large-red-text { font-size: 32px; font-weight: bold; color: red; } ``` 괄호 사이에서는 스타일을 정의합니다. 이 작업은 키가 수백 개의 표준 이름 중 하나이고 값이 유효해야 하는 키-값 쌍을 사용하여 수행됩니다. 다양한 값과 스타일에 대해 여기서 읽을 수 있습니다. 심지어 저와 다른 웹 개발자들도 그들이 무의미하게 쓰고 있는지, 키가 유효한지 확인할 필요가 있습니다. 크기, 무게 및 색상과 같은 글꼴 및 텍스트 기반 스타일을 구분하기 어려울 수 있습니다. 하지만 시간이 지나면 좋아질 거예요. /* */가 있는 줄은 주석입니다. 이것들은 스타일에 영향을 주지 않고 읽기 쉽게 도와줍니다. 예를 들어, 특정 스타일에 사용되는 주석을 달 수 있습니다. 마지막으로 모든 행이 세미콜론으로 끝나는 것을 보셨을 것입니다. 이 작업은 브라우저가 줄의 끝임을 알리기 위해 수행됩니다. 또한 이런 식으로 모든 것을 한 줄로 유지할 수 있지만 읽을 수는 거의 없습니다. ## 패딩, 여백 및 테두리 테두리 특성과 함께 패딩 및 여백은 알기는 유용하지만 실제로 마스터하기는 어렵습니다. 개발자 도구를 사용하는 경우 다음 사각형을 봤을 수 있습니다. 중앙에 있는 정사각형은 요소이며, 이 경우 여백과 패딩을 제거한 태그 중 하나입니다. 값이 있으면 여기에 표시됩니다. - 요소에 패딩이 있습니다. - 여백이 요소를 벗어났습니다. - 테두리는 패딩과 여백 사이에 있습니다. 테두리 색, 배경 색, 패딩, 마진과 테두리 너비를 사용하여 패딩, 여백 및 테두리의 여러 속성을 확인하여 다른 요소 및 그 자체에 어떻게 반응하는지 확인할 수 있습니다. ## 포지셔닝 포지셔닝은 웹 개발에서 거의 틀림없이 가장 어려운 것 중 하나이다. 특히 응답 웹 페이지를 작성할 때 그렇습니다. 하지만 지금은 기본만 차릴게요. 포지셔닝 시 위치 CSS 속성을 알아야 합니다. 여기에는 정적 상대 고정 절대 고정 값(여기서 정적 값은 기본값)의 5개 값 중 하나가 있을 수 있습니다. - Relative는 정상 위치와 비교하여 배치됩니다. - 고정은 뷰포트를 기준으로 배치됩니다. 즉, 페이지가 스크롤되더라도 항상 동일한 위치에 유지됩니다. 상단, 오른쪽, 아래쪽 및 왼쪽 속성은 요소를 배치하는 데 사용됩니다. - Absolute는 (고정된 것과 같이 뷰포트에 상대적으로 위치하는 대신) 가장 가까운 위치에 있는 상위에 대해 배치됩니다. - 스티키는 사용자의 스크롤 위치에 따라 배치됩니다. 스티커 요소는 스크롤 위치에 따라 상대 요소와 고정 요소를 전환합니다. 뷰포트에서 주어진 오프셋 위치가 충족될 때까지 상대적인 위치에 배치된 다음 제자리에 "스틱"됩니다(예: 고정됨). W3 Schools에서 가져왔습니다. 이 모든 것이 기억하기 매우 어려워 보이지만, 몇 번 사용해 보면 분명해질 것입니다. 우리가 그것들을 어떻게 사용할 수 있는지 봅시다. 그러면 웹 페이지의 오른쪽 아래에 디브가 생성됩니다. 페이지 크기를 조정해 보십시오. 페이지 크기는 구석에 있습니다. 위치 때문에 그대로 있습니다. 고정되어 있습니다. 오른쪽과 아래쪽을 사용하기 때문에 코너에서 약간 공간이 있습니다. 여기에도 마진을 사용할 수 있습니다. 만약 당신이 절대적인 위치로 바꾼다면, 그것은 똑같이 할 것이지만, 왜 그럴까요? 스크롤과 관련이 있습니다. 화면을 스크롤하면 고정 요소가 화면에 남아 있고 절대 요소가 화면에서 사라집니다. 높이 1000px를 다른 요소에 추가하여 스크롤할 수 있습니다. ## 색상 색은 모든 웹사이트의 큰 부분을 차지합니다. 코카콜라 캔이 그렇게 밝고 빨갛지 않다면 누가 알아보겠어요? 아마 누구나, 하지만 여전히, 색깔은 웹사이트를 만드는 데 있어 큰 부분을 차지한다. 지금까지 우리는 빨강, 파랑 등과 같은 색을 사용해 왔지만, 여러분이 여기서 찾을 수 있는 전체 목록이 있습니다. 하지만 네덜란드 국기의 빨간색은 어디에 있을까요? 그것은 거기에 없다. 그렇기 때문에 우리는 HEX 코드와 다른 값을 사용하여 고유의 색상을 추가하는 더 많은 방법을 가지고 있습니다. 다른 색상을 추가하는 가장 쉬운 방법은 16진수 코드를 사용하는 것입니다. 16진수 `숫자`는 0에서 F로, 16개의 서로 다른 값입니다. FF와 같이 2개를 더하면 255가 된다. 이것이 바로 고전적인 RGB 육각형의 색깔로 만들어진 것입니다. 0부터 255까지의 세 개의 값이 16진수로 표시됩니다. CSS 코드를 머리나 스타일시트에 넣으십시오! 또한 이러한 요소를 스타일링하기 위해 여러 클래스를 사용하고 있습니다! 클래스 속성에 단어를 추가하고 스타일시트에 추가하기만 하면 됩니다. 이것은 스타일을 재사용 가능한 작은 부분으로 나눌 수 있는 좋은 방법입니다. 하지만 이것이 웹 페이지에 색을 추가하는 유일한 방법은 아닙니다. HSL 및 전체 RGBA 값을 사용할 수도 있습니다. 이 페이지에서 그것에 대해 읽을 수 있습니다. 제가 개발자로 있을 때, 저는 다른 모든 것들보다 16진수 표기법을 더 자주 접했습니다. 필요한 경우 16진수로 변환하는 것도 매우 쉽습니다. # JavaScript를 사용하여 웹 페이지에 상호 작용 추가 이제 가장 어려운 부분으로 들어가겠습니다. 상호작용성. 웹 페이지가 제대로 보이지 않을 수도 있지만, 잘 따라했다면, 이제 기본 사항도 정리되어 있으므로 멋진 것을 만들 수 있을 것입니다. 또한 웹 개발 지식을 위한 최고의 리소스 중 하나를 살펴보았습니다. W3 학교. 웹 페이지에 대한 상호 작용은 자바스크립트에서 수행됩니다. 자바스크립트 또는 줄여서 JS는 스크립트 언어이다. 버튼과 상호 작용하고 DOM을 조작하는 것과 같이 HTML과 CSS가 결합된 것보다 훨씬 더 많은 기능을 제공한다. 서버측 개발을 위해 NodeJS를 통과할 계획이라면 웹 개발 숙련도에 매우 좋은 단계가 될 것입니다. 또는 React와 같은 프런트 엔드 라이브러리도 있습니다. 하지만 그것은 지금 중요하지 않다. ## 첫 번째 코드 작성 자바스크립트는 CSS와 마찬가지로 HTML 파일 자체 내에서 또는 다른 파일인 .js 파일에서 수행될 수 있다. HTML에서는 <스크립트> 태그가 있습니다.

요소는 이 작업을 위한 것이다. div 요소는 컨테이너를 만들기 위해 스타일링할 수 있는 보이지 않는 요소입니다. div 요소는 웹 페이지의 분할 또는 섹션을 정의합니다.

object.subObject.subSubObject.func()

괄호()를 사용하여 함수를 호출합니다. 이 괄호 안에 매개 변수를 넣습니다. 나중에 기능을 시작하겠지만, 콘솔.log에 무슨 일이 일어나고 있는지 알 수 있도록 하기 위한 것입니다. HTML 내부가 아닌 외부 파일에서 코드를 실행하려면 JS 파일을 만들어 스크립트 태그를 사용하여 HTML로 가져와야 합니다. 이 작업은 일반적으로 하중 시간을 줄이기 위해 차체 요소 하단에서 수행됩니다. 스크립트를 곧 로드하는 것이 도움이 되는 경우 헤드에도 추가할 수 있습니다. ## 변수 콘솔 로그는 이미 살펴봤으니 이제 실제 프로그래밍에 대해 알아보겠습니다. 로그 기능으로 무엇이든 기록할 수 있으며, "Inspect Element"를 사용하여 액세스할 수 있는 브라우저의 콘솔에 표시됩니다. 변수는 프로그래밍의 필수적인 부분이다. 그들은 무엇이든 될 수 있다. 프로그램 실행 중에 변경할 수 있습니다. 그것들은 여러분이 어떤 것의 가치가 무엇인지 모를 때 가지고 있으면 좋습니다. 사용자 이름과 같습니다. 변수는 유효한 데이터 유형일 수 있습니다. JS에서 가장 기본적인 데이터 유형은 숫자와 문자열입니다. 문자열은 따옴표로 둘러싸인 텍스트 조각입니다. 숫자는 어떤 것으로도 둘러싸일 필요가 없다. 고급 데이터 유형도 더 있지만 나중에 자세히 알아보겠습니다. 변수는 let, var 또는 cont를 사용하여 만들어집니다. let과 var의 차이는 미미하며 let을 사용하는 것이 좋습니다. const와 다른 점은 변경할 수 없는 값이라는 것입니다. 그것은 상수이다. 하지만 앞으로는 셋방만 사용할 거예요. 위의 코드는 사용자의 이름 값에 인사말을 기록합니다. 이름 값을 변경하면 인사말도 변경됩니다. console.log 함수의 괄호 사이에 문자열 연결이라는 것을 사용합니다. 이는 기본적으로 텍스트 문자열 두 개를 함께 추가하여 단일 문자열을 구성하는 것을 의미합니다. ```js "Hello " + "Steven" = "Hello Steven"

## 조건문 조건부 진술은 프로그래밍의 필수적인 부분이다. 이를 통해 코드를 따라갈 수 있는 여러 경로를 매핑할 수 있습니다. 예를 들어: 우리는 나이라고 불리는 변수에서 나이를 선언합니다. 우리는 >=를 사용하여 나이가 18세인지 아닌지를 확인한다. 만약 18세인지 아닌지는 아직 잡히지 않은 모든 가능성을 잡기 위해 다른 것을 사용한다. 조건문은 세 부분으로 구성됩니다. if 문장의 첫 부분만 필요합니다. 더 구체적인 테스트가 필요한 경우, if를 사용하여 여러 문을 연결할 수 있습니다. 그렇지 않으면 if와 같이 특정 검사를 수행할 수 있습니다. 그렇지 않으면 다른 모든 가능성을 파악할 수 있습니다. 조건문의 함정에 대한 좀 더 큰 설명과 무엇을 주의해야 하는지에 대한 자세한 설명은 이 Gist를 참조하십시오. 검사 순서부터 다른 경우 를 사용하여 여러 검사를 사용할 때까지 모든 작업을 수행합니다. if 문장의 괄호 안에 무엇을 넣어야 하는지에 대해 얘기한 적이 없습니다. 여기에 넣어야 하는 것은 부울 값으로 결정되므로 참 또는 거짓입니다. 위는 if 문에 대한 몇 가지 가능한 조건 목록입니다. 이 중 하나에는 하드 코딩된 값 대신 변수가 포함될 수 있습니다. ## 루프 이제 조건부 진술과 부울 논리에 익숙해졌으므로 루핑으로 넘어갈 수 있습니다. 조건이 충족될 때까지 루프는 코드의 일부를 반복적으로 실행합니다. 루프 유형에 따라 루프가 여러 개 수행되거나 변수가 특정 값을 얻으면 이 값이 됩니다. 지금 이상하게 들리더라도 걱정하지 마세요, 우리는 가장 기본적인 루프에 들어갈 것입니다. 여러분이 보게 될 루프는 while 루프입니다. 잠시 루프는 조건이 충족될 때까지 코드 블록을 실행합니다. 이 조건은 스스로 프로그래밍해야 하는 조건입니다. 그렇지 않으면 무한 루프가 발생할 것입니다. 일반적인 예는 간단한 카운터입니다. 원하는 경우 console.log를 루프 본문에 추가하여 루프의 작동 상태를 확인할 수 있습니다. 루프 외부에서 두 변수를 정의하고 루프 내부에서 변경합니다. 루프 부울은 변경할 때까지 동일하게 유지됩니다. 또 다른 루프 유형은 for 루프입니다. for 루프는 특정 횟수만큼 반복될 때까지 반복됩니다. 예를 들어, 목록의 모든 항목 또는 문자열의 모든 문자에 대해. 구문이 더 고급스러워 보이지만 이해하기 어렵지 않습니다. 변수를 설정하고 조건을 추가하고 증분 값을 추가합니다. 이 경우 루프를 실행해야 할 때 조건이 참이어야 합니다. 문자열 길이보다 작은 인덱스를 사용합니다. ```js

for (

let i = 0; // set initial number using a variable name

i < str.length; // Set our condition.

i++ // Set our incrementer.

)

다음은 for 및 while 루프의 몇 가지 더 유효한 예입니다. 이것으로 루프에 대한 장을 마치겠습니다. 만약 이것이 여러분에게 조금 이상하다면, 걱정하지 마세요. 루프에 대해 완전히 이해하기 위해서는 시간과 연습이 필요하고, 대부분의 학생들은 그것에 어려움을 겪습니다. ## 기능들 함수는 코드 블록을 분리하여 재사용하는 방법이며, 선택적으로 변경할 수 있는 변수와 함께 사용할 수 있습니다. 구문은 다음과 같이 간단합니다. ```js function funcName(parameters) { // Function body } // Calling the function funcName(6)

from http://it-ground.tistory.com/242 by ccl(A) rewrite - 2021-09-25 05:26:30