1월 13, 2023

구글 개발자 도구 | HTML 기초와 마스터 | 웹디자인 필수

구글 개발자 도구의 중요성

구글의 쾌거 중 빼놓을 수 없는 것 중 하나를 든다면 <구글 개발자 도구>일 것이다. HTML에 문외한이자 구글 크롬 브라우저를 사용하는 필자는, 수년 전 웹 검색을 하다가 우연한 기회에 우측 마우스 클릭으로 생긴 팝업창에서, 호기심으로 <검사> 메뉴를 클릭하고 깜짝 놀랐다. 왜냐하면 검색 중이던 웹페이지의 HTML 요소(element)가 적나라하게 표시되었기 때문이다. 뿐만 아니라 HTML 스타일을 수정하면 즉석에서 모든 웹페이지의 글자크기와 글자 색상 등 전체 요소를 변화시켜 볼 수 있다. 물론 근본적으로 변하는 것이 아니라 현재 사용자의 화면에서만 변화해 보인다. 따라서 웹을 검색하는 사용자는, 독창적이고 훌륭한 웹페이지 요소를 발견하면, 커서를 해당 요소에 두고 우측마우스를 클릭으로 HTML 스타일을 복사해서 자신의 블로그에 활용할 수 있다. 원활한 <개발자도구> 활용을 위해서 HTML 필수 기본 상식을 알아본다.

박주영 html 교실

HTML(Hyper Text Markup Language)은 하이퍼텍스트 마크업 언어이다. 웹페이지를 포괄하는 웹 사이트디자인을 주도하는 막강한 기능 때문에 블로깅의 꽃이라고 할 수 있다. 웹 브라우저 상에 이미지, 문자, 공간 등 시각적 요소를 구조적이며 체계적으로 구성하도록 하는 일종의 명령체계로 보면 무방하다.

< 레스 댄 부등호 less than
> 그레이트 댄 부등호 greater than
= 이퀄사인 등호 equal sign
: 콜론 쌍점 colon
; 세미 콜론 쌍반점 semicolon
" 쿼테이션 마크 따옴표 quotation
· 픽셀 px pixcel

픽셀(pixel, px)은 사각형의 점으로, 디지털 그림을 구성하는 기본적인 단위이다. 픽처 엘리먼트(Picture Element)의 준말이며, HTML에서 간격, 길이, 크기를 결정하는 중요한 요소이다. 1픽셀은 약 0.264mm로 가로(width, 하늘색)와 세로(height, 노란색)의 길이만큼 크기를 조절할 수 있다.

1px 2px 3px 4px 5px
2px 2px 3px 4px 5px
3px 2px 3px 4px 5px

아래 노란색 사각형 안의 내용은 예제용 HTML 문서이다.
"가로 넓이가 500픽셀, 세로 길이가 자동(auto)인 노란색 직사각형을 페이지 중앙에 그리되, 테두리는 검은색으로 하고, 모서리는 약간 둥글게 처리하며 타이틀과 이름은 사각형 가운데 표시"하는 HTML 내용대로 정확하게 <예제>HTML 연습을 나타내 준다.

HTML 새로운 과제

|

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vS4vA6XAAPF5J2hZkUDI24X_jfocdeLtkPZv82vti9JF3r_FB2X8GVwJMVU4b9YJIwx_kAp1_HoZOo1/pubhtml?widget=true&headers=false"></iframe>

HTML 코드 복사하기

  1. 마우스 커서를 위의 코드 첫 부분<iframe>에 놓는다.
  2. 마우스를 드레그(끌기)해서 코드 전체를 선택한다.
  3. 마우스를 우측 버튼을 눌러 복사를 누른다,
  4. 현재 페이지를 끝낸다.

HTML 코드 붙이기

  1. 노트패드 프로그램을 연다.
  2. 파일 > 새파일을 클릭한다.
  3. 마우스 우측 버튼을 눌러 메뉴에서 붙이기를 한다.
  4. 파일 > 다른 이름으로 저장을 클릭한다.
  5. html 파일을 선택하고 원하는 파일이름으로 저장한다.
  6. 바탕화면 > 폴더(박주영)를 연다.
  7. 폴더(박주영)에서 방금 저장한 파일을 클릭한다.

HTML 연습문제

<div style="width:500px;height:250px;background:yellow;border:solid #000 3px;border-radius:10px;">
<h3 style="font-size:50px;text-align:center;color:blue;">박주영</h3>
<h1 style="text-align:center;">HTML 연습</h1>
<h3 style="text-align:center;"><예제></h3></div>
<img width="" height="" src="https://storage.cloud.google.com/pjy/pjy.jpg"/>
<h1 style="text-align:center;">동영상 보기</h1>
<video width="" height="" controls>
<source src="https://storage.cloud.google.com/pjy/vpjy.mp4"type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

박주영

HTML 연습

<예제>

html 요소

태그

HTML 태그(tag)는 메타데이터(metadata)로 만든 특정 정보의 키워드 또는 분류이며, 웹사이트의 몸체에 해당하므로 체계적인 배열(레이아웃)이 매우 중요하다. 표, 그림, 문자 등 문서의 구성요소를 영문단어로 특정화(마크업)하여 화살괄호<> 안에 표시하고 웹브라우저로 보면 일반 문서와는 달리 위의 <예제>처럼 형태가 그대로 표현된다. 크기, 색상, 여백, 간격 등은 다음 장에 소개되는 속성 기능을 이용하여 무한대로 변경할 수 있다. 기본적인 태그의 종류와 형식은 다음처럼 여는 태그와 닫는 태그로 구성하고 그 안에 내용을 넣는다. 부등호와 태그 이름 사이에 여백이 있으면 실행되지 않는다.

<div>내용</div>

구획, 공간을 사각형 형태로 나타내는 태그이다. division의 줄임말이다.

<h1>제목</h1>

글의 제목을 나타내는 태그이다. h1, h2, h3, h4 h5, h6순으로 글자 크기가 지정되어 있으나 크기를 조절할 수 있다. head의 약자이다.

<p>문장</p>

문단을 나타내는 태그이다.

<img>그림 주소</img>

사진이나 그림 등 이미지를 나타내는 태그이다.

<ol>목록</ol>

글의 리스트를 만드는 태그이다.

<table>셀</table>

표를 나타내는 태그이다. tbody, th, tr, td 태그를 포괄한다.

<style>속성</style>

태그의 속성을 독립적으로 지정하는 태그이다.

태그 종류

<!-- --> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <audio> <video> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <dl> <del> <details> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <figure> <font> <footer> <form> <frame> <frameset> <h1~h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

속성

속성(Attribute)은 웹사이트의 몸체에 해당하는 태그가 웹 브라우저 화면에 구조적으로 체계적이며 아름답게 표시되게 하는 의복과 액세서리에 해당하는 HTML 요소이다. 스타일 언어(CSS)로 width(넓이), height(높이), color(색상), border(테두리) 여백(margin) 등 수많은 고유한 속성과 그에 따른 속성값을 지정할 수 있다. 많은 태그와 속성을 암기하는 것이 전문성의 관건이다. 문장처럼 태그를 창의적으로 아름답게 배열하고 속성을 지정하는 것이 HTML 작업의 전부이기 때문이다. 속성지정은 태그별 독립 지정과 전체 지정 방법이 있다.

선택자

속성지정에 앞서 적용할 대상을 선택해야 하는데, 이를 선택자(Selector)라고 하며, 적용 방법은 4가지로 분류한다.

  1. 전체 선택자

    2. ✱ 을 사용하면 문서의 모든 요소가 적용된다.

  2. HTML 요소 선택자

    3. 지정한 태그와 같은 태그에 모두 적용된다. 사이트를 구성하는 HTML 요소(사이트 제목 등)도 적용되는 점에 유의해야 한다.

  3. 아이디(id) 선택자

    4. 같은 종류의 태그에 적용한다. 다른 종류의 태그와 같이 사용하면 자바스크립트 등에서 오류가 생길 수 있다.

  4. 클래스(class) 선택자

    5. 각종 태그에 동시 적용이 가능하고, 하나의 태그에 복수 적용도 가능하다.

  5. 그룹(group) 선택자

    6. 각종 태그를 쉼표와 여백으로 구분하여 동시에 적용할 수 있다.

style 독립 지정

인라인 스타일(Inline style)은 종류가 같은 여러 개의 태그 상태를 각각 다르게 할 수 있다. 태그 안에 스타일(style)과 등호(=)를 연이어 선언하고 속성과 속성값을 표시한다. 속성은 반드시 “큰따옴표”나 ‘작은따옴표’로 둘러싸야 하고, 속성은 쌍점(:)으로 구분하고, 속성값은 쌍반점(;)으로 마무리하여 하나의 속성을 일단락시켜야 한다. 계속해서 다른 속성을 추가할 수 있다. 

<태그종류 style="속성종류:속성값;"></태그 종류>

style 공동 지정

내부 스타일 시트(Internal style sheet)는 속성을 반드시 스타일<style> 태그 안에 지정해야 한다. 먼저 <style>을 선언하고 클래스 이름 앞에는 점(dot)을, 아이디 이름 앞에는 샵(#)을 붙인다. 연이어 중괄호를 연 다음 속성이름과 쌍점(콜론)을 명기하고 속성값과 쌍반점(세미콜론)을 표시한 다음 중괄호를 닫은 뒤 </style>로 종료한다. 줄 바꾸기는 가능하나 사용 부호 중 1개라도 틀리거나 생략되면 절대로 인식되지 않는다.

class(클래스)는 다수의 각종 태그에 동시 지정이 가능하지만, 아이디(id)는 같은 종류의 태그에 복수 지정이 가능하다.

class(클래스)와 id(아이디)의 이름은 임의로 정하며, 중복되지 않으면 분류 필요에 따라 무한대로 만들 수 있다. 태그 밖에 속성과 속성값을 표시한다.

태그에 바로 속성을 지정하면 속성이 지정된 같은 종류의 모든 태그에 적용된다. 

<태그종류 class="클래스 이름"></div>
<태그종류 id="아이디 이름"></div>
  1. <style>
  2. .class #id{
  3. width:500px;
  4. height:auto;
  5. background:yellow;
  6. border:solid #000 3px;
  7. border-radius:10px;
  8. }
  9. </style>
  1. 스타일 시작 태그
  2. 클래스는 점, 아이디는 샵(#)을 이름 앞에 명기해야 한다. 중괄호 시작
  3. 넓이와 값
  4. 길이와 값
  5. 배경과 색상
  6. 테두리 굵기와 색상
  7. 테두리 모서리 곡률
  8. 중괄호 마감
  9. 스타일 마감 태그

링크 지정

외부 스타일 시트(External style sheet)는 서버에 스타일 시트를 저장하고 링크로 지정한다.

<link rel="stylesheet" href="/examples/media/expand_style.css"></link>

주요 속성과 값

크기와 굵기

font-size:25px;

모든 글자<p>, <h1~h6>의 크기를 지정한다. 1픽셀(pixel)은 0.2645833 밀리미터에 해당한다.

font-weight:700;

글자의 진하기(굵기)를 지정한다.

width:200px;

영역의 넓이를 지정한다.

height:200px;

영역의 높이를 지정한다.

width="200px"

이미지의 넓이를 지정한다. style 밖 태그 바로 뒤에 표시한다.

height="200px"

이미지의 높이를 지정한다. style 밖 태그 바로 뒤에 표시한다.

테두리와 모서리

border;solid 1px red;

경계선(테두리)의 굵기, 색채, 선종류를 순서에 관계없이 입력하여 지정할 수 있다.

border-radius:10px;

경계선의 모서리를 둥글게 한다. 픽셀이나 퍼센트로 지정하면 된다.

배치와 정렬

text-align:center;

모든 글자<p>, <h1~h6>를 왼쪽(left), 중앙(center), 오른쪽(right)으로 정렬한다.

float:right;

영역<div>과 이미지<img> 및 동영상<video>을 오른쪽(right)으로 정렬한다. 기본은 왼쪽 정렬이다.

margin:0 auto;

영역<div>을 중앙(center)으로 정렬한다.

display:block;margin:0 auto;

이미지<img>와 동영상<video>을 중앙(center)으로 정렬한다. 영역<div>과는 달리 display:block;을 동시에 표시해야 한다.

float:left;

float:right;

margin:0 auto;

색상 지정

color:#000;

글자의 색상을 지정한다. 색이름과 색상 코드로 지정할 수 있다.

background:#fff;

각종 태그의 배경색을 지정한다. 색이름과 색상 코드로 지정할 수 있다. 링크를 추가해서 이미지를 배경으로 지정할 수도 있다.

검정 Black #000000
남색 Navy #000080
노랑 Yellow #FFD400
초록 Green #008000
라임색 LIme #BFFF00
자주 Purple #800080
빨강 Red #FF0000
물색 Aqua #00FFFF
올리브색 Olive #808000
은색 Silver #C0C0C0
자홍색 Magenta #FF00FF
파랑 Blue #0000FF
하양 White #FFFFFF
밤색 Maroon #800000
회색 Grey #808080
틸 Teal #008080

글자 줄 간격

line-height:2;

글자(문단)의 줄 간격을 조절한다.

기울기 지정

transform:rotate(125deg);;

각종 태그의 기울기를 조절한다.

여백 지정

padding:2px;

각종 태그의 안 여백을 지정한다.

margin:5px;

각종 태그의 바깥 여백을 지정한다.

글자와 파란색 테두리 사이의 간격은 안 여백(padding, 패딩)이다.

padding:30px;

HTML 연습

파란색 테두리와 빨간색 테두리 사이의 간격은 바깥 여백(margin, 마진)이다.

margin:30px;

속성 종류

auto border border-radius display float font margin-bottom margin-left margin-right margin-top padding-bottom padding-left padding-right padding-top transform

html 작성

메모장 등 각종 문서작성기에서 편집할 수 있으나 작성 결과는 웹 브라우즈에서만 볼 수 있다. 블로그와 무관하게 독립된 페이지로 보기 위해서는 html 문서 파일로 만들어야 한다. note++과 같은 무료 편집기로 작성하고 html 포맷으로 저장하면 확장자가 html(htm)인 파일이 만들어진다. 파일을 컴퓨터나 스마트폰, 클라우드 서버에 저장하고 파일이나 url(링크주소)을 클릭하면 디자인된 화면을 볼 수 있다.

notepad++ 무료다운로드

연습하기

가장 이상적인 연습 방법은 무료인 구글 블로그를 개설해서 ‘검색엔진’에 노출하지 않고 시범 운영하는 것이다. 차선책으로 다음의 방법을 사용해도 무방하다.

  1. 아래 체험사이트에 접속한다.
  2. HTML 부분에 태그를 작성한다.
  3. CSS 부분에 속성을 지정한다.
  4. 실행 아이콘(▶)을 클릭한다.
  5. DEMO 화면을 참고한다.

체험 사이트

용어 정리

마크업 언어

마크업 언어(markup 言語, markup language)는 태그 등으로 문서나 데이터의 구조를 명기해서 웹 브라우즈 화면에 시각적 형태를 나타내는 방식의 언어이다.

예를 들자면, html에서 선을 나타내는 태그 <hr>은 문서작성기에서는 글자로 보이지만 웹 브라우즈에서는 실제의 검은 선으로 보인다. 또한 노랑을 뜻하는 단어 yellow(엘로우)를 속성값으로 <hr> 태그에 적용하면 물리적으로 검은 선을 노랗게 변화시키는 것이 마크업 언어의 특징이다.

메타데이터

메타데이터(metadata)는 불특정 데이터에 분류 등을 목적으로 구성하는 2차 적인 데이터를 말한다. 예를 들어서, 연락처 데이터에 포함되는 주소, 직장, 혈액형 등과 같은 항목별 데이터가 메타데이터에 해당한다. 따라서 메타데이터를 활용하면 연락처 데이터를 주소, 직장, 혈액형별로 관리할 수 있어 데이터 관리에 효율성을 기할 수 있다. 디지털카메라 사진에 추가되는 날짜, 시간 등도 같은 맥락이다. 따라서 하나의 태그에 지정된 모든 속성이 여기에 해당한다.

캐스케이딩 스타일 시트

CSS(Cascading Style Sheet)는 HTML이 물리적인 형태로 표시되는 방법과 상태를 기술하는 일종의 지침서(계획서)와 같다. 스타일 언어(Style sheet language)로 작성되며, 속성이 지정된 태그와 같은 이름을 가진 하위 태그에 폭포처럼 속성이 상속되므로 종속형(Cascading) 시트로도 불린다.

개발자 도구

구글 <개발자 도구>의 활용으로 블로그 제작에 많은 도움을 얻을 수 있다. 자신의 블로그에서 수정을 요하는 부분이 있으면 다음과 같은 방법대로 하면 된다.

  1. 웹에서 자신의 블로그에 접속한다.
  2. 수정을 요하는 부분에 커서를 두고 개발자 도구를 실행한다.  
  3. 그림1과 같은 개발자 도구 팝업창에서 해당되는 부분의 스타일(노란박스)을 수정해서 시뮬레이션 해본다. 
  4. 클래스를 마우스로 선택하여 복사한다. 
  5. 자신의 블로그에서 HTML 편집 창을 열고 수정한다.  
속성을 추가해서 나열되는 속성값을 선택하면 바로 적용이 되므로 속성 종류와 이름만 알면 많은 속성값을 알 수 있다.

에필로그

백해무익한 오락성 게임에 연연하기보다 오히려 게임보다 쉽고 재미있는 HTML 언어에 몰입은 차세대의 일상이 됨은 물론 지상최대의 관건이 될 웹디자인의 여력과 문장력을 키울 수 있는 일거양득의 호재가 된다. 시대를 불문하고 추앙받는 희대의 문장가처럼 웹디자이너가 추대받는 시대가 도래하고 있다.

구글 검색을 유일한 스승으로 블로그를 시작하고 지금까지 운용하고 있는 필자가 개발자 도구를 또 다른 위대한 스승으로 자신 있게 추대하는 이유는 HTML을 전혀 배우지도 않았지만 타의 추종을 불허할 정도로 HTML 언어를 구사하게 된 점과, 독창적인 좋은 글도 값비싼 로열티로 우대될 시대의 도래를 구글이 주도할 것이 확실시되기 때문이다.

이미 잘 알려져 있을 것으로 생각되지만 등잔 밑이 어둡다는 속담처럼 아직도 이 훌륭한 호재를 모르는 MZ세대와 특히 갈 길이 무한대이자 내 블로그를 상속받을 어린 손자 박주영에게 강력한 추천을 하면서 소개를 마친다.

댓글

댓글 쓰기