[HTML][CSS]HTML과 CSS 기초

HTML과 CSS은 크게 말해 뼈대와 꾸미기라고 할 수 있다!

 

HTML은 구역과 텍스트를 나타내고 CSS는 잡은 구역을 꾸며주는 것이다.

HTML은 내 style 속성으로 꾸미기를 할 수 있지만 CSS를 이용하면 더 편리하게 이용할 수 있다.

HTML코드 내에 CSS파일을 불러와 적용하면 끝!

 

HTML은 크게 head와 body로 구성되어 있고, head안에는 페이지의 속성 정보를 담고 body에는

페이지 안에 들어가는 내용을 담는다.

 

여기서 사용하는 툴은 Visual studio code나 Sublime Text 둘 중 아무거나 사용해도 무방하다.

 

우선 빈 화면에 저장버튼을 눌러 '파일명.html'로 저장한다.

(Sublime Text를 이용하는 경우 자동완성 기능을 사용하면 편리하다!)

그 다음 빈 화면에 이렇게 코드를 입력한다.

 

이렇게 <title>태그안에 내용을 입력하면 웹 페이지의 제목을 설정할 수 있다.

웹 페이지 본문에는 보이지 않고 브라우저의 탭에서 확인할 수 있다.

head안에 들어가는 대표적인 요소들로는 meta, script, link, title등이 있다.

 

다음은 body

body안에 들어가는 대표적인 요소들을 공부해보자.

 

이 외에도 아주 다양한 태그들이 있고 필요할 태그를 넣어서 사용하면 된다!

 

<정리>

-HTML은 뼈대! CSS는 꾸미기

-HTML은 크게 head와 body로 구성되며 head안에는 페이지의 속성 정보를 body안에는 페이지의 내용이 들어감!

-head안에는 대표적으로 meta, script, link, title등의 요소가 들어감.

-body에는 <div>(구역 나누기), <p>(문단), <ul>(순서가 필요없는 목록), <ol>(순서가 있는 목록), <li>(ol과 ul의 각 항목들을 나열)

-<h1>~<h6>은 제목을 나타내는 태그

-특정 글자만 꾸미고 싶을 땐 <span style="color:red" > </span> 사용

-<a href>태그는 하이퍼링크

-<input type="text"/>는 입력 요소

-<button></button>는 버튼

-<textarea></textarea>는 여러 줄의 긴 문장을 입력할 때 사용.