웹사이트 제작의 기초 (2)
06 Jul 2021우리가 보는 화면의 비밀
우리가 브라우저를 통해 보는 웹 페이지를 만드는 방법은 가지각색이니, 이 프로젝트에서는 그 중 한 가지 방법을 써보겠습니다.
참고로, 글로서 이해하려고 하면 더 이해하기 힘드니, 직접 메모장을 켜보고, 제작을 해보면서, 예시를 보면서 설렁설렁 대충대충 읽으면 오히려 더 빨리, 정확하게 알 수 있답니다. ㅎㅎ
그림도 비슷해요. 크게 구도를 볼려면 실눈 뜨고 보면 더 잘 이해되거든요? 디테일은 나중에 살리고 일단 대충대충 읽어보세요! visualize가 제일 중요합니다!
웹 페이지의 보이는 부분을 개발하는것을 프론트엔드 개발이라고 부릅니다.
이 프론트엔드의 부분에서는 HTML, REACT, JSP, JS등 여러가지의 언어로 제작을 할 수 있습니다. 실생활에서 마크업 언어 등으로 불리는 것이 그것입니다.
이 중 단연코 웹 프로그래밍을 시작하는 사람에게 제일 처음 접해지는것은 HTML 이라고 볼 수 있겠죠.
HTML을 이용하기 위해서는 tag와 content만 알면 됩니다.
HTML의 구조는 “태그”들과 그 안의 “컨텐츠” 들로 제작되어있습니다.
사실상 이 구조만 알면 HTML로만 보이는 모든 것을 제작 할 수 있습니다.
물론 HTML 자체는 정적인 언어이기에, 동적인 요소를 표현하는 것에는 조금 무리가 있겠습니다.
어쨋든! “태그”라고 불리는 것들은 쉽게 말해서 <와>사이에 들어가는 것이라고 보면 됩니다.
<html></html>
의 태그 한 쌍과 저 사이에 들어가는 또 다른 태그들
<head></head>, <body></body>
로 시작하여 조금씩 채워나가는 html의 요소들은 결국 하나의 페이지로서 웹 브라우저에 의해 “render”(그래픽화)되어 진다고 보면 됩니다.
저번 편에서 다루었던 누군가의 IP를 통해 받아오는 페이지는 이 HTML로 되어있는 페이지를 받아온다고 볼 수 있습니다. 그리고 그 중 제일 첫번째 페이지를 index.html이라고 하죠.
이해가 안된다구요? 예를 들어서 google.com 이라는 주소를 크롬에 치게 되면 크롬은 구글의 ip 중 하나인 x.x.x.x의 컴퓨터에게 가서 index.html을 달라고 합니다.
그 이후 받아온 HTML의 파일을 이용해 우리가 보는 웹 페이지를 만들어 주는것이지요.
HTML의 예시를 하나 주어 페이지 하나를 보여주겠습니다.
<html>
<head>
<title>World Page!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
지금 당장 이 코드를 메모장에 index.html이라는 이름으로 저장하고 나서 웹 브라우저에서 실행하게 되면, 텍스트로만 이루어진 하나의 화면이 눈에 보이게 됩니다.
…
허접하죠?
허접할 만 합니다. HTML의 style이라는 요소를 쓰지 않았거든요.
HTML을 이용하기 위해서는 tag와 content만 알면 됩니다.
HTML을 “아름답게” 이용하기 위해서는 style만 알면 됩니다.
HTML의 태그에는 attribute라고 하는 속성을 부여할 수 있습니다.
<tag attribute1=x attribute2=y> 이런식이죠.
style 또한 이 attribute라고 볼 수 있습니다.
<p style="color:red; background-color:blue">
이런식으로 쓰일 수 있습니다.
이렇게 쓰인다고 하면, 저 태그안에 들어있는 컨텐츠는 스타일이 적용되게 됩니다.
참 쉽죠?
자, 여기까지만 알면, 아름다운 HTML을 만들 수 있습니다.
HTML을 이용하기 위해서는 tag와 content만 알면 됩니다.
HTML을 “아름답게” 이용하기 위해서는 style만 알면 됩니다.
HTML을 “깔끔하고” 아름답게 이용하기 위해서는 class/id만 알면 됩니다.
“깔끔하게” 가 무슨 뜻이냐고요? 지금 당장 웹페이지를 만들려고 해보세요..
…
어때요, 알겠죠? HTML 컨텐츠와 태그가 뒤섞여서 알아보기 힘들죠?
제작하기 힘들죠?
사실, 가능하다면 태그안에 존재하는 style attribute만 없애줘도, 정말 HTML이 깔끔하게 보일텐데 말이죠.. 그게 가능합니다!
tag에게 class/id라는 이름을 부여했을시, style이 그 이름을 가지고 그 녀석의 스타일을 다른 파일에서 바꿔줄 수 있어요.
그리고 그 역할을 하는 녀석을 CSS라고 부릅니다. 들어봤죠? css는 HTML의 style 요소를 빼서 따로 존재하는 파일의 확장자로서 존재합니다.
일단 css의 설명을 하기 전, html의 class 와 id를 알려드릴게요!
class와 id또한 attribute입니다.
<tag class="이름" id = "이름">
라는 식으로 쓰일 수 있죠, 물론 class와 id 둘 다 쓸수도 있답니다.
이 “이름”들은 결국 나중에 css라는 파일에
.이름{
color=red;
}
라는 식으로 쓰인답니다.
물론 저 {랑 }사이에 들어가는 것은 style의 들어가는 그것과 같답니다!
마지막 단계로는 html에 css가 쓰일 수 있게 head 태그 안의 컨텐츠로서
<link rel="stylesheet" href="./style/styles.css">
이런 식으로 넣어주면 되는것이죠!
자 그럼 html의 태그에는 무엇이 있으며, style에는 무슨 종류가 있냐고요?
그런거는 IDE를 써보면서 직접 이것 저것 속성을 알아보시거나, 구글링 해보세요.
사실 개발자들도 외우는것보다 구글링을 더 애호한답니다! ㅎ