TIL #16 HTML-기본정리

강경훈·2020년 8월 18일
0
post-thumbnail

본격적으로 Wecode의 개발자 과정을 시작 하였다.
1주차 처음 시작은 HTML과 CSS 였다. HTML과 CSS는 Javascript와 같이 프론트에드를 개발할 때 사용하는 언어이다. 백엔드 개발자를 희망하고 있지만, 먼저 HTML과 CSS를 배우는 이유는 주니어 백엔드 개발자가 많이 하게 될 웹 크롤링을 하기 위해서는 HTML과 CSS을 알아야하기 때문이다.

  • HTML: 웹페이지의 뼈대라고 할 수 있다.
  • CSS: HTML로 뼈대를 만든 웹페이지를 디자인하는 즉, 인테리어라고 할 수 있다.
  1. HTML의 구조
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> #한국어를 인코딩하기 위한 코드
    <meta name="viewport" content="width=device-width"> # 웹의 크기를 디바이스 크기에 따라 조절해주기 위한 코드
    <title></title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
  • HTML은 < html>과 같은 tag들로 구성되어 있으며, tag는 opening tag와 opening tag에 (/)을 붙힌(예: < /html>) closing tag로 이루어져 있다.
  • 대표적인 tag
    - < title>: 웹페이지의 제목을 설정
    - < body>: 실질적으로 우리가 웹에서 보는 부분을 작성
    - < p>: 단락을 구성할 때 사용
    - < a>: link를 만들 때 사용
    - < div>: 특별한 기능은 없지만, 비슷한 부분끼리 그룹을 지어주고 디자인에 맞게 레이아웃을 분리하기위해 사용
    - < ol>, < ul>: 리스트를 만들 때 사용
    - < table>: 표를 만들 때 사용
    - < img>, < video>: 이미지나, 영상을 업로드 할 때 사용
    -< input>: text를 입력할 때 사용
  1. Element(요소)

    1) tag: HTML을 이루고 있는 기본 단위, 시작태그(opening)와 끝태그(closing)가 있다. (< input>, < img> 같이 끝태그가 없는 태그도 존재)
    2) content: 시작과 끝 태그사이의 내용, 말그대로 우리가 웹에서 보는 내용.
    3) Element: tag와 contrnt를 합쳐서 요소라고 부르며, 이것들이 모여 하나의 웹페이지를 구성한다.
  2. Attribute
    태그에 속성을 부여 해주는 역할을 하며 태그마다 종류는 다르다
    예 1)
    <img src="./hi.png" alt="내사진" >
    -< img>: 이미지를 삽입하는 태그
    -src: 이미지의 경로 or URL을 입렵해주는 < img>의 attribute
    -alt: 이미지가 재대로 삽입되지 않았을 때 내용을 입력하는 < img>의 attribute
    예 2)
    <a href="https://wecode.com" target="_blank">위코드로 이동</a>
    -< a>: link를 만들어 주는 태그
    -href: link를 타고 들어갈 곳의 경로 or URL을 입력하는 < a>의 attribute
    -target="_blank": 새 창을 열어 link하고 싶을 때 target이라는 attribute에 "_blank"라는 속성을 부여하면 된다.
  3. inline VS block
    태그들은 inline 또는 block의 성격을 갖는다.
  • inline: 해당 요소가 가지고 내용만큼 영역을 차지하고, 다음 요소의 내용이 바로 옆에서 실행된다.
    (< span>, < input>, < textarea> 등)
  • -block: 해당 요소가 가지고 있는 내용과 상관없이 전체 가로길의 영역을 전부 차지한다. 따라서 다음 요소의 내용은 옆이 아닌 아래에서 실행된다.
    (< p>, < img>, < ul> 등)
  • 참고 (맨 마지막은 span을 사용하여 inline, 나머지는 block)
profile
방랑하는 개발자

0개의 댓글