TIL.01

seod0209·2021년 2월 8일
0

HTML&CSS

목록 보기
1/12
post-thumbnail

Codecademy의 Beginer friendly courses 중 HTML과정에서 배운내용을 다시 정리해보고자 한다.
HTML이란 무엇인지 그 의미를 알아보고 이후 HTML의 속성 및 요소들 대해 검토하겠다.

참고자료: https://www.codecademy.com/catalog/language/html-css

1. HTML?

HTML(Hyper Text Markup Language)이란 웹페이지의 구조와 콘텐츠(내용)을 만들어 내는데 주로 사용된다.

2. HTML elements(요소)와 구조?

HTML elements는 대소문자를 구분하지 않지만
가독성을 위해 주로 소문자로 작성한다.
ex. <title>=<Title>=<TITLE>

Tags 는 웹 상의 다른 페이지로 이동하게하는 하이퍼링크의 내용을 생성하거나, 단어를 강조하는 등의 역할을 한다.

3. HTML standard

1) <!DOCTYPE html>
: HTML문서의 제일 위에 위치해야한다. "나 이제 HTML할꺼에요" 라는 일종의 선언이다.
2) <html> </html>: HTML문서 내 모든 코드를 포함한다.
3) <head> </head>: 웹페이지에 대한 정보를 알려준다.
이때 <head>는 <body>element 위에 위치한다.
4) <title> </title>: 브라우저의 탭에 보여진다.
이때 <title><head> 안에 위치한다.
5) <a> </a>: anchor; 외부 또는 내부 페이지, 같은 페이지의 내용 등을 연결할때 사용된다.

[1] Heading

<h1>Head</h1>

<h2>Head</h2>

<h3>Head</h3>

<h4>Head</h4>

<h5>Head</h5>
<h6>Head</h6>

[2] Paragraphs

1) <p> Paragraph </p>
2) <span> Span </span>
3) <br> Line Break </br>

[3] Text

1) <b> Bold </b>: 시각적으로 강조
2)<i> italics </i>
3)<strong> Strong </strong>
: 실제 페이지내 중요부분을 브라우저에 알려줌. 웹의 접근성에 기여.
4) <em> Emphasis(강조) </em>
5) <mark> Mark </mark>
6)<u> Underline </u>

5. 기타 시각효과

[1] Images: <img>

<img src="Lion.jpg"/>
<img src="https://url"/>

** 별도의 opening tag와 closing tag 없이. 자체적으로 닫음
** src attribute: 이미지의 소스나 위치 지정
**url: 웹사이트이 주소 또는 파일이 저장된 장소의 주소

[2] Videos
<video src="Lion.mp4" width="320" heigh="240" controls> Video not supported </video>

**width: 넓이/ heigh: 높이
**controls: 비디오의 멈춤, 재생, 건너뛰기등을 지시.

[3] Tables
[4] <ul>: Unordered Lists : 큰점(Bullet point)으로 목록 표시

<ul>
  <li> 돌고래 </li>
  <li> 호랑이 </li>
</ul>

[5] <ol>: ordered Lists: 목록에 순서, 단계, 순위 등이 필요할 때 사용

<ol>
  <li> 첫번째 </li>
  <li> 두번째 </li>
</ol>

일기가 밀리면 이런 느낌일까 ,, 아직도 쓸게 너무 많지만 오늘은 여기까지. 다음 TIL은 HTML form에 대해 작성해보도록 노오력을 해야겠다. CSS는 언제쓰지,,
profile
오늘도 여전히 사고친걸 해결해본당,,

0개의 댓글