[HTML] HTML의 모든 것 - (3) class, id, iframes, javascript, file path, layout

STUDY/HTML.CSS.JS 2021. 3. 4. 14:23

Class Attribute
Id Attribute
Iframes
JavaScript
File Paths
Head Element
Layout Elements and Techniques
Responsive Web Design
Computer Code Elements

Class Attribute

- class 속성은 HTML 요소의 class를 특정하는데 사용한다. 여러개의 HTML요소들이 동일한 class를 공유할수 있다.

- class 속성은 주로 스타일 시트의 클래스를 가리키는데(구분하는데) 사용된다. 그리고 Javascript에서 동작을 조작하는 요소들을 구분짓기 위해서 class 속성을 사용하기도 한다.

- class를 생성하기 위해선 '.'와 클래스의 이름을 입력한다. (ex: .city) 그 다음에, {} 안에 CSS 속성을 정의한다.

아래는 <div>에 city라는 class 명을 부여한 예시이다.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

- HTML 요소들을 두개 이상의 클래스에 속할 수 있다. 여러 클래스를 정의하려면

<div class="city main"> 과 같이 클래스 이름 사이에 공백을 두어 구분하면 된다.

- 그리고 서로 다른 요소들도 동일한 클래스를 공유할 수 있다.

ex) <h2 class="city"></h2> .. <p class="city"></p>

- Javascript에서 특정 요소에 대해 특정 작업을 할 때, 클래스를 이용할 수 있다.

getElementByClassName을 이용하여 클래스의 이름을 가진 요소들만 대상으로 특정 작업을 진행할 수 있다.

(JS에 대한 자세한 내용도 추후에 다룰 예정)

<script>
	function myFunction() {
    	var x = document.getElementByClassName("city");
        for (var i = 0; i < x.length; i++) {
   		 x[i].style.display = "none";
 		 } 
    }
</script>

Id Attribute

이번에 다룰 내용은 Id 속성이다. 개인적으로 id와 class가 늘 헷갈렸다.. 다들 헷갈리지 않게 확실하게 짚고 넘어가길.!

- id 속성은 HTML 요소들이 가지는 고유의 id(unique Id)이다. 즉, id는 중복되어 사용할 수 없다!

하나의 HTML 문서에서 동일한 id를 가지는 element가 두개이상 존재하면 안된다는 것 이다!!

이러한 특징이 위에서 살펴본 class와 가장 큰 차이점이다.

- id 속성도 class와 마찬가지로 주로 스타일 시트의 클래스를 가리키는데(구분하는데) 사용된다. 그리고 Javascript에서 동작을 조작하는 요소들을 구분짓기 위해서 class 속성을 사용하기도 한다.

- id를 생성하는 방법은 '#' 과 id 이름을 사용하여 만든다.(ex: #myHeader) 그리고 {}안에 CSS 속성을 정의하면 된다.

Class와 Id 비교
Class .ClassName 요소들간 중복 사용 가능	Id #myId 하나의 Id는 하나의 요소만 사용 가능

아래는 heading 태그에 id를 사용한 예시이다.

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

- id 또한 Javascript에서 특정 요소에 대해 특정 작업을 할 때, id를 이용할 수 있다.

getElementById을 이용하여 id의 이름을 가진 요소들만 대상으로 특정 작업을 진행할 수 있다.

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Iframes

iframe은 웹 페이지 안의 웹 페이지를 보여줄때 사용한다.

Syntax

<iframe src-"url" title="description">

Note: iframe 을 사용할 때 title을 입력해주는 것이 좋다. 스크린 리더기를 사용하는 사용자가 iframe의 내용을 읽는데 title이 사용되기 때문이다!

Set Height and Width

iframe의 높이와 너비를 지정해줄 수 있다.

iframe 태그에 직접 height, width 속성을 이용해 작성할 수 있고,

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

CSS style을 통해 지정할 수 있다.

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

Remove the Border

iframe의 default는 테두리를 가지고 있다. 테두리를 없애기 위해선 style의 border property를 사용하면 된다.

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

또한 border property를 통해, 테이블처럼 border의 속성도 정의할 수 있다.

Target for a Link

iframe은 link의 타겟 프레임이 될 수 있다.

링크를 누르면, 이

프레임 안에 링크의 화면이 보여지는 것이다.

이런 화면을 구성하려면, iframe은 반드시 name 속성을 가지고,

a 태그의 target은 이 name을 가리켜야한다.

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com"
target="iframe_a">w3school</a></p>

JavaScript

JavaScript는 정적인 HTML 페이지를 동적이고 interactive 하게 만들어준다.

- HTML 문서에서 javascript는 <script> 태그 안에 작성된다. <script>태그는 클라이언트 측의 스크립트를 정의하는데 사용된다. script 요소는 스크립트 문을 직접 포함하거나 src 속성을 이용해 외부의 스크립트 파일을 가리킬 수 도 있다.

- javaScript는 주로 이미지 조작, 유효성 검사, 콘텐츠를 동적으로 변경하는데 사용된다.

- HTML 요소들을 선택하는데 javaScript는 주로 document.getElementById()를 사용한다.

- javaScript 사용 예

아래의 javaScript는 HTML 문서 내부에 demo라는 id의 요소에 "Hello javaScript!" 라는 내용을 보여주도록 동작한다.

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

더 자세한 내용은 JavaScript 포스트에서 확인해 보자!(추후 추가 예정,,)

File Paths

file path는 웹 폴더 구조에서 파일이 어디에 위치해 있는지 설명한다.

이전의 글에서도 계속 언급했듯, 파일의 경로는 가능한 상대 경로를 사용하는 것이 좋다.

아래의 파일 경로의 차이를 잘 이해하고 있어야 한다!!

<img src="picture.jpg">	"picture.jpg" 파일이 현재 페이지와 동일한 위치에 있을때
<img src="images/picture.jpg">	"picture.jpg" 파일이 현재 폴더의 images 폴더에 있을때
<img src="/images/picture.jpg">	"picture.jpg" 파일이 현재 웹의 root에 있는 images 폴더에 있을 때
<img src="../picture.jpg">	"picture.jpg" 파일이 현재 폴더보다 한 수준 위의 폴더에 위치해 있을 때

파일의 경로에는 절대 경로와 상대 경로가 있다.

절대 경로 : 파일 전체의 URL

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

상대 경로 : 현재 페이지를 기준으로, 상대적인 파일의 경로를 말한다.

아래의 예시는 현재 웹의 root에 있는 images 폴더의 파일을 가리킨다.

<img src="/images/picture.jpg" alt="Mountain">

Head Element

<head> 태그 안에 들어가는 element들은 <title>, <style>, <meta>, <link>, <script>, <base> 이다.

<head> element는 metadata에 대한 정보를 담는다. metadata란 HTML 문서에 대한 정보, 데이터를 말하고 화면에 표시되지 않는다. 주로 제목, character set, style, script, 다른 meta 정보들을 담는다.

1. <title>

title element는 HTML 문서의 제목을 정의한다. 브라우저의 title bar나 탭에 보여진다. HTML 문서에서 필수적으로 필요한 요소이다!

title 요소는 toolbar에 보여지는 이름을 정의하고, 즐겨찾기에 추가할 때 페이지의 제목을 제공하고, 검색 엔진 결과에 페이지 제목이 표시된다. 이런 역할들을 하기 때문에 제목을 최대한 정확하고 의미있게 작성하는 것이 중요하다!

2. <style>

style 요소는 HTML 페이지에서 스타일에 대한 정보를 정의하는 데 사용된다.

3. <link>

link 요소는 현재의 문서와 외부 자원들과의 관계를 정의한다. 외부의 스타일 시트와 현재 문서를 연결하는데 사용된다.

<link rel="stylesheet" href="mystyle.css">

4. <meta>

meta 요소는 주로 character set, 페이지 설명, 키워드, 문서의 저자, viewport 세팅에 사용된다.

meta 요소는 화면에 표현되지 않지만, 브라우저가 어떻게 콘텐츠를 보여주고, 페이지를 로드할지 정하는 데 이용된다. 그리고 검색 엔진의 키워드에도 사용된다!

charcter set을 정의할때

<meta charset="UTF-8">

검색엔진의 키워드를 정의할 때

<meta name="keywords" content="HTML, CSS, JavaScript">

웹 페이지의 설명을 정의할 때

<meta name="description" content="Free Web tutorials">

etc

5. Viewport

Viewport는 사용자에게 보여지는 웹 페이지 영역이다. device에 따라 다양하게 보여진다.(스마트폰이나 데스크탑 모니터, 태블릿 등)

모든 웹 페이지에는 반드시 아래의 meta 요소를 포함해야한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이것은 브라우저에게 페이지의 크기와 크기 조정을 제어하는 방법을 지정한다.

width=device-width 는 사용자의 디바이스의 화면 너비를 따르도록 페이지 너비를 설정하고,

initial-scale=1.0은 브라우저에서 페이지를 처음 로드할때 초기 확대, 축소 수준을 설정한다.

출처 : https://www.w3schools.com/html/html_head.asp

6.<script>

설명 생략

7. <base>

<base> 요소는 기준이 되는 base url/uri를 설정하여 사용할 수 있다. 예를 들어 base에 /images/라고 미리 설정해두는 경우 이미지를 불러오거나 링크에 사용되는 경로 앞에 /images/를 prefix 처럼 붙을 수 있도록 하는 것이 가능하다.

주의할 점은 base 요소는 하나만 사용가능하다!

Syntax

<base href="https://www.w3schools.com/" target="_blank">

Layout Elements and Techniques

Layout Elements

일반적으로 HTML의 레이아웃 요소는 아래와 같다.

출처 : https://www.w3schools.com/html/html_layout.asp

<header> - 문서 또는 섹션으 헤더를 정의
<nav> - 네비게이션 링크를 정의
<section> - 문서 섹션을 정의
<article> - 독립적인 콘텐츠를 정의
<aside> - 콘텐츠 이외의 콘텐츠를 정의 (예.사이드바)
<footer> - 바닥글
<details> - 사용자가 필요에 따라 열고 닫을 수 있는 추가 세부 정보
<summary> - details 요소의 제목을 정의

multicolumn layout을 만드는 방법은 네가지가 있고 각각은 장단점이 존재한다.

CSS framework : W3.CSS나 BootStrap
CSS float property : CSS float요소를 이용해 전체 웹의 레이아웃을 정의하는게 가장 일반적. 그리고 쉽다!
- 단점 : Floating 요소들은 문서의 흐름에 종속적이기 때문에 유연하지 못하다

CSS flexbox : 페이지 레이아웃이 다양한 화면 크기와 다양한 디스플레이 장치를 수용해야 할 때 요소가 예측 가능하게 작동한다.
CSS grid : 행과 열이 있는 Grid를 기반으로 한 레이아웃 시스템으로 float와 positioning을 사용하지 않고 더 쉽게 디자인 할 수 있다.

Responsive Web Design

반응형 웹 디자인이란, 모든 디바이스에서 적절하게 화면이 보이도록 만드는 디자인이다.

반응형 웹 디자인을 통해 자동으로 화면 사이즈와 viewport에 맞게 적절하게 화면이 조절되게 할 수 있다.

반응형 웹 디자인에 대해 알아보도록 하자.

1. Setting The Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 meta 요소를 통해, 우리의 페이지의 viewport를 설정할 수 있다. 이는 브라우저에게 어떻게 페이지의 dimension과 scale를 컨트롤 할 지에 대한 지침을 준다.

2. Responsive Images

반응형 이미지는 화면의 크기에 맞게 크기가 적절히 조정되는 이미지이다.

- CSS의 width property를 100%로 설정한다. 이렇게 하면 이미지가 스케일에 따라 크기가 조정된다.

<img src="img_girl.jpg" style="width:100%;">

Note: 위의 코드 처럼 width:100%를 사용할 경우, 원래의 크기보다 커지는 경우가 발생할 수 있다. 이럴땐 width 대신

max-width:100%를 사용하는 것이 문제를 해결할 수 있다.

max-width:100%를 사용하면 화면에 따라 이미지가 작아지긴하지만, 원래 크기보다 확대되지는 않는다.

- <picture> 요소를 사용하면 브라우저 창 크기에 따라 다른 이미지를 정의할 수 있다.

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

3. Responsive Text Size

텍스트의 크기는 "vw" 유닛으로 설정할 수 있다. ("vw"는 viewport width를 의미한다.)

vw 유닛을 설정하면 텍스트의 사이즈가 브라우저 윈도우의 크기에 따라 달라진다.

<h1 style="font-size:10vw">Hello World</h1>

Viewport는 브라우저 윈도우의 크기이다. 1vw = 1% viewport width이다. 즉, 윈도우 창이 50cm라면 1vw는 0.5cm이다.

4.Media Queries

텍스트나 이미지의 크기를 조절할때 media query를 사용하는 것도 일반적.

media query를 사용하면 브라우저의 크기에 따라 완전히 다른 스타일을 적용시킬수 있다.

아래는 viewport가 800px이하로 작아지면, 800px 이상에선 세로로 나란히 보여지던 메뉴들을

가로로 보이게 하는 media queries의 예시이다.

전체 코드는 이곳을 참고.

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

Computer Code Elements

1. <kbd>

<kbd>는 키보드의 입력을 정의하는 요소이다. <kbd>내의 요소는 monospace font로 보여진다.

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

2. <samp>

<samp>요소는 컴퓨터 프로그램의 출력을 정의하는 요소이다. 역시 monospace font로 보여진다.

<p><samp>File not found.<br>Press F1 to continue</samp></p>

3.<code>

<code>는 컴퓨터 프로그램의 코드를 정의하는요소이다. 역시 monospace font로 보여진다.

<code>는 공백과 줄바꿈을 표현하지 않기 때문에, 이를 포함하여 보여주고 싶은 경우에는 <pre>를 사용하면 된다.

<code>
x = 5;
y = 6;
z = x + y;
</code>

4. <var>

<var>은 프로그래밍에서 변수나 수학적 표현을 나타낼때 사용된다. italic체로 보여진다.

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base

이 글은 3school을 참고하여 작성된 글입니다.

'STUDY > HTML.CSS.JS' 카테고리의 다른 글

[HTML] HTML의 모든 것 - (6) Graphics(Canvas, SVG), MultiMedia(video, audio, YouTube) (0)	2021.03.06
[HTML] HTML의 모든 것 - (5) Form (0)	2021.03.05
[HTML] HTML의 모든 것 - (4)Semantic element, Encoding, URL, HTML vs XHTML (0)	2021.03.05
[HTML] HTML의 모든 것 - (2)CSS, Links, Image , Table, List, Block&Inline (0)	2021.03.03
[HTML] HTML의 모든 것 - (1)HTML, 기본 문법,Attribute, Heading, Style, Text, Colors (0)	2021.03.03

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

인기포스트

ABOUT ME

크크의 개발 블로그 크크의 개발 블로그

Class Attribute

Id Attribute

Iframes

Set Height and Width

Remove the Border

Target for a Link

JavaScript

File Paths

Head Element

1. <title>

2. <style>

3. <link>

4. <meta>

5. Viewport

6.<script>

7. <base>

Layout Elements and Techniques

Layout Elements

Responsive Web Design

1. Setting The Viewport

2. Responsive Images

3. Responsive Text Size

4.Media Queries

Computer Code Elements

1. <kbd>

2. <samp>

3.<code>

4. <var>

'STUDY > HTML.CSS.JS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

인기포스트

ABOUT ME

Class Attribute

Id Attribute

Iframes

Set Height and Width

Remove the Border

Target for a Link

JavaScript

File Paths

Head Element

1. <title>

2. <style>

3. <link>

4. <meta>

5. Viewport

6.<script>

7. <base>

Layout Elements and Techniques

Layout Elements

Responsive Web Design

1. Setting The Viewport

2. Responsive Images

3. Responsive Text Size

4.Media Queries

Computer Code Elements

1. <kbd>

2. <samp>

3.<code>

4. <var>

'STUDY > HTML.CSS.JS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역