브라우저의 역할
= 서버에서 요청을 받아 서버로부터 가져온 내용을 보여주는 것.
(웹페이지에 보여지는 내용은 서버로부터 전달받은 것이라 검사창에서 임의로 고쳐봐도 새로고침하면 다시 돌아오는 이유 )
HTML
HTML = Hyper Text Markup Language
마크업언어로 앞뒤로 태그마크가 있어야함
크게 head와 body로 구성<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
html 태그의 종류
<div>구역을 나눔 <h1>큰 제목</h1> <!--h2~h6 : 글씨가 h6으로 갈수록 점점 작아짐.--> <p>내용<p> <ul> 불릿기호가 있는 리스트 <li></li> <li></li> </ul> <span>특정글자만 꾸밀때 사용</span> <a href="www.naver.com">하이퍼링크 태그. url로 이동</a> <image>이미지태그</image> <input> 텍스트입력공간 <button>버튼</button> <textarea name="" id="" cols="30" rows="10"> 긴 텍스트 입력공간 </textarea> </div>
CSS
CSS = Cascading Style Sheets
HTML을 꾸미는 역할
( 내가 가리킬 수 있는 명칭이 있어야 꾸밀 수 있으므로 class나 id를 지정하여 사용 )
# 사용방법
- HTML의 head안에 style 태그를 넣어 그 안에서 수식하기
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{} </style> </head>- link 태그로 .css파일 연결
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./style.css"> </head>
css 태그의 종류
- width : 넓이
- height : 높이
- color : 글씨색
- text-align : 텍스트정렬
- background-image : 배경이미지
- background-size : 배경사이즈
- background-position : 배경포지션
- border-radius : 모서리 둥글게
- margin : 바깥쪽 여백
- padding : 안쪽 여백
가운데로 옮기는 css
넓이를 주고, 바깥쪽 여백 auto로 주기.
<style> body{ width:500px; margin: auto; } </style>
display:flex; 를 이용하여 정렬하기
- 세로로 정렬
<style> div{ display: flex; flex-direction: column; justify-content: center; align-items: center; } </style>
- 가로로정렬
<style> div { display: flex; flex-direction: row; justify-content: center; align-items: center; } </style>
코딩은 짜릿해 늘 새로워 ✨