웹 개발 #1

6155 단어 CSShtml웹jsCSS

시작하기 앞서

Visual Code를 사용하여 웹 개발을 진행하고, 크롬에서 동작 시킬것이다.
이번 목표는 웹 공부를 끝나고 홈페이지를 하나 개발해보는 것이다.

웹 이란

웹은 클라이언트와 서버로 나뉠 수 가 있다.

  • 클라이언트
    • 웹 브라우저
    • 사용자가 웹 싸이트로 접근할 수 있도록 해주는 기기
  • 서버
    • 인터넷에 연결된 컴퓨터
    • 웹 요소와 여러 정보가 저장되어있다.

웹 개발도 두 가지로 나뉜다. 웹 브라우저의 화면 부분을 다루는 프론트엔드와 사용자가 보는 화면의 뒤, 즉 보이지 않는 영역을 다루는 백에드가 있다.
프론트 엔드는 HTML,CSS,JS를 이용하여 개발을 한다. 백엔드는 데이터베이스를 설계하거나 데이터를 처리하고 자바, PHP, 파이썬등의 프로그래밍 언어를 사용한다.

웹 개발에서 필요한 기술

HTML,CSS,JS를 사용하여 개발을 한다.

  • HTML : 웹의 뼈대를 만들어준다.
  • CSS : 웹을 꾸미는 역할을 한다.
  • JavaScript : 웹을 사용하는 사용자 동작에 반응하게 해준다.

HTML

HTML은 Hypertext Markup Language의 약자이고 프로그래밍 언어는 아니고 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 언어이다
아래 그림은 HTML의 기본적인 구조이다.

  • <!DOCTYPE html> : 현재 문서가 HTML언어로 작성한 웹문서라는 것을 나타낸다.
  • <html> ~ </html> : 웹 문서의 시작과 끝을 나타낸다.
  • <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분
  • <body> ~ </body> : 웹 브라우저 화면에 나타나는 부분이다.

<head> 태그

브라우저에게 정보를 주는 역할을 한다.

  • 문서 관련 정보를 입력하며, 웹 브라우저 화면에는 보이지 않는다.
  • 문서에서 사용할 외부 파일 링크가 들어간다.

<head> 태그 내에는 <meta>,<title> 태그가 들어간다.

  • <meta> 태그

    • 문자 세트등 문서 정보가 들어간다.

    • ex)

      <meta charset ="UTF-8">

      한글로 된 내용을 표시하기위해 사용한 문자 세트

    • 이 외에도 다양한 문서 정보를 지정할수있다.

  • <title> 태그

    • 말 그대로 문서의 제목을 나타낸다.

<body> 태그

실제 브라우저에 표시되는 내용이다. html의 대부분의 태그가 이 안에 들어간다.

간단한 웹 만들기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> 간단한 웹 만들기 </title>
</head>

<body>
    <h1> 안녕하세요 ~~! 간단한 웹 입니다 </h1>
    <h2> 안녕하세요 ~~! 간단한 웹 입니다 </h2>
    <h3> 안녕하세요 ~~! 간단한 웹 입니다 </h3>
    <h4> 안녕하세요 ~~! 간단한 웹 입니다 글이 점점 작아져요 </h4>
    <p> 하하 문단 입니다. 다음줄로는 어떻게 이동할까요? <br> 이렇게 이동합니다~</p>
</body>

</html>

결과

읽어주셔서 감사합니다~!

Restlet 여러 번 ajax 가 정상 적 인 반환 값 을 요 청 했 지만 클 라 이언 트 는 404 오 류 를 알 렸 습 니 다.
SpringCloud @ EnableDiscoveryClient 와 @ EnableEurekaClient 주석 역할

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage