웹사이트는 단지 TEXT.
어떤 종류의 TEXT를 써야하고, TEXT를 어디에 써야하는지를 배우는 것.
웹 사이트는 2~3가지 언어로 되어있음.
1.HTML
브라우저 is stupid.
브라우저에게 what is content를 알려주는거
브라우저는 웹사이트에 대해 아무것도 모르니까
ex) 브라우저야 이건 이미지야!
=> 브라우저에게 웹사이트의 content가 어떻게 구성되어 있는지 설명할 때 사용
2.CSS(Cascading Style Sheets)
무조건 css와 html을 같이 사용해
how that content looks like
브라우저에게 웹사이트가 어떻게 보이는지 설명해줌
ex) 브라우저야 그 이미지는 가로 25px 세로 100px 이어야해!
3.JAVASCRIPT
웹사이트의 뇌
Quiz
- A website is just a text file. True
2. We write the code, the browser reads the code, the browser paints the website. True
-
What are the langauges we can use to make a website?
HTML, CSS, JS -
What do we use HTML for? To describe the content of our website to the browser.
-
What do we use CSS for? To tell the browser how the content of our website looks like.
-
Can we make a website only with CSS? We can't!
7. Can we make a website only with HTML? We can!
-
What do we use JS for? To make our website interactive
-
Without JS we can't make a website. False
-
HTML & CSS are programming languages. False
-
What kind of language is HTML? Markup Language
-
What kind of language is CSS? Design Language
-
What kind of language is JS? Programming Language
파일명&폴더명은 항상 소문자
vsc는 txt 편집기
브라우저는 html 파일에 오류가 있다고 말해주지 않음
브라우저는 언제나 사용자에게 컨텐츠를 보여줌
HTML/TAG
h1 ~ h6
list
1. ordered list ol
2. unordered list ul
li -> list item
<h1>Hello This is My Website</h1>
<h2>Hello This is My Website</h2>
<h3>Hello This is My Website</h3>
<h4>Hello This is My Website</h4>
<h5>Hello This is My Website</h5>
<h6>Hello This is My Website</h6>Hello This is My Website
Hello This is My Website
Hello This is My Website
Hello This is My Website
Hello This is My Website
Hello This is My Website
<ol>
<li>beer</li>
<li>김치</li>
<li>meat</li>
<li>milk</li>
</ol>
- beer
- 김치
- meat
- milk
a - anchor ; 다른 웹사이트로 이동하는 방법
tag에 추가하는 부가적인 정보 attributes(속성) ex) href, src
attribute는 항상 큰따음표만 사용해야함!
href -> HTTP reference or hyperlink reference
href는 a 태그에만 추가할 수 있음
target의 기본값은 "_self"
img 태그는 self-closing tag
img의 attribute -> src
이 코드는 브라우저에게 이건 txt 파일이 아니라 이건 html 문서라고 알려주는거
html lang -> 검색엔진들에 도움을 주기 위해, 언어 뭐 쓰는지
페이지 환경설정이 head!
head tag 안에 있는 모든 tag들은 보여지지 않음
meta 부가적인 정보
두개의 attribute -> content, name
charset="utf-8" ; 브라우저에게 text를 어떻게 그려달라는지 말해줌, 잊지말고 넣기
meta 태그들은 self-closing tag!
og:image 카카오톡에 공유될 때 보여지는 이미지
html,css, javascript tags 검색시 mdn 키워드 붙여서 검색하기
enabled = true , 작동
다른 모든것들은 form 태그 안에 넣어지는 것
input은 하나 or 여러개의 type 가지고 있음
<form>
<input type="color"/>
</form>label태그는 form에 question 추가 가능
label은 input과 함께해야지 작동됨 -> id와 for에 들어가는 값은 동일해야함, for과 같은 값을 가진 id를 들고있는 input을 작동시켜줌
id는 body 안에 어떤 태그에든 넣을 수 있는 attribute야
id는 unique identifier이기 때문에 값이 고유해야함.
element 당 하나의 id만 가질 수 있는게 id의 규칙임
scripting 이나 css를 식별할려는 목적을 가진게 바로 id라는 attribute임
unsemantic tag
div - division like a box, container
span
코드를 semantic 태그로 써주면 좋다.
header tag ; body 안에 태그, div 같은거임 그치만 읽기만해도 의미 짐작 가능
main tag
footer; 꼬릿말을 위한 태그
<footer>
© 2022
</footer> © 2022
html element mdn 검색해서 보자 ~
Quiz
1.We need to use VSCode if we want to make a website. False
2.If I make a mistake on HTML the browser will show an error. False
3.A browser will always show some content even if the HTML is wrong. True
4.I can write any tag I like on HTML, like 김치 Yes, but it will not have an effect on the browser.
**5.To make a heading on HTML I should write
<h1>Title<h1>False **
아마 ! 인듯
6.What does 'ol' stand for? Ordered List
7.What does 'ul' stand for? Unordered List
8.What does 'li' stand for? List Item
9.Why do we use attributes on our HTML tags? To give tags more information.
10.What is the correct way of writing attributes?
<tag attribute="value">11.Can I write any attribute that I want? Yes, but it will not have an effect on the browser.
12.All attributes work for all tags. False
그런 것도 있고 아닌 것도 있음
13.If I give 'href' to a 'h1' it will become a title with a link. False
14.'img' tag is a self closing tag. True
15. What is a self closing tag? A tag that has no content, all information is provided via attributes.
quiz
-
What does do? It tells the browser that this document contains html code.
-
What are the two parts of an HTML document? head - body
-
What do we put on the ? We put tags to configure our document.
-
What do we put on the ? We put the content of our document.
-
What do tags do? The give extra information to our document.
-
There are very few HTML tags so we can memorize them all. False
-
An HTML tag can have another HTML tag inside of it. True
-
What is an ID? It gives a unique identifier to a tag.
-
Can I add an ID to the tag? Yes
-
How many IDs can a tag have? Min 0. Max 1.
-
What is the name of tags that give no meaning to the document? Non Semantic Tags
12. Which one is a semantic tag? section
- What is a semantic tag? A tag that gives meaning to the document.
code Challenge
label 태그를 사용하세요.
id 속성을 사용하세요.
입력받는 모든 항목이 필수가 되도록 작성하세요.
비밀번호는 최소 10자리 이상 입력받도록 작성하세요.
제출
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SuperForm</title>
</head>
<body>
<h2>Create An Account</h2>
<form>
<div>
<label for="first-name">First name</label>
<input required id="first-name" type="text" placeholder="First name" />
</div>
<div>
<label for="last-name">Last name</label>
<input required id="last-name" type="text" placeholder="Last name" />
</div>
<div>
<label for="email">Email</label>
<input required id="email" type="email" placeholder="Email" />
</div>
<div>
<label for="username">Username</label>
<input required id="username" type="text" minlength="5" placeholder="Username" />
</div>
<div>
<label for="password">Password</label>
<input required id="password" type="password" minlength="10" placeholder="Password" />
</div>
<div>
<label for="birth-date">Birth date</label>
<input required id="birth-date" type="date" />
</div>
<div>
<label for="kimchi-love">How happy are you?</label>
<input required id="kimchi-love" type="range" list="kimchi-levels" />
<datalist id="kimchi-levels">
<option value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100"></option>
</datalist>
</div>
<div>
<label for="fa-color">What is your fav. color?</label>
<input required id="fa-color" type="color" />
</div>
<div>
<input type="submit" value="Create Account" />
</div>
</form>
</body>
</html>CSS
How to Add CSS to HTML
1. HTML 파일에 HTML 코드와 CSS 코드 놓는 방법 (inline CSS) ``` ``` 2. css와 html 분리(external CSS)css가 하는 일은 HTML 태그를 가리키는 일
property; 색은 파랑색, 폰트 크기 뭐 이런거
selector ;가리키는 대상 중괄호 그 안에 속성 쓰기
ex)
h1{
color: blue;
font-size:20px;
font-style:italic;
}
*{
}
-만 가능, 끝에 콜론; 써주기
- 전체 적용
Cascading means 브라우저가 css코드를 읽을 때 위에 있는 코드부터 차례차례로 읽힌다.
만약 1이랑 2가 같은 걸 가리키면 .. ?(1번 2번 순으로 있을 때) 1번!
id명을 가리키고 싶으면 #first
block; 어떤 박스를 만들건 옆에 박스가 오지 않음. 옆에 아무것도 올 수 없음. 대부분의 box들은 block임. 높이와 너비 가질 수 있음.
box
1)margin: box의 border로부터(의) 바깥에 있는 공간
위 오른 아래 왼 -> 시계 방향순
Collapsing margins 현상; 위 아래에서만 일어나
흰 box의 경계가 보라색 box의 경계와 같을 때 일어나고, 그 때 두 box의 margin은 하나가 됨! -> 경계가 같을 때 margin은 하나가 되는구나~ 정도만 생각해!
2)padding
box의 경계로부터 안쪽에 있는 공간
3)border
inline과 block 모두 적용됨
inline ( = in the same line); 아주 작은 글이나 링크, 그림 등등
ex) span은 옆에 바로 다른 요소가 올 수 있음,, span,a,img
높이와 너비를 가질 수 없음, 위 아래에 margin 가질 수 없음
block <=> inline 하는 법 -> display:
QUIZ
1.In how many ways can we include CSS in our HTML? Two
2.What's the best way to add CSS to our HTML? Using external CSS
3.In h1 { color:blue } what is the selector? h1
4.In h1 { color:blue } what is the property? color
5.In h1 { color:blue } what is the value? blue
6.How does the browser reads and interprets CSS? From top to bottom
7.div allows elements next to it. False
8.span allows elements next to it. True
9.Width and height have an effect on inlines. False
10.Width and height have an effect in blocks. True
11.margin: 15px 10px 5px 0px means: top: 15px left: 0px right:10px bottom:5px
12.Collapsible margins are weird. True
Classes
class는 여러 요소들에서 쓸 수 있음. 유일할 필요 없음
온점은 class명이라는 뜻
한 번에 여러 클래스 쓸 수 있음 3개까지?
.tomato{
background-color: tomato;
}Inline-Block; Inline은 너비와 높이를 사용할 수 없으니까.바로 옆에 올 수 있음. 근데 핵구림. 정해진 형식이 없음. 반응형 디자인을 지원하지 않음 -> 창 크기 변경시 바뀜
Flex
1.자식에게 명시하지 않고 부모에게 명시한다.
div의 부모를 display:flex로 만든다. -> 나란히 정렬
body{
margin: 20px;
display: flex;
}2.justify-content와 align-items를 적용하고 싶으면 display:flex를 해줘야함
display:flex를 하면 해당 엘리먼트인 body가 flex container가 될거임.
flex container은 두 개의 축을 가지고 있음(주축, 교차축)
justify-content: flex-start -> 이게 기본값
주축은 수평, 교차축은 수직으로 디폴트가 설정되어있음
justify-content는 주축에 적용, align-items는 교차축에 적용
body에 height을 주지 않으면 align-items는 쓰나마나
vh: viewport(screen) height 화면 크기에 따라 달라짐
ex) 100vh -> 화면 높이의 100%
flex-direction
1. column -> 주축 수직 교차축 수평
2. row (default 값)
flex-direction : reverse도 존재 축은 그대로지만 축의 진행 방향을 바꿈 123 -> 321 순으로 진행방향을 바꿈.
flex-wrap: nowrap; (모든 요소를 같은 줄에 있게 만들어 줌)
flexbox는 width를 초기 사이즈로만 여김
flex-wrap: wrap; (모든 요소들을 최대한 같은 줄에 있게 하고 그게 안되면 다음 줄로 넘김)
position
postion: 레이아웃보다는 위치를 아주 조금 위로, 오른쪽으로 옮기고 싶을 때 사용
position: fixed; 하고 난 뒤 top, left, bottom 중 하나만 수정해도 앞에 있는 레이어로 넘어갈거임,, 레이러를 부수고 다른 레이어에 위치. 가장 위에 위치.
position: static; 레이아웃이 박스를 처음 위치하는 곳에 두는 것
position: relative; 하면 top, bottom, left, right 속성을 사용할 수 있음. element가 처음 위치한 곳을 기준으로 상하좌우 수정 가능
position: absolute; 가장 가까운 relative 부모를 기준으로 이동시켜줌. relative한 걸 찾지 못하면 body 기준으로 옮겨줌
coding challenge
body {
background:tomato;
height:100vh;
display: flex;
justify-content: center;
align-items:center;
}
.father{
width:200px;
height:200px;
padding:20px;
display:flex;
flex-direction: column;
align-items:center;
justify-content: space-between;
flex-wrap: wrap;
background:wheat;
border:2px solid black;
}
.inside {
background:teal;
height:50px;
width:50px;
border:3px solid white;
}
.inside-second {
width: 100%;
border-style:dashed;
}pseudo selectors
class나 id 하는 것보다 이게 나음
div: last-child -> 리스트에 있는 div들 중 마지막에 있는 걸 말함!
1. last-child{} // 마지막 자신 선택
2. first-child{} // 첫번째 자식 선택
3.nth-child(숫자) {} // 원하는 순서의 자식 선택
4.nth-child(even,odd) {} // 짝수or홀수 자식 선택
5.nth-child(2n+1) - 선택자의 2n+1 요소 선택
- n은 0부터 대입하는 것으로 추측
p span {} p안의 span 찾기
div > span {} 바로밑에 있는 span 찾기(자식)
<div>
<span></span>
</div>p + span {} p 바로 다음으로 오는 span 찾기(형제)
<p>
</p>
<span></span>p ~ span {} p 다음으로 오는 span 찾기(형제)
<p>
</p>
<adress></adress>
<span></span>input:required {} input 속성이 required인 경우 적용
input[placeholder~="name"] {} input 속성 placecholder가 name을 포함하는 경우 적용
states
:active{} 버튼을 누르고 있으면 적용 : hover{} 버튼에 마우스를 대고 있으면 적용 : focus{} 키보드로 선택되어있을 때 : visited{} 클릭하거나 방문했던 곳 :focus-within{} focused인 자식을 가진 부모 엘리먼트의 상태input::placeholder -> input안의 placeholder를 꾸며줌
p::selection -> p안의 내용을 선택할 때 꾸며줌
::first-letter -> 첫번째 문자를 꾸며줌
::first-line -> 첫번째 줄을 꾸며줌
Color and Variables
COLOR
1. 16진수
2. RGB
3. RGBA (투명도)
:root {
--main-color: #fcce00;
}p{
background-color: var(--main-color);
}변수는 --변수이름 ( 뛰어쓰기는 -로 채우기)
변수를 사용할 때는 var()
search css custom properties
box-shadow
gradient
code challenge
body {
height:100vh;
background-color: whitesmoke;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
margin-bottom: 50px;
}
section {
width:50%;
margin:0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.color {
width: 48%;
position: relative;
margin-bottom: 20px;
}
.color:first-child .color__bg {
background-color: tomato;
}
.color:nth-child(2) .color__bg {
background-color: teal;
}
.color:nth-child(3) .color__bg {
background-color: burlywood;
}
.color:last-child .color__bg {
background-color:thistle;
}
.color__bg {
height: 300px;
border:5px solid white;
}
.color__info {
position: absolute;
width:100%;
background-color:white;
top:20px;
padding:0px 10px;
box-sizing: border-box;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>The Best Colors</h1>
<section>
<article class="color">
<div class="color__bg"></div>
<div class="color__info">
<h3>Tomato</h3>
<h5>#FF6347</h5>
</div>
</article>
<article class="color">
<div class="color__bg"></div>
<div class="color__info">
<h3>Teal</h3>
<h5>#008080</h5>
</div>
</article>
<article class="color">
<div class="color__bg"></div>
<div class="color__info">
<h3>Burlywood</h3>
<h5>#DEB887</h5>
</div>
</article>
<article class="color">
<div class="color__bg"></div>
<div class="color__info">
<h3>Thistle</h3>
<h5>#D7BFD7</h5>
</div>
</article>
</section>
</body>
</html>Transitions
어떤 상태에서 다른 상태로의 '변화'를 애니메이션으로 만드는 방법
state에 따라 바뀌는 property를 갖고 있으면 사용되는거
transition이라는 속성은 state가 없는 요소에 붙어야함
형태
transition : background-color 10s ease-in-out, color 5s ease-in-out;
-> hover에 background-color와 color가 있기 때문에 가능한거
a{
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: background-color 10s ease-in-out;
}
a:hover{
color: tomato;
background-color: wheat;
}all도 가능
ease in function - 애니메이션이 어떻게 바뀌는지 알려주는거
1. linear: 무언가를 직선으로 움직이게 만들어줌. 같은 속도로 좌우 직선으로 움직임.
2.ease-in: 시작점에서 좀 더 빨라지면서 움직임.
3. ease-out: 끝에서 느려짐.
4. ease-in-out: 느렸다가 가속했다가 느려지면서 끝남.
*사이트 https://matthewlein.com/tools/ceaser 에서 느낌 차이 확인 가능
Transformations
말 그대로 한 요소를 transform 시킬 수 있음
(border-radius를 50% 주면 원이됨!)
ex) transform: rotateY(85deg) 3D 상에서 Y축으로 85도 회전
transformation =3d 변형
다른 box element인 margin, padding 등에 영향을 끼치지 않음. 따라서 다른 요소의 box를 변형시키지 않고 원하는 요소를 이동시키기 위해서 translate을 사용함. 만약 span에 요소 두개 만들고 한개 transformation 적용해도 span은 이미지가 변형된지 모름. transformation은 box 차원에서 일어나지 않기 때문.
transformation은 transition과 함께 쓸 수도 있음.
img과 hover일 때 z축으로 30도 회전하길 원한다면
img{
transition: transform 5s ease-in;
}
img:hover {
transform: rotateZ(30deg);
}*transition은 root에 있어야함. state에 있으면 안됨.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>SOO TIMES</title>
<style>
img{
border: 10px solid black;
border-radius: 50%;
transition: transform 5s ease-in-out;
}
img:hover{
transform: rotateX(90deg) scale(0.5);
}
</style>
</head>
<body>
<img src="logo.png" />
</body>
</html>transform mdn 검색 재밌댜 ..
Animation
@keyframes CoinFlip {
from{
transform: rotateX(0);
}
to{
transform: rotateX(360deg);
}
}
img{
border: 10px solid black;
border-radius: 50%;
animation: CoinFlip 5s ease-in-out infinite;
}@keyframes 키워드로 실행할 애니메이션을 만들고 from, to 로 처음과 끝을 설정
사용할 때는 animation 속성 이용, infinite는 무한 반복 시에 사용
@keyframes CoinFlip {
0%{
transform: rotateX(0);
}
50%{
transform: rotateX(180deg) translateX(100px);
}
100%{
transform: rotateX(0) translateY(0px);
}
}
img{
border: 10px solid black;
border-radius: 50%;
width: 200px;
animation: CoinFlip 5s ease-in-out infinite;
}opacity: 0% 이미지 보이고 안보이고,, 흔히 사용 가능
css animations search
code challenge
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dots box">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="lines box">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</body>
</html>style.css
html,
body {
height: 100%;
}
body {
font-family: sans-serif;
background-color: #76c4c6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@keyframes dotAnimation {
50% {
transform: rotate(0.5turn);
}
100% {
transform: rotate(0.5turn);
}
}
.box {
width: 200px;
display: flex;
justify-content: space-around;
}
.dots {
width: 200px;
display: flex;
justify-content: space-around;
animation: dotAnimation 1s ease-in-out infinite;
margin-bottom: 200px;
}
.dot {
background-color: white;
width: 20px;
height: 20px;
border-radius: 10px;
/* 👆🏻 If you set the border-radius to half of the width and height
it becomes a circle, 50% also works*/
}
.lines {
width: 150px;
}
@keyframes lineAnim {
0% {
transform: none;
}
25% {
transform: scaleY(2);
}
50%,
100% {
transform: none;
}
}
.line {
width: 20px;
height: 80px;
background-color: white;
animation: lineAnim 1s ease-in-out infinite;
}
/*
Remove 'animation-delay and see what happens!!!
*/
.line:nth-child(2) {
animation-delay: 0.1s;
}
.line:nth-child(3) {
animation-delay: 0.2s;
}
.line:nth-child(4) {
animation-delay: 0.3s;
}
.line:nth-child(5) {
animation-delay: 0.4s;
}
code challenge
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.14.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header>
<i class="fas fa-times"></i>
<h1>Playlist</h1>
</header>
<main>
<section class="main-song">
<div class="main-song__cover">
<i class="far fa-image fa-3x"></i>
</div>
<div class="main-song__data">
<h3 class="main-song__title">We Love 김치!</h3>
<h5 class="main-song__author">By Lynn</h5>
</div>
</section>
<section class="btns">
<span class="btns__btn btns__btn--big">
<i class="fas fa-play fa-xs"></i>
<span>Play</span>
</span>
<span class="btns__btn"><i class="fas fa-heart"></i></span>
<span class="btns__btn"><i class="fas fa-plus"></i></span>
</section>
<ul class="song-list">
<li class="song-list__song">
<div class="song-list__cover"></div>
<div class="song-list__data">
<h5>Corona Sucks</h5>
<h6>니꼬</h6>
</div>
</li>
<li class="song-list__song">
<div class="song-list__cover"></div>
<div class="song-list__data">
<h5>Corona Sucks</h5>
<h6>니꼬</h6>
</div>
</li>
<li class="song-list__song">
<div class="song-list__cover"></div>
<div class="song-list__data">
<h5>Corona Sucks</h5>
<h6>니꼬</h6>
</div>
</li>
</ul>
</main>
</div>
</body>
</html>style.css
@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;600;700&display=swap');
* {
box-sizing: border-box;
}
body{
font-family: 'Baloo Tamma 2', cursive;
background-color:#00C6AD;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wrapper {
background-color:white;
width:310px;
padding:50px 30px 15px 30px;
}
header {
display: flex;
justify-content: center;
position: relative;
margin-bottom:50px;
}
header i {
position: absolute;
top:-5px;
left:0;
font-size:28px;
}
h1{
font-weight: 600;
font-size: 24px;
}
.main-song {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.main-song__cover {
width:110px;
height:110px;
background-color: #FFBD11;
display: flex;
justify-content: center;
align-items: center;
border:2px solid black;
border-radius:10px;
margin-right:0px;
}
.main-song__cover i {
color:white;
}
.main-song__data{
width: 50%;
}
.main-song__title {
font-size:32px;
font-weight: 700;
margin-bottom:10px;
line-height: 1.4;
}
.main-song__author {
font-size:18px;
font-weight: 600;
opacity:0.7;
}
.btns {
display: flex;
justify-content: space-between;
margin-top:30px;
margin-bottom: 40px;
}
.btns__btn{
display: flex;
justify-content: center;
align-items: center;
border:2px solid black;
border-bottom-width: 5px;
border-radius: 50%;
width:50px;
height:50px;
}
.btns__btn--big {
width: 50%;
font-size: 18px;
font-weight: 600;
border-radius: 15px;
}
.btns__btn--big span {
margin-left: 5px;
font-size: 20px;
}
.song-list__song {
display: flex;
align-items: center;
margin-bottom:40px;
}
.song-list__cover {
width:50px;
height:50px;
background-color:#F85A2A;
border:2px solid black;
border-radius: 10px;
margin-right:10px;
}
.song-list__data h5 {
font-size:20px;
font-weight: 700;
margin-bottom: 5px;
}
.song-list__data h6 {
opacity: 0.8;
}
.song-list {
display: flex;
flex-direction: column;
}code challenge
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>You Are Awesome!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.14.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<i class="fas fa-bars"></i>
<h1>library</h1>
<i class="fas fa-shopping-basket"></i>
</header>
<div class="search">
<input type="text" placeholder="Search books..." />
<i class="fas fa-search"></i>
</div>
<main>
<h2>Book of the Day</h2>
<div class="featured-book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" class="featured-book__cover">
<div class="featured-book__data">
<h3 class="featured-book__title">1984</h3>
<h5 class="featured-book__author">George Orwell</h5>
<div class="featured-book__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="featured-book__tags">
<span class="featured-book__tag">Distopia</span>
<span class="featured-book__tag">Freedom</span>
</div>
<div class="featured-book__actions">
<span class="featured-book__bookmark"><i class="fas fa-bookmark"></i></span>
<span class="featured-book__book">Book now</span>
</div>
</div>
</div>
<h2>Top Adventures</h2>
<div class="top-books">
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<h2>Popular authors</h2>
<div class="popular">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/George_Orwell%2C_c._1940.jpg/1200px-George_Orwell%2C_c._1940.jpg" />
<div class="popular__data">
<h5 class="popular__title">George Orwell</h5>
<p class="popular__bio">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus at et excepturi quos! Doloribus, itaque enim non ex temporibus sint officia, at ipsa saepe magni maxime! Laboriosam facilis aut corrupti?</p>
</div>
</div>
</main>
</body>
</html>style.css
* {
box-sizing: border-box;
}
input:focus {
outline: none;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
max-width:360px;
margin:0 auto;
padding-bottom: 20px;
}
header{
background:#FDCC32;
display: flex;
justify-content: center;
padding:40px 15px;
padding-bottom:50px;
}
header > * {
width:33%;
}
header h1 {
text-align: center;
font-weight: 600;
}
header i:last-child {
text-align: right;
}
.search {
width: 95%;
position: relative;
top:-30px;
margin:0 auto;
}
input {
width:100%;
border:none;
padding:15px 25px;
font-size: 14px;
border-radius: 50px;
box-shadow: 0 14px 28px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.10);
}
input::placeholder {
opacity: 0.7;
}
.search i {
position: absolute;
top:15px;
right:20px;
color:rgba(0, 0, 0, 0.10);
}
main {
padding:0px 15px;
}
main h2 {
margin-top:30px;
font-weight: 600;
font-size:20px;
margin-bottom: 20px;
}
.featured-book {
display: flex;
}
.featured-book__cover {
width:110px;
border-radius: 5px;
margin-right:20px;
}
.featured-book__data {
width:100%;
}
.featured-book__title {
font-size:18px;
margin-bottom: 5px;
font-weight: 600;
}
.featured-book__author {
font-size:12px;
font-weight: 600;
opacity: 0.3;
display: block;
margin-bottom:10px;
}
.featured-book__rating {
color:#FDCC32;
font-size:12px;
margin-bottom:20px;
}
.featured-book__rating i:last-child {
color:#F7F7F7;
}
.featured-book__tags {
display: flex;
justify-content: space-between;
margin-bottom:30px;
}
.featured-book__tag {
background: #F7F7F7;
font-size: 12px;
font-weight: 500;
padding:10px 20px;
display: block;
border-radius: 5px;
}
.featured-book__actions{
display: flex;
align-items: center;
justify-content: space-between;
}
.featured-book__bookmark {
background-color: #FDCC32;
width:30px;
height:30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.featured-book__book {
background:black;
color:white;
font-size: 12px;
font-weight: 500;
padding:10px 40px;
display: block;
border-radius: 5px;
}
.top-books {
display: flex;
overflow-x:scroll;
padding-bottom: 15px;
}
.top-books__book {
margin-right: 20px;
}
.top-books__book img {
width:68px;
border-radius: 3px;
}
.top-books__rating {
color: #FDCC32;
font-size:8px;
margin-top:10px;
display: block;
text-align: center;
}
.popular {
display: flex;
}
.popular img {
width:140px;
border-radius: 5px;
margin-right: 20px;
}
.popular__title {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
display: block;
}
.popular__bio {
opacity: 0.5;
font-size: 14px;
}code challenge
Font 적용
Media Queries
search CSS media query MDN
우리가 조건 추가 가능
이 조건이 참이라면 이걸 실행해죠!
오직 css만을 이용해 스크린의 사이즈 알아내기!
@media screen and (max-width: 400px) {
div {
background-color: tomato;
}
}=> 스크린 사이즈의 최대 너비가 400px보다 작으면, 배경색을 tomato로 보이게 해라
@media screen and (max-width: 600px) and (min-width: 400px) and (orientation: landscape) 여러개 조합 가능.
orientation: landscape -> 가로모드
orientation: portrait -> 세로모드
ex) 휴대폰을 가로로 돌려주세요
<!DOCTYPE html>
<html lang="kr">
<head>
<title>SOO TIMES</title>
<style>
body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
flex-direction: column;
}
div{
background-color: teal;
width:200px;
height:200px;
}
@media screen and (min-width: 601px) and (max-width: 1200px) and (orientation: landscape) {
div{
background-color: wheat;
}
}
span{
font-size: 36px;
}
@media screen and (orientation: landscape){
span{
display:none;
}
}
</style>
</head>
<body>
<div></div>
<span>Please flip your phone </span>
</body>
</html>@media print : 프린트할 때 이용
