잡동사니에도 사랑을

CSS정리 - Chapter.01 본문

정리/CSS정리

CSS정리 - Chapter.01

luvforjunk 2021. 9. 15. 17:26
728x90
반응형

CSS(Cascading Style Sheets)


    웹페이지에 자주 적용되는 부분들은 미리 정리하고 조합하여 정의한 후 
    페이지 내부에서 필요할 때마다 해당 부분을 적용하는 스타일시트 중 하나.
    HTML로는 부족한 레이아웃이나 폰트등에 다양성을 부여한다.
   - 폰트 크기는 지정하는 수치에 따라 마음대로 조절 가능 
   - 자간/행간 배치가 자유로워 가독성을 높인다.
   - 링크 상의 밑줄 변형이 자유롭다.
   - 페이지의 여백을 원하는 만큼 만들어 줄 수 있다. 

 

CSS 기본동작


(1) CSS 사용하는 방법 3가지
① <head></head> 사이 기술
② <body> 안에서 직접기술
③ *.css(파일)로 따로 저장

 

(2) 기본구성 

   <HEAD>
    <STYLE type="text/css">  ---> 스타일의 유형이 텍스트이고 그 파일은 css 이라는 뜻.
       선택자 {속성1: 값1; 속성2: 값2;}  선언문(속성과 값)간의 구분은 ;(세미콜론)이다.
    </STYLE>
   </HEAD>

 

 

HTML5 기본 문법


HTML (HyperText Markup Language)은 웹 페이지를 기술하기 위한 '마크업 언어'이다.

- HTML5 문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식(document type)을 HTML5로 지정한다.
- 실제적인 HTML document은 2행부터 시작되는데 <html>과 </html> 사이에 기술한다.
- <head>와 </head> 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며 이 정보들은 브라우저에 표시되지 않는다.
- 웹브라우저에 출력되는 모든 요소는 <body>와 </body> 사이에 위치한다.

HTML 요소는 시작 태그(start tag)와 종료 태그(end tag), 태그 사이에 위치한 content로 구성된다.


HTML5의 템플릿은 이전에 비해 매우 간소화 되었다. 기존의 방식이 <div>에 의존하여 콘텐츠를 구조화 시켰다면 HTML5에서는 구조화를 위한 요소들이 등장하여 좀 더 시멘틱한 웹이 가능해졌습니다 

<body>
   <header></header> <!-- 첫머리 --> 
   <nav></nav> <!-- 메뉴 --> 
   <article></article> <!-- 본문 --> 
   <footer></footer> <!-- 끝머리 --> 
</body>


HTML을 공부하기 위해서는 기본적으로 시맨틱 태그의 화면구조를 이해해야 한다.


크게는 head와 body로 body영역은 header / section / footer가 있다.
HTML4는 <div id="header"><div id="footer>형식으로 모든 구조를 만들지만
HTML5에서는 <header><footer><nav><article>등으로 시맨틱 태그를 쓰고 div는 css를 넣을 때 사용된다


<!doctype>

문서 유형을 지정해주는 태그이다. 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻이다


<html>

웹 문서의 시작과 끝을 알려준다. 태그 사이의 소스를 읽어 HTML 문법에 맞추어 브라우저에 표시한다.


<head>

웹브라우저가 웹 문서를 해석하기 위해 필요한 정보를 입력하는 부분이다. 
실제 문서의 내용이 아니기 때문에 제목만 표시되고 나머지는 브라우저에 표시되지 않는다.
스타일이나 스크립트 등도 이곳에 포함된다.


메타데이터(metadata)

HTML 문서에 대한 정보(data)로 웹브라우저에는 표현되지 않는 정보를 의미한다
<title> <style> <meta> <link> <script> 태그 등이다


<body>

실제로 웹브라우저 화면에 표시되는 내용이다. 또 대부분의 시맨틱 태그들이 이 영역에서 사용된다.
<header> <section> <nav> <article> <footer> 태그들이 화면을 구성한다.

728x90
반응형

'정리 > CSS정리' 카테고리의 다른 글

CSS정리 - Chapter.03  (0) 2021.09.16
CSS정리 - Chapter.02(Selector)  (0) 2021.09.16
'정리/CSS정리' Related Articles more