🌟 220711.TIL

Universe·2022년 7월 11일

study

목록 보기

14/49

키워드로 공부하는 HTML

HTML에서 lang 의 의미?

lang 속성은 웹 접근성에 관한 속성 중 기본 언어 선언을 규정한다
기본 언어 선언은 주로 스크린리더 읽기 방식 처리에 관한 문제인데
TTS 엔진이 얼마나 다른나라 언어를 지원하느냐에 따라서 달라진다
예를들어 html의 lang속성을 en으로 설정했다면 스크린리더로
한글로 적힌 텍스트를 읽어주지 않지만 ko로 설정했다면 읽어준다

참고

HTML에서 DOCTYPE이란?

Document Type Definition, DTD 라고도 하며,
어떤 버전의 HTML을 사용할 것인지를 인터넷 브라우저에 정의해 주는 것
HTML 의 버전업이 나날히 계속되므로 버전에 따라 같은 코딩을 하더라도 html 파일 실행시에 다른 결과 화면으로 나타나며, DOCTYPE을 선언했을 경우와 선언하지 않았을 경우, 브라우저에 따라서 다르게 출력될 수 있다

참고

HTML에서 title의 역할은?

제목표시줄로 쓰이는 title 태그가 대표적이지만
title 태그를 어디에 사용하느냐에 따라서 다른 기능으로 사용할 수 있다
title 속성은 요소에 보조정보를 나타내는 속성이다
이른바 툴팁 기능이다
이 기능은 각주를 쉽게 보게 하거나
이미지에 마우스를 올려 부가설명을 볼 수 있게 해주는 유용한 기능이다.

참고

HTML에서 charset과 UTF-8의 뜻은?

charset은 스타일 시트에 쓰이는 문자 인코딩을 지정
Universal Coded Character Set + Transformation Format – 8-bit(UTF-8)은
유니코드 가변길이 문자 인코딩 방식중 하나이다

참고

시멘틱 태그

div - division

nav - 네비게이션 바

footer - 하단메뉴

섹션을 설정할 때 네비게이션 바는 nav 태그로
하단메뉴는 footer 로 설정해주는게 좋다
세 태그 전부 그 자체로 의미있는 태그는 아니다
그럼 그냥 전부 통일해서 쓰면 되는데 왜 굳이 나누어 줬을까?

시멘틱 태그(sementic tag) 라고 해서
HTML 의 구조를 설계함에 있어 사이트의 구조를 파악하기 용이하도록 만들어진 태그이다

1. SEO 최적화에 유리. (SEO: Search Engine Optimization)

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

2. 웹 접근성에 효율적

일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다.

3. 유지보수의 용이성

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

시멘틱 태그 종류

<header> 머리글, 제목, 헤더
<nav> 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현
<aside> 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그
<section> 말그데로 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠의 그룹화
<article> 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용. 
<footer> 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
<address> 콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능
<hgroup> 제목과 관련된 부제목을 묶는 태그
<main> 이름처럼 문서 <body>의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.
<details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.
<figure> 이미지, 다이어그램, 사진 등 독립적인 컨튼츠 정의시 사용
<figcaption> <figure> 요소의 설명 캔션(caption) 정의
<mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조
<time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현
<summary> details 요소에 대한 요약, 캡션 또는 범례를 지정. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.

출처 : https://stonefree.tistory.com/59

`block` vs `inline`

<p> text </p> // 줄바꿈 O
<span> text </span> // 줄바꿈 X

Why ?

display 속성 차이인데
p 태그는 block 요소,
span 태그는 inline 요소 라서 그렇다

display 속성이 block 으로 지정된 요소는
전후 줄바꿈이 들어가 그 라인 전부를 차지한다
대표적으로 <div> 이나 <p>, <h1> 태그 등이 있다.
또한 width, height, margin, padding 전부 설정해준 값이 반영된다

display 속성이 inline 으로 지정된 요소는
전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다
대표적으로 <span>이나 <a>, <em> 태그 등이 있다
주의해야 할 점은 inline 태그에 width 나 height 값을 지정할 수 없다는 것
lnline 요소는 딱 그 컨텐츠 만큼의 크기만 차지하려고 하기 때문에
요소의 크기를 지정할 수 없기 때문이다

반반 섞은 inline-block 속성도 있는데
inline 속성처럼 같은 줄에 배치는 되면서
block 속성처럼 외부속성을 지정해 줄 수 있다

간단하게 표로 정리하자면 이렇다

	block	inline	inline-block
자리차지	최대한 많이	최소	최소
크기,여백 지정	가능	불가능	가능
줄바꿈	있음	없음	없음

스터디에서 나온 의견인데
간단하게 테트리스로 비유를 하자면
block속성은 이미 한 줄을 다 차지하고 있어서 그 위에만 쌓을 수 있지만
inline속성은 아직 자리가 남아서 옆에 다른 요소를 채워넣을 수 있다
이렇게 이해하면 쉽게 이해할 수 있다
🧐

Element Panel 와 Console Panel

웹 페이지의 구성요소를 확인하고 수정할 수 있는 개발자 도구
이 기능도 처음 봤을때 너무 신기해서 자주 썼던 것 같다
괜히 처음 들어가는 웹 사이트는 이것저것 바꿔보기도 하고
괜히 안바뀌면 왜 안바뀌지 ? 하고 이상하게 요리조리 해보고

이 옵션은 몰랐던 건데 정말 편했다
평소에는 요소에 직접 오른쪽 클릭을 해서 선택했는데
오른쪽 클릭이 막혀있는 곳에서는 할 수 없었다
하지만 요소 선택 옵션을 키면 바로 원하는 요소를 직접 선택할 수 있다!

우리말을 사랑하는 스타벅스 페이지

장난을 치고싶었다
이미지까지 다 바꾸지는 않았지만
세종대왕님은 춤추고 계실지도 모른다

콘솔창을 띄워 놓을 수 있다
Elements panel 을 열어놓고 esc 를 누르면 둘 다 열어놓고 쓸 수 있으니 참고

보통 프론트엔드 개발자는 둘 다 큰 화면에 띄워놓고 작업을 한다고 한다
😇

CSS 적용방식

1. inline style

html 태그 안쪽에 style 속성을 적용시킴
```
<h1 style="color:red; font-size:15px; background-color:yellow....">
```
직관적이며 요소에 직접적으로 적용시킬 수 있다는 점이 장점이지만,
한 눈에 봐도 가독성이 확실히 떨어진다
요소 하나하나의 속성을 일일히 전부 수정해 준다는 것은 거의 불가능하다

2. 내부 css

html 파일의 <head> 태그 안에 <style> 태그를 넣는다

<html>
  <head>
	  <title> MY HOME </title>
    <style>
			h1 {
				color : red;
				background-color : yellow;
			}
		</style>
	</head>
...

내부 CSS의 장점

이 스타일 시트에서 class 와 id 를 사용할 수 있다
동일한 HTML 파일에서 코드를 추가하기 때문에 여러 파일을
업로드할 필요가 없다

내부 CSS의 단점

HTML 문서에 코드를 추가하면 페이지의 크기와 로딩 시간이
늘어날 수 있다
여러 페이지의 웹을 운영하는 경우 동일한 속성을 쓰는 요소들이 있다면
각 웹 페이지에 적용시켜 주어야 한다

3. 외부 css

link 태그를 이용해 style.css 파일을 연결한다

<html>
  <head>
	  <title> MY HOME </title>
		<link rel="stylesheet" href="style.css">
	</head>
...

외부 CSS의 장점

CSS 코드가 별도의 문서에 있으므로 HTML 파일의 구조가 더 깔끔하고 크기가 작아진다
여러 페이지 에 동일한 .css 파일을 적용시킬 수 있다

외부 CSS의 단점

외부 CSS가 로드될 때까지 페이지가 올바르게 적용되지 않을 수도 있다
여러 CSS 파일을 업로드하거나 링크하면 사이트의 다운로드 시간이 늘어날 수 있다

참고한 링크

background-img vs img

<img>

<img src="이미지 링크" art="대체메시지">

모종의 이유로 이미지를 불러올 수 없다면 대체메시지를 출력할 수 있다
태그 자체로 ‘이미지' 라는 의미를 가지고 있으므로 웹 서치에 노출된다 (시멘틱 태그)

검색엔진에 노출이 되어야 할 때
중요한 메시지를 담고 있을때
- 예를들어 중요한 컨텐츠 내용을 담고 있다거나 프린트 했을 때 출력이 되어야 할 때

CSS : background-image

{ background-image: url("이미지 링크"); }

특정요소의 ‘속성값’ 이므로 웹 서치에 노출되지 않는다
대체메시지 출력 같은 기능 역시 없다

배경이미지로 활용하고 싶을 때
중요하지 않은 컨텐츠 이미지 일 때

평가

사실 개발자 입장에서 나 하나 편하자고 코드를 짠다면
더 쉽게, 더 간단하게, 대충 할 수도 있었을텐데
시멘틱 웹, 스크린리더, 심지어 개발자 도구조차
같은 개발자 끼리의 편의성, 유저들을 위한 배려가 느껴진다
사람냄새가 날 수 없는 네트워크 공간임에도
사람냄새가 나는 느낌을 받는다

Universe

Always, we are friend 🧡

이전 포스트

🌟 220709.TIL

다음 포스트

🌟 220711.TIL

study

키워드로 공부하는 HTML

시멘틱 태그

시멘틱 태그 종류

`block` vs `inline`

Element Panel 와 Console Panel

CSS 적용방식

1. inline style

2. 내부 css

내부 CSS의 장점

내부 CSS의 단점

3. 외부 css

외부 CSS의 장점

외부 CSS의 단점

background-img vs img

평가

🌟 220709.TIL

🌟 220712.TIL

0개의 댓글

🌟 220711.TIL

study

키워드로 공부하는 HTML

시멘틱 태그

시멘틱 태그 종류

block vs inline

Element Panel 와 Console Panel

CSS 적용방식

1. inline style

2. 내부 css

내부 CSS의 장점

내부 CSS의 단점

3. 외부 css

외부 CSS의 장점

외부 CSS의 단점

background-img vs img

평가

🌟 220709.TIL

🌟 220712.TIL

0개의 댓글

`block` vs `inline`