2021. 4. 28. 00:43ㆍ코 딩 공 부/H T M L
CSS(Cascading Style Sheet)
개요
● 개요
스타일은 HTML 문서 내에 서체의 종류, 크기, 색, 여백 등을 지정하여 사용자의 web browser 환경에 상관없이 일정한 화면을 보여주는 기능이다.
● 장점
- 기능 확장성
HTML의 기능을 확장한다. 태그에 다양한 기능 추가 및 HTML에서 지원하지 않는 다양한 스타일 등을 사용할 수 있다.
- 양식의 모듈화
흐름이 같은 문서 양식으로 전체를 구성할 수 있다.
-간편성
문서의 형식을 손쉽게 다양하게 구성할 수 있다.
-일관성 및 유지 보수의 편리성
사용 환경의 영향을 받지 않으며 일관성 있는 문서들을 만들 수 있다. 그리고 유지 보수의 편리성이 있다.
● CSS 형식
선택자{속성:value | keyword; 속성:value | keyword;}
- css 구문은 선택자(selector)와 선언으로 구성되며, 선언은 속성(property)과 값(value)으로 구성된다.
- css의 기본 형식은 '선택자{속성:값}의 형식으로 표현되며 여러 속성을 사용할 경우 세미콜론(;)으로 구분한다.
- 대소문자를 구별하지 않는다.
- inline style을 제외한 모든 style property와 Value, Keyword는 중괄호{} 속에 들어간다.
● Inline Style
inline style은 HTML tag속에 style 속성을 사용하여 직접 지정한다.
● Embedded Style Sheet 방식
- 스타일 시트의 기본적인 사용 방법으로 html의 <head>~</head> 사이에 삽입하여 <style type="text/css">~</style> 사이에 정의하며 같은 스타일을 중복해서 지정했을 때는 나중에 지정한 것이 적용된다.
- 형식
<style type="text/css" media="값">...</style>
- 옵션
media : style sheet가 적용되어야 하는 매체를 지정한다.
print : 프린트 출력
screen : 화면출력
all : 모든 매체를 통한 출력 등
CSS 지정 형식
● linked style sheet 방식
- <head>~</head> 사이에 link element를 사용하여 css file(확장자가 .css 인 파일)을 연결시켜서 사용하는 방식이다.
- 형식
<link rel=stylesheet href="파일명" type="text/css">
● imported style sheet
- 이 방식은 결과적으로 linked style sheet와 같고 위치는 embedded 방식과 마찬가지로 style block 속에 들어간다.
- 형식
@import url("파일명"); 또는 @import "파일명";
<style>~</style>
● 설명
- 스타일 정보 태그(Style Information)로 HTML 문서 내에 스타일 시트를 선언하는데 사용
● 형식
- HTML 4
<style type="text/css">~</style>
- HTML 5 (기본 : type="text/css")
<style>~</style>
● 속성
media : 요소에 연결된 리소스가 설계되어 있는 미디어 유형을 정의
type : type. 생략하면 type="text/css"
scoped : 문서 전체가 아닌 style 요소가 사용된 부모의 하위에만 적용. HTML 5 추가 속성
div 와 span 요소
<div>~</div>
● 설명
- 블럭 태그(Division)
- <div>요소는 그 자체로 어떤 의미를 갖지는 않으며, 몇가지 요소를 한 덩어리로 묶어서 스타일을 주거나 스크립트를 연결하는데 사용
- <div> 태그는 블럭 레벨 태그로 줄 바꿈이 일어난다.
<sapn>~</span>
● 설명
- 텍스트 범위 태그(Text Span)
- 인라인 요소에 스타일을 그룹화하고 적용하는데 사용
- span 태그는 인라인 레벨 태그로 줄 바꿈이 일어나지 않는다.
- 인라인 레벨 태그는 width, height 속성은 무시되며, margin 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.
- 인 라인 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 공백(4px)이 자동 지정된다.
시멘틱(semantic) 관련 태그
시멘틱(semantic)
● 개요
- 문서의 구조와 데이터의 의미를 보다 명확히 하기 위한 시멘틱 요소가 HTML 5에 추가되었으며 검색 엔진 및 문서 해석기 등에서 웹 문서 판별이 정확하고 용이해진다.
- semantic 은 '의미의' 라는 뜻으로 HTML 5 이전의 <a>, <hr> 등의 태그들은 태그를 배우지 않은 경우 해당 태그의 의미를 알지 못하지만, 태그를 보고도 한 눈에 무엇을 하는 태그인지 알아볼 수 있도록 만든 태그를 시멘틱 태그라고 한다.
● 시멘틱 관련 태그
<main>, <section>, <article>, <aside>, <header>, <footer>, <address> 등
● HTML4와 HTML5의 레이아웃 구성 예
HTML5에서는 <div> 대신 <header>, <nav>, <article> 등으로 사용자들에게 명확한 문서 윤곽을 정해준다.
● 시멘틱 태그를 이용한 화면 레이아웃 구성 예
● <header>
- 머릿말 태그, 소개, 또는 문서에 대한 탐색 요소의 그룹을 지정
● <nav>
- navigation. 외부 페이지로 연결되는 링크의 모음
● <menu>
- 페이지 내 기능을 하는 버튼/링크의 모음(대표적으로 툴바)을 나타낸다.
- type은 context, toolbar, list 3가지의 type이 있으며, 기본값은 list 이다.
● <aside>
- 섹션의 내용과 관련 없지는 않지만 분리되어도 문제없는 섹션. 주로 사이드바 형태로 표현.
- aside 태그는 본문 내용에 대한 추가적인 설명할 때 사용하는 태그.
- 본문과 별도로 추가적인 언급을 할 때 사용.
● <main>
- 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용
- <main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성
- 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안된다.
- 하나의 문서에는 단 하나의 <main> 요소만이 존재
- <main>요소는 <article>, <aside>, <footer>, <header>, <nav> 요소의 자손 요소가 되어서는 안된다.
- <main> 태그는 HTML5에서 새롭게 추가된 요소이다.
- chrome 26.0, edge 12.0, firefox 21.0 부터 지원
● <section>
- 문서 내에서 같은 의미의 구역(제목으로 시작하는 컨텐츠)을 나눌 때 사용
- 섹션의 제목으로 사용되는 제목 컨텐츠는 상하구조를 갖지 않으며 섹션 내 사용된 제목 컨텐츠는 레이아웃에 영향을 주지 않음
- 신문기사와 같은 배포형은 <section>이 아닌 <article> 사용
● <article>
- 문서내의 독립적인 글, 블로그 글이나 뉴스 본문 등을 구성하는 섹션
- <article> 안에서 <header>, <footer>와 같은 하나의 페이지 형식으로 구성할 수도 있으며 페이지 안에서 <article> 요소가 여러번 반복되어도 상관없음
- <article> 요소가 중첩될 경우 중첩된 <article> 요소는 서로 상호관련이 있어야 한다.
● <footer>
- 페이지 하단부의 저작권 정보나 서비스 제공자 정보 등을 제공하는 부분
● <details>
- 추가적인 설명 태그(On-demand Control)
- <details> 요소는 사용자가 추가 정보를 얻거나 컨트롤할 수 있는 노출된 위젯을 나타낸다.
- 웹 페이지의 세부 정보나 일부에 대해 설명하고자 할 때 사용하며 내용을 숨기거나 보여지게 설정할 수 있다.
- 글 내용 중 제목을 클릭하여 내용을 보이게 안보이게 하려면 HTML5의 <summary> 태그와 함께 사용하면 된다.
- open 속성이 설정되어 있지 않으면 <details> 내용은 볼 수 없다.
- 속성
open : 내용을 표시
속성값 : open
● <summary>
- 세부 요약 태그 (Summary of Details)
- <summary> 요소는 <details> 요소에 포함된 내용의 요약, 캡션, 범례를 나타낸다.
'코 딩 공 부 > H T M L' 카테고리의 다른 글
| HTML - HTML 테이블 관련 태그 (0) | 2021.05.17 |
|---|---|
| HTML - HTML 기본 태그 (0) | 2021.04.26 |
| HTML - HTML 개요 (0) | 2021.04.23 |