티스토리 뷰
오늘은 CSS에 대해 알아볼까 합니다.
티스토리 블로그를 마음대로 꾸미려면 CSS는 어느정도는 필수로 알고 있는것이 수월한 꾸미기에 유리합니다.
CSS(Cascading Style Sheets)의 기본적인 개념입니다.
기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다.
티스토리에서 CSS를 이용하면 좋은 점은
HTML 기본지식과 CSS의 기본적인 틀만 조금 배운다면 인터넷에 나와있는 정보들로
충분히 자신만의 스킨을 제작할 수 있습니다.
하지만 Javascript, Jquery 등의 프로그래밍 언어를 모른다면 반응형 홈페이지 등의
유동적인 스킨은 제작하기가 어렵습니다. 우선 티스토리에 CSS가 어떤 식으로 적용되는지 알아보겠습니다.
관리자 -> 꾸미기 -> 스킨편집 -> html 편집
클릭 하시면 HTML과 CSS를 편집할 수 있는 창이 아래 처럼 새 창으로 나타납니다.
왼쪽을 보시면 무조건 최신글이 보여집니다.
티에디션은 티에디션 메인화면에서 수정해야 해요~. 오른쪽에는 3개의 탭이 보이는데요.
[HTML / CSS / 파일업로드] 이렇게 세개가 보이지만
오늘은 CSS에 대해 알아보기로 했으니 CSS탭을 클릭해 봅시다.
HTML과 CSS는 뗄래야 뗄 수 없는 관계입니다.
둘 다 웹 프로그래밍에 있어서 없어서는 안되는 존재죠. 그
중 HTML은 그냥 웹 그 자체라고 할 수 있습니다. 모든 웹프로그래밍 언어들도 출력물은 HTML로 이루어져 있습니다.
CSS에는 HTML의 구성요소(Element)들을 꾸며주는 역할을 합니다.
HTML에서 ELEMENT라 하면 div, span, a 등 <>로 감싸져 있는 요소입니다.
요런 식으로 말이죠. div에 세 개의 a가 있습니다.
각각 element에는 id와 class라는 속성을 부여할 수 있는데 CSS에서는 이를 이용해서 HTML문서를 꾸며줍니다.
<div></div> 태그는 Division의 약자로, 레이아웃을 나누는데 주로 쓰입니다.
다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓰입니다.
<html>
<body>
<div style="background-color:cyan">구역1</div>
<div style="width:100px; height:100px; background-color:#CF0">구역2</div>
</body>
</html>
출력결과
HTML태그의 style 속성을 이용<style>태그를 통해 HTML 문서 내부에 기술 (<style>태그는 주로<head>태그 내부에 사용합니다)-
<head>태그는 문서의 머리를 나타내는 태그입니다.브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이터를 정의하는 태그들이 들어가게 됩니다.
-
<meta />태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그입니다.
페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있습니다.닫는 태그가 없는 태그로, 태그의 속성을 통해 정보를 제공합니다. SEO는 Search Engine Optimization의 약자로, 검색 엔진 최적화를 의미합니다.
<meta />태그를 이용하여description,keywords,author,subject,classification등의 정보를 표기할 수 있으며, 검색 엔진은 이런 정보를 적극적으로 활용합니다. -
<span></span>태그는<div></div>태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰입니다.<div>태그와의 차이점은display속성이block이 아닌,inline이라는 점인데, 이는 CSS display 항목에서 세부 정보를 알 수 있습니다.
이 둘의 차이를 쉽게 설명하자면,<div>는 줄 바꿈이 되지만,<span>은 줄 바꿈이 되지 않다는 점입니다.
'인터넷' 카테고리의 다른 글
| 애드센스 지급 받을 결제수단 정보 입력하는 방법 (0) | 2020.07.03 |
|---|---|
| 공용장소에서는 브라우저 시크릿모드(개인정보보호) (0) | 2020.06.30 |
| 아이폰 비활성화 푸는법 이렇게 쉽다니 (0) | 2020.06.28 |
| 웹마스터도구 "robots.txt 존재하지 않습니다" 오류 해결법 (0) | 2020.06.24 |
| 블로그 글 복사 안될 때 이렇게 해보자! 복사금지 설정까지 (0) | 2020.06.16 |