HTML CSS 정의 차이점 활용방법

 안녕하세요, 이번에 정리할 내용은 HTML CSS 정의 차이점 활용방법 관련 사항입니다.

인터넷에서 보이는 모든 페이지는 html로 만들어져 있습니다. 

 이런 HTML을 멋지고 독자 친화적으로 꾸미는데 도움을 주는 것이 CSS 입니다.

그럼 HTML과 CSS 정의 차이점 그리고 활용방법에 대해서 자세히 알아보도록 하겠습니다. 

HTML

: 먼저 HTML 대해서 설명 드리도록 하겠습니다. HTML은 “Hyper Text Marup Language”의 약자이며 웹사이트의 “콘텐츠”를 작성할 때 사용하는 웹 페이지 기술 언어입니다.

위에서 잠깐 설명 드린대로 인터넷에 모든 사이트는 HTML 기반으로 작성이 되어 있습니다. 

 물론 php 와 같은 페이지 프로그래밍 언어를 사용하는 워드프레스 같은 경우에는 html 과는 다른 방식으로 표현할 수 있지만 대부분의 웹사이트는 html을 적용한 것으로 인지하고 있습니다. 

 요즘 딥러닝, 머신러닝을 구현하기 위해서 파이썬이 대세인데 사실 HTML도 프로그래밍 언어의 한 종류입니다. 

 그러나 엄밀히 말하면 프로그래밍 언어라고 하기보다는 페이지 기술 언어라 말하시는 분들이 많습니다. 

크롬 유저라면 모든 사이트에서 F11 키를 누르게 되면 해당 페이지에 대한 html 구성 내용을 보실 수 있습니다. 

이런 개발자도구를 통해서 크롤링을 하는데 원하는 정보를 모아서 보여주기 위한 프로그램을 구현하시려면 꼭 html에 대한 기본지식은 가지고 있으셔야 합니다. 

 웹페이지의 디자인이나 레이아웃을 기술하기 위한 것이며 페이지에 표시할 요소나 구조 등을 기술하는데 활용하며 확장자명은 “. html” (예: abc.html)입니다. 

 html에 편집 프로그램이 많이 나오고 있지만 간단한 웹페이지 제작이나 편집은 메모장으로도 작업이 가능합니다.

 물론 저장하실 때 확장자명을 “.html” 로 수정해서 저장을 해주셔야 웹페이지 파일로 변환이 되는 점 참조 부탁 드립니다.

▶ 카카오톡 단톡방 몰래 조용히 나가는 방법

 

CSS

: 다음은 CSS 입니다. CSS의 폴네임은 “Cascading Style Sheet”입니다.

“Cascading”이라는 의미는 “종속”이라는 의미이며 “Style Sheet”는 스타일을 지원하는 의미라고 이해하시면 됩니다. 

• Cascading : 종속
• Style Sheet : 스타일 지원

 HTML이 사이트를 직접적으로 보여주는 언어라면 CSS 는 html을 서포터 해주는 언어라고 이해하시면 됩니다. 

 여기에서 서포터라는 의미는 CSS 언어를 이용해서 html을 제작자의 입맛에 맞게 꾸며줄 수 있기 때문입니다. 

HTML에서도 직접적으로 스타일을 꾸며줄 수 있지만 반복적인 작업이나 자주 사용하는 스타일의 경우에는 CSS 언어를 이용하면 보다 쉽게 작업이 가능합니다.

 CSS 또한 메모장으로 작업이 가능하며 저장 시 파일 확장명은 “.CSS” (예: abc.css)로 해주셔야 합니다. 

 

 

HTML CSS 차이점 활용법

1) HTML CSS 차이점

: 크롬 유저를 기준으로 설명 드리면 자신이 작업하는 웹페이지나 블로그 사이트에 들어오셔서 “F12″를 누르면 나오는 개발자도구 창 오른쪽에 보시면 HTML에 있을 겁니다. 

 이 HTML 속성을 보시려면 크롬 개발자도구 창에 보면 “커서” 모양이 있고 해당 기능을 위해서 원하시는 부분을 클릭을 하게 되면 해당 사항에 대한 HTML, CSS 사항을 확인하실 수 있습니다. 

보통 해당 개발자 도구에서는 CSS 사항은 찾기 어려우실 겁니다.

왜냐하면 CSS 는 html에서 id 형식으로 불러오기 때문엡니다. (예: id=”CSS 이름”)

즉 html은 해당 사이트나 페이지의 뼈대라면 CSS 는 해당 뼈대를 보조해 주는 속성 값이자 지지대라고 이해하시면 됩니다. 

– HTML CSS 차이점

• HTML : 페이지의 뼈대
• CSS : 뼈대를 보조해주는 속성 값이자 지지대

 

2) HTML CSS 활용법

: 그럼 HTML 과 CSS 활용법 대해서 자세히 알아보도록 하겠습니다. 

일단 HTML의 일반 구성은 div 구조로 묶는 것이고, CSS는 id를 불러올 수 있는 하나의 그룹을 짜는 것입니다. 

– HTML 구조

<div style="width:100px;height:100px;border:1pt

 solid #c90076 ; filter:alpha(opacity=30);

opacity:0.3; background:#c90076;">

</div>

– 실제 구현한 사항

– CSS 구조

: 먼저 CSS 적용하기 위해서는 해당 웹사이트에 CSS 코드를 입력을 해주셔야 합니다. 

CSS 코드 입력하는 사항은 아래 포스팅을 참조 하시면 도움이 되실 겁니다.  

▶ 라인 차단 확인 방법 꿀팁 (feat. 스티커 선물)

<div id="example1"> CSS 가 적용된 내용 </div>

.example1 {

background-color: #c90076; width:100px;

height:100px; margin:0 auto; vertical-align:middle;

line-height:150px;

}

즉 CSS 코드를 불러와서 해당 HTML 코드에 입힌다라고 이해하시면 됩니다. 

여기에서 사용한 CSS id는 바로 “example1″입니다.