개발일지 두번째 - HTML과 CSS에 대하여
웹에 전혀 관심 없는 사람들이라 하더라도 적어도 HTML(Hypertext Markup Language, 하이퍼 텍스트 마크업 언어)과 CSS(Cascading Style Sheet)은 한번씩 들어보았으리라 생각한다.
아니, CSS까지는 안들어보았을 사람들이 많을것도 같다. 나 같은 경우도 블로그를 시작하기 전까지는 CSS에 대해 관심도 내용도 전혀 몰랐으니 말이다.
어쨌든 HTML과 CSS는 한세트로 무조건 알아야하는 도우와 치즈, 배추과 고춧가루 같은 조합의 툴이라 할 수 있다.
미리 경험해본 결과 나같은 문외한도 크게 어려움 없이 이해할 수 있었다.
HTML로 뼈대를 올리고 CSS로 인테리어를 꾸미는 느낌이랄까. 특별한 기능이 부여되지 않는 정적인 인터넷 페이지를 만드는 것이라면 크게 어려움 없이 지금 배운 수준으로도 가능해 보였다. 아무튼 슬슬 본론으로 들어가 보자
위 사진의 왼쪽은 우리가 흔히 보는 네이버 메인화면이다. 늘상 보던 화면이기 때문에 어떤 구조인지 인지하고 있지 않다면 어떠한 원리로 이러한 화면이 구성되는지 이해하기도, 상상하기도 쉽지 않다.
그러면 오른쪽 화면을 보자 CSS를 제거한 HTML로만 이루어진 네이버 메인화면이다.(정확히는 CSS요소만 제거한 것)
CSS만 제거했을 뿐인데 네이버의 특징인 녹색들도 그림도 광고도 모두 보이지가 않는다. 그냥 위에 네이버 제목부터 아래로 메뉴가 쭉 내려올 뿐이지 어느 구역까지 무엇이다라는 정의 자체가 없기 때문에 아래로 메뉴가 계속 이어지는 단순한 구조가 된다.
이렇든 HTML은 뼈대, CSS는 뼈대를 제 위치에 옮기고 색깔을 입히고 유저친화적이게 꾸며주는 역할을 하기 때문에 가장 단순한 구성의 웹페이지라도 이 둘을 빼고 배울 수는 없다.
HTML의 활용
위에서 언급했듯이 HTML은 웹의 뼈대를 만드는 역할을 한다. 뼈대 답게 구조도 머리와 몸통으로 이루어져 있다.
------------------------------------------------------------------------------
<head> < 헤드의 시작
헤드는 페이지의 속성정보를 담는다.
속성정보란 페이지에 표현되는 글이나 그림은 아니지만
이 페이지에 대한 정의나 외부링크 등을 여기에 표현한다.
우리의 외형은 얼굴과 몸이 정하지만
정신은 머리속에 있는 것과 마찬가지이다.
예를 들어,
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>올레드의 모든것 | 남보르</title>
이런식의 정보가 head에 들어간다.
코드의 자세한 내용은 아직 잘 몰라도 된다.
</head> < 헤드의 끝
------------------------------------------------------------------------------
<body> < 바디의 시작
그 외 눈으로 보여지는 모든 요소들이 이 body란에 들어간다.
<div>
div 태그는 division의 약자로 레이아웃을 나누는 역할로 큰 블록들을 만들 때 사용한다.
아래 피 태그와 유사할수도 있는데 p 태그와 다른 점은
div는 큰 블록 개념으로 p 태그나 다른 div를 포함할 수 있지만
p 태그는 단순하게 문단으로 구성되므로 단독 문단이 된다.
즉, p 태그 안에 다른 p 태그를 쓸 수 없으며 당연하게도 div 태그도 쓸 수 없다.
</div>
<p>
p 태그는 위에 설명한대로 문단을 구성한다.
</p>
<ul> - 얘는 순서가 필요없는 목록을 만들 때 비슷한애들로 ol, dl 태그들이 있다.
<li> 목록의 내용을 여기 채운다. </li>
<li> 마찬가지로 여기 채운다. </li>
</ul>
-------------------------------------------------------------------------------
아래는 컨텐츠를 정의하고 표현하는 태그들
<h1>
h1은 제목을 나타내는 태그이다.
</h1>
<h2>
h2는 소제목이다.
</h2>
<h3>
h3~h6는 필요에 의해서 정의 하면 될듯.
</h3>
<span style="color:red">
span 태그는 특정 글씨나 문장을 강조할 때 사용한다.
위 span 태그의 스타일에 컬러는 레드라는 문구가 들어가므로 이 태그 안의 글씨는
빨간색으로 표현된다.
</span>
<a href="http://naver.com/">
하이퍼링크
</a>
<img src="그림주소">
<input type="text">
<button> 버튼이다.</button>
<textarea>아무거나 쓰는 란</textarea>
</body> < 바디의 끝위와 같은 형태로 head와 body를 구성하고 필요에 의해서 다양한 태그를 조합하여 원하는 모양의 웹페이지를 구현하면 된다. 그 외에도 많은 태그들이 있지만 입문자 입장에서 다 외우고 있을 수도 없고 시험보듯이 달달달 외우고 쓴다고 하더라도 자주쓰는 태그 아니면 또 사용법을 잊어버리므로 그 때마다 검색해서 사용하면 된다.
다음 일지에는 이렇게 만들어진 HTML 블록들을 가지고 어떻게 꾸미는지 CSS의 활용에 관하여 다루어 보겠다.
빠른 공부를 위하여 스파르탄코딩클럽(https://spartacodingclub.kr/)의 웹 개발 종합반을 수강하여(내돈내산) 진행했다.
월요일에 시작해서 지금 글을 쓰는 건 목요일로 4일 지났지만 벌써 4주 차 강의를 듣고 있을 만큼 매우 재밌게 배우고 있다.
코딩 분야는 강좌 수강은 처음이지만 다른 분야 강의들과 비교해보아도 시원시원한 강의 실력이 아주 매력 있다.
100% 국비지원까지 되니 나처럼 비전공자나 이제 개발에 입문하려는 학생들에게는 너무 좋은 입문 포인트가 아닐까 싶다.
https://spartacodingclub.kr/?f_name=%EA%B9%80%EB%82%A8%ED%98%B8&f_uid=6311501c4c8e3450f6ec7845
스파르타코딩클럽
5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의
spartacodingclub.kr
위에는 초대 코드가 포함된 링크인데 위 링크로 가입하여 수강하면 무려 5만원의 할인 혜택이 있다.
난 그냥 검색으로 들어가서 이 혜택을 못 받았다...
아무튼 관심이 있다면 꼭! 혜택을 받아보자.
'코딩 공부 이야기 > 개발일지' 카테고리의 다른 글
| [코딩생존일지]스파르톤 밤샘? 코딩 릴레이 행사 참석 (2) | 2022.09.18 |
|---|---|
| [개발일지 #4] 구글 웹폰트 적용하기 (0) | 2022.09.14 |
| [개발일지 #3] HTML과 CSS 개념(2) - CSS (0) | 2022.09.13 |
| [개발일지 #1] 서버와 클라이언트 개념 (0) | 2022.09.08 |
| [개발일지 #0] 비전공자로 도전하는 어플, 게임 개발 (6) | 2022.09.05 |
댓글