갱스터하우스

[백엔드 로드맵 공부] 2. 프론트 엔드 기본지식 본문

백엔드 로드맵

[백엔드 로드맵 공부] 2. 프론트 엔드 기본지식

승갱 2022. 4. 5. 20:14

순서

  • HTML
  • CSS
  • JavaScript

 

 

 

 

 

1. HTML

그렇다면 HTML은 무엇일까?

 

1) HTML이란?

HTML은 Hyper Text Markup Language로 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록(웹 페이지를 기술하기 위한) 하는 마크업(markup)언어이다.

마크업 언어 : 마크업 언어는 텍스트에 태그를 붙여 텍스트의 구조나 포멧을 지정

 

2) 구성 요소

(1) 요소

 HTML 문서를 이루는, HTML에서 시작과 종료 태그로 나타내지는 모든 명령어를 뜻한다.
element는 시작 태그 + 내용(contents) +  종료 태그로 구성되어 있다.

(ex) <a href="http://www.ktword.co.kr"> ... </a_>

 

(2) 태그(Tag)
: 각 요소의 식별자로 요소의 시작인 시작태그와 요소의 끝인 종료태그 두가지가 있다.
일부 태그 중에서는 종료 태그가 없는 것도 있다.

(ex) <a href="http://www.ktword.co.kr"> ... </a_>

 

(3) 속성(Attribute)
: 요소에 대한 추가적인 정보를 제공한다.
시작 태그에서 '속성이름(Attriute) : 속성값(Value)'을 한 쌍으로하여 지정

(ex) <a href="http://www.ktword.co.kr"> ... </a_>

(4) 변수(Araguments)
: 속성과 관련된 값

(ex) <a href="http://www.ktword.co.kr"> ... </a_>

 

3) 기본 구조

- <!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시한다.
- <html> : HTML 문서의 루트(root) 요소를 정의합니다.
- <head> : HTML 문서의 메타데이터(metadata)를 정의합니다.
         ▶ 메타데이터(metadata) :  HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
         (ex) <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현
- <title> : HTML 문서의 제목(title)을 정의하며, 아래와 같은 용도로 사용
         ▶ 웹 브라우저의 툴바(toolbar)에 표시된다
         ▶ 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다
         ▶ 검색 엔진의 결과 페이지에 제목으로 표시된다
- <body> : 웹 브라우저를 통해 보이는 내용(content) 부분
- <h1> ~ <h6> : 제목(heading)을 나타낸다. ( 숫자가 커질 수록 글자의 크기가 작아진다)
- <p> : 단락(paragraph)을 나타낸다

 

 

 

 

 

2.CSS

1) CSS란?

종속형 시트 또는 Cascading Style Sheets, CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어이다. 즉, HTML로 구조화된 문서를 꾸며주는 역할을 한다. 

 

2) 사용 방법

열심히 만든 HTML문서에 CSS를 사용하는 방법으로 3가지가 있다.

(1) 외부 스타일 시트(External Style Sheet)
: css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법

  • 장점 : 홈페이지 전체의 스타일을 일관성있게 유지 + 변경시 일괄적으로 변경가능 → 홈페이지 제작의 효율성 극대화
  • 단점 : 외부 스타일 시트 파일을 계속적으로 관리 + HTML 문서를 만들어 나가야 한다는 불편함
    외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css 파일 관리하는 노하우 필요함
<head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

 

(2) 내부 스타일 시트(Internal Style Sheet)
: HTML 문서내에서 <head>와 </head> 사이에 스타일을 정의하는 방법
HTML 문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할 때 사용하면 된다.

<head>
 <style type="text/css">
 <!--
  body {font-size:9pt;}
 //-->
 </style>
</head>

 

(3) HTML태그내에 스타일 지정(Inline Styles)
: 위의 두 가지 방법에 비해 적용범위가 좁아진 형태이다. 
스타일을 적용하고 싶은 HTML 태그 안에서 정의하는 방법이다.
→ 스타일 일괄변경의 효율성 측면에서는 바람직하지 않지만, 직관적으로 사용이 가능하다는 장점이 있다. 

<p style="color:blue;">이 문단의 색상은 파란색으로 지정됩니다.</p>

 

 

3.JavaScript

1) JavaScript 란

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어로, 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지등 웹을 풍부하게 만들 수 있다.

 

여기서 한 가지 질문!

그렇다면 Java와 JavaScript는 어떤 관계일까?

이 질문을 하면 오리와 오리너구리의 차이다라는 답변을 종종 들을 수 있다.

무슨 차이일까?

Java JavaScript
컴파일 언어 인터프리터 언어
타입 검사 엄격 타입 명시하지 않음
클래스(class) 기반의 객체 지향 언어 프로토타입(prototype)기반의 객체 지향 언어

 

2) 특징

(1) 자바스크립트는 객체 기반의 스크립트 언어이다. 하지만 상속과 클래스라는 개념은 없다.
(2) 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.

  • (ex) C언어일 경우 소스파일 작성 후, 해당 파일을 컴파일 → 실행파일로 만들어 사용해야한다. 하지만 소스 코드를 바로 실행할 수 있는 인터프리터 언어인 자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해준다.

(3) 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

(4) C언어 구조를 차용하였으며 배우기 쉽다

 

3) 작성 가능한 위치

(1) HTML 태그의 이벤트 리스너 속성에 작성 

<img src="apple.png" alt="img" onmouseover="this.src='banana.png'"
onmouseout="this.src='apple.png'">

→ 사과 이미지 위에 마우스를 올리면 바나나로, 마우스를 내리면 사과로 바뀐다

(2) <script><script/> 태그에 작성
→ <head></head>, <body></body> 내 모두 가능하며, 웹 페이지 내에 여러번 삽입 가능

  • <head></head> 일경우
<head>
    <script>
    	//코드
    </script>
</head>
  • <body></body>일 경우
<body>
    <script>
    	// 코드
    </script>
</body>

 

(3) 자바스크립트 파일에 작성

  • 자바스크립트 코드 파일 저장
    → 확장자 .js 파일에 저장
    → <script> 태그 없이 자바스크립트 코드만 저장
  • 여러 웹 페이지에서 불러 사용
    → 웹 페이지마다 자바스크립트 코드 작성 중복 불필요
    → <script> 태그의 src 속성으로 파일을 불러 사용

 

<script src=“파일이름.js”>
	// 이곳에 코드 추가 작성 가능
</script>

 

(4) URL 부분에 작성
→ href에 작성

<a href="javascript:alert('클릭해보세요')">클릭</a>

 

 

 

 

 

 

<출처>
https://ko.wikipedia.org/wiki/HTML
https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EC%97%85_%EC%96%B8%EC%96%B4
http://www.ktword.co.kr/test/view/view.php?m_temp1=5414
https://sesok808.tistory.com/152
http://www.tcpschool.com/html/html_intro_basicStructure
http://www.homejjang.com/07/how_to.php
https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
http://www.tcpschool.com/javascript/js_intro_basic
https://coding-factory.tistory.com/193

 

 

 

'백엔드 로드맵' 카테고리의 다른 글

[백엔드 로드맵 공부] 3. OS에 대한 전반적인 지식(1)  (0) 2022.05.26
[백엔드 로드맵 공부] 1.인터넷(2)  (0) 2022.04.02
[백엔드 로드맵 공부] 1.인터넷(1)  (0) 2022.03.31
'백엔드 로드맵' Related Articles more