<img> : 이미지 태그, 그림 넣기

▶<img src="" alt="">

▶닫는 태그가 없다. 열린 태그 하나만 있다.

▶<img> 외에 속성이 따라오는데 <src=이미지 경로를 쓰는 속성> <alt=이미지를 설명하는 속성>

▶동일 폴더 내에서 찾을 수 있는 경우 파일의 이름+확장자명을 적으면 불러올 수 있다.

▶alt : 이미지 설명이 필요한 이유 = 접근성! 스크린 리더기로 읽을 때 설명이 필요함. 

이미지 포맷 확장자 특징
JP(E)G .jpg / .jpeg 사진 이미지에 많이 사용되는 손실 압축, 고화질을 유지하면서 고압축 가능. 다른 압축 방식에 비해 파일 크기를 작게 할 수 있다.
PNG /png 무손실 압축, JPG에 비해 압축 효과율은 떨어지나 휴대폰 등에서 이미지 확대 시 고화질 유지. 최근 가장 많이 사용.
GIF .gif 무손실 압축, 사용가능한 컬러 수가 다른 포맷에 비해 제한적. 컴퓨터 그래픽 이미지에 많이 사용, 파일 크기가 작음.
SVG .svg 압축 포맷이 아닌 벡터 그래픽 포맷. 이미지 확대 시 화질의 손상이 전혀 없음. 웹 상에서 도형이나 그래프를 그리는데 多사용
상대경로 절대경로
URL 주소를 기술할 때 HTML 문서가 존재하는 위치. 즉, 현재 폴더를 기준으로 경로를 설정하는 방식을 말함.
ex) <img src="./img/test/fish3.jpg">		 http://로 시작하는 도메인 네임이 포함된 인터넷 상의 유일무이하고 절대적인 URL주소를 의미. 해당 파일이 존재하는 인터넷 상의 유일무이한 위치.
ex)

 

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<table> : 테이블(표, 항목)  (0) 2023.03.12
<video> : 동영상 넣기, <a> : 링크 기능  (0) 2023.03.12
HTML 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12
태그의 속성 (블록속성과 인라인속성)  (0) 2023.03.12

HTML 태그

Tag Usage Definition Summary
<html> <html> ... </html>  
<head> <head> ... </head> 머리말
<body> <body> ... </body> 본문
<title> <title> ... </title> 웹페이지(문서)제목
<meta> <meta ... /> metadata에 대한 정보(information)
<div> <div> ... </div> 문서영역 또는 섹션의 분할 정의
<a> <a href=" ... " target=" ... "> ... </a> (Anchor) 링크연결, inline요소
<script> <script type=" "> ... </script> 클라이언트 사이드 스크립트를 정의할 때 사용
<link> <link rel="stylesheet" href="..."> 스타일시트(등 의) 링크 적용
<img> <img src="..." > 이미지삽입
<p> <p> ... </p> 줄바꿈, 단락
<span> <span> ... </span> inline요소들을 그룹화
<li> <li> ... </li> (List) 리스트화
<ul> <ul> ... </ul> (Unordered List) 리스트를 그룹으로 묶음, 순서X
Tag Usage Definition Summary
<ol> <ol> ... </ol> (Ordered List) 리스트 그룹 자식들 앞에 숫자 넘버링, 순서O
<br> <br> </> 줄 바꿈, break
<style> <style ...> ... </style> CSS 스타일 정의
<h1>~<h6> <h1> ... </h1> 제목(heading), 글씨 크기(+굵기)
<input> <input type="...">  
<from>    
<strong> <strong> ... </strong> 글씨를 두껍게 강조
<table> <table> ... </table> 표 사용
<tr> <tr> ... </tr>  
<td> <td> ... </td>  
주석 <!-- ... --> 주석을 사용할 때 (Ctrl+/)
<hr> <hr> 단락 구분, 문서의 구분선
<caption> <caption> ... </caption> summary역할
<colgroup> <colgroup> ... </colgroup> 열 그룹
<u> <u> ... </u> 글씨에 밑줄(underline)

 

 

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<video> : 동영상 넣기, <a> : 링크 기능  (0) 2023.03.12
<img> : 이미지 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12
태그의 속성 (블록속성과 인라인속성)  (0) 2023.03.12
인코딩, 디코딩  (0) 2023.03.12

 

DIV 태그 VS SPAN 태그

▶<div> 태그는 블록 요소로 구역을 나누기도 하며 아주 다양한 형태로 활용이 가능하다.

▶<span> 태그는 인라인 요소의 <div>로 div와 같은데 속성만 다르다고 생각하면 된다. 인라인 요소만 감쌀 수 있다.

▶<div>는 <span>도 감쌀 수 있다.

▶모든 태그를 <div>로만 감싸면 안된다. → 시멘틱 태그의 출현

 

시멘틱 태그(sementic tag)

▶<div> 태그의 기능과 마찬가지로 블록속성(block element)이며 사이트의 구조(레이아웃, layout)을 설계하기 위한 태그이다.

▶HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그이다.

시멘틱 태그(sementic tag)의 종류

▶<header> : 머리글, 제목

▶<nav> : navigation, 네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현.

▶<aside>：좌측과 우측 사이드 위치의 공간을 의미, 본문 외의 부수적인 내용을 주로 표현.

▶<section> : 주제별, 카테고리 별로 구분하는 용도로 태그를 사용. 같은 테마를 가진 여러개의 콘텐츠를 그룹화한다.

▶<article> : 기사, 블로그 등 텍스트 위주의 페이지를 구성할 때 주로 사용

▶<footer> : 바닥글, 꼬리말, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그

▶<address> : 콘텐츠 작성자나 사이트 소유자의 정보 등을 부가적으로 담는 태그

▶＜main> : 문서 <body>의 중심 주제, 주요 내용 혹은 응용 프로그램의 중심 기능과 직접 관련되거나 확장되는 콘텐츠를 나타낸다.

▶<figure> : 이미지, 다이어그램, 사진 등 독립적인 콘텐츠 정의 시 사용

▶<hgroup> 제목과 관련된 부제목을 묶는 태그

▶<details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타낸다.

▶<figcaption> <figure> 요소의 설명 캔션(caption) 정의

▶<mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조

▶<time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현

▶<summary> details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.

 

★시멘틱 태그(sementic tag)의 장점★

⑴ SEO 최적화에 유리(Search Engine Optimization)

▶검색엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색결과의 노출에 유리할 수 있게 해준다.

⑵ 웹 접근성에 효율적

▶스크린 리더기(시각장애인을 위한 웹서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상 시켜준다.

⑶ 유지보수의 용이성

▶많은 div 사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능, 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이함.

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<img> : 이미지 태그  (0) 2023.03.12
HTML 태그  (0) 2023.03.12
태그의 속성 (블록속성과 인라인속성)  (0) 2023.03.12
인코딩, 디코딩  (0) 2023.03.12
HTML과 웹의 개념  (0) 2023.03.09

블록속성과 인라인속성 태그

▶블록이란? 블록 방식에서는 HTML 요소가 브라우저 화면에 표시될 때 전체 행을 차지하여 앞 뒤로 자동 줄바꿈이 일어난다.

인라인(inline) : 문자를 꾸미는 서식 관련 태그 多 블록(block) : 보통 레이아웃에 관한 태그 多
<span>, <a>, <img>, <input>, <textarea>, <br>, <button>, <select>, <option>, <script> 등 <div>, <p>, <h1~6>, <form>, <table>, <ul>, <ol>, <li>, <video>, <header>, <footer>, <section>, <table>, <form>, <address>, <fieldset>, 시멘틱 태그 등

▶인라인이란? 인라인 방식에서는 HTML 요소를 브라우저 화면에 수평 방향으로 표시하고 줄 바꿈이 일어나지 않는다.

속성의 특징

▶인라인(inline) 방식의 특징

⑴ 수평 방향으로 요소가 배치되며 줄 바꿈이 적용되지 않는다.

⑵ 박스의 크기를 설정하는 width와 height 속성이 적용되지 않는다. = 가로/세로 값 부여X

⑶ 상하단 마진인 margin-top과 margin-bottom 속성이 적용되지 않는다. = 좌/우측만 부여가능

 

▶블록(block) 방식의 특징

⑴ 해당 요소의 앞 뒤에 자동 줄 바꿈이 일어나 새로운 줄에 요소가 표시된다. = 수직방향으로 요소배치

⑵ 박스의 크기를 설정하는 width와 height 속성이 적용

⑶ 모든 마진 설정이 가능

※단, 일부요소는 (address, h1~6, p 등) 블록요소를 포함 할 수 없다.

 

▶인라인 블록(inline-block) 방식의 특징

⑴ 인라인 방식에서와 같이 요소가 수평 방향으로 배치되고, 줄 바꿈은 일어나지 않는다.

⑵ 블록 방식에서와 같이 박스의 크기 설정이 가능

⑶ 블록 방식에서와 같이 모든 마진 설정이 가능

▶인라인 블록 태그의 종류 : <img>, <input>, <button>, <textarea>, <select>, <video>

 

▶차이

⑴ 인라인 요소 안에는 인라인 요소만 포함 할 수 있다.

⑵ 블록 요소는 블록과 인라인 모두를 포함 할 수 있다.

⑶ 인라인 블록 요소는 기본 인라인 요소이기 때문에 기본 너비가 콘텐츠의 너비값만 차지한다.

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<img> : 이미지 태그  (0) 2023.03.12
HTML 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12
인코딩, 디코딩  (0) 2023.03.12
HTML과 웹의 개념  (0) 2023.03.09

인코딩 / 디코딩

▶인코딩 (encoding) : 사람이 인지할 수 있는 문자(언어)를 약속된 규칙에 따라 컴퓨터가 이해하는 언어(0과 1)로 이루어진 코드로 바꾸는 것

▶즉, 정해진 규칙에 따라 코드화, 암호화, 부호화 하는 것.

▶인코딩을 하는 이유 : 정보의 형태 표준화, 보안, 저장공간 절약 등을 위해서

▶디코딩 (decoding) : 인코딩의 반대개념, 복호화, 역코드화의 의미. 저장공간 효율화, 보안 등의 이유로 인코딩 한 데이터를 다시 디코딩을 해서 사용할 수 있다.

 

UTF-8 Encoding

▶인코딩의 종류. 유니코드 인코딩 중 가장 기준이 된다. 8bit를 기본으로 사용.

Charset or Characterset

▶미리 정해진 규칙. 즉, 코드표. 문자나 기호들의 집합을 컴퓨터에서 저장하거나 통신 목적으로 사용하기 위해 부호로 바꾸는 것으로, ‘부호화’라고도 한다. 이 인코딩된 문자 부호(character code)는 다시 디코딩(복호화)하여 본래 문자나 기호로 표현할 수 있다.

HTML5

▶최신버전의 html. 문법면에서 간결하고 정확해짐. API를 포함하게 되면서 웹·앱 구현이 가능. 문서편집 등 다양한 기능이 가능해졌다.

▶<!DOCTYPE html>의 선언으로 이전의 엄청 긴 유효성검사를 일축할 수 있다.

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<img> : 이미지 태그  (0) 2023.03.12
HTML 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12
태그의 속성 (블록속성과 인라인속성)  (0) 2023.03.12
HTML과 웹의 개념  (0) 2023.03.09

★웹 표준성, 웹 호환성, 웹 접근성★

▶웹 표준 (Web Standards) : 웹의 사용성 및 접근성 보장

▶웹 호환성 (Cross Browsing) : 웹 브라우저 버전, 종류와 관계 없는 웹 사이트 접근

▶웹 접근성 (Web Accessibility) : 인적, 환경적 요인에 제약없는 웹 정보 접근

▶웹 표준, 웹 호환성, 웹 접근성의 목적은 웹을 사용하는 사용자가 웹 사이트를 자유롭고 편리하게 이용하는 점과 장애인, 고령자 등을 포함한 사용자 층 확대, 다양한 환경, 새로운 기기에서의 이용, 개발 및 운용의 효율성 제고 등의 기대효과가 유사하지만 대상 및 종류 등의 준수 내용과 편의를 제공하는 점에서 차이가 있다. 웹 표준을 준수 하는 것만으로는 웹 접근성이나 웹 호환성이 보장되지 않으며 웹 호환성을 준수하더라도 웹 접근성은 보장되지 않는다.

※결론! 사용자가 불편하지 않게 사용 할 수 있어야 함. 사용자 => 비장애인, 장애인, 고령자 등 모든 사람

'코린이 개념잡기' 카테고리의 다른 글

웹페이지? mark up?  (0) 2023.03.12
UI / UX 개념  (0) 2023.03.12

웹 페이지? markup?

▶markup language는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지, 주요 마크업 언어에는 HTML이 있다.

▶즉, 마크업 언어로 작성된 웹페이지 라는 것은 결국 문서와 같다. 컴퓨터가 이해하도록 태그로 문서를 작성하는 것을 “마크업 개발”이라고 한다.

웹퍼블리셔?

▶웹 공간에 구현하고 관리하는 역할을 담당하는 사람 (한국에만 있는 직종)

▶하는 일 : 코딩을 통해 웹 페이지의 디자인을 실제 구현하는 것

▶웹 퍼블리싱 기술 : HTML, CSS, 자바스크립트(javascript), 자바스크립트 기반의 프레임워크/라이브러리(예: jQuerym React 등)

 

'코린이 개념잡기' 카테고리의 다른 글

웹 표준성, 호환성, 접근성  (0) 2023.03.12
UI / UX 개념  (0) 2023.03.12

UI (User Interface) ; 사용성, 접근성, 편의성

▶사용자가 어떤 방식으로 이용하도록 만드느냐를 디자인 하는 것.

▶사용자가 실제로 마주하게 되는 아이콘, 배너, 폰트 등 시각적인 디자인(디자인, 레이아웃)으로 화면을 구성하는 것 (겉으로 시각화 된 작업) 2008년 04월 11일부터 장애인 차별 금지법에 의거하여 웹 사이트의 웹 접근성 준수가 의무화 되었다.

 

UX (User Experience) ; 주관성, 총체성, 정황성

▶눈에 보이지 않는 감정, 특정 서비스를 이용하면서 사용자가 느낀 경험.

▶불편하면 더 이상 사용하지 않게 되기 때문에 오늘날에 중요시하게 생각되는 요소임.

※UI 접근성 : 접근성 = ‘모든 사용자가 신체적·환경적 조건에 관계없이 앱과 웹에 접근하여 사용하고 즐길 수 있도록 보장’

※사용자 = 단순히 접근하는 사람뿐만 아니라 시각장애인, 청각장애인, 색약, 키보드나 마우스 사용이 힘든, 시력이 매우 나쁜 사용자도 포함

'코린이 개념잡기' 카테고리의 다른 글

웹 표준성, 호환성, 접근성  (0) 2023.03.12
웹페이지? mark up?  (0) 2023.03.12

웹이란?

▶웹은 Word wide wed의 약어로서 간단하게 www로 표기함.

HTML이란?

; Hyper Text Markup Language

▶사용자들은 웹 브라우저의 주소창에 URL 주소를 입력하여 웹 페이지에 접속하는데, 웹 페이지에 연결된 하이퍼텍스트를 따라 이동하면서 웹 사이트에서 정보를 검색하고 서로 소통하게 된다. 하이퍼텍스트로 구성된 웹 페이지를 만드는 데 사용되는 컴퓨터 언어가 HTML이다.

▶즉, 웹(WWW)에서 하이퍼텍스트 문서를 만들기 위해 사용되는 기본언어

▶구조를 설계할 때 사용되는 언어로 하이퍼링크 시스템을 가지고 있으며 웹 페이지를 위한 마크업 언어라고 할 수 있다.

용어 설명
웹 브라우저 웹 사이트에 구축 된 웹페이지. 즉 HTML 문서를 볼 수 있는 응용 프로그램을 의미 
ex)크롬, 파이어폭스, 사파이 등의 프로그램이 해당
웹 서버 인터넷을 통해 사용자에게 웹서비스를 제공하는 컴퓨터의 하드웨어 또는 소프트웨어
클라이언트 인터넷에 연결된 컴퓨터나 모바일 기기 등을 이용하여 웹 서비스를 이용하는 컴퓨터 또는 컴퓨터 사용자
웹 프로그래밍 웹 사이트의 기능을 구현하기 위하여 HTML/CSS와 웹 프로그래밍 언어(javascript, PHP, JSP 등)를 이용하여 프로그램을 작성하는 것을 의미
웹 호스팅 인터넷 전문 업체에서 자신이 보유한 웹 서버와 네트워크를 이용하여 개인 또는 기관에게 홈페이지를 구축할 수 있도록 서버 상에 사용자 계정과 디스크 공간을 임대해 주는 서비스
웹 페이지 웹 브라우저 화면에서 보이는 각각의 화면
웹 페이지는 HTML, CSS, PHP, 자바스크립트 등의 프로그램 소스 파일과 데이터 파일로 구성
웹 사이트 도메인 네임에 구축된 인터넷 홈페이지, 웹 페이지 묶음

 

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<img> : 이미지 태그  (0) 2023.03.12
HTML 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12
태그의 속성 (블록속성과 인라인속성)  (0) 2023.03.12
인코딩, 디코딩  (0) 2023.03.12

+ Recent posts

티스토리툴바