기존에 작성된 1.html에서 우클릭해서 Duplicate를 클릭합니다. 해당 문서를 복제한다는건데요.

index.html 파일명을 지정해줍니다.

동일하게 2.html 등으로 복제합니다. 그리고 일부내용을 아래처럼 수정합니다.

title부분에서 Css로 수정, 아래 내용에 h1 옆에 CSS 그리고 내용입력 (내용은 필요한경우 더 추가해도 됩니다. 본인의 글을 한번 적어보세요!!!)

마지막 5.html까지 동일한방법으로 수정해봅니다.

전 이렇게 수정했어요!!!

모두 저장하고,

index.html 파일을 열어볼께요!!

2. Index.html 파일을 통해서 웹사이트 시작페이지 열어보기

index.html은 웹페이지에서 제일 처음으로 보여주는 페이지입니다.

기본적으로 웹페이지에서 이 파일을 시작페이지로 인식해요!!!

그리고 연결된 링크들을 한번씩 클릭해보세요!!

아래와 같이 보여지면 성공한겁니다!!

이렇게 홈페이지를 만듭니다!!

어렵지 않죠?

여기에서 조금씩 추가하면 되는데요!!

기본적인 홈페이지의 골격은 여러분들이 배우게 된겁니다!!

경!축!!드립니다.

3. 실제 인터넷에서 접속할 수 있게 웹호스팅에 파일 올려보기

그럼 이걸 실제 인터넷상에 올려볼께요!!!

아래 홈페이지를 먼저 가입합니다.

app.netlify.com/drop

제일 오른쪽 상단에 Sign up 보이시죠?

제일 아래에 이메일로 가입하시면 됩니다.

가입이 성공적으로 되었으면, 로그인 후

지금까지 만든 웹페이지 폴더를 그대로 드래그 앤 드랍하면 끝!!!!

바탕화면에 있는 web폴더를 오른쪽 페이지에 드래그 앤 드랍해보세요!!

대략 아래와 같이 나올텐데요..

위에 녹색표현이 여러분의 홈페이지 주소가 됩니다.

제가 만든건 이렇게 되네요!!

admiring-aryabhata-e12dfc.netlify.app/

한번 들어가볼까요?

와 지금까지 실습한 내용이 이렇게 인터넷상에 뜨네요!!!

신기하죠?

참고로 위 사이트는 html, css, javascript까지 무료로 적용이 가능한 웹호스팅사이트입니다.

아마도 Javascript까지는 실습한 내용을 위 사이트를 통해서 확인해보셔도 좋을것 같아요!!

그럼 이번 수업은 여기까지 하겠습니다.

본 강의는 생활코딩의 자료를 바탕으로 하여 필요한 부분을 수정하고 재작성된 강의안입니다.

opentutorials.org/course/3084/18431

반응형

HTML+CSS (기초) 홈페이지 만들기 스타일 시트 적용 (media 이용, 기능 없음)

<최종 화면> 하나의 html문에 모바일, 데스크탑용 두개의 스타일 시트 적용

600px 이하는 모바일 css가 적용되고, 600px 이상일 시 데스크탑용 css 파일이 적용된다.

우선 최종 화면과 같이 만들기 위해 위에서 부터 글을 작성한다.

텝 메뉴처럼 보이는 메뉴 이름을 ul의 li로 만들자.

article요소는 각각 독립적인 내용을 담을때 사용한다.

이미지 3개를 article요소로 묶고 그안에 배치에 따라 첫 큰이미지 1개, 수평 배열이 된 이미지2개는 section요소로 묶겠다.

footer는 원래는 이미지로 하지 않는다. (브라우저가 늘어나면 깨짐 현상 발생)

예제이므로 그냥 이미지로 대체함.

이제 html에 글을 다 작성하였으면, css로 스타일을 적용하겠다. 미리 만들 company.css 파일을 링크한다.

이제 company.css 파일을 만들자.

우선 기본적으로 요소에 들어가 있는 padding과 margin을 없애자.

(의도와 다르게 적용이 되므로 처음에 모든 요소 padding, margin = 0으로 초기화하고 시작.

header는 메뉴바처럼 생긴 것으로 보면 된다.

(.html에서 header안에 logo, top_menu, nav가 들어가 있다.)

header가 부모 역할이기 때문에, position: relative를 주고

자식들의 position : absolute주면 부모를 기준으로 위치가 지정된다.

(만약 header의 position: absolute를 주면 웹 브라우저 좌측 상단(0,0)을 기준을 위치 지정된다.)

top_menu를 header기준으로 위, 오른쪽 정렬을 하고 20px,10px만큼 margin을 준다.

네비게이션 메뉴도 적절하게 배치하자.

이제 li요소들을 가로로 배치하기 위해 인라인 요소로 바꿔주자.

글씨가 잘 보이기 위해서, 글씨 색을 흰색으로 하겠다.

최종 화면을 보면 2개 이미지가 가로로 배치된 것을 알 수 있다. 인라인 속성으로 바꾸자.

footer의 사이즈를 헤더와 맞추고, 예제에서는 가운데 배치를 했는데 이미지 사이즈가 작아서 양 옆이 비었다..

그것을 맞추려고 배경색(이미지와 같은색 #f1f1f1)을 주었다.

홈페이지를 보면 웹 브라우저 기준으로 왼쪽으로 딱 붙어 있다. 전체적으로 가운데로 오는 것이 보기 좋으므로 정렬해주자.

아래 사진을 보면 웹 브라우저 중간에 배치된 것을 알 수 있다.

이제 모바일용 스타일 시트를 만들어서 적용하자.

(화면이 작은 디바이스용 스타일)

차이점은 대부분 company.css와 비슷하고, li요소를 인라인으로 바꾸지 않았다.

그리고 2개 이미지도 가로로 배치를 했는데, 모바일에서는 인라인으로 바꾸지 않아서 한줄씩 수직 배열되게 한 것이다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 * { margin : 0 ; padding : 0 ; } ul { list-style : none ; } a { text-decoration : none ; } header { width : 100% ; background-color : #2d3a4b ; position : relative ; } #log { padding-top : 30px ; padding-left : 30px ; } #top_menu { position : absolute ; right : 10px ; top : 20px ; color : white ; } #top_menu a { color : white ; font-size : 14px ; } nav { border-top : 1px solid white ; border-bottom : 1px solid white ; margin-top : 10px ; } nav li { line-height : 3em ; border-bottom : 1px solid #223344 ; } nav li a { color : white ; display : block ; text-align : center ; } nav li a :hover { background-color : white ; color : black ; } #content #main img { width : 100% ; border : 1px solid gray ; } #content #banner li { border-bottom : 1px solid gray ; } #content #banner li a { display : block ; text-align : center ; } footer { padding : 0px 10px ; } footer img { width : 100% ; }

600px 이하는 모바일 css가 적용되고, 600px 이상일 시 데스크탑용 css 파일이 적용된다.

<최종 화면>

<복붙용 코드>

company.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 < !DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > Company < / title > < link rel = "stylesheet" href = "./ company_mobile.css media = "(max-width:600px)" > < link rel = "stylesheet" href = "./ company.css media = "(min-width:600px)" > < / head > < body > < div id = "page" > < header > < div id = "logo" > < img src = "./imgs_company/ logo.png alt = "Logo" > < / div > < div id = "top_menu" > < a href = "#" > HOME < / a > | < a href = "#" > NOTICE < / a > | < a href = "#" > LOGIN < / a > | < a href = "#" > JOIN < / a > < / div > < nav > < ul > < li > < a href = "#" > COMPANY < / a > < / li > < li > < a href = "#" > PRODUCT < / a > < / li > < li > < a href = "#" > CUSTOMER < / a > < / li > < li > < a href = "#" > SERVICE < / a > < / li > < li > < a href = "#" > RECRUIT < / a > < / li > < / ul > < / nav > < / header > < article id = "content" > < section id = "main" > < img src = "./imgs_company/ main_img.png alt = "main img" > < / section > < section > < ul id = "banner" > < li > < a href = "#" > < img src = "./imgs_company/ banner1.png alt = "banner1" > < / a > < / li > < li > < a href = "#" > < img src = "./imgs_company/ banner2.png alt = "banner2" > < / a > < / li > < / ul > < / section > < / article > < footer > < img src = "./imgs_company/ address.png alt = "address" > < / footer > < / div > < / body > < / html >

company.css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 * { margin : 0px ; padding : 0px ; } ul { list-style : none ; } /* 리스트 앞에 . 같은거 제거*/ a { text-decoration : none ; } /* 링크에 밑줄 같은거 제거*/ header { width : 800px ; /*메인 이미지의 너비 사이즈와 같음*/ height : 95px ; background-color : #2d3a4b ; /* header 안에 요소들을 모두 absolute 포지션으로 배치할 것이라서 */ /* absolute 요소가 header의 좌상단을 기준으로 하려면 */ /* header의 position이 relative 여야만 함 */ position : relative ; } /* 제목영역안에 있는 메인 로고 이미지 위치 지정 */ #logo { position : absolute ; top : 30px ; left : 30px ; } /* 제목영역안에 오른쪽 상단에 top_menu 배치 */ #top_menu { position : absolute ; top : 20px ; right : 10px ; color : white ; } /* top_menu a의 글시 하얀색으로 */ #top_menu a { color : white ; } /* 헤더 영역안에 네비게이션 메뉴 배치 */ nav { position : absolute ; bottom : 10px ; left : 220px ; font-size : 16px ; } nav li { display : inline ; margin-left : 30px ; } nav li a { color : white ; } /* 콘텐츠 영역의 알래에 있는 배너 이미지 inline으로 */ #content li { display : inline ; margin-left : 50px ; } /* footer 영역 */ footer { width : 800px ; /*헤더와 같은 사이즈*/ height : 90px ; margin-top : 20px ; text-align : center ; background-color : #f1f1f1 ; } /* 전체 페이지가 가운데로 오도록 */ #page { width : 820px ; margin : 0px auto ; }

company_mobile.css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 * { margin : 0 ; padding : 0 ; } ul { list-style : none ; } a { text-decoration : none ; } header { width : 100% ; background-color : #2d3a4b ; position : relative ; } #log { padding-top : 30px ; padding-left : 30px ; } #top_menu { position : absolute ; right : 10px ; top : 20px ; color : white ; } #top_menu a { color : white ; font-size : 14px ; } nav { border-top : 1px solid white ; border-bottom : 1px solid white ; margin-top : 10px ; } nav li { line-height : 3em ; border-bottom : 1px solid #223344 ; } nav li a { color : white ; display : block ; text-align : center ; } nav li a :hover { background-color : white ; color : black ; } #content #main img { width : 100% ; border : 1px solid gray ; } #content #banner li { border-bottom : 1px solid gray ; } #content #banner li a { display : block ; text-align : center ; } footer { padding : 0px 10px ; } footer img { width : 100% ; }

html/css로 웹사이트 만들기

Adobe xe 디자인 가이드를 보고 html/css로 홈페이지 만들기

(배경화면, 검색창, nav)

home.html

< html lang = " kor " > < head > < link href = " https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap " rel = " stylesheet " > < link rel = " stylesheet " type = " text/css " href = " style.css " > < body > < div class = " wrap " > < div class = " intro_bg " > < div class = " header " > < div class = " searchArea " > < form > < input type = " search " placeholer = " Search " > < span > 검색 < ul class = " nav " > < li > < a href = " # " > HOME < li > < a href = " # " > ABOUT < li > < a href = " # " > SERVICE < li > < a href = " # " > CONTACT

style.css

초등학생도 할 수 있는 홈페이지 만들기 #1 | 반응형 웹사이트 템플릿 얻기 | HTML CSS 오픈 소스로 공부하기! <왕왕초보 코딩 외전>

반응형

홈페이지 만들기 #2 | 초등학생도 따라할 수 있는 개인 홈페이지, 포트폴리오 웹사이트 만들기(Github 이용)

본 내용은 다음으로 이어집니다.

박사 입학하려고 이래저래 학교 홈페이지를 구글링하는데 한 박사 학생이 자기 포트폴리오를 만들어 놓은 것을 보았다.

약간 감명을 받아서 나도 github로 이제부터라도 공부하는 내용들을 포트폴리오로 만들어 놓으려고 한다.

나는 가성비충이고 html이나 css는 정말 조금밖에 모르기 때문에 온라인에 올라와있는 템플릿을 다운받았다.

내가 필요한 부분을 오픈 소스에서 가져와서 웹 페이지를 만들고 있다.

솔직히 내 짱구 굴려서 이쁘게 만든다고 하는 것보다 남들 만들어 놓은 걸 쓰는 게 훨씬 예쁘다

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

포트폴리오, 사업 홍보, 상품 홍보 홈페이지 만들기

HTML CSS 오픈 소스로 공부하기! 반응형 웹 디자인 아이디어 얻기

웹사이트 템플릿을 제공해주는 아주 고마운 웹사이트 모음

아래에 소개되어있는 html, css, 자바 스크립트 템플릿은 거의 대부분이 반응형이다.

개인 포트폴리오, 사업이나 상품 홍보 템플릿도 있고

디자인이 예쁘게 되어있어서 css랑 html을 살펴보면서 짜깁기하면 예쁜 홈페이지를 만들 수 있다.

구글링을 해보고 괜찮은 사이트를 뽑아보았다.

이런 건 영어로 검색하면 확실히 얻을 수 있는 게 훨씬 많다.

1. HTML5 UP: 개인 홈페이지 용으로 추천

www.html5up.net

너무나 유명한 html5up이다. 깔끔한 테마 위주이다. 많은데 그리 많지는 않다. 스타일이 안 겹치고 다양한 게 많아서 하나하나 열어보면서 마음에 드는 걸 짜깁기하는데 배울 게 많다.

내가 티스토리 스킨을 바꾼 것도 여기서 따온 게 많다.

2. Webflow: 사업, 상품 홍보 (GUI 툴 제공, 따로 템플릿 다운로드는 없음)

webflow.com/templates/free-website-templates

개인 포트폴리오도 있고, 식당, 피트니스 등 비즈니스에서 영업 종류별로? 카테고리를 몇 개 나누어서 템플릿을 만들어 놓았다.

e commerce 온라인 쇼핑을 빌드할 수 있다.

html을 전혀 몰라도 홈페이지를 만들 수 있는 툴을 제공한다.

내 취향은 아니지만 사업 관련 웹 사이트를 만들고싶은데 막막할 때 보면 참고할 수 있는 부분이 많을 것 같다.

3. Free CSS(추천): 사업, 상품 홍보, 그냥 종류가 매우 많음

www.free-css.com/template-categories/responsive

여기도 기업이나 사업을 홍보하고 마케팅하는데 쓰면 좋을 것 같은 그런 테마들이 많다. 내 눈에 디자인적으로 예쁜 것들? 눈길이 가는 것들이 많이 있다.

학교 웹사이트같은 템플릿도 보인다.

애플 웹사이트가 상품 홍보랑 장점 홍보를 이쁘게 되어있는데, 그런 스타일로 디자인된 게 좀 보인다.

4. Colorlib: 글쓰기, 블로그

colorlib.com/wp/themes/

워드프레스 테마가 많다고 한다.

블로그, 글쓰고 남한테 보여주는 그런 웹 페이지에 쓸만한 소스가 많다.

여기에도 여러 종류가 올라와있진 않지만 온라인 쇼핑몰을 빌드할 수 있는 템플릿이 있다.

전체적으로 워드프레스 블로그 스타일이다.

반응형

HTML 웹사이트 만들기

태그를 배우기 보다는 웹사이트를 만들어보자

먼저 index.html파일을 통해 HTML과 라면이라는 페이지를 만들어보았다.

그 이후에 링크를 만들어야한다.

먼저 라면과 HTML을 클릭하면

이 화면으로 돌아오게 만들어보자.

< a href = " 파일 " >

를 통해서 라면과 HTML을 누르면 홈페이지로 돌아가도록 작성하였다.

나머지 링크도 이렇게 미리 만들면 편하다!

링크를 만든 뒤 파일을 만들어도 무방하다.

1,2,3,4.html을 작성하자.

index.html을 복사한 뒤 h2태그를 사용하여 1.html에 설명을 추가했다.

이제보니 4개 메뉴만 있어도 될거같다 U_U

이런식으로 2,3,4도 만들면된다.

짜자잔

이렇게 링크도 걸린 완결된 웹사이트를 만들어보았다

우와!

공부방 :: HTML/CSS 실습 2

키워드에 대한 정보 html 홈페이지 만들기

다음은 Bing에서 html 홈페이지 만들기 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.

이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!

사람들이 주제에 대해 자주 검색하는 키워드 html/css로 웹사이트 직접 코딩해보기 [1/4] | 홈페이지 만들기

• TAMO
• 타모
• website
• hompage
• html
• css
• developer
• design
• rayout

html/css로 #웹사이트 #직접 #코딩해보기 #[1/4] #| #홈페이지 #만들기

YouTube에서 html 홈페이지 만들기 주제의 다른 동영상 보기