Do it! HTML5 + CSS3 - HTML, CSS 한 걸음 더 나가기

DevSeong2·2021년 3월 25일

CSS html web

HTML & CSS

목록 보기

4/8

HTML, CSS를 공부하며 이해가 되지 않았거나 새로 알게 된 내용을 기록

HTML, CSS 한 걸음 더 나가기👣

HTML5와 시맨틱 태그

HTML5 문서

시맨틱 태그가 사용된 HTML5 문서

우리가 흔히 보는 웹 사이트들을 살펴보면 디자인은 서로 달라 보여도 그 구조는 크게 다르지 않다

사이트 제목이나 로고, 검색 창이 있는(header)
여러 내용이 있는 본문(contents)
본문 외 내용을 나타내는 사이드바(sidebar)와 푸터(footer)

이런 분석을 토대로 HTML5에서는 태그 이름만 보고도 문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있는 '시맨틱 태그(semantic tag)'를 추가

왜🙄 시맨틱 태그로 레이아웃을 만들어야 할까?

웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않더라도 웹 문서를 만들 수 있고, 시맨틱 태그를 사용하거나 사용하지 않거나 웹 브라우저에 나타나는 모습은 동일. 하.지.만! 실제로 웹 브라우저에서 문서를 처리할 때는 매우 큰 차이가 있다!
👉 HTML5의 시맨틱 태그로 작성한 소스를 보면 태그만 보고도 어느 부분이 제목이고 메뉴이고 실제 내용인지 쉽게 알 수 있다. 이렇게 소스만으로도 문서 내용을 알 수 있으면 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있어 편리하다.
👉 "어떤 장애가 있더라도 웹 사이트를 사용하는 데 불편이 있어서는 안 된다"라는 '웹 접근성' 시각에서 볼 때도 시맨틱 태그는 매우 중요!
시각장애인들은 웹 사이트를 이용할 때 화면 낭독기 같은 웹 보조 도구를 이용하는데 이때 시맨틱 태그를 통해 구별할 수 있으므로 그만큼 사이트 내용을 정확히 전달할 수 있어😃

문서 구조를 위한 HTML5 시맨틱 태그

✔ <header> - 특정 부분의 머리말
    주로 <form> 태그를 사용해 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴
    본문 중에 사용해 해당 부분의 머리말로 사용할 수도 있다.
    
✔ <nav> - 문서를 연결하는 내비게이션 링크
    동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음
    네비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용
    사용하는 위치의 영향을 받지 않아 <header>나 <footer> 또는 <aside> 태그 안에 포함시키거나 독립해 사용할 수도 있다.
    문서 안에 여러 개 <nav>를 사용할 경우, ID 태그를 따로 지정해서 사용할 것
    
✔ <section> - 주제별 콘텐츠 영역 나타내기
    문서에서 콘텐츠 영역
    문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에는 섹션 제목을 나타내는 <hn> 태그가 함께 사용
    💡 스타일 적용, 스크립트 사용, 단순히 영역을 나누고 싶다면 <div> 태그
    
✔ <article> - 콘텐츠 내용 넣기
    <section> 태그와 비슷해 혼동하기 쉬우나 article은 의미가 신문이나 잡지의 '기사'를 뜻함
    웹 상의 실제 내용을 넣는다.
    블로그의 포스트 | 웹 사이트의 내용 | 사용자가 등록한 코멘트 | 독립적인 웹 콘텐츠
    즉, 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 사용
    💡 <section> 태그는 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용
    
✔ <aside> - 본문 이외의 내용 표시하기
    사이드바, 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들
    
✔ <!frame> - 외부 문서 삽입하기
    웹 문서 안에 다른 웹 문서를 가져와 표시하는 것을 인라인 프레임(inline frame)이라 한다.

✔ <footer> - 제작 정보와 저작권 정보 표시하기
    사이트 제작자의 연락처 정보와 저작권 정보를 표시
    
✔ <address> - 사이트 제작자 정보, 연락처 정보 나타내기
    주로 <footer> 태그 안에, 웹 페이지 제작자의 이름, 제작자의 웹 페이지, 피드백을 위한 연락처 정보를 넣는 데 사용
    단순히 우편 주소를 표기할 용도라면 <p> 태그 이용해 표시

그렇다면? `<div>`태그는 언제 사용할까?👀

주로 콘텐츠를 묶어 시각적 효과를 적용할 때 즉, 콘텐츠에 CSS를 적용할 때 <div> 태그를 사용!
예를 들어 브라우저에 표시되는 전체 콘텐츠를 <div id="wrapper">처럼 묶어 표시하고 스타일 시트에서 wrapper 스타일을 이용해 콘텐츠의 너비를 지정할 수 있다.

📌CSSPiffle HTML5로 제작된 홈페이지
구경하면서 <nav> 태그로 네비게이션, <section>으로 본문 안에 제목<hn>과 내용<p> 🤔😉 그 때!"Coding is a pain" 😥😥

IE8 이하 버전에서는 어떻게 하나요❓

시맨틱 태그를 이용하면 웹 표준에 맞는 문서를 편리하게 만들 수 있습니다. 그런데 모든 웹 브라우저에서 시맨틱 태그를 사용할 수 있을까요?
대부분의 웹 브라우저에서는 사용할 수 있지만 IE 8에서는 지원하지 않고 모바일용 브라우저인 오페라 미니에서는 일부만 지원됩니다👻
브라우저에서 얼마나 지원하는지 확인하려면?🔎

IE8 이하에서 시맨틱 태그를 사용하려면

CSS에서 블록 레벨로 정의하기
브라우저는 자신이 인식하지 못하는 태그를 만나면 인라인 태그로 취급. 이런 태그는 위치값을 가질 수 없으므로 레이아웃을 만드는 것이 불가능!

시맨틱 태그 직접 정의하기
자바스크립트를 이용해 태그들을 만들기
아래 스크립트를 <head>~</head>에 넣어주면 시맨틱 태그들을 지원하는 것처럼 태그를 사용할 수 있다는 것!
(단, 필요한 태그들을 빠뜨리지 않고 처음에 모두 정의하는 것이 쉽지 않아)

<script>
    document.createElement('article');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('nav');
    document.createElement('header');
    document.createElement('footer');
    .......
</script>

HTML5 Shiv 사용하기
<script> 태그 사이에 태그를 직접 정의하는 과정을 자바스크립트 파일로 만들어 사용할 수 있도록 만든 HTML5 shiv를 사용하면 시맨틱 태그를 간단히 만들 수 있다.
📝 사용법
html5shiv.js 파일을 다운로드한 후 소스 안에 링크해 사용.

<!-- [if lt IE 9]
    <script src="js/html5shiv.js"></script>
<![endif] -->

"IE9보다 이전 버전일 경우, 실행해라"

브라우저 사이의 차이를 메꾸어 주는 폴리필(pollyfill)

최신 브라우저라도 HTML5 표준 기능들이 어떤 브라우저에서는 되고 어떤 브라우저에서는 안 됩니다. 이것을 브라우저 파편화(browser fragmentation)💥라고 부릅니다. 이런 브라우저 파편화를 줄이고 비슷하게라도 같은 결과를 만들기 위한 방법을 통틀어 심(shim) 또는 폴백(fallback)이라고 부릅니다. html5shiv도 shim의 일종😎
폴리필은 파편화가 생기는 브라우저에 삽입하는 자바스크립트로 브라우저를 스스로 진단해 필요한 shim을 자동으로 끼워 넣어 줍니다. HTML5 Cross Browser Pollyfills 페이지를 참고하면 각 기능별로 폴리필이나 심, 폴백을 한눈👁‍🗨에 볼 수 있습니다.

HTML5와 멀티미디어

웹에서 사용하는 멀티미디어

오디오나 비디오 같은 멀티미디어를 직접 재생할 수 없던 과거의 웹 브라우저.. 🔌플러그인(plug-in) 프로그램을 사용했었죠. 인터넷에서 음악🎧을 듣거나 온라인 강의🎥를 시청하려고 할 때 특정 프로그램을 설치하라는 메시지✉가 뜨곤 했습죠.
대부분의 플러그인 프로그램이 웹 사이트에서 사라졌지만 아직도 플래시 플레이어 프로그램을 사용하는 사이트도 있습니다. 크롬은 중단🚫 머지않아 웹 사이트에서 플래시 플레이어 프로그램을 사라질 것입니다.

플러그인: 웹 브라우저에서 처리할 수 없는 작업을 위해 웹 문서 안에 포함시킨 외부 프로그램
✔ <object> - 외부 파일 삽입하기
  직접 재생할 수 없는 자바 애플릿이나 PDF파일, 플래시 무비 같은 콘텐츠
  다른 HTML 문서도 웹 문서에 포함시킬 수 있음
  <object data="경로" type="유형" [name="이름" width="너비" height="높이">
  
✔ <embed> - 외부 파일 삽입하기
     마찬가지로 웹 브라우저에서 재생할 수 없는 콘텐츠를 웹 문서에 삽입할 때 사용
     플래시 무비 삽입 가능

멀티미디어의 웹 표준화

종류	확장자	설명
비디오	mp4	고화질 영상을 지원. 라이선스가 있지만 웹에서 사용할 경우 무료로 사용할 수 있음.
비디오	webm	화질이 우수하고 무료로 제공되어 최근 많이 사용
비디오	ogv	화질은 다른 비디오 유형보다 떨어지지만 무료. webm 형식이 등장하기 전에 많이 사용
오디오	mp3	대부분의 음원에서 사용되지만 라이선스 때문에 유료로 사용
오디오	ogg	무료이므로 게임 등에서 많이 사용

CSS3 선택자

연결 선택자

✔ 하위 선택자 - 지정한 모든 하위 요소에 스타일 적용하기
    section p { color: blue; }
    
✔ 자식 선택자 - 자식 요소에만 스타일 적용하기
    section > p { color: blue; }
    
✔ 인접 형제 선택자 - 가장 가까운 형제 요소에 스타일 적용하기
    h1 + p { text-decoration: underline; }

✔ 형제 선택자 - 형제 요소에 스타일 적용하기
    h1 ~ p { text-decoration: underline; }

속성 선택자

✔ [속성] 선택자 - 지정한 속성에 스타일 적용하기
    a[href] { background: yellow; }
    
✔ [속성 = 값] 선택자 - 특정 값을 갖는 속성에 스타일 적용하기
    a[target="_blank"] { padding-right:30px; }
    
✔ [속성 ~= 값] - 여러 값 중 특정 값이 포함된 속성에 스타일 적용하기
    [class ~= "button"] { border: 2px solid black; }
    
✔ [속성 |= 값] - 특정 값이 포함된 속성에 스타일 적용하기
    a[title |= "us"] { backgounrd-color: #fff; }
    
✔ [속성 ^= 값] - 특정 값으로 시작하는 속성에 스타일 적용하기
    a[title ^= "egg"] { padding: 5px; }
    
✔ [속성 $= 값] - 특정 값으로 끝나는 속성에 스타일 적용하기

✔ [속성 *= 값] - 값의 일부가 일치하는 속성에 스타일 적용하기

가상클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스

✔ :link - 방문하지 않은 링크에 스타일 적용
✔ :visited - 방문한 링크에 스타일 적용
✔ :hover - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용
✔ :active - 웹 요소를 활성화했을 떄의 스타일 적용 (누르고 있을 때)
✔ :focus - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용

UI 요소 상태에 따른 가상 클래스

✔ :enabled, :desabled - 요소를 사용할 수 있을 때/없을 때
✔ :checked - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때

구조 가상 클래스

✔ :root - 문서 전체에 적용
✔ :nth-child(n), :nth-last-child(n) - 자식 요소의 위치에 따라
✔ :nth-of-type(n), :nth-last-of-type(n) - 특정 태그 위치
✔ :first-child, :last-child - 첫 번째, 마지막

가상 요소

✔ ::fist-line, ::first-letter - 첫 번째 줄, 첫 번째 글자
✔ ::before, ::after - 내용의 앞뒤에 콘텐츠 추가

CSS와 애니메이션

변형

✔ transform과 변형 함수
    .photo { transform: translate(50px, 100px); } 
    
✔ translate - 이동

✔ scale - 요소 확대/축소

✔ rotate - 회전

✔ skew - 왜곡

변형과 관련된 속성

✔ transform-origin - 변형 기준점 설정하기
    <x축> <y축> <z축> | initial | inherit
    
✔ perspective, perspective-origin - 원근감 표현하기

트랜지션

시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 트랜지션이라고 한다.

✔ transition-property - 트랜지션을 적용할 속성 지정하기
    all | none | <속성 이름>

✔ transition-duration - 트랜지션 진행 시간 지정하기

✔ transition-timing-function - 트랜지션 속도 곡선 지정하기
    linear | ease | ease-in | ease-out | ease-in-out
    
✔ transition-delay - 지연 시간 설정하기
    
✔ transition - 트랜지션 속성 한꺼번에 표기하기
    transition: <transition-property 값> | <transition-duration 값> | <transition-timing-function 값> | <transition-delay 값>

DevSeong2

차근차근

이전 포스트

Do it! HTML5 + CSS3 - CSS편 (2)

다음 포스트

Do it! HTML5 + CSS3 - HTML, CSS 한 걸음 더 나가기

HTML & CSS

HTML, CSS 한 걸음 더 나가기👣

HTML5와 시맨틱 태그

HTML5 문서

시맨틱 태그가 사용된 HTML5 문서

왜🙄 시맨틱 태그로 레이아웃을 만들어야 할까?

문서 구조를 위한 HTML5 시맨틱 태그

그렇다면? `<div>`태그는 언제 사용할까?👀

IE8 이하 버전에서는 어떻게 하나요❓

IE8 이하에서 시맨틱 태그를 사용하려면

브라우저 사이의 차이를 메꾸어 주는 폴리필(pollyfill)

HTML5와 멀티미디어

웹에서 사용하는 멀티미디어

멀티미디어의 웹 표준화

CSS3 선택자

연결 선택자

속성 선택자

가상클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스

UI 요소 상태에 따른 가상 클래스

구조 가상 클래스

가상 요소

CSS와 애니메이션

변형

변형과 관련된 속성

트랜지션

Do it! HTML5 + CSS3 - CSS편 (2)

CSS 리셋

0개의 댓글

Do it! HTML5 + CSS3 - HTML, CSS 한 걸음 더 나가기

HTML & CSS

HTML, CSS 한 걸음 더 나가기👣

HTML5와 시맨틱 태그

HTML5 문서

시맨틱 태그가 사용된 HTML5 문서

왜🙄 시맨틱 태그로 레이아웃을 만들어야 할까?

문서 구조를 위한 HTML5 시맨틱 태그

그렇다면? <div>태그는 언제 사용할까?👀

IE8 이하 버전에서는 어떻게 하나요❓

IE8 이하에서 시맨틱 태그를 사용하려면

브라우저 사이의 차이를 메꾸어 주는 폴리필(pollyfill)

HTML5와 멀티미디어

웹에서 사용하는 멀티미디어

멀티미디어의 웹 표준화

CSS3 선택자

연결 선택자

속성 선택자

가상클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스

UI 요소 상태에 따른 가상 클래스

구조 가상 클래스

가상 요소

CSS와 애니메이션

변형

변형과 관련된 속성

트랜지션

Do it! HTML5 + CSS3 - CSS편 (2)

CSS 리셋

0개의 댓글

그렇다면? `<div>`태그는 언제 사용할까?👀