[인프런] 맛집지도 만들기 (2)
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지 - 인프런 | 강
내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다., - 강의 소개 | 인프런...
www.inflearn.com
※ 해당 링크 강의 내용을 바탕으로 작성된 포스팅입니다.
CSS 알아보기, HTML과 연결, 기본 세팅 코드
CSS(Cascading Style Sheets)는 HTML의 어떤 부분을 어떻게 꾸밀지 정하는 기술이다.
Selector는 선택자. 어느 부분을 꾸밀까에 대한 내용이다. 예시에서는 p 태그.
{} 안이 어떻게 꾸밀지에 대한 내용이다. 예시에서는 color 속성을 이용하여 p 태그의 색을 빨강으로 바꿈.
HTML CSS 연결
1. 태그 내부에서 style 속성 사용하는 방식.
index.html
<h1 style="color:red">안녕하세요.</h1>
2. head 태그 내부에서 style 태그 사용하는 방식.
index.html
<head>
<style>
h1{
color: blue;
}
</style>
</head>
3. css 파일 만들어서 파일 분리하는 방식.
파일을 분리하지 않으면 HTML 코드가 장황해진다. 파일을 분리하는 방식이 관리가 편하다.
- style.css 파일 생성.
index.html
<head>
<link rel="stylesheet" href="./style.css" />
</head>
style.css
h1 {
color: aqua;
}
CSS 기본 세팅
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}CSS 선택자
선택자는 HTML의 어떤 부분을 꾸밀지 정의한다.
- 선택자.html 파일과 선택자.css 파일 생성.
선택자.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./선택자.css" />
</head>
<body>
<!-- 태그 선택 -->
<h3>h3은 빨간색</h3>
<h3>h3은 빨간색</h3>
<h3>h3은 빨간색</h3>
<!-- class -->
<h2 class="blue">저는 파란색 h2입니다.</h2>
<h2 class="blue">저는 파란색 h2입니다.</h2>
<!-- id -->
<h2 class="blue" id="green">저는 초록색 h2입니다.</h2>
<!-- 속성 -->
<a href="http://www.google.com">구글</a>
<a href="http://www.naver.com">네이버</a>
<!-- 대상 선택자 ex) hover -->
<p>커서를 올리면 검은색으로 변해요</p>
</body>
</html>
기본 선택자
전체
HTML 문서 전체를 선택한다.
선택자.css
* {
}
tag
태그명으로 선택자를 설정한다.
선택자.css
h3 {
color: red;
}
class
class는 공통적인 css를 가지는 부분을 묶어서 관리하는 것. class 속성값으로 선택자 설정.
선택자.css
/* class 선택자. 클래스 앞에 .을 붙여 준다. */
.blue {
color: blue;
}
id
id 속성값으로 선택자 설정. id가 class보다 우선순위가 높다.
선택자.css
/* id 선택자. id 앞에 #을 붙여 준다. */
#green {
color: green;
}
attribute
태그 안에 들어있는 옵션들을 속성(attribute)이라고 한다. 속성 또는 속성과 속성값으로 선택자를 설정한다.
선택자.css
/* attribute 선택자. [속성] 양식으로 작성. */
[href] {
background-color: red;
}
/* attribute 선택자. [속성=속성값] 양식으로 작성.*/
[href="http://www.naver.com"] {
background-color: blue;
}
css 우선순위
id > class = attribute > tag
가상 선택자
요소에 이벤트가 일어났을 때 css 적용. 아래와 같은 종류가 있다.
- hover: 마우스 커서가 올라갔을 때
- active: 마우스를 클릭하고 뗄 때까지
- focus: input 입력창에 커서가 깜빡거릴 때
- link: 하이퍼링크를 방문하지 않았을 때
- visited: 하이퍼링크를 방문했을 때
선택자.css
/* 가상 선택자. 태그명:가상 선택자 종류 양식으로 작성.*/
p:hover {
background-color: black;
}
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
CSS Diner 완료(답안/요점정리) (1/3)
CSS selector 연습에 좋은 자료인 CSS Diner를 완료하고 요약 및 답안을 정리하려고 한다. CSS Diner는 코드로만 보면 이해가 쉽게 되지 않는 부분을 visual aid를 가미하여 좀 더 쉽고 재미있게 CSS selector를
velog.io
CSS 선택자 - Web 개발 학습하기 | MDN
CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합
developer.mozilla.org
CSS 사이즈 단위와 색상 선택 방법
사이즈 단위
px, em, rem, percent가 있는데, rem과 percent를 가장 많이 사용.
라이브 서버에서 설정 확인을 할 때는 f12 개발자 도구에서 아래 사진과 같은 아이콘 클릭 후, 요소에 커서를 올려놓거나 클릭해서 확인 가능. 개발자 도구에서 수정한 코드는 실제 코드에 적용이 되지 않는다.
- 사이즈.html 파일과 사이즈.css 파일 생성.
사이즈.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./사이즈.css" />
<title>Document</title>
</head>
<body>
<h1>px</h1>
<h1>em</h1>
<h1>rem</h1>
<h1>percent</h1>
</body>
</html>
px
화면의 최소 단위인 픽셀을 몇 개 차지할 것인지 지정하여 사이즈를 조절.
사이즈.html
<h1>px</h1>
<p>px 사이즈 조절 중입니다.</p>
사이즈.css
p {
font-size: 38px;
}
rem
html 태그에 걸려있는 폰트 사이즈를 추종한다.
글자 사이즈 조절 시 많이 사용.
사이즈.html
<h1>rem</h1>
<div class="rems">rem 단위 테스트입니다.</div>
사이즈.css
.rems {
font-size: 1rem;
}
1rem은 브라우저에 기본적으로 설정된 폰트 사이즈인 16px이다. 아래와 같이 계산이 편하도록 10px로 변환할 수 있다.
사이즈.css
html {
font-size: 10px;
}
em
부모 요소의 폰트 사이즈를 추종한다.
사이즈.html
<h1>em</h1>
<ul class="ems"> <!--리스트 중첩, 10px-->
<li>One</li> <!--12px-->
<li>Two</li> <!--12px-->
<li>Three <!--12px-->
<ul>
<li>Three A</li> <!--14.4px-->
<li>Three B <!--14.4px-->
<ul>
<li>Three B 2</li> <!--17.28px-->
</ul>
</li>
</ul>
</li>
</ul>
사이즈.css
.ems li {
font-size: 1.2em;
}
ul 태그는 기본적으로 html의 폰트 사이즈를 가지고 있다. (여기서는 html 폰트 사이즈를 10px으로 설정.)
ems 클래스의 태그 사이즈를 1.2em으로 설정하면, li 태그의 사이즈는 부모인 ul 태그의 1.2배인 1.2px가 된다. 이처럼 중첩이 일어날 때마다 1.2배가 되기 때문에 폰트 사이즈 계산이 어려워 잘 사용하지 않는다.
percent(%)
부모 요소 폰트 사이즈에 따라 % 설정. 폰트 사이즈 지정 때는 잘 사용하지 않는다.
색상 선택 방법
색상 코드
총 6자리 글자로 지정. 16진수로 변환된 RGB 컬러를 나타낸다.
RGB
rgb() 함수 사용. 빨강, 초록, 파랑 채녈 값을 0~255 범위의 10진수로 표현.
rgb(red, green, blue);
rgb(1, 35, 174);
RGBA
RGB 함수에서 투명도인 alpha 값 추가. 투명한 상태인 0과 불투명한 상태인 1 사이의 값을 조절.
rgba(red, green, blue, alpha)
rgba(22, 4, 187, .8)
스포이드 도구를 통해 색을 따올 수도 있다.
색상 스포이드 도구
스포이드로 페이지에서 색상을 가져옵니다.
chrome.google.com
CSS 박스 모델
- 박스모델.html 파일과 박스모델.css 파일 생성.
박스모델.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./박스모델.css" />
<title>Document</title>
</head>
<body>
<div>박스모델입니다.</div> <!--content-->
</body>
</html>
border
content의 테두리
div {
/* border-width: 1px;
border-style: solid;
border-color: black;
축약 표현 */
border: 1px solid black;
}
padding
content border 사이 여백
div {
padding: 10px;
}
margin
border 바깥의 여백
div {
margin: 10px;
}
박스 모델 CSS 속성
div 태그는 기본적으로 화면 전체 너비를 차지하기 때문에 화면 사이즈 조절을 하면 content의 사이즈가 변한다.
→ 원하는 레이아웃을 만들기 위해 너비나 높이를 조절하는 속성 사용.
width, height
content 너비와 높이를 설정하는 속성.
전체 크기는 border+padding+content가 된다. 아래 코드에서는 100*100이 아닌 122*122.
박스모델.css
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
width: 100px;
height: 100px;
}
아래 코드를 작성하면 border+padding+content가 100*100이 되도록 한다.
박스모델.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
반응형 디바이스에 대응하기 위해 절대적인 사이즈가 아닌 퍼센트로 지정할 수도 있다.
- div는 width를 지정하지 않으면 기본적으로 100%가 된다.
div {
width: 50%;
}
max-width, min-width & max-height, min-height
너비와 높이의 최대값, 최소값을 설정하는 속성.
div {
max-width: 50px;
min-width: 50px;
}CSS 폰트, 글꼴을 지정하는 방법
- 폰트.html 파일과 폰트.css 파일 생성.
폰트.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="폰트.css" />
<title>Document</title>
</head>
<body>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
</body>
</html>
font-family
글꼴을 변경하는 속성. 기본 폰트는 맑은 고딕체.
- generic family: 어떤 컴퓨터에든 기본적으로 들어있는 글꼴.
- serif : 삐침 있는 명조계열의 글꼴
- sans-serif : 삐침 없고 굵기가 일정한 고딕계열의 글꼴
- monospace : 글자 폭과 간격이 일정한 글꼴
- cursive : 손으로 쓴 것 같은 필기계열의 글꼴
- fantasy : 화려한 글꼴
p {
font-family: serif;
}
웹 폰트
상용 서비스에서는 generic family를 잘 사용하지 않고, 웹 주소를 통해 서버에서 글꼴을 받아오는 형태로 많이 개발한다.
눈누
상업용 무료한글폰트 사이트
noonnu.cc
눈누 사용 방법
원하는 폰트 선택 → 웹폰트로 사용 란의 코드 복사하여 사용.
폰트.css
@font-face {
font-family: 'Yeongdo-Rg';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/Yeongdo-Rg.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'Yeongdo-Rg', cursive; /*cursive는 대체 텍스트*/
}
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
Google Fonts 사용 방법
폰트 파일을 다운로드 받으면 파일이 없는 컴퓨터에서는 운용이 불가능하다.
원하는 폰트 선택 → Select this style → <link> 혹은 @import 방법 골라 사용.
폰트.css
@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap');
p {
font-family: 'Gamja Flower', cursive; /*cursive는 대체 텍스트*/
}
font-weight
폰트의 굵기를 설정하는 속성. 100부터 900 사이의 숫자로 설정하며, 디폴트 값은 400.
p {
font-weight: 900;
}
text-align
글자의 수평정렬 방식을 설정하는 속성. 디폴트 값은 left(왼쪽 정렬).
p {
text-align: center;
}CSS Display 속성
모든 html 태그는 블록 혹은 인라인 속성을 가짐. display 속성으로 block, inline 설정 가능.
- 디스플레이 html, 디스플레이.css 파일 생성.
디스플레이.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="디스플레이.css" />
<title>Document</title>
</head>
<body>
<div>나는 div. block 엘리먼트입니다.</div>
<div>나는 div. block 엘리먼트입니다.</div>
<span>나는 span. inline 엘리먼트입니다.</span>
<span>나는 span. inline 엘리먼트입니다.</span>
</body>
</html>
block
- 새로운 요소가 줄바꿈을 하면서 등장.
- 기본 값이 width: 100%, height: auto이다.
- 박스 모델 설정 가능.
- <div> 등이 있음.
디스플레이.css
div {
width: 100px;
}
display 속성으로 inline 엘리먼트로 바꿀 수 있음.
디스플레이.css
div {
width: 100px;
display: inline;
}
inline
- 공간이 충분하면 줄을 바꾸지 않음.
- 컨텐츠 크기만큼 너비 차지.
- 박스 모델 설정 불가능.
- <span> 등이 있음.
디스플레이.css
span {
width: 100px;
}
display 속성으로 block 엘리먼트로 바꿀 수 있음.
디스플레이.css
span {
width: 100px;
display: block;
}
inline-block
블록처럼 박스 모델 개념 사용 가능, 인라인처럼 공간이 충분하면 줄바꿈을 하지 않음.
디스플레이.css
div {
width: 100px;
display: inline-block;
}
CSS 레이아웃 - Position
레이아웃은 화면 구성을 의미.
- 포지션.html, 포지션.css 파일 생성.
포지션.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="포지션.css" />
<title>Document</title>
</head>
<body>
<div>hello</div>
<div id="target">watch this</div>
<div>hello</div>
</body>
</html>
포지션.css
div {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid black;
}
#target {
background-color: yellow;
}
staic
원래 있던 위치.
포지션.css
#target {
background-color: yellow;
position: static;
}
relative
원래 있던 위치에서 상대적으로 이동. 상하좌우 이동 가능.
포지션.css
#target {
background-color: yellow;
position: relative;
left: 10px;
}
absolute
자신이 가장 가깝고 포지션 속성이 relative인 부모를 찾고, 부모에 대해 상대적인 이동.
포지션.css
#target {
background-color: yellow;
position: absolute;
left: 10px;
}
relative인 부모가 없으면 <body>기준으로 이동.
포지션.html
<body>
<div>hello</div>
<div id="target">watch this</div>
<div>hello</div>
<div class="container">
<div>hello</div>
<div id="target2">watch this</div>
<div>hello</div>
</div>
</body>
포지션.css
.container {
width: 400px;
height: 400px;
}
#target2 {
background-color: red;
position: absolute;
left: 30px;
top: 30px;
}
.container에 아래 코드를 추가하면 다음과 같다.
position: relative;
fixed
화면 자체를 기준으로 이동. 예를 들어 bottom을 0으로 주면 바닥에 고정된다.
포지션.css
#target {
background-color: yellow;
position: fixed;
bottom: 0;
}
sticky
스크롤을 해도 특정 위치에 고정되어 움직인다.
포지션.css
#target {
background-color: yellow;
position: sticky;
top: 20px;
}
