[9월 기획기사] 병아리의 알려주는 웹 페이지 똑같이 따라 만드는 법!

안녕하세요 !

 

싸피 꿀팁 한그릇 시키신 분?

여러분의 싸피셜, 병아리가 돌아왔습니다 🐣 (와아아아아아아)

 

SSAFY 10기의 전공 Java반은 길고~ 길었던 알고리즘 주간을 마치고

9월달부터 약 2주간 프론트엔드를 배웠어요. 그래서 오늘의 주제는!!

 

웹페이지 퍼블리싱을 좋아하는 기자로서..(비장)

 

'웹 페이지 똑같이 따라 만드는 쉬운 방법'을 공유하고자 합니다.

---

참고로 저는 싸피에 오기 전에 퍼블리싱에 관심이 생겨서

한 달 정도 열심히 html, css 강의를 듣고

참고 강의 없이 홈페이지들을 몇 번 혼자 만들어봤어요!

요런 것들 말이죠..

어때유 프로그래머스 홈페이지 같쥬,,?ㅋㅌㅋ

후딱 만들어봤던 숨고 페이지,, ㅋㅋㅋ

이번 관통 프로젝트 때 만든 것! 슬라이드가 이동할 때 텍스트와 색깔이 함께 바뀌어요 👍

각 이미지에 마우스를 올리면 가로 크기가 늘어나요

 

 

내친김에 하나 더 자랑하자면,,

요건 싸피 스타트 캠프 아이디어톤에서 만든 목업 디자인입니다 ㅎㅎ임시 3반 즐거웠다,,!!!

 

요런 홈페이지들을 클론해보면서 느낀 점들을 공유해보겠습니다.

나 프론트엔드 할래...😂

 

자, 그럼 바로 시작해볼게요!

"입벌려 꿀팁 들어간다~~~~"

 

꿀팁 첫 번째,

나와라 지식의 별! ⭐️⭐️⭐️⭐️⭐️

 

네, 사실입니다.

페이지를 잘 꾸미려면 페이지를 박스(div)로 나누어 볼 줄 알아야 합니다.

처음에 에듀싸피 홈의 깔끔함과 색깔에 취향저격 당했었던 기억이 나네요.. ㅋㅋㅎ;

싸피생이시라면 이 페이지 익숙하시죠,,? ㅋㅋㅋ

 

그래도 에듀싸피 사랑하시죠?

 

우리가 매일 보는 에듀싸피를 예시로 들어보겠습니다.

이 페이지를 박스로 대략 나누어보면 다음과 같습니다.

여러분의 눈 건강을 위해 여기까지만,,

페이지의 윗 부분만 div들의 배치를 나누어봤는데요, 색깔이 많아서 정신이 없죠? ㅋㅋㅋ

실제 페이지 배치와는 약간 다를 수 있겠지만, 전체적인 틀은 비슷할 겁니다. 아마.. 아니 그래야만 해요.

 

이렇게 html을 구상할 때에는 전체적인 틀과 박스의 배치를 생각하면서 만들어야 합니다.

즉, 상위 div를 잡고 하위 div에 어떤 것이 들어갈까 생각하면서 만들어야 한다는 것이죠.

 

전체적인 틀을 생각하지 않고 손 가는 대로 짜게 되면 css를 입힐 때 div들이 자기 마음대로 이동한다거나,

심한 경우 다시 처음부터 틀을 짜야 하는 경우가 많이 생기니 주의하세요!

 

꿀팁 두 번째,

유튜브 1분 미만님의 강의를 보면서 알게 된 사실,,!

네모 안에 들어갈 말은 뭘까요?

맞습니다.

바로 default.css 입니다.

---

다들 Visual Studio Code에서 열심히 nav를 만들었는데,

페이지 끝에 살짝 빈 공간이 생겨서 찝찝했던 경험이 있으신가요?

또는 ul 이나 li 를 만들면 앞에 동그라미가 생겨서 거슬렸던 적도 있으시죠?

이젠 default.css를 사용해보세요!

자잘한 것들을 신경쓰지 않고 편하게 홈페이지를 만들 수 있습니다.

(광고 아닙니다..)

 

---

코드는 아래와 같습니다. 필요할 때 가져다 쓰세요~~

@charset 'utf-8';

html {
	font-family: 'Apple SD Gothic Neo', Roboto, 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif;
	line-height: 1.2;
	word-wrap: break-word;
}
body {
	-webkit-font-smoothing: antialiased;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
div, span, article, section, header, footer, aside, p, ul, li, fieldset, legend, label, a, nav, form {
	box-sizing: border-box;
}
ol, ul, li {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
button {
	border: 0;
	background: transparent;
	cursor: pointer;
}

꿀팁 세 번째,

F12 없인 나는 못살아 ~.~

 

윈도우는 F12, 맥은 Command + Option + I 를 누르면 개발자 도구를 볼 수 있습니다.

바로 요걸 적극 활용하시면 됩니다!

 

저같은 경우엔 틀은 페이지를 보고 알아서 짜는 편이지만, 

각 사이트마다 다른 max-width의 너비, 글자 크기, 사용한 색상의 종류 등은 개발자 도구에서 확인합니다.

자세히 보시면 다음과 같이 친절하게 나와있습니다.

 

아하,, max-width는 1200px로 잡으면 되겠꾼

 

색깔은 고민 고민하지마~ girl~

저기 background-color 보이시죠? 그대로 가져다 쓰시면 됩니다.

개발자 도구에 써있는 그대로를 따라하진 않지만, 색깔같은 건 그대로 써야 이쁘더라구요!

 

---

지금까지 퍼블리싱 꿀팁을 간단하게 알아보았는데요, 사실 더 많지만,, 다음에 더 좋은 내용으로 가져와볼게요! ㅎㅎㅎ

 

이 꿀팁들을 잘 숙지하시고

css(특히, flex)를 써보면서 연습하면 처음에 보여드렸던 사이트들도 금~방 만들 수 있게 됩니다.

 

다들 html, css 너무 싫어하지마세요.
사실 저도 싫어요...

그래서 오늘부로 프론트엔드 접습니다. 그 다음 끝선에 맞추어 반 접습니다. 뒤로 돌려 양쪽 모두 펼칩니다. 끝 부분을 살짝 접고선 중심선에 맞춰 위로 올려 접은 뒤 뒤집으면 예쁜 하트 만들기 완성.

 

---

 

여러분,

오늘 기사는 여기까지입니다.

읽어주셔서 감사드립니다.

 

조만간 또 잼난 내용을 가지고 자율기사로 돌아오겠습니다 ㅎㅎㅎㅎ

그럼 모두 즐거운 추석 연휴 보내세요! 😀