도라에몽주머니

[HTML5] HTML/CSS 4일차 본문

Study/Web

[HTML5] HTML/CSS 4일차

에몽쓰 2022. 8. 11. 17:22

HTML / CSS

✔ Preview

header 태그, section 태그, article 태그, footer 태그 등 다양한 시멘틱 태그의 사용법 및 inline과 block의 차이점 정리, 간단한 CSS 스타일 적용

 

✍ Tag Summary

Sementic Tag

: HTML 구조를 설계함에 있어서 태그에 의미를 부여해 사이트의 구조 파악을 용이하게 하는 태그를 말한다.

* Header, Section, Article, Footer 등의 태그가 여기에 해당

 

Header

: <header> 태그는 문서나 특정 섹션의 헤더(header)를 정의할 때 사용한다.

<header>
	<h1>머리글 영역입니다.</h1>
	<h2>머리글 영역에서 2번째 부분입니다.</h2>
</header>

 

Section

: <section> 태그는 문서의 주제나 카테고리별로 섹션(section)을 구분할 때 사용한다.

<section>
	<p>본문 영역입니다.</p>
	<p>본문 영역입니다.</p>
	<p>본문 영역입니다.</p>
</section>

 

Article

: <article> 태그는 기사나 블로그 등 텍스트 위주의 페이지를 구성할 때 사용한다.

* Section과 사용법 거의 유사

<article>
	<p>본문 영역입니다.</p>
	<p>기사나 블로그를 작성해주세요</p>
</article>

 

Footer

: <footer> 태그는 문서의 바닥글 부분(문서 하단)을 나타낸다.

<footer>
	<p>바닥글 입니다.</p>
</footer>

 

 

Inline vs Block

  • Inline과 Block의 차이점
  • Inline

: inline은 주로 텍스트를 작성할 때 사용되는 형태이다. 그렇기 때문에 페이지의 전체 너비에 맞추어 공간을 사용하는 것이 아니라 해당 텍스트의 길이에 맞추어 영역이 잡히게 된다.

ex) <a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em> 등

  • Block

: block은 페이지의 한 영역을 차지하는 박스 형태의 display 속성으로서 width="100%"인 것과 같은 결과를 보여준다. block전, 후에 요소를 추가하면 줄바꿈이 발생한다.

ex) <address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header> 등

 

  Inline Block
줄바꿈 X O
페이지를 차지하는 영역 텍스트의 길이만큼만 페이지 너비만큼

 

 

CSS Basic

: CSS는 총 4가지 작성 방법이 있다.

 

  • inline 스타일 적용
  • 내부 스타일 적용
  • 외부 스타일 적용
  • import 스타일 적용

 

1. inline 스타일 적용

: 글로벌 속성인 style 속성을 사용하는 방법이다. css를 적용하고자 하는 태그 내에 style="" 과 같은 형식으로 기술한다.

<h2 style="background-color:blue">파란 배경색</h2>

 

2. 내부 스타일 적용

: <head> 태그 내에 <style> 태그를 작성해서 css를 사용하는 방법이다. <style> 태그 내에 css 문법으로 작성하면 주석 처리도 css 문법에 맞추어서 작성해야 한다.

<head>
<style>
/* css에 주석을 작성하려면 <!-- --> 가 아닌 /**/ 을 사용해야 한다. */

h2 {
	background-color:blue;
}
</style>
</head>

 

3. 외부 스타일 적용

: 외부에 css 파일을 만들어 직접 작성 후 <link> 태그를 통해 html에서 사용하는 방법이다.

<head>
<link rel="stylesheet" href="불러올css파일.css">
</head>

 

4. import 스타일 적용

: 외부의 웹폰트를 불러올 때 사용하는 스타일 적용 방법이다. Google Font 사이트를 활용하면 다양하고 예쁜 웹폰트를 찾을 수 있으며 쉽게 import 코드 형태로 불러올 수 있다.

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

<head>
<!-- Noto Sans Korean -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@900&display=swap');
</style>
</head>

 

저작자표시 (새창열림)

'Study > Web' 카테고리의 다른 글

[CSS3] HTML/CSS 6일차  (0) 2022.08.16
[CSS3] HTML/CSS 5일차  (0) 2022.08.12
[HTML5] HTML/CSS 3일차  (0) 2022.08.10
[HTML5] HTML/CSS 2일차  (0) 2022.08.09
[HTML5] HTML/CSS 1일차  (0) 2022.08.09
'Study/Web' Related Articles more