본문 바로가기
웹 표준 사이트 만들기/레이아웃 구조 실습

웹 표준 사이트 만들기 8강

Code K 2022. 12. 29. 22:08
반응형
SMALL

 8강부터는 작업한 레이아웃을 서버에 업로드하며 진행

 

 

닷홈

www.dothome.co.kr

 

닷홈 호스팅

닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다.

www.dothome.co.kr

닷홈 회원가입 후 웹호스팅-무료 호스팅 클릭

 

 

 

무료 호스팅 신청하기

 

 

 

이용 안내 숙지 체크, 무료호스팅 신청하기 클릭.

 

 

 

이용기간 3개월(이용기간이 지나면 데이터가 삭제되니 주의)

 

 

 

담당자, 계약자 정보 입력

 

 

 

웹호스팅 설정 정보 입력

 

 

 

입력, 인증, 동의 체크

 

 

 

신청하기

 

 

 

무료 호스팅 신청 완료 후 마이닷홈 클릭

 

 

 

상세보기 클릭

 

 

 

도메인 주소, 웹서버 정보를 파일질라에 입력

 

 

파일질라

https://filezilla-project.org/

파일질라 다운 (클라이언트와 서버 차이는 모름. 강의에서는 클라이언트로 다운. 나는 이미 내 컴퓨터에 파일질라가 있어서 그대로 진행)

 

 

 

파일질라 실행

 

 

 

도메인 주소를 호스트(H)에 복붙. 사용자명 비밀번호 입력

 

 

 

연결하면 창이 뜨는데 확인 클릭

 

 

 

서버 연결

 

 

 

html 폴더에 디렉터리 만들기

 

 

 

디렉터리 web 생성

 

 

 

html 폴더에 web 폴더가 생성됐으면 완료.

 

 

 

Brackets 에서 확장 기능 관리자 클릭

 

 

 

Brackets Synapse 설치 확인

 

 

 

오른쪽에 S 자 미니아이콘 클릭

 

 

 

 

+ 클릭

 

 

 

호스트,유저,비밀번호,디렉토리 입력

 

 

 

입력 후 APPEND 클릭

 

 

 

 

서버가 연결된 걸 확인할 수 있다.

 

 

 

앞으로 서버에 접속해 작업할 때는 먼저, 미니 네모 클릭

 

 

 

CONNECT 눌러 서버와 연결하면 된다

 

 

 

서버 연결 완료

 

 

 

web 우클릭 New Directory ' css ', ' img ', ' js ' 생성

 

 

css , img, js 생성 완료

 

 

 

web 우클릭 New File ' index.html ' 생성

 

 

 

index.html 생성 완료

 

 

 

index 파일에 !(느낌표) 입력하고 Tab 누르고 DOCTYPE 선언.

 

 

 

언어 ko 입력

 

 

charset UTF-8 뜻은 모든 언어를 지원한다는 뜻

 

 

 

head 소개

 

 

 

wrap 이름의 div 박스를 3개 만든다는 뜻

 

 

Tab 누르면 wrap 이름의 div 박스 3개 완성

 

 

 

기본 구조 완성

 

 

 

주석처리

 

 

 

link 입력하고 Tab

 

 

 

link 문장 자동 입력

 

 

 

css 폴더에 New file 'style.css' 생성

 

 

 

내 파일 위치를 기준으로 상대 파일 위치를 찾는다. '상대주소'

 

 

 

style.css 로 이동 후 레이아웃 주석처리

 

 

index 파일에 id 이름 복

 

 

style.css 파일에 붙

 

내 작업 보는 법. 주소창에 도메인주소 와 web index.html 검색

 

 

 

 

현재는 스타일 작업을 하지 않아 빈 창만 보임

 

 

 

brackets 에서 codegogo 입력

 

 

 

사이트를 들어가보니 입력한 글자만 보임. (작업을 저장하고 사이트를 들어가야 업데이트한 작업이 보임)

 

 

 

페이지 소스 보기 누르면

 

 

 

내 작업 내용을 볼 수 있다

 

 

css style.css 누르면

 

 

 

css style.css 에서 작업한 내용을 볼 수 있다

 

 

 

 

charset utf-8 를 입력하면

 

 

 

한글이 깨지지 않고 잘 나온다

 

 

 

 

w,h,b 입력

 

 

 

 

w,h,b 입력 후 보기

 

 

css 폴더에 New file 'reset.css' 생성 후 입력

 

 

 

 

index 파일에 reset.css 적용

 

 

 

 

index 파일에 reset.css 적용 후 보기. 여백이 없어짐

 

 

 

index 파일에 reset.css 적용 후 보기. 여백이 없어짐. 완성!

 

 

 

index.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="codegogo">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="코드고고, 웹표준, 웹접근성, 사이트 만들기">
    <meta name="generator" content="brakets">
    <title>WEBSTANDARD SITE</title>
    
    <!-- CSS STYLE -->
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="wrap">
        <div id="header"></div>
        <div id="contents"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

 

style.css
@charset "utf-8";

/* 레이아웃 */
#wrap {width: 100%;}
#header {width: 100%; height: 325px; background: #111;}
#contents {width: 100%;height: 800px; background: #222;}
#footer {width: 100%; height: 200px; background: #333;}

 

reset.css
@charset "utf-8";

/* 여백 초기화 */
body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,
legend,p,select,table,th,td,tr,textarea,button,form{margin:0;padding:0;}

 

 

 

https://inf.run/Ks2S

https://inf.run/Ks2S

반응형
LIST

'웹 표준 사이트 만들기 > 레이아웃 구조 실습' 카테고리의 다른 글

웹 표준 사이트 만들기 9강  (2) 2022.12.30
웹 표준 사이트 만들기 7강  (0) 2022.12.29
웹 표준 사이트 만들기 6강  (0) 2022.12.29
웹 표준 사이트 만들기 5강  (2) 2022.12.29
웹 표준 사이트 만들기 4강  (0) 2022.12.28

'웹 표준 사이트 만들기/레이아웃 구조 실습' Related Articles

티스토리툴바