킴왕의 블로그

HTML과 CSS

2020. 4. 22. 14:10

Welcome to K콘텐츠

티스토리 블로그를 시작하시거나 이용하시는 분들은 html과 css에 대해서 많이 들어보셨을 겁니다. 블로그를 예쁘게 꾸미는데 html과 css를 조금만 응용해도 얼마든지 내가 원하는 방향에 가깝게 예쁘게 꾸밀 수가 있습니다. 저 역시 티스토리 블로그 운영이 처음이고 초보자여서 가장 기초적이고 쉬운 설명으로 이해가 가기 쉽게 포스팅을 하려고 합니다.

 

HTML

 

HTML과 CSS는 프로그래밍 언어의 한 종류입니다. 그러나 프로그래밍 언어라고 하기보다는 페이지 기술 언어라 정의하는 편이 더 이해가 되겠습니다.

 

HTML(Hyper Text Marup Language/하이퍼 텍스트 마크업 언어)의 약자이며 웹사이트의 '콘텐츠'를 작성할 때 기본이되는 페이지 기술 언어입니다.

말 그대로 이용자께서 보고계시는 크롬이나 인터넷익스플로러 등의 웹페이지의 디자인이나 레이아웃을 기술하기 위한 것이며 페이지에 표시할 요소나 구조 등을 기술할 수가 있습니다.

 

HTML의 특징은 파일명이 .html이며 메모장과 같은 텍스트를 입력할 수 있는 기본적인 텍스트 편집 프로그램에 원하는 소스를 작성한 후 티스토리 블로그-스킨편집-html편집-html에 입력하여 바로 적용시키고 확인할 수가 있습니다.

 

CSS

 

CSS(Cascading Style Sheet/종속형 스타일 시트)의 약자이며 '스타일 시트'를 기술할 때 사용하는 언어입니다.

HTML보다 더 괜찮은 디자인으로 사용할 수가 있으며 역시 메모장과 같은 텍스트 편집 프로그램에 소스를 입력한 후 마찬가지로 html편집-CSS부분에 입력하여 바로 확인할 수 있습니다. 파일 확장명은 .CSS입니다.

 

HTML이 기본뼈대라면, CSS는 좀 더 디테일하게 꾸밀 수가 있습니다.

 

HTML과 CSS의 차이

 

[티스토리에서 HTML과 CSS]

예) 티스토리에서 글상자 등을 만들 때 

-글쓰기에서 HTML에 소스입력만으로 화면에 표시가 가능합니다.

-글쓰기에서 CSS에 소스입력하여 HTML로 호출하여 화면에 표시가 가능합니다.

 

예) 티스토리 글쓰기가 아닌 스킨을 꾸밀 때 관리자모드-스킨편집일 경우

-HTML만으로 화면을 구성할 수 있습니다.

-CSS에서 디테일한 소스를 입력하여 HTML로 호출하여 화면을 구성할 수 있습니다.

 

원을 표현하는데 차이점

티스토리가 아닌 일반적으로 쓰이는 html과 css의 간단한 차이점 입니다.

 

HTML로 원을 만들었을 때 소스

<div style="width:100px;height:100px;border:1pt
 solid #1DDB16;border-radius:50px;
filter:alpha(opacity=30);opacity:0.3;
background:#1DDB16;"></div>

 

CSS로 원을 만들었을 때 소스

<div style="width:100px;height:100px;border:1pt
 solid #1DDB16;border-radius:50px;
filter:alpha(opacity=30);opacity:0.3;
background:#1DDB16;"></div>
CSS 부분
.circle1 {
background-color:#86efef;
width:150px;
height:150px;
border-radius:75px;
margin:0 auto;
vertical-align:middle;
line-height:150px;

차이점 : HTML로만 만들었을 때는 CSS없이 자체적으로 원을 표현하였으며, 두번째는 CSS에서 원을 표현하여 Circle1이란 이름을 부과하고, HTML에서 Circle1를 호출하여 표현하였습니다.

정리하자면 HTML은 콘텐츠의 구조와 의미를 정의하며, CSS는 스타일과 레이아웃을 지정합니다. CSS를 사용하여 콘텐츠의 글꼴, 색상, 크기 및 간격의 변경, 애니메이션 및 기타 효과를 추가할 수 있습니다.

 

티스토리에서 HTML과 CSS는 소제목이나 인용구를 활용하여 글쓰기에 가독성을 높이는데 조금 더 도움이 될 수 있으며, 전문가가 아니더라도 활용을 한다면 충분히 글을 포스팅할 수 있다고 생각이 됩니다.

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band