0. 개념
서버 { (프론트엔드: HTML CSS Javascript) }
서버는 프론트엔드를 주는 곳
클라이언트는 서버에서 프론트엔드를 받음
HTML은 뼈대 CSS는 꾸미기 javascript는 움직임(실행)
1. HTML
<head>와 <body>로 구성된다.
웹페이지의 내용은 <body> , 그 외의 필요한 것은 <head>에 저장된다.
<body>에 들어가는 태그들은
구역을 나누는 태그와 : <div> , <p>, <ul>, <li>
구역 내 들어갈 콘텐츠 태그가 있다. : <h1~6>, <span>, <a>, <img>, <input>, <button>, <textarea> 등등
구역을 나누는 태그는 해당 줄 전체를 차지하지만, 콘텐츠 태그는 해당 부분만 차지한다.
2. CSS
css는 꾸미는 것. 뭔가를 꾸밀 때는 꾸밀 대상을 지시해서 꾸민다.
(1. 태그에 selector를 붙임: 꾸밀 대상의 이름을 붙임 2. <style>에서 selector를 지정: 꾸밀 대상을 지시)
HTML은 부모-자식 구조를 가진다.
상위 태그를 꾸미면 하위 태그에도 그 내용이 반영된다.
(부트스트랩)
누군가가 만들어 놓은 예쁜 CSS 꾸러미
적재적소에 사용하면 더 그럴듯하게 꾸밀 수 있다.
3. TIL
(구글 웹폰트)
마음에 드는 글씨체 - select this style - selected family - 세번째 링크 복붙(<link>) - 아래 링크 복붙(<style>안에>
(구역 안의 내용을 중앙에 정렬하고 싶을 때)
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
(화면에 따라 크기 조정하기)
width: 95%;
max-width: 500px;
500px 이후로는 500px을 유지하고 그전까지 95% 비율로 보일 수 있도록
- width %와 px의 차이:
px은 절대적인 수치, 어느 화면에서든 정해진 수치대로 나타나지만
%는 설정한 %대로 화면에 따라 다른 길이로 나타난다.
(배경을 넣을 때 (이미지)는 항상 3가지 속성을 같이)
background-image: url("");
background-size: cover;
background-position: center;
(1. 이미지 불러와서, 2. 사이즈를 조절하고, 3. 이미지의 중심으로 맞춰준다. )