TIL-5, HTML, CSS, JavaScript (HTML 편)

3804 단어 TILhtmlTIL

자바스크립트 기초로 변수, 타입, 함수, 조건문, 문자열, 반복문을 공부하고, 오늘부터는 HTML과 CSS의 기초를 공부한다.
다행히 이것들은 본격 공부를 시작하기 전에 유튜브를 보면서
깨작깨작 따라해본적이 있어서 크게 낯설게 느껴지지 않았다.

기본적으로,

  • HTML -> Structrue(구조)
  • CSS -> Presentation(스타일)
  • JavaScript -> Interaction(상호작용)

위와 같은 특성을 갖는다.
HTML로 웹을 구성하는 뼈대(구조)를 만들고,
그 안에 웹을 꾸며주는 CSS로 스타일링을 해주고,
JavaScript로 상호작용하는 웹으로 만들어준다.

오늘은 HTML의 기초 먼저 공부해보자.
HTML의 기본적인 구조를 작성해보면

<!DOCTYPE html>
  <head>
    <title>page title</title>
  </head>
  <body>
    <h1>HTML</h1>
    <div>Contents
      <span>too</sspan>
    </div>
  </body>
</html>

위와 같이 나타낼 수 있다.
이때, 많은 tag들로 이루어지는데,
tag는 부등호(<>)로 묶여있다.
tag는 (</>)로 끝낸다.

몇가지 태그를 아래에서 살펴보자.

<h1>내용<h1>
-> Headline 즉 본문을 시작할때 제목을 크기로서 표시해준다.
h1부터 h6까지, 갈수록 글자 크기는 작아진다.
<div>내용</div>
-> Block element로서, 한 줄 전체를 차지하기 떄문에
내용을 입력하면 줄바꿈이 된다.
<span>내용</span>
-> Inline element로서, 내용이 줄바꿈되지 않고 이어진다.
<img src = "경로/이름.jpg"></img>
-> 이미지 파일을 로드한다.
(경로를 지정할때, ./는 현재 폴더, ../는 상위 폴더를 의미,
ex) ./img.jpg -> 현재 폴더의 img.jpg 라는 이미지 파일
ex) ../img.jpg -> 상위 폴더의 img.jpg라는 이미지 파일
ex) ../../img.jpg -> 상위 폴더의 상위 폴더의 img.jpg라는 이미지 파일.
<a href = "링크 주소">하이퍼링크 이름</a>
-> a (anchor, 닻) tag는 뜻 그대로 웹이라는 바다에 닻을 내린다고 생각하자. 하이퍼링크를 씌울때 사용한다.

(JS) Programmers : 같은 숫자는 싫어
[파이썬 알고리즘 인터뷰] 배열 - 세 수의 합

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage