이진욱의코딩

part1.프론트엔드의 기초 본문

HTML

part1.프론트엔드의 기초

Crucifi 2019. 9. 10. 00:01

오늘부터 저는 it학원을 다니기로 했습니다. 그 이유는 react.js나 vue.js를 빨리 접해보고 싶기도 하면서 제가 부족한 부분을 채울 겸 기초를 단단히 하고 싶은 마음에 생전 처음으로 학원 등록을 했습니다.

 

9월 9일부터 시작해서 2월까지 총 5개월 과정으로 신청을 했습니다.

그래서 저는 오늘부터 학원에서 배운 것들을 복습 차 블로그에 하나하나 기록을 할 예정입니다. 5개월 동안 말이죠.

물론 학원 공부뿐만 아니라 제가 따로 책을 사서 공부할 예정입니다. 물론 블로그 포스팅도 하고요.

 

서론은 여기까지 적고 오늘 배운 내용에 대해 포스팅을 해보도록 하겠습니다.

 

수업은 vs, atom, edit+등의 프로그램 도구 중 본인이랑 잘 맞는 프로그램을 선택해서 사용하시면 됩니다.

저는 기존에 ms에 있는 프로그램 도구인 vs(visual studio code)라는 프로그램을 사용했는데요. 이번에는 atom이라는

프로그램 도구를 이용해서 코딩을 할 겁니다.(이것저것 한 번씩 해보자는 마음으로)

atom은 https://atom.io/ 여기 이 사이트에 들어가서 맞는 사양으로 다운로드하셔서 사용하시면 됩니다.

사용법은 vs랑 비슷하니 궁금하시면 제가 포스팅했던 내용을 참고해주시면 됩니다.

 

설치가 완료가 되었다면 코드의 처음 부분이나 적은 코드의 저장방법에 대해 설명드리겠습니다.

 

저장방법은 좌측 상단에 new file을 선택하시고 ctrl+s를 눌러서 자신이 저장하고 싶은 부분에 저장하시면 됩니다.

html 파일로 저장하고 싶으면 파일명.html  js파일로 저장하고 싶으면 파일명. js로 저장하시면 됩니다.

여기까지가 기본이 되는 저장방법입니다.

 

프로그램 도구를 켜시고 기본적으로 적으셔야 하는 것을 알려드리겠습니다.

코드를 한번 보시죠.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

이것이 기본 틀입니다. 저는 vs를 사용하면서 html:5만 쳐도 자동적으로 필요한 소스코드들이 나와서 별 신경을 쓰지도, 외우지도 않은 상태였습니다. 하지만 오늘 이 코드들을 하나하나 타이핑을 해보니 기억이 잘 안나더군요...ㅠㅠ

나름 어느 정도 했다고 생각했는데 이렇게 부분적으로 구멍 난 부분을 찾으니 이래서 학원을 다니는구나 라고 생각이 들었습니다.

 

이렇게 title 사이에 제목을 적고 내용을 적고 싶으면 body부분에 적으시면 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>문단태그, paragraph</title>
</head>
<body>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non est fuga natus, facilis cumque laborum libero dolores asperiores, quos explicabo iste sint dicta alias aspernatur, quisquam delectus pariatur numquam. Soluta!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod animi sint voluptates alias quasi? Porro doloremque, assumenda quaerat autem numquam repellendus veritatis provident neque modi maiores ipsa molestias odio inventore!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam quos nemo, earum harum, dicta ipsa incidunt quas est, aliquid sequi iusto pariatur esse! Voluptas dolorum inventore libero, quaerat porro veritatis.

</body>
</html>

결과입니다.

이런 식으로 문장을 막 적으면 보기도 힘들고 나누기도 힘듭니다.

이럴 때 사용하는 태그가 문단 태그인데요.

우선 코드를 먼저 보시죠

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>문단태그, paragraph</title>
</head>
<body>
   <h1>fly</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.<br> Non est fuga natus, facilis cumque laborum libero dolores asperiores, quos explicabo iste sint dicta alias aspernatur, quisquam delectus pariatur numquam. Soluta!
    </p>
    <hr>   
   <h2>lion</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod animi sint voluptates alias quasi? Porro doloremque, assumenda quaerat autem numquam repellendus veritatis provident neque modi maiores ipsa molestias odio inventore!
    </p>
    <hr>    
    <h3>mouse</h3>    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam quos nemo, earum harum, dicta ipsa incidunt quas est, aliquid sequi iusto pariatur esse! Voluptas dolorum inventore libero, quaerat porro veritatis.
    </p>
    <hr>
</body>
</html>

훨씬깔끔해진모습

<h1>~<h3> 태그는 제목을 나타내는 태그입니다. <p>는 문단을 나누는 태그이고요, 강제 줄 바꿈은 <br> 태그를 사용합니다. <hr> 태그는 선을 그어서 더 보기 좋게 문단을 나누는 역할을 합니다.

 

여기서 잠깐 <h1> 태그부터 <h3> 태그로 가면 갈수록 제목의 폰트 사이즈가 점점 작아지는 것을 볼 수 있습니다.

<h1>의 제목 태그 크기와 <h2> 태그의 크기는 2배 차이가 납니다. 

<h1>는 가장 큰 제목

<h2>는 그다음 큰제목

.

.

.

<h6>는 가장 적은 제목을 쓸 때 필요한 태그입니다.

<h1>~<h6> 태그는 <p> 태그와 마찬가지로 자동으로 줄 바꿈이 된다는 것을 유의하시면 됩니다.

 

브라우저마다 기본값이 조금씩 다릅니다. 

여기까지가 오늘 제가 배우고 공부한 내용입니다. 내일 또 공부하고 이 시간에 포스팅할게요~~

'HTML' 카테고리의 다른 글

하이퍼링크사용법 + 이미지태그에 대해 알아봅시다.  (0) 2019.09.12
여러가지 태그에 대해 알아봅시다.  (0) 2019.09.11
HTML-입력방식(FORM)  (0) 2019.07.09
표-table  (0) 2019.07.08
부모 자식과 목록  (0) 2019.07.08
'HTML' Related Articles more