이 카테고리에서는 웹 개발중 가장 기본이 되는 HTML, CSS 그리고 jQuery에 대해 다룰 것이다. 인터렉티브 디자인을 전공하는데 있어 가장 사람들이 떠올리는 가장 기본적인 개념은 누가 뭐니해도 웹사이트가 될 것이다. 아마 많은 사람들이 가장 많이 접하게 되는 인터렉티브 미디어로써 이 웹사이트가 어떠한 구조를 통해 이루어지며 그것들을 창조하고자 하는 입장에서는 무엇들을 공부하고 중요시 여겨야 하는지 이 블로그 카테고리에서 살펴보고자 한다. 이는 개인의 공부일지로써 틀린 내용이거나 애매모호하게 설명이 가 있는 부분이 있을것이므로 이 글을 읽는 누군가 만약 잘못된 점을 발견하신다면 댓글로 알려주시면 감사하겠다.
1. Introduction
Tags
HTML은 HyperText Markup Language (마크업 언어)이다. HTML은 어떠한 요소들을 작성하고 마크해주기 위해 Tag (태그)라는 것을 쓰는데 거의 모든 HTML 태그들은 여는 태그와 닫는 태그로 이루어져 있다. 이는 다음과 같다.
<body> - Opening Tag (여는 태그)
</body> - Closing Tag indicated with a / (태그 네임 앞에 /이라고 작성되어 있는것은 닫힌 태그라고 간주하면 된다)
Self-closing Tags
그렇지만 위와 같은 형식을 따르지 않는 태그들도 있는데 이는 닫히는 태그가 따로 없이 태그 안에서 모든 것을 써넣어 작동시킬 수 있게한다. 이는 Self-closing tag (스스로 닫히는 태그)라고 부른다.
<img> - <img>는 따로 닫히는 태그 없이 태그 안에다 링크를 써 넣음으로써 작동시키게 할 수 있다.
<link> - <link>또한 마찬가지로 닫히는 태그 없이 태그 안에다 링크를 써 넣음으로써 작동시키게 할 수 있다.
Explanation of Tags
<body> </body>는 페이지의 Body 부분을 담당한다. 이때 웹 페이지에서 볼 수 있는 요소들은 전부 <body>태그 안에 들어간다고 생각하면 된다. 그리고 한 페이지당 <body> </body> 태그가 하나씩 있어야 함으로 여러 웹페이지를 가진 사이트를 구성할때 <body>태그를 여러개 생성해주어야 한다.
<header> </header>은 페이지 안에 들어있는 요소중 Heading (제목)에 해당하는 부분을 담당하는 태그이다. 이때 로고나 표, 아니면 <h1> 부터 <h6>까지 안에 들어가는 모든 텍스트들이 포함된다. 이는 다음과 같이 작성된다. 이때 유의 해야할 점은 <header> 태그는 <head> </head>태그와 혼동하면 안된다. <head>태그는 <body>태그 시작전 페이지에 보이지 않는 요소들을 집어넣어 원하는 HTML으로 세팅해주는 부분이다.
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<p> </p>태그는 Paragraph (문단)들을 의미한다. <p>태그 안에 들어간 텍스트마다 구역을 나누어 전체 텍스트로부터 단략을 생성시킬 수 있다.
<a>는 anchor (앵커)를 의미하여 태그안 href 속성에 링크를 집어넣게 되면 생성된 하이퍼링크를 통해 유저가 클릭 했을시 어떠한 웹 페이지나 아니면 같은 페이지이지만 다른 부분으로 이동할 수 있게끔 해주는 태그이다.
2. Nesting
이때 참고할 점은 HTML 태그들은 다른 태그안에 Nesting (중첩)될수 있다는 점이다. 이때 아래와 같은 방식으로 중첩되게 된다. 이때 알 수 있는 사실은 <h1>과 <p> 태그들이 <header>이라는 태그 안에 중첩된것이므로 <h1>과 <p>안에 있는 요소들은 동시에 <header>태그안에 있는 요소로써도 여겨질 수 있다.
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
그렇지만 Nesting (중첩)을 오남용하는 것으로도 문제가될 수 있는데 만약 다음과 같이 코드를 작성할 경우 생긴다.
아랫코드에서 알 수 있는 사실은 <strong>과 <p>는 굳이 작성되지 않아도 똑같은 결과를 낼 수 있다는 사실이다. <h1>으로만 코드를 작성했을 경우 <strong>태그가 추구하는 볼드체의 텍스트를 적용시킬 수 있고 또한 <p>를 작성하지 않아도 <h1>은 이미 Block Level Element (블록 레벨 요소)이기 때문에 단락이 나뉘어지게끔 텍스트를 위치시킬 수 있다.
<h1><p><strong>A Heading</strong></p></h1>
3. Block vs Inline
그렇다면 알겠다. 위에 언급한 Block Level Element는 무엇이었을까? HTML은 주로 Block level elements와 Inline level elements로 나뉘어 진다.
Block Level Elements
이때 Block level elements로 생성한 페이지는 Block (단략)을 생성하여 페이지 안에 눈에는 보이지 않지만 요소를 차지하게끔 만들어 그다음 생성된 태그안의 element는 무조건 다음 줄에서 나타나도록 해주는 원리이다. 만약 아래와 같이 코드를 작성했을시에 텍스트 사이 단략에 생겨 같은 라인안에 텍스트가 나타나지 않게 된다.
<p>Hello I am a paragraph</p>
<p>Hello I am not a paragraph</p>
또한 이때 쓰이는 Block level element에 해당하는 태그들은 여러개 있으며 이 들을 이용하여 다음과 같은 코드를 작성한다면 아래와 같은 결과를 낼 수 있다.
<p>Hello I am a paragraph</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
이때 Block level element에 해당하는 HTML 태그들은 다음과 같다. 이는 전부 기억하는 것이 도움이 된다.
- <h1> to <h6>
- <header>
- <section>
- <footer>
- <div>
- <p>
- <ul>
- <ol>
- <article>
- <aside>
Inline Elements
반대로 Inline elements로 생성된 텍스트는 단략 없이 특정 태그 안에 다른 태그를 중첩시켜 효과를 만들어 줄 수 있다. 이는 같은 라인 안에서 효과가 생성되며 말 그대로 In-Line (라인 안)이라는 이름값을 하게 된다. 예시는 다음과 같다.
이와 같이 코드를 작성했을시에 단략을 생성하지 않고 작성된 텍스트 안에 <strong>태그가 적용되어 특정 단어에만 볼드체가 생성되는 것을 알 수 있다.
<p>Hello I <strong>am</strong> a paragraph</p>
Inline element에 해당하는 태그들은 다음과 같다. 이 또한 기억하는 것이 도움이 된다.
- <strong>
- <em>
- <a>
- <span>
4. Attributes
Attribute (속성)은 HTML태그 안에 추가적인 정보들을 제공해줌으로써 어느 HTML태그안에 작성될 수 있다. Attribute은 언제든지 Opening HTML tag (여는 태그)안에 작성되며 이는 다음과 같은 예시로 표현된다. 아래에 쓰여진 코드에서 href는 attribute로 여겨지며 href는 태그 안에서 흔히 찾아볼수 있는 attribute이다. href를 통해 링크를 써넣어 하이퍼링크를 생성해준다.
<a href="http:www.somewebpage.com">Click me</a>
또 다른 attribute를 활용한 예시로는 다음과 같다. 아래 쓰여진 src와 alt는 <img>태그 안에 흔히 쓰여지는 attirbute이다.
이때 src attribute는 특정 폴더 안에 위치한 이미지 파일들을 코드로 불러와 웹페이지에 사진을 첨부할 수 있게끔 해주며 아래 예시로 보아 image라는 폴더 안에 있는 cat.jpg를 불러왔다는 것을 알 수 있다. 이때 image 폴더는 작성되는 HTML파일과 같은 폴더에 위치에 있어야 한다.
또한 alt이라는 attribute는 <img>태그 안에만 들어갈 수 있는 attribute로써 만에하나 어떠한 문제나 에러로 브라우저 상에서 src attribute로 입력된 이미지를 디스플레이 할 수 없을때 대신 이미지의 대한 설명을 글로써 해주게 해준다.
<img src="images/cat.jpg" alt="image of a cat">
이렇게 HTML 태그에 추가적인 기능들을 제공해주는 attribute들의 종류들은 다음과 같다.
- class
- id
- href
- src
- alt
- data
- rel
이번 단원을 통해 기초적인 HTML 구성에 대해 간단히 정리해 보았다. 다음은 CSS로써 HTML으로 작성된 도큐멘트가 여러가지 스타일을 통해 디자인 적인 측면으로 웹페이지를 어떻게 꾸미는지에 대해 알아보겠다.
'Web Design & Development > Front End_Web Development' 카테고리의 다른 글
| Module 6 - Google Fonts & scrollTop (1) | 2022.09.23 |
|---|---|
| Module 5 - jQuery and the DOM (1) | 2022.09.23 |
| Module 4 - Introducing jQuery (1) | 2022.09.22 |
| Module 3 - New Positions (1) | 2022.09.21 |
| Module 2 - CSS Refresher (1) | 2022.09.21 |