Netroy's Blog

W3School HTML 1일차 본문

자기개발/HTML|CSS|JS

W3School HTML 1일차

네트로이 2020. 8. 26. 22:53
반응형

HTML이란 Hyper Text Markup Language로 Github에 쓰는 .md 확장자의 마크다운처럼

정해진 규칙에 따라 작성하면 해당 부분을 웹 브라우저에서 출력해준다.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

 

예시로 위 내용을 메모장으로 입력하고 사용하는 브라우저로 열어보면
정해진 규칙에 따라 브라우저는 My First Heading과 My first paragraph만 표시한다.

 

상세한 규칙의 경우 적지 않겠다. 위 내용 중 궁금한게 있다면 복사하여 그대로 구글의 검색창에 붙여 넣으면 나보다 더 친절하고 수많은 사람들이 알려 줄 것이다.

 

<h1>이나 <p>와 같은 것들을 element, 요소라고 부른다.

안에 내용이 들어가는 요소도 있고 <br> <hr>과 같이 내용이 들어가지 않는 요소도 있다.

 

이런 요소들은 대소문자를 구분하지 않는다. 하지만 W3School 권장으로는 모두 소문자로 쓸 것을 권장하더라

 

두번째로 Attribute, 속성이 존재한다.

 

일부 요소에는 속성이 추가로 들어갈 수 있다. 예를 들면 링크를 건다던지, 이미지를 추가한다던지 할때 말이다.

<a href="https://www.google.com">구글로 이동하기</a>

a라는 요소에 href라는 속성을 추가해 링크를 걸어준 모습, href 외에도 다른 속성들이 많다.

 

여기서도 또다른 암묵적인 규칙을 추천해주는데. 속성의 값은 "를 쓰는 것을 권장하더라.

 

물론 속성의 값 안에 '나 "를 써야 하는 경우는 예외로 하지만 대부분은 "를 쓸것을 권장했다.

 

아래에서는 여러가지 신기했던 요소들을 소개한다.

아마 실제로 사이트를 만들때보다는 블로그 글이나 커뮤니티 글쓸때나 요긴하게 쓸듯 하다.

  • <b> - 굵은 글씨
  • <strong> -강조하기 // <b>와 동일하지만 <em>처럼 강조하고 싶은 글자에 사용
  • <i> - 이탈릭체(눕혀쓰기) //웹브라우저에서 볼때만 사용
  • <em> - 이탈릭체(눕혀쓰기) //브라우저 내의 음성으로 읽기등에서도 강조하여 읽는 등, 실제로 강조할때 사용
  • <mark> - 메모 앱에서 형광펜을 칠한 것처럼 나옴
  • <small> - 아래에서 볼 sub,sup과는 다르게 약간 작은 사이즈의 텍스트를 출력한
  • <del> - 삭제선 ( 나무위키에서 보던 그거 )
  • <ins> - 밑줄
  • <sub> - 위쪽으로 올려쓰기
  • <sup> - 밑으로 내려쓰기

또 이런걸 사용하기도 하나 했던것도 있었는데

이렇게 쓰면 브라우저가 거꾸로 표현해준다.

 <bdo dir="rtl">This text will be written from right to left</bdo>

다른 부분으로는 HTML내에 주석을 작성하는 방법이다.

 

<!-- 한줄 주석이 필요할때는 이렇게 --> 

<!-- 여러줄 주석이 필요할 때는 이렇게
약간 나누어서 작성하면 된다.--> 

 

CSS란 무엇인가.

 

Cascading Style Sheet로

 

위에서 사용했던 요소들이 얼만큼 커야 되는지, 어떤 생상으로 표현되어야 하는지

위 아래 여백은 얼마나 되는지 정하는 Style Sheet임

 

CSS를 사용하는 방법은 여러가지가 있다.

 

1. 요소에 style 속성을 넣어서 사용하는 방법.

2. html 문서의 <head> 영역에 <style>이라는 요소를 통해 넣는 방법

3. 또다른 .css 파일을 만들어 <head> 영역에 링크로 넣어 브라우저에 알리는 방법

 

-끗- ㅇㅅㅇ

 

반응형

'자기개발 > HTML|CSS|JS' 카테고리의 다른 글

W3School HTML 2일차  (0) 2020.08.27
W3School HTML 1일차  (0) 2020.08.26
0 Comments
댓글쓰기 폼