쫑's바른생활

[코딩 초보 개발일지] 입문_02. html 배우기 본문

개발일지/입문

[코딩 초보 개발일지] 입문_02. html 배우기

쫑이야기 2023. 4. 2. 19:43
728x90
반응형

 

<Step. 01>

 
(전제) 앞으로 만든 작업물을 저장하기 위한 폴더를 만든 뒤
 
비쥬얼 스튜디오 코드 실행
 
해당 폴더를 연다.
(필자는 '연습용' 이라는 폴더 생성)
 
 
 
 
 
 
 

<Step. 02>

 
마우스 오른쪽 버튼
New File
 
파일명과 확장자(html) 작성.
 
필자는 2.html 로
작성하였다.
 

<Step. 03>

작성란에 
 
! + Tap 키를 누른다.
 
(! 입력 후 바로 탭키 눌러야 적용)
 
 
 
 
 

<Step. 04>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

그러면 위와 같은 기본설정(?) 또는 기본틀(?)이 나온다.
두번째 줄 lang(언어)을 english가 아닌 한국어로 하기위해
en 을 지우고 ko로 작성하여 해도된다.

728x90


 

<Step. 05>

오늘 만들 작업물은 아래와 같다.

우리는 웹 페이지에
 
wrap 부터 footer 라는
블럭을 생성할 예정!
 

<Step. 06>

 

<body> 본문에 
id(이름)가 wrap 인 아이를 만들어야 한다.
#wrap + tap키를 누르면 
오른쪽과 같이 코드가 입력된다.
 
여기서 잠깐!
 
<div> 는 영역의 시작을 말하는 것이고,
</div>는 영역의 끝을 말한다.
 
우리는 wrap 이라는 큰 틀에 header~footer 을 넣어야  하므로
노란색이 가르키는 저 위치(즉, wrap의 영역) 안에
header~footer을 넣어야 한다.
 
노란색 위치에 커서를 두고 엔터!
 

<Step. 07>

아래 코드와 같이 입력한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div>
        <div id="banner">banner</div>
        <div id="contents">contents</div>
        <div id="footer">footer</div>         
    </div>
</body>
</html>

 

<Step. 08>

하단의 Go Live 를 클릭하여
실시간으로 어떻게 만들어지는지 확인!
 
오른쪽 그림과 같이
wrap(보이지는 않지만)에서
footer에 이르는 영역이 생성됨
 

< 끝 >

그럼 이제 만든 블록들을
꾸며보는 기능을 공부하러 갈 차례!
 
그건 바로 css라고 불린다.
다음 게시글로 뿅!

728x90
반응형

'개발일지 > 입문' 카테고리의 다른 글

[코딩 초보 개발일지] 입문_04-2. css 작업물 만들기(네비게이션)  (0) 2023.04.10
[코딩 초보 개발일지] 입문_04-1. css 작업물 만들기  (0) 2023.04.05
[코딩 초보 개발일지] 입문_03-2. css 작업물 만들기  (0) 2023.04.03
[코딩 초보 개발일지] 입문_03-1. css 작업물 만들기  (0) 2023.04.03
[코딩 초보 개발일지] 입문_01. 프로그램 설치  (1) 2023.04.02
'개발일지/입문' Related Articles more
Comments