수업
https://academy.nomadcoders.co/courses/enrolled/203015
코코아톡 프런트엔드 클론 코딩
코코아톡 프런트엔드를 클론코딩 합니다. (초급. HTML, CSS)
academy.nomadcoders.co
HTML
- 일종의 태그 덩어리
- 웹서버는 index를 제일 먼저 찾기 때문에 index.html 로 만든다.
- <이름 속성="값>내용</이름> 구조
- e.g. <Human gender="male">Human</Human>
- e.g2. <a href="http://google.com">Go to google</a> : 링크 연결
- meta 태그 : Extra Information
- meta 태그는 <head>에 적는다. (유저에게 주는 정보가 아니라 브라우저에 전달하는 정보이므로)
- 예시
<head>
<meta charset="utf-8" />
<meta name="author" content="Nomad Coders">
<meta name="description" content="Welcome to my Kakao Clone" /> // 검색결과 description
<title>This is my title</title>
</head>
- Semantic vs Non-Semantic 태그
- Semantic 태그 : 의미가 있는 태그 (<h1>, <section>, <article>, <header> 등)
- Non-Semantic 태그 : 의미가 없는 태그 (<div>, <span> 등)
- <div>는 일종의 컨테이너
- <span>은 텍스트를 위한 컨테이너
- 태그에 이름 주기 (ID, class)
- <header id="header1" class="headerClass">
- id : 1번만 사용 (여권번호)
- class : 여러번 사용 (국적)
CSS
- style.css 로 만든다.
- property와 selector
- property-name: value; -> property
- h1 {
} -> selector
selector (id, class, tag name) {
property-name: value;
property-name: value;
property-name: value;
property-name: value;
property-name: value;
}
- Mix CSS with HTML
- inline 으로 연결
- <style> body { background-color : red} </style>
- external 하게 연결 (추천)
- html : <link href="style.css" rel="stylesheet"/>
- inline 으로 연결
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Nomad Coders" />
<meta name="description" content="Welcome to my Kakao Clone" />
// 검색결과 description
<title>This is my title</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<h1>Title</h1>
<p>Paragraph</p>
<a href-"http://google.com">Google Link</a>
</body>
</html>
h1 {
background-color: blueviolet;
}
- Box Model
- Margin, Border, Padding 은 CSS에서 설정
- 50% 처럼 %로 또는 30px과 같이 px로 설정 가능
- e.g. padding: 20px 10px 3px 10px (상우하좌)
- border : border-width, border-color, border-style 설정 가능
- e.g. border: 20px blue dashed (width, color, style)
- Inline vs Block vs Inline Block
- Inline : 박스의 모든 property 설정 값을 지우고 텍스트가 된다.
- Block : 해당 박스 옆에 아무것도 옆에 없다.
- Inline-Block : 박스들이 서로 옆에 있다.
- 박스는 Block 또는 Inline-Block
- 예시
.box {
background-color: blueviolet;
width: 200px;
height: 100px;
border: 2px solid black;
display: inline-block;
}
- Position Property
- default는 position: static;
- position: fixed; (스크롤 해도 위치가 고정)
- 상/하/좌/우 위치 선택 가능
- e.g. top: 10px; bottom: 10px; right: 10px; left: 10px;
- position: absolute; (HTML상에서 부모에 해당하는 박스를 찾는다.)
- e.g. right: 0;
- 단, absolute를 쓰기 위해서는 부모 박스에 position: relative; 를 설정해줘야 한다.
(부모 박스가 position: static; 일 경우에는 적용 안됨)
- position: relative; (position: static; 이었을 때를 기준으로 상하좌우로 움직인다.)
- 참고
- class : .Box
- id : #Box1
- Fluid Layouts with FlexBox
- 전에는 자동으로 완성되는 그리드가 없었음. 마진을 특정 수치로 조절해야 하고 어느 디바이스에서 보는지에 따라 다른 모습으로 출력 되었음
- Flex를 통해 자동으로 그리드를 완성할 수 있다.
- 사용법
- father class를 만들고, flex-container로 삼는다. (display: flex;를 선언한다.)
- flex-container 안에 있는 박스들을 정렬한다. (flex-container를 이용해 flex를 설정한다.)
- 참고 : https://heropy.blog/2018/11/24/css-flexible-box/
CSS Flex(Flexible Box) 완벽 가이드
많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS Flex에 대해서 알아봅시다.
heropy.blog
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
- 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Nomad Coders" />
<meta name="description" content="Welcome to my Kakao Clone" />
<!--검색결과 description-->
<title>This is my title</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Title</h1>
<div class="father">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
h1 {
background-color: blueviolet;
}
.father {
display: flex;
justify-content: space-between; /* 같은 간격으로 조정 */
align-items: flex-end;
height: 100;
flex-direction: column; /* 수직으로 정렬 (<-> row) */
flex-wrap: wrap;
}
.box {
background-color: blueviolet;
width: 200px;
height: 100px;
border: 2px solid black;
margin-right: 7.3px;
}
- CSS Selectors & Pseudo Selectors
- Peudo Selector (가상 셀렉터) : element가 아닌 셀렉터
- input[type="submit"] { background-color: red;}
- 이 경우 type="submit"인 요소 모두 배경색이 빨간색이 된다.
- input[required="required"] { background-color: red;}
- 이 경우 required="required"가 들어 있는 tag의 배경색이 모두 빨간색이 된다.
- .box:last-child { background-color: red; }
- 박스 중 마지막 박스의 배경색이 빨간색이 된다.
- .box:nth-child(2) { background-color: red; }
- 2번째 박스의 배경색이 빨간색이 된다.
- .box:nth-child(2n) { background-color: red; }
- 2의 배수 번째 박스의 배경색이 빨간색이 된다.
- input > .box { background-color: red; }
- input과 box가 형제인 관계에 대해 적용
- input > .box { background-color: red; }
- box가 input의 direct child인 (직계) 관계에 대해 적용
- input[type="submit"] { background-color: red;}
- Peudo Selector (가상 셀렉터) : element가 아닌 셀렉터
- Element States with CSS
- inspect -> elements -> .hov 클릭 시 active/focus/visited/hover를 볼 수 있다.
- 예시
- .box:hover { background-color:pink; }
- 마우스 오버 시 배경색이 핑크색으로 변한다.
- .box:active { background-color:green; }
- 마우스 클릭 시 배경색이 초록색으로 변한다.
- .box:focus { background-color: blue; }
- hover, active가 동작하지 않음
- 마우스 포커싱 되는 경우 배경색이 파란색으로 변한다.
- .box:visited { background-color: purple; }
- 방문한 경우 배경색이 보라색으로 변한다.
- .box:hover { background-color:pink; }
Advanced CSS
- Transition (state가 바뀔 때 애니메이션 효과를 준다.)
- hover / active / focus / visitied에 적용된다.
- .box { background-color: green; transition: background-color .5s ease-in-out; }
- .box { background-color:blue; }
- transition 있을 때 배경색을 5초 동안 자연스럽게 변경시킨다.
- Transformation (element의 모습이 변하는 효과를 준다.)
- .box { width:500px; height:500px; background:red; transform: rotate(20deg); }
- 박스가 20도 회전한다.
- .box:hover {transform: rotate(45deg);}
- hover 하면 45도 회전한다.
- 가능한 액션
- .box { width:500px; height:500px; background:red; transform: rotate(20deg); }
transform
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
developer.mozilla.org
- Animation (알아서 움직임을 계속 반복한다.)
- 애니메이션 이름을 짓는다.
@keyframes scaleAndRotateSquare {from{transform:none;}to{transform:rotate(1turn) scale(.5, .5);}}- @keyframes : 애니메이션을 만들겠다.
- scaleAndRotateSquare : 애니메이션의 이름 (identifier)
- from{} to{} 설정
- 1바퀴를 작은 사이즈로 돈다.
- box에 애니메이션을 추가한다.
- .box { width:100px; height:100px; background-color:red; animation: 1.5s scaleAndRotateSquare ease-in-out; }
- .box { width:100px; height:100px; background-color:red; animation: 1.5s scaleAndRotateSquare infinite ease-in-out; }
- 1바퀴 도는 것을 무한반복한다.
- 스테이지 별로 다른 상태값을 줄 수도 있다.
- @keyframes scaleAndRotateSquare {0%{transform:none;} 50%{transform:rotate(1turn) scale(.5, .5);} 100%{transform:none;}}
- 애니메이션 이름을 짓는다.
- Media Queries (브라우저의 크기에 따라서 다른 화면을 설정한다.)
- 반응형 웹 디자인(PC/MO)에 필요
- @media screen and (min-width:320px) and (max-width:640px){body {background-color:green;}}
- 화면 크기가 최소 320px - 최대 640px 일 경우 배경색을 green으로 한다.
'HTML CSS JS' 카테고리의 다른 글
[HTML+CSS] 코코아톡 클론 코딩 #3 Github Page (0) | 2020.03.08 |
---|---|
[HTML+CSS] 코코아톡 클론 코딩 #2 Practice (0) | 2020.03.04 |
[JavaScript] 바닐라JS로 크롬 앱 만들기 #3 Making an App (0) | 2020.03.01 |
[JavaScript] 바닐라JS로 크롬 앱 만들기 #2 Practice (0) | 2020.02.29 |
[JavaScript] 바닐라JS로 크롬 앱 만들기 #1 변수(Variable), Data (0) | 2020.02.29 |
댓글