HTML / CSS 공부 1일차

카테고리 없음

HTML / CSS 공부 1일차

오로시 2022. 7. 31. 19:27

HTML - 마크업 언어

CSS - 스타일 언어

JS - 프로그래밍 언어

웹 사이트 만들기

갖다 놓고 : HTML

꾸미고 : CSS

시킨다 : JS

index.html

특정 폴더의 디폴트 페이지

index.html로 작성한 페이지는 해당 폴더의 주소인
www.(웹사이트주소)/folder/만 입력해도 진입할 수 있다.

Vs 코드에서

Emmet 명령어 ! 입력 하고 탭을 누르면 : HTML 기본 틀이 나온다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

lang의 en을 ko로 수정 (문서의 언어를 명시 - 접근성, 검색최적화, 폰트)
<body> 안쪽에 페이지 요소들 작성

<h1> ~ <h6>	제목	숫자가 높을 수록 낮은 단계
<p>	문단	각각 줄바꿈이 됨 (기본 스타일일 때)
<br>	줄바꿈	닫는 태그 필요 없음. <br/>, <br />와 혼용되기도 함
<hr>	가로줄	닫는 태그 필요 없음
	공백 (스페이스)	스페이스를 강제할 때 사용

TIP)

p*6 하고 tab 누르면

본문 6개 생성 된다.

<!-- 한 줄 주석 -->

<!-- 여러 줄 주석
여러 줄 주석
여러 줄 주석 -->

https://developer.mozilla.org/ko/

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

여기서 태그 검색하면 공신력 있는 정보를 알 수 있다고 한다.

br tag mdn --> 구글에 이렇게 검색해보자. br 태그에 관한 정보가 나온다.

디자인과 관련한 부분은 CSS 로 다뤄주는 것이 더 좋다.

css로 디자인 요소를 지정해줘야 한다.

HTML 은 힘이 없다.

em 태그와 strong 태그는 의미를 갖는다.

HTML 태그는 정보의 종류를 구분하는데만 사용합니다.
(오늘날 스타일 정보는 CSS로 분리)

b	글자를 굵게 (구버전 HTML)
strong	중요한 내용임을 명시
i	글자를 기울임 (구버전 HTML)
em	강조할 내용임을 명시

<sup>	위 첨자	지수, 서수
<sub>	아래 첨자	각주, 변수, 화학식

<u>	철자 오류 표시	예전에는 밑줄 용도로 사용
<s>	더 이상 유효하지 않은 정보 표시

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>
    <strong>경고!</strong> 이것은 매우 위험합니다.
  </p>

  <p>
    나는 <em>당근</em>을 사랑합니다.<br>
    나느 당근을 <em>사랑</em>합니다. <br>
    x <sup>3</sup> <br>
    H <sub>2</sub> O

    <!-- 단순히 작은 글자를 사용하기 위한 용도로는 사용해서는 안된다. 
    sup 와 sub 은 -->
  </p>

  <p><s>s 태그</s> 입니다.</p>
  <p> <u>u 태그</u> 입니다. </p>

</body>
</html>

결과

Document

경고! 이것은 매우 위험합니다.

나는 당근을 사랑합니다.
나느 당근을 사랑합니다.
x ³
H ₂ O

~~s 태그~~ 입니다.

u 태그 입니다.

출처 : https://www.yalco.kr/@html-css/1-1/

제목과 본문

어려운 프로그래밍 개념들을 쉽게 설명해주는 유튜브 채널 '얄팍한 코딩사전'. 영상에서 다 알려주지 못한 정보들이나 자주 묻는 질문들의 답변들, 예제 코드들을 얄코에서 확인하세요!

www.yalco.kr

😊모든 내용은 얄코님의 웹사이트로 부터 받아왔습니다. 해당 글은 개인 공부 용 입니다. 강의 내용 참 좋으니 꼭 듣는 걸 추천드립니다!😊

저작자표시