생활코딩
www.youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb
글씨를 진하게 표시하고 싶으면 <strong>과 </strong>으로 진하게 표시하고 싶은 구간을 감싸주면 된다.
밑줄이 영어로 underline이다. 그 중에 첫 글자는? u인데, <u>와 </u>로 감싸주면 밑줄이 완성된다.
HTML 문서에서 제목을 사용하고 싶다면 H1 태그를 사용하면 된다.
h1부터 h6까지 다양한 크기를 지정할 수 있다.
HTML에서 가장 많이 사용되는 태그들을 살펴보자.
<P태그 vs br태그>
HTML에서 새로운 줄을 표현할 때는 <br> 태그를 쓰면 된다. (br태그는 <div></div>처럼 닫지않는다.
p태그는 br태그와 다르게 하나의 단락을 그룹핑할 수 있도록 열고, 닫는 태그가 존재한다.
br태그는 단지 줄바꿈을 의미할 뿐이다.
p태그가 정보로써는 더 가치가 있다.
<목차만들기>
li 태그를 이용해준다.
목록은 다른 목록과 구분할 수 있도록 경계가 필요하다.
이 때 사용하는 태그가 <ul>태그이다.
<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
ol은 리스트의 숫자가 자동으로 업로드 된다.
본문은 body라는 태그로 묶기로 약속되어있다.
<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 speicification"> target="_blank" 는 새창에서 페이지가 열리게 하는 옵션이다.
<a태그>
<h1>HTML이란 무엇인가?</h1>
<p>
<a href="https://www.w3schools.com/html/html_intro.asp" target="_blank" title="html5 speicification"><b>하이퍼텍스트
마크업 언어</b></a>는
<br />웹 페이지를 위한 지배적인 마크업 언어다.<br />
HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라<br />
링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.<br />
그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다.
</p>링크 태그를 의미하며, title 옵션은 마우스를 갖다대면 아래 이미지와 같이 해당 링크 설명을 간단하게 명시 할 수 있다.
이제 저 각각을 a 태그로 연결시켜보겠다.
<코드 기록>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/115cd21f04.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./index.css">
<title>WEB1 - html</title>
</head>
<body>
<h1><i class="fas fa-home"></i><a href="./index.html"> WEB</a></i></h1> <!-- 가장 큰 주제니까 h1으로 -->
<ol>
<li><i class="fas fa-laptop-code"><a href="./1.html"> HTML</a></i></li>
<li><i class="fas fa-laptop-code"><a href="./2.html"> CSS</a></i></li>
<li><i class="fas fa-laptop-code"><a href="./3.html"> JavaScript</a></i></li>
</ol>
<h2>HTML이란 무엇인가?</h2>
<img src="./img/img1.jpg" style="width: 30%;" alt="이미지1">
<p>
<a href="https://www.w3schools.com/html/html_intro.asp" target="_blank" title="html5 speicification"><b>하이퍼텍스트
마크업 언어</b></a>는
<br />웹 페이지를 위한 지배적인 마크업 언어다.<br />
HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라<br />
링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.<br />
그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다.
</p>
<p>
HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "<b>태그</b>"로 되어있는 HTML 요소 형태로 작성한다.<br />
HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과<br />
그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다.<br />
HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.
</p>
</body>
</html><실행 화면>
<인터넷과 웹의 차이>
인터넷이 도시라면 웹은 도시의 건물하나이다.
웹 브라우져가 설치된 컴퓨터에는 index.html 파일의 코드가 도착한다.
웹 브라우져는 그 코드를 읽어서 웹페이지를 화면에 출력한다.
고객(갑)과 사업자(을)이다.
client와 server를 의미한다.
<Git hub>
파일이 수정되면 또 업로드 하면 된다. 수정한 내용이 뭔지 적어주고 Commit changes를 눌러준다.
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'HTML & CSS > HTML & CSS 기본' 카테고리의 다른 글
| [생활코딩] WEB2 - CSS (0) | 2020.07.28 |
|---|
댓글