HTML & CSS 초입문 1: HTML 입문서

12151 단어 HTML초보자CSS

목표 독자


앞으로 HTML, CSS를 공부하는 사람

먼저


Progate HTML&CSS 과정 초급편이 끝났기 때문에 복습을 위해 내용을 정리했다.
초보자이기 때문에 잘못이 있으면 꼭 지적해 주세요.
이번 학습에 사용된 것은 Progate 무료 프로그래밍 학습 사이트다.
난이도가 낮아 초보자에게 부드러운 사이트다.
지금까지 몰랐는데 너무 아쉬워서...

환경 구축


이 기사를 흘려 읽기만 하면 사람들에게 대체적인 인상을 줄 것이다
실제로 스스로 공부를 하려면 환경을 구축해야 한다.
환경 구축의 방법에 관해서는 아래의 보도를 참고하십시오.
이해하기 쉬워요.
Windows 환경 구축
Mac 환경 만들기
이 글도 위와 같은 환경에서 운행되고 있다.

HTML


HTML 기본


이번에는 HTML과 CSS를 사용하여 웹 사이트를 만들었습니다.
index.html 이 파일이 첫 페이지가 될 것 같아서 이렇게 했습니다.
다음 상태부터 조금씩 추가 사이트를 만듭니다.
index.html
<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
  </head>
  <body>
    <!--ここにページの本文を書きます-->
  </body>
</html>
멋있는 게 많아.. 못생겼어.
이 상태에서 페이지는 흰색입니다.

이게 뭔지 모르겠어요. 하나하나 보세요.
여기에 묘사된 것은 헤드와 바디 부분이다.
이 글자를 씁니다.
이것은 평론이라고 한다.
왜냐하면 HTML에서 자기가 쓴 걸 솔직하게 다 보여주거든요.
'안 나와!'이런 데 댓글로 써주세요.
자주 필기를 하는 데 쓰인다.

제목과 본문


index.html
<head>
  <!--ここにページの情報を書きます-->
</head>
이 부분을 주목합시다.<head>과</head>무엇이 다릅니까?
사실 이것은 사용한 물건이다.<head> "여기부터 페이지 메시지 쓰세요!"</head> "여기까지 페이지 정보입니다!"
뜻.
각각 시작 태그, 끝 태그라고 합니다.
이 글쓰기는 HTML에서 여러 번 사용되기 때문에 절대 기억해야 한다.
페이지의 정보로 무엇을 써야 하는지, 대표적인 것은 페이지의 제목이다.
페이지의 제목은 이 페이지에서'HTML & CSS 초입문1: HTML 입문편'을 가리킨다.
브라우저 탭에 적힌 글이죠.
아래와 같이 써 보세요.
index.html
<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
  </body>
</html>
그렇다면

너는 라벨의 문자가 변한 것을 아니?
index.html
<body>
  <!--ここにページの本文を書きます-->
</body>
다음에 이쪽 좀 봅시다.
아까처럼 생각하면 되죠?<body> "여기부터 본문을 쓰세요!"</body> "여기까지 본문이에요!"
뜻.body본문의 뜻입니다.
현재 쓴 이 글도 body 에 쓰여 있다.
제작 페이지의 종류에 따라 가장 길게 쓴 곳이다.
실제로 써보세요.
index.html
<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    Hello World
  </body>
</html>
그렇다면

본문에 글자가 있다!
이렇게 많이 썼는데 부족해요.
아직 많은 기능이 있기 때문에 내가 가서 보겠다.

줄 바꿈 문자


index.html
<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    Qiita最高！
    Progate最高！
  </body>
</html>
이렇게 하면 직업을 바꿀 수 있을 것 같은데..

보시다시피 가로줄이 됩니다.<br>를 사용하여 행을 바꿉니다.
index.html
<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    Qiita最高！<br>
    Progate最高！
  </body>
</html>
지금 줄을 바꾸세요.

이 거리를 봐라!

제목


긴 글을 쓸 때 반드시 필요한 것은 제목이다.
제목이 없으면 보기 싫다.
index.html
<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    <h1>h1の見出し</h1>
    <h2>h2の見出し</h2>
    <h3>h3の見出し</h3>
    <h4>h4の見出し</h4>
    <h5>h5の見出し</h5>
    <h6>h6の見出し</h6>
  </body>
</html>
그렇다면

이렇게 하면 간단하게 제목을 만들 수 있다.h1이 가장 크고 h6가 가장 작다.

양식


제목을 제외하고 너는 목록을 하나 더 열거할 수 있다.
index.html
<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    <ul>
      <li>Google</li>
      <li>Apple</li>
      <li>Facebook</li>
      <li>Amazon</li>
    </ul>
  </body>
</html>
그렇다면

리스트를 만들려면 먼저 <ul> 요소를 만들고 그 중에서 <li> 요소를 만든다.
index.html
<ul>
    <li>Google</li>
    <li>Apple</li>
    <li>Facebook</li>
    <li>Amazon</li>
</ul>
아마 누군가가 여기까지 읽고 눈치챘을 거예요.<> 이러한 요소에 요소를 넣으면 들여쓰기(들여쓰기)합니다.
사용Tabキー 또는 누름スペースキー을 몇 번 누르면 축진이 발생합니다.

사이트 링크


이번에는 사이트 링크를 붙이는 방법이다.
index.html
<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    <a href="https://qiita.com/">Qiitaへのリンク</a>
  </body>
</html>
그렇다면

이런 화면이 나타나면 링크를 클릭하면 Qiita 페이지로 넘어갑니다.

index.html
<a href="https://qiita.com/">Qiitaへのリンク</a>
<a> 요소를 사용하여 링크를 만들 수 있습니다.href과 같이 시작 태그를 넣은 것을 속성이라고 합니다.""에 URL을 쓰면 링크를 통해 어느 사이트로 날아갈지 지정할 수 있습니다.

이미지 표시


글만 외롭기 때문에 그림도 넣어보세요.
index.html
<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    <img src="https://japaclip.com/files/internet-flaming-laptop.png">
  </body>
</html>
그렇다면

index.html
<img src="https://japaclip.com/files/internet-flaming-laptop.png">
이번에도 속성이 추가됐네요.링크를 만들 때는 href, 이번에는 src 입니다.
이것 또한 ""에서 지정한 이미지의 URL을 통해 이미지를 표시할 수 있습니다.

마지막


여기까진 HTML 쓰는 법을 보여줬어.
주로 글을 쓰고 이미지를 넣는 등 화면 제작 요소를 중심으로 한다.
하지만 HTML로만 사이트를 만들면 20년 전 사이트처럼 디자인된다.
웹 사이트를 더욱 쉽게 볼 수 있도록 우리도 CSS를 배우자!
다음CSS 시작
elasticsearch 학습 노트 (28) - Elasticsearch 실전 각종query 검색
Vue.js에서 컨텍스트 메뉴 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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