본문 바로가기
HTML CSS JS

[HTML+CSS] 코코아톡 클론 코딩 #1 Theory

by 꿈나무 김땡땡 2020. 3. 2.

수업

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
    1. inline 으로 연결
      • <style> body { background-color : red} </style>
    2. external 하게 연결 (추천)
      • html : <link href="style.css" rel="stylesheet"/>
<!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를 통해 자동으로 그리드를 완성할 수 있다.
    • 사용법
      1. father class를 만들고, flex-container로 삼는다. (display: flex;를 선언한다.)
      2. 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인 (직계) 관계에 대해 적용

 

 

  • 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; }
        • 방문한 경우 배경색이 보라색으로 변한다.

 

 

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의 모습이 변하는 효과를 준다.)
 

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 (알아서 움직임을 계속 반복한다.)
    1. 애니메이션 이름을 짓는다.
      @keyframes scaleAndRotateSquare {from{transform:none;}to{transform:rotate(1turn) scale(.5, .5);}}
      1. @keyframes : 애니메이션을 만들겠다.
      2. scaleAndRotateSquare : 애니메이션의 이름 (identifier)
      3. from{} to{} 설정
        1. 1바퀴를 작은 사이즈로 돈다.
    2. box에 애니메이션을 추가한다.
      1. .box { width:100px; height:100px; background-color:red; animation: 1.5s scaleAndRotateSquare ease-in-out; }
      2. .box { width:100px; height:100px; background-color:red; animation: 1.5s scaleAndRotateSquare infinite ease-in-out; }
        1. 1바퀴 도는 것을 무한반복한다.
    3. 스테이지 별로 다른 상태값을 줄 수도 있다.
      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

관련글

댓글

티스토리툴바