Web Development

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

LANGUAGES FOR WEB DEVELOPMENT

Web Development

“Codecademy”에서 웹 개발을 위한 4 가지 언어를 배운다.

HTML: Website content의 구조
CSS: Website에 스타일링 적용
JavaScript: Website에 interactivity를 추가
SQL: web application에서 데이터를 저장하거나 검색할 수 있게 하는 것

HTML

HTML: HyperText Markup Language

모든 web page의 골격
텍스트, 이미지, 버튼, 비디오 등을 포함하여 웹사이트이 내용에 대한 구조를 제공

<!DOCTYPME html>
<html>  
  <head>    
    <title>HTML tutorial</title>  
  </head>  
  <body>    
    <h1>HELLO WORLD</h1>    
    <p>My first webpage</p>  
  </body>
</html>

HTML Markup

Markup: 텍스트 자체와 구별할 수 있는 annotation(주석)을 붙이는 방식* 교사가 주제 문장의 밑줄을 긋고 철자 오류에 동그라미를 치면서 학생들의 에세이를 “markup”할 수 있는 것과 같은 방식으로, HTML은 웹 페이지 내의 내용에 annoation을 달 수 있다.
HTML은 “<>(각괄호)”로 표시되는 HTML tag를 사용하여 내용과 annotation을 구분함.

Question: HTML은 프로그래밍 언어인가?

프로그래밍 언어는 functuality(기능)를 제공해야함. 프로그래밍 언어는 논리적인 작업, 알고리즘, 루프 등과 같은 특정한 작업을 수행하도록 컴퓨터에 지시하는 일련의 구문과 문법 규칙을 사용한다.
HTML은 이러한 것들을 제공하지 않기 때문에 프로그래밍 언어가 아니다.

HTML Elements

HTML tag: HTML를 위한 "markup"

HTML paragraph element

HTML element - HTML tag와 HTML tag에 포함된 텍스트 또는 미디어에 의해 형성된 HTML 문서의 내용 단위
Opening tag - HTML elemet를 시작하는 데 사용되는 element 이름. tag type은 개폐 각괄호(<>)로 둘러싸여 있다.
Content - HTML element의 opening tag와 closing tag 사이에 포함된 정보(텍스트 또는 기타 요소)
Closing tag - HTML element를 종료하는 데 사용되는 두 번째 HTML tag. closing tag에는 왼쪽 각괄호(<> 바로 뒤에 슬래시(/)가 안에 있다.

Common tags

<h1>This is a heading, it emphasizes text.</h1>
 
<p>This is a paragraph, it is the most common tag for larger chunks of text.</p>
 
<a>This is an anchor tag, used to specify the text that is the "anchor" for a link.</a>
 
<button>This is a button.</button>

Hyper Text and the World Wide Web

Hyertext: 다른 텍스트와 연결된 텍스트

한 문서에서 다른 문서로 연결되는 링크를 클릭함으로써, 사용자는 그들이 가장 흥미롭게 여기는 페이지로 이동하여 웹을 통해 그들 자신의 고유한 경로를 개척할 수 있다.

현대의 많은 웹사이트들은 임베디드 비디오, 애니메이션, 상호작용과 같은 기능들과 함께 풍부한 사용자 경험을 제공하므로, 반드시 한 HTML 페이지에서 다음 페이지로 이동하는 것처럼 느껴지지 않는다.

그러나 웹의 성장과 함께 일어난 모든 발전에도 불구하고, 그 핵심에서 웹은 여전히 하이퍼링크된 문서들의 모음일 뿐이다.

Hyperlinks 추가하기

Attritube(속성): HTML element에 대한 추가적인 정보를 제공하는 것

구조: Attribute Name="Attribute value"

name="value"

ex) width="500"

href attribute: hyperlink_reference를 의미하며, HTML에 link를 생성하는 것

link가 사용자를 데려갈 URL 또는 웹 상의 주소를 지정할 수 있도록 해준다.
anchor tag(<a>)에 href 속성을 설정할 때, 사용자를 위해 렌더링되어야 하는 텍스트(anchor tag 내의 텍스트)와 브라우저가 탐색해야하는 URL을 모두 지정할 수 있다.
같은 웹사이트에 있는 다른 페이지로 연결되는 링크의 경우 URL의 앞부분을 생략할 수 있다.

<a href="URL">CONTENT</a>

ex) <a href="www.codecademy.com">Learn to code!</a>
ex) <a href=/resume.html>Resume</a>

Question: HTML에서 links는 항상 텍스트이어야만 하는가?

다른 유형의 내용을 텍스트가 아닌 링크로 만들 수 있다.

텍스트를 포함하여 대부분의 콘텐츠의 경우, opening and closing <a></a> tag 에 포함되면 클릭 가능한 링크로 간단히 전환된다.

ex) 이미지를 클릭할 수 있는 링크 바꾸는 경우

<a href="http://www.codecademy.com"> <img src="www.example.com/image.svg"> </a>

ex) <p> 또는 <div>클릭 가능한 링크 바꾸는 경우

<a href="http://www.codecademy.com"> <div>Codecademy</div> </a>

CSS

CSS(Cascading Style Sheets): HTML 페이지의 내용에 색상, 글꼴, 위치 지정, 레이아웃 등을 포함한 스타일을 제공하는 언어다.

Cascading: styleheet의 규칙을 순서 우선 순위에 따라 적용하는 방식. 동일한 element에 적용되는 동일한 규칙 중 하나 이상이 있는 경우 나중에 오는 규칙이 더 큰 우선 순위를 갖게 된다. 또한 여러 개의 stylesheet를 연결하면 나중에 링크되는 stylesheet의 규칙이 이전 링크된 규칙보다 우선 순위가 더 높아진다.

StyleSheet: 구조화된 문서의 표시를 설명하는 파일 또는 언어의 한 유형. 구조(HTML)를 스타일(CSS)에서 분리해 '관심사 분리'를 적용하는 방식이다. CSS는 HTML과 같은 마크업 언어의 표시를 설명하기 위해 주로 웹에 사용되는 특정한 스타일시트의 유형이다.

* 콘텐츠와 presention을 위한 개별의 언어가 필요한 이유

컴퓨터 공학 원리 "Separation of Concerns(관심사 분리)"의 예시이다.

대형 코드베이스는 각 섹션이 해결하고자 하는 문제를 명확하게 구분했을 때 유지 가능한 상태로 유지된다.

CSS 적용하기

HTML link element를 사용하여 CSS 파일을 기존 웹 사이트에 적용하며, 이 작업은 HTML link tag로 수행된다.

HTML link element는 HTML 파일과 CSS 파일 사이의 연결을 만드는 데 사용되며 브라우저에게 CSS 스타일을 HTML에 적용하도록 지시한다.

<link rel="stylesheet" href="style.css">

JavaScript

JavaScript: 웹에서 동적인 기능을 제공해주는 언어

JavaScript의 활용 예

popup ads
animated graphics (2D or 3D)
interactive audio and video
maps and other features access the user’s geographic location
much more

JavaScript의 정의 기능 중 하나는 브라우저 이벤트에 대응하는 기능이다. 이러한 이벤트는 실시간으로 발생하며 다음을 포함한 다양한 사용자 상호작용에 의해 유발될 수 있다.

버튼을 클릭하는 사용자
키보드를 누르는 사용자
비디오 파일 로딩 완료
사용자가 창을 다시 표시함
웹 페이지의 텍스트 위를 맴도는 사용자

JavaScript Funtions

함수는 우리가 한번 반복해서 재사용할 수 있는 코드 덩어리를 쓸 수 있게 해준다.
이벤트는 사용자가 마우스를 HTML 요소 위로 이동하거나 창의 크기를 조정하는 것과 같은 사용자 행동에 JavaScript가 응답할 수 있도록 한다.

이벤트와 기능이 결합되어 자바스크립트에 interactive experience을 창조할 수 있는 능력을 부여한다.

이벤트가 발생하면 함수가 실행된다. 이 패턴은 웹 개발에서 interactive web site를 만들기 위해 계속해서 사용된다.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">

  </head>

  <body>
      <button onclick="changeColor()">Repaint!</button>
  </body>
  
      <script>
        function getRandomColor(){
          let letters = '0123456789ABCDEF';
          let color = '#';
          for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
          }
          return color;
        }
        function changeColor(){
          let newColor = getRandomColor();
          document.body.style.backgroundColor = newColor;
        }
    </script>
  
</html>

외부 JavaScript 파일을 HTML에 링크하기 위해, 우리는 src 속성과 함께 태그를 사용할 수 있다.

ex) "index.js"라는 이름의 JavaScript 파일을 웹 페이지에 연결한다.

<script src="index.js"></script>

SQL

SQL: Structured Query Language

데이터를 저장, 검색 및 수정할 수 있는 응용 프로그램
SQL은 정보를 테이블에 저장하는데, 이것은 행과 열로 구성된 정보의 집합이다.
정보를 얻기 위해, query를 쓰거나 테이블에서 데이터를 검색하는 프로그램을 쓸 것이다.

page_views 표에서 모든 열(-)을 선택하는 쿼리의 예. "*" 키워드는 "all"의 속기

SELECT * FROM page_views;

참고

https://discuss.codecademy.com/t/do-the-links-in-html-always-have-to-be-text/369789

Do the links in HTML always have to be text?

Question In the context of this exercise, do the links in the HTML always have to be text, or can we make other content into a link? Answer You can make other types of content of a page into a link, other than just text. For most content, including text, y

discuss.codecademy.com

https://discuss.codecademy.com/t/faq-languages-for-web-development-what-is-css/372189

FAQ: Languages for Web Development - What is CSS?

This community-built FAQ covers the “What is CSS?” exercise from the lesson “Languages for Web Development”. Paths and Courses This exercise can be found in the following Codecademy content: Code Foundations FAQs on the exercise What is CSS? What d

discuss.codecademy.com

https://codeburst.io/how-to-become-a-web-developer-101-5db4f11e611

Web Development For Beginners

We all use the web every single day, but how many of us actually know how it works or the skills necessary to become a web developer?

codeburst.io

'IT' 카테고리의 다른 글

[AWS] MAC terminal로 ssh키 접속 [Permission Error] (0)	2021.09.16
VScode - React styled-components 속성 색상을 구분하자(extenstion - vscode-styled-componenets) (0)	2021.08.07
VScode - 코드를 예쁘게 만들자 (extension - Prettier, bracket pair colorizer2 ) (0)	2021.08.04
Internet (0)	2021.04.24
시작 (0)	2021.04.09

NyeolStory

Web Development

LANGUAGES FOR WEB DEVELOPMENT

Web Development

HTML

HTML Markup

HTML Elements

Common tags

Hyper Text and the World Wide Web

Hyperlinks 추가하기

CSS

CSS 적용하기

JavaScript

JavaScript Funtions

SQL

'IT' 카테고리의 다른 글

댓글

티스토리툴바

Web Development

LANGUAGES FOR WEB DEVELOPMENT

Web Development

HTML

HTML Markup

HTML Elements

Common tags

Hyper Text and the World Wide Web

Hyperlinks 추가하기

CSS

CSS 적용하기

JavaScript

JavaScript Funtions

SQL

'IT' 카테고리의 다른 글

관련글

댓글

티스토리툴바