[HTML] 03. 레이아웃 관련 태그

CSS(Cascading Style Sheet)

스타일은 HTML 문서 내에 서체의 종류, 크기, 색, 여백 등을 지정하여 사용자의 web browser 환경에 상관없이

일정한 화면을 보여주는 기능

HTML의 기능을 확장

태그에 다양한 기능 추가 및 HTML에서 지원하지 않는 다양한 스타일 등을 사용할 수 있다.

장점

- 양식의 모듈화 흐름이 같은 문서 양식으로 전체를 구성

- 간편성 : 문서의 형식을 손쉽게 다양하게 구성

- 일관성 : 사용 환경의 영향을 받지 않으며, 일관성 있는 문서들을 만들 수 있음

- 유지보수의 편리성

CSS 형식

css 구문은 선택자(selector)와 선언으로 구성

선언은 속성(property)과 값(value)으로 구성된다.
css의 기본 형식은 '선택자{속성:값;}' 의 형식으로 표현되며 여러 속성을 사용할 경우 세미콜론(;)으로 구분

- 대소문자를 구별하지 않는다.
- inline style을 제외한 모든 style property와와 Value, Keyword는 중괄호 ({ }) 속에 들어간다.

CSS 형식

1. inline Style

- inline Style 은 HTML tag 속에 style 속성을 사용하여 직접 지정한다.

<div style="color:red;">HTML</div>

2. embedded Style

- 스타일 시트의 기본적인 사용 방법

html의 <head>~</head> 사이에 삽입하여 <style type="text/css">~<style> 사이에 정의 같은 스타일을 중복해서 지정했을 때는 나중에 지정한 것 이 적용

<style type="css/text" media="값"> ... </style>

옵션
media : style sheet가 적용되어야 하는 매체를 지정한다.

print : 프린터 출력, screen : 화면 출력, all : 모든 매체를 통한 출력 등

3. linked style Style

<head> ~ </head> 사이에 link element를 사용하여 css file(확장자가. css인 파일)을 연결시켜서 사용하는 방식

<link rel=stylesheet href="파일명" type="text/css">

4. imported style sheet

- 이 방식은 결과적으로 linked style sheet와 같고 위치는 embedded 방식과 마찬 가지로 style block 속에 들어간다.

@import url("파일명"); 또는 @import "파일명";

<style>~</style>

스타일 정보 태그(Style Information)로 HTML 문서 내에 스타일 시트를 선언하는 데 사용

<div>~</div>

<div> 요소는 그 자체로 어떤 의미를 갖지는 않으며, 몇 가지 요소를 한 덩어리로 묶어서 스타일을 주거나 스크립

트를 연결하는 데 사용
- <div> 태그는 블럭 레벨 태그로 줄 바꿈이 일어난다.

<span>~</span>

인라인 요소에 스타일을 그룹화하고 적용하는 데 사용
- span 태그는 인라인 레벨 태그로 줄 바꿈이 일어나지 않는다.
- 인 라인 레벨 태그는 width, height 속성은 무시되며, margin 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

시멘틱(semantic)

문서의 구조와 데이터의 의미를 보다 명확히 하기 위한 시멘틱 요소가 HTML5에 추가되었으며, 검색엔진 및 문서 해석기 등에서 웹문서 판별이 정확하고 용이해진다.

<main>, <section>, <article>, <aside>, <header>, <footer>, <address> 등

<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에서 새롭게 추가된 요소이다.

<section>
- 문서 내에서 같은 의미의 구역(제목으로 시작하는 컨텐츠)을 나눌 때 사용.
- 섹션의 제목으로 사용되는 제목 컨텐츠는 상하구조 갖지 않으며 섹션내 사용된 제목 컨텐츠는 레이아웃에 영향을 안 줌.
- 신문기사와 같은 배포형은 <section>이 아닌 <article> 사용

<article>
-문서 내의 독립적인 글, 블로그 글이나 뉴스 본문 등을 구성하는 섹션.
- <article> 안에서 <header>, <footer>와 같은 하나의 페이지 형식으로 구성할 수도 있으며 페이지 안에서 <article> 요소가 여러 번 반복되어도 상관 없음

- <article> 요소가 중첩될 경우 중첩된 <article><article> 요소는 서로 상호 관련이 있어야 한다.

예) 블로그 글을 나타내는 <article>요소 <article> 요소 내부에 블로그 방문자 댓글이나 의견을 <article>요소로 넣을 수 있다.

<details>
- 추가적인 설명 태그(On-demand Control)
- <details> 요소는 사용자가 추가 정보를 얻거나 컨트롤할 수 있는 노출된 위젯을 나타낸다.

-웹페이지의 세부 정보나 일부에 대해 설명하고자 할 때 사용하며 내용을 숨기거나 보여지게 설정할 수 있다.
- 글 내용 중 제목을 클릭하여 내용을 보이게 안보이게 하려면 HTML5의 <summary> 태그와 함께 사용하면 된다.

- open 속성이 설정되어 있지 않으면 <details> 내용은 볼 수 없다.

<summary>
- 세부 요약 태그(Summary of Details)
- <summary> 요소는 <details> 요소에 포함된 내용의 요약, 캡션, 범례

'💻Programming > 👩‍🎨HTML&CSS' 카테고리의 다른 글

[CSS] 03. 배경 및 이미지 관련 스타일 (0)	2022.09.14
[CSS] (0)	2022.09.14
[HTML] 04. 테이블 관련 태그 (0)	2022.09.09
[HTML] 02. 기본 태그 (0)	2022.09.06
[HTML] 01. 개요 (0)	2022.09.06

CSS(Cascading Style Sheet)

CSS 형식

CSS 형식

1. inline Style

2. embedded Style

4. imported style sheet

시멘틱(semantic)

'💻Programming > 👩‍🎨HTML&CSS' 카테고리의 다른 글

티스토리툴바