Netroy's Blog
W3School HTML 1일차 본문
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 |
---|