HTML와 CSS 그리고 JavaScript

wltjd1688·2025년 1월 31일

CSS html javasciprt 풀사이클

풀사이클

목록 보기

7/74

HTML이란

Hyper Text Markup Langguage 하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어이다.

<>
HTML은 <>괄호를 사용한다. 우리는 이걸 태그라고 부른다.
태그는 웹 페이지의 구성 요소 하나하나로 역할을 하게 된다.
<태그>감싸진 글자가 그 태그의 역할을 맡는다.</태그>

HTML파일 만들기

해당 파일을 만들때는 [파일명].html로 만들 수 있다.

이후 html 파일을 만들 수 있게 된다. 순서는 다음과 같다.

문서의 타입이 html이라는 걸 알리기 위해서 첫줄에 <!DOCTYPE html>와 <html></html>을 만들어 준다.
<head></head>와 <body></body>를 만든다.
- head에는 해당 웹 페이지에 대한 meta정보와 title같은걸 넣는다.
- body에는 웹페이지에 보여줄 뼈대를 구현해줄 것이다.

작성하게되면 다음과 같이 작성할 수 있다.

해당 파일을 실행하면 브라우저에 다음과 같이 나오는 것을 확인할 수 있다.

HTML태그들

Advanced Web Ranking사이트에 들어가면 자주 사용되는 태그들의 순위를 알 수 있다.

<!DOCTYPE html>
웹 문서가 HTML5 문서임을 선언하는 태그
<html>
웹 페이지의 전체를 감싸는 태그
<head>
웹 페에지의 정보(메타 데이터)를 담는 태그
<title>
페에지의 제목을 넣는 태그
<meat>
검색엔진과 관련한 정보를 넣는 태그
<link>
css파일을 연겨하는 태그
<body>
웹 브라우저에서 화면에 표시되는 내용을 포함하는 태그
<h[1~5]>
제목을 나타내는 태그
<from>
사용자가 데이터를 입력하고 전송할 수 있도록 폼을 만들 때 사용하는 태그
<input>
사용자가 데이터를 입력할때 사용하는 태그
<br>
줄바꿈을 할 때 사용

다음과 같이 코드를 작성하면

화면에 다음과 같이 나타나는 것을 볼 수 있다.

CSS

Cascading Style Sheets의 약자로, HTML을 꾸며주는 언어이다.
문서를 통째로 한번에 꾸며주는 것이 아니라, HTML 태그를 하나하나 꾸며줍니다.
HTML에 CSS를 적용하는 방법은 3가지가 있다.

인라인(inline): HTML 태그 안에 같이 작성

...
<!-- 인라인 -->
<h1 styel="color:red">빨간색 글씨</h1>
...

내부 스타일 시트(internal style sheet): HTML 문서 안에 같이 작성

...
<!-- 내부 스타일 시트 -->
<head>
    <style>
        h1 {color: blue;}
        .h2_class{color:white;}
        #h3_id{color:purple;}
    </style>
</head>
<body>
    <h1> 이 문장은 파란색</h1>
    <h2 class="h2_class">이 문장은 하얀색</h2>
    <h3 id="h3_id">이 문장은 보라색<h3>
</body>
...

외부 스타일 시트(external style sheet): HTML 문서 밖에 작성하고 연결

css 파일(style.css)

h1 {
   color: green;
}
.h2_class{/* 클래스 */
	color:yellow;
}
#h3_id{/* 아이디 */
	color:brown;
}

HTLM파일

...
<!-- 외부 스타일 시트 -->
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>이 문장은 초록색 입니다.</h1>
  <h2 class="h2_class">이 문장은 노란색 입니다.</h2>
  <h3 id="h3_id">이 문장은 갈색 입니다.</h3>
</body>
...

css에서 선택자에 대한 우선순위
인라인 스타일 > ID 선택자 > 클래스 선택자 > 요소 선택자
내부와 외부 스타일 시트는 위치만 다를 뿐, 선택자 우선순위에는 영향을 주지 않고 선언 순서에 따라 결정됩니다.

JavaSciprt

특정 HTML요소를 선택하여 제어할 수 있는 스크립트 언어이다.
최근에는 node.js로 인해 백엔드 언어로도 각광 받고 있다.

스크립트 언어란
스크립트라는 단어에 맞게 독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌
"(프로그램 내부의 구성 요소 중 하나로)프로그램을 제어할 수 있는 스크립트 역할을 하는 언어"
이다. 최근에는 스크립트 언어만으로도 프로그래밍이 가능해져 역할이 확장되고 있다.

HTML에 Javascript를 적용하는 방법은 3가지가 있다.

인라인(inline): 사용자와 상호작용이 있을때만 가능하다.
와 같이 사용할 수 있다.

내부 스크립트(internal script): HTML 문서 안에 같이 작성

<body>
  <script></script>사이에 javascript를 넣으면 된다.
</body>

외부 스크립트(external script): HTML 문서 외부에 작성
```
<head>
	<script src="login.js"></script>
</head>
```

내부와 외부 스크립트는 css처름 특정 태그를 찾는 기능을 제공한다.

id: document.getElementById('아이디')

class: document.getElementsByClassName('클래스 이름')

tag: document.getElementsByTagName('태그 이름')

함수

수학에서 사용하는 f(x) = 2x와 같은 방정식을 의미한다.
프로그래밍에서도 쓰이며, 특정 기능을 수행하는 코드 덩어리를 표현하는 단어이다.

function func() {
  /* 이 공간에 함수가 할 일을 코드로 작성한다.*/
}

조건문

조건에 따라 다른 결과를 선택할 수 있게 해주는 걸 조건문이라 한다.
예를들어, 로그인 창에서 아이디 칸이 비어있다면 아이디를 입력해달라고 팝업을 띄우고, 입력되어 있다면 입력된걸 팝업으로 띄워준다.
이를 코드로 나타낸다면 아래와 같이 나타낼 수 있다.

if(아이디 칸이 비어있다면){
	아이디 칸이 비어있다고 팝업 띄우기
} else{
    아이디 칸에 입력된걸 띄운다.
}

변수

프로그래밍에서는 변하는 수로 해석하기 보다는 담아두는 상자로 해석하면 좋다.
변수를 사용하는 이유는 코드의 가독성과 재사용성을 높여주기 때문이다. 별수로인해 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행되어 개발자가 집적 메모리 주소를 통해 값을 저장하고 참조할 필요없이 변수를 통해 안전하게 값에 접근할 수 있게 된다.

let 상자이름 = 상자에 담을 데이터;(숫자, 문자, element등등)

실행에는 영향을 끼치지 않는다.

Javascript에서 변수

var: ES5에서 변수 선언 키워드, 블록 레벨 스코프 미지원, 함수 레벨 스코프로 함수 외부에서는 전역, 내부에서는 함수 범위 내로 스코프가 지정된다.

let: ES6에서 변수 선언 키워드, 블록 레벨 스코프 지원, var와 큰 차이점은 변수의 업데이트가 가능하나 재선언은 불가능 하다는점이다.

const: ES6 상수 선언 키워드, 값의 재할당 시 에러가 기존 var, let과 가장 큰 차이점이다.

일단 해!!!!

이전 포스트

웹 서비스 이해

다음 포스트

HTML와 CSS 그리고 JavaScript

풀사이클

HTML이란

HTML파일 만들기

HTML태그들

CSS

JavaSciprt

함수

조건문

변수

웹 서비스 이해

간단한 웹 서버 구현

0개의 댓글

HTML와 CSS 그리고 JavaScript

풀사이클

HTML이란

HTML파일 만들기

HTML태그들

Login 만들기

CSS

JavaSciprt

함수

조건문

변수

웹 서비스 이해

간단한 웹 서버 구현

0개의 댓글