Java/HTML

요식업에서 개발자로 도전 <1> 간단한 html의 기본

I want to Sleep 2023. 1. 3. 23:24
728x90

● 사용한 에디터

Visual studio code 프로그램 사용

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

● 학습한 코드

<!DOCTYPE html>
<!-- html: HTML문서의 시작과 끝 코드 -->
<html lang="en">
<!-- head: 웹사이트에 대한 정보, 외부자료 참조 코드 -->
<head>
    <!-- text를 어떻게 그려달라고 하는지 말해주는 것, 특수문자가 안깨지게 도움 -->
    <meta charset="UTF-8"> 

    <!-- title : 사이트 이름 코드 -->
    <title>사이트이름</title>
</head>
<!-- body: 웹페이지에 표시할 내용 -->
<body>
    <!-- p: 문단표시 코드 -->
    <p>메이플스토리</p>
    <!-- br: 줄바꿈 코드, 닫는태그는 없어도됨 -->
    <br><br><br><br>
    <!-- strong: 두꺼운 글씨 코드 -->
    <strong style="color: red;">로스트아크</strong>

    <!-- 주석 :자신만 보이는 코드 -->
    <!-- <p>자신만 보임</p> -->
</body>
</html>

 

● 사용한 HTML 태그들

  • <p></p> : 문단 표시
  • <br> : 줄바꿈
  • <strong></strong> : 두꺼운 글씨

 

 

● <strong> 태그에 스타일 넣는 방법

<strong style=(속성명): "속성값"></strong>

ex) <strong style="color: red"></strong>

 

<strong style="color: red;">로스트아크</strong>

strong과 style 사이 한칸띄우고 속성명 적는이유

  1. 문법적인 규칙 ,태그명과 속석명은 공백으로 구분이 되있어야 한다.

  2. 공백이 없으면 서로 보기 매우 불편하기 때문이다.

 

 

title : 사이트 이름 지정

주석 : <!--   -->

 

<html>
  <head></head>
  <body></body>
</html>

<html>

..<head></head>

..<body></body>

</html>

띄우기2번 하고 코드적는이유 :  어떤 태그가 어떤 태그안에 포함 되었을때 포함관계를 나타내기 위해 붙여쓰는 것보다

띄여서 쓰는것이 보기가 훨씬 편하기 때문입니다(코드표기법)