WEB 개발 입문

1. 웹 브라우저란 ?

 

2. 웹 브라우저의 종류

 

3. HTML

 

4. Element

---

1. 웹브라우저란 ?

브라우저는 사용자와 서버를 연결시켜 데이터를 주고받는 것이다. 

브라우저는 파일을 읽어 파일 입출력을 해줄 수 있다. 

 

2. 웹 브라우저의 종류 

chrome, edge, safari, firefox 등이 있다. 

왜 chrome 일까?  >> 가장 빨라서 많이 사용한다.

 

3. HTML (Hypertext Markup Language)

HTML 웹브라우저에서 가장많이 사용하는 문서이다. 

 

하이퍼링크를 통해서 다른 문서로 이동할 수 있다.

 

HTML 형식 파일

 

메모장에 hello를 입력하고 html 확장자로 변경해주면 자신의 브라우저에 맞는 브라우저로 읽어준다.

 

F12 를 통핵 개발자 도구를 열 수 있다. 

 

F12

 

메모장 형식의 텍스트 편집기를 사용하면 MACOS에서 사용되지 않기 때문에 VSCODE 텍스트 편집기를 통해 개발한다. 

 

VSCODE

VSCODE를 통해 자동완성과 확장프로그램들을 통해 여러언어와 편리성을 추구할 수 있다.

4. Element

<> 를 사용하여  </> 요소를 나타낸다. 

 

4-1. div

<div>
            앞으로 가장 많이 사용하는 엘리먼트 입니다. 
            이렇게 입력하면 어떻게 뜰까요?
</div>

위와 같은 형식으로 띄어 써도 실제로는 줄바꿈 되지 않고 연결되어 나온다. 

<div></div> 는 줄바꿈 형식으로 사용된다. 

 

<div>
            부모 엘리먼트입니다.
            <div>자식 엘리먼트입니다.</div>
            <div>자식 엘리먼트입니다.</div>
</div>

위와 같은 형태로 부모와 자식 관계로 감싸고 있는 형태로 구현할 수 있다.  

4-2. p

<p>
            문단을 작성하는 엘리먼트입니다. 
            줄바꿈이 될까요? 
</p>

<p></p> 엘리먼트의 경우  문단이 한칸 띄어져서 나온다. 

<p></p> 의경우 문단안에 p나 div는 들어갈 수 없다. 

 

4-3. span

<span>가</span>
<span>나</span>
<span>다</span>

<span></span> 의 경우 한칸 띄어쓰기 형태로 출력이 된다. 

 

4-4. 주석

<!-- ctrl 슬래시를 하면 주석이 된다. 출력이 되지 않는다. 단 개발자 도구에선 보인다. 배포전엔 주석 제거 필수-->

 

출력 예시

4-5 기본적인  vscode 프리티어 설정 

default formatter : Prettier - Code formatter

format on save : 켜기