일단 웹페이지의 기본인 HTML을 보자
HTML?
html의 정의는 무엇일까?
- html은 웹 페이지의 뼈대를 잡아주는 구역을 나타내는 코드다.
- html을 통하여 웹의 전반적인 부분을 작성할 수 있다.
CSS?
그럼 같이 사용되는 CSS는 뭐지?
- css는 html을 이용하여 제작된 뼈대를 꾸미는 역할을 하는 코드다.
HTML을 어떻게 사용할까?
- html은
<head>와<body>의 영역으로 나누어져 있다.
<head>
head 안에는 페이지의 속성 정보를 담는다.
- head에서는 페이지의 속성을 정의하거나, 필요한 스크립트와 같은 눈에 보이지 않는 필요한 부분을 담는다.
head안에 대표적으로 들어가는 요소들
- meta : 해당 문서에 대한 정보인 metadata를 정의할 때 사용한다.
- script : 자바스크립트와 같은 클라이언트 사이드 스크립트를 정의할 때 사용한다.
- link : 해당 문서와 외부 소스 사이의 관계를 정의할 때 사용한다.
- title : 해당 문서의 제목을 정의할 때 사용한다.
<body>
body 안에는 페이지의 내용을 담는다.
- body는 html문서 본문 내용을 정의하는 부분이다.
- 웹 페이지에 실제로 표시 되는 내용이 body내에서 작성된다.
body안에 대표적으로 들어가는 요소들
- span : html 문서에서 인라인 요소들을 하나로 묶을 때 사용하며, class나 id같은 전역 속성과 함께 사용하여 스타일링을 위해 요소를 그룹화 하거나 속성값을 공유하는 데 유용하게 사용할 수 있다.
- img : HTML 문서에서 이미지를 정의할 때 사용한다. html문서 내에 직접 삽입되는 것은 아니며, html 문서에 이미지가 링크되는 형태이다.
- input : 사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용한다.
- textarea : 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용한다.
해당 내용은 대표적인 태그들만 정의 했으므로 자세한 내용은 찾기를 바람.
CSS는 어떻께 사용할까?
<head>…..</head>안에<style>…..</style>로 공간을 만들어 작성한다.
배경관련
- background-color
- background-image
- background-size
사이즈
- width
- height
폰트
- font-size
- font-weight
- font-family
- color
간격
- margin : div의 바깥 여백
- padding : div의 안쪽 여백
div
- 이미지, 텍스트 등을 담는 구역을 의미한다.
부트스트랩
- 이미 제작된 CSS들을 모아둔 것으로 완성된 CSS를 가져다 쓸 수 있도록 하는것.
혼자 공부하는 블로그라 부족함이 많아요 https://www.notion.so/18067a27ac7e4f4790dde645fb3bf3d3?pvs=4