HTML, CSS

HTML

폴더명과 파일명은 소문자로 작성한다
태그 이름은 아무렇게나 지을수 있다. 단, 브라우저가 이해하지 못하면 동작하지 않는다
속성은 항상 큰따옴표를 사용한다

HTML 문서 구조

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

head 태그

페이지에 관한 환경 설정
head 태그에 속해 있는 모든 태그들은 보여지지 않음
title
<title>Home - My first website.</title>

페이지 제목

meta
<meta charset="utf-8" />

웹페이지 utf-8 설정

<meta name="description" content="This is my website" />

구글에서 보여지는 description

<meta property="og:title content="" />

카톡으로 공유시 보이는 제목

<meta property="og:image content="" />

카톡으로 공유시 보이는 이미지

link
<link rel="shortcut icon" href="">

사이트 title 옆 파비콘 로고

<link rel="stylesheet" href="styles.css" />

css 파일 적용

<html lang="kr">

검색 엔진에 사용(페이지에서 주요 사용된 언어)

그 외의 태그

sup : 지수 표현

<p>2<sup>5</sup></p>

file 선택

<input type="file" accept="image/*, .pdf" />

image/*은 "모든 이미지 파일"을 의미

label

<lable for="profile">Profile</label>
<input id="profile" type="file" />

label의 for속성 값과 id값이 같은 input태그에 연결

CSS

block vs inline

	줄바꿈	maring	padding	width,height
block	O	O	O	O
inline	X	좌,우에만 적용	O	X

Collapsing margins

자식의 margin과 부모의 margin이 같으면 하나로 취급(위, 아래에서만 일어남)

Flexbox

규칙
1. 부모 요소(flex컨테이너)에만 명시(자식에게 명시x)
2. 주축(justify-content)
3. 교차축(align-items)

flex-wrap: wrap
자식 요소의 고정 크기 유지(화면 크기에 따라 배치되는 수가 달라짐)

flex-direction: row-reverse;
가로축 기준 요소의 배치를 역순으로 바꿈

Position

fixed

새로운 layer를 만들고 그 위해서 위치를 고정시킨다.
초기 위치는 이전에 작성된 content의 끝이다.(겹치지 않음)
top,left,right,bottom중 하나만 수정해도 초기 위치가 바뀌어 겹칠 수 있다.

static(default)
박스를 처음 위치한 곳에 두는 것

relative
박스가 처음 위치한 곳을 기준으로 top,left,right,bottom 이동

absolute
가장 가까운 relative 부모를 기준으로 top,left,right,bottom 이동, 없으면 body가 기준

Pseudo Selectors

:nth-child(odd) : 홀수번째 요소들만 선택
:nth-child(even) : 짝수번째 요소들만 선택
:nth-child(k(임의의숫자)n+1) : k(임의의숫자)번째 요소마다 선택
div > span : div 바로 밑의 span
p + span : p의 바로 뒤에 오는 형제요소 span
p ~ span : p의 형제요소인 span
tagName[attrs=value] : 해당 속성을 갖는 태그 선택

input[placeholder~="name"] : "name"을 포함하고 있는 placeholder속성을 가진 input 태그 선택
a[href$=".org"] : org로 끝나는 url을 href 속성으로 갖는 a 태그 선택

States
active 마우스로 선택
hover 마우스가 대상 위에 있을때
focus 키보드로 선택
focus-within 자신의 자식 요소 중 하나가 focused되었을 때(부모 요소에게 적용)
visited 방문한 사이트일 경우

state연계
high-tag:hover low-tag:focus { }
상위 요소위에 마우스 커서가 있고, 하위 요소가 focused되었을 때 하위요소에 효과 적용

input::placeholder : placeholder 꾸미기
p::selection : 컨텐츠 선택시 꾸미기
p::first-letter : 첫 글자 꾸미기
p::first-line : 첫 줄 꾸미기

Variables

/* 생성 방법 */
:root { 
  --main-color : #fcce00;
  --default-border: 1px solid var(--main-color);
}

/* 사용 방법 */
p {
  color: var(--main-color);
  border: var(--default-border);
}

변수명 규칙: --??-변수이름

Transitions
어떤 상태에서 다른 상태로의 변화를 보내주는 애니매이션
state에 따라 바뀌는 속성에 사용 가능
state가 없는 요소에서 사용
transition: 변경 속성[all 가능] 변경시간 ease-in function

transition: all 5s ease-in-out

ease-in function: 브라우저에게 변화하는 방법을 알려주는 역할

linear 선형 변화

ease-in 느림 -> 빠름

ease-out 빠름 -> 느림

ease-in-out 느림 -> 빠름 -> 느림

참고사이트

Transformations
회전, 기울기, 이동, 크기증가 등, css속성을 3D로 바꿔서 적용
브라우저는 변화 감지x(페이지의 픽셀의 다른 부분에서 발생)
tarnslateX,trnasLateY: 다른 요소의 box를 변형시키지 않고 원하는 요소를 이동시키기 위해서 사용

Transitions과 함께 사용하여 애니메이션의 효과를 만들 수 있다.
transition: transform 5s ease-in-out;

Animations
state없이 애니메이션 발생(자동 실행 애니메이션)
일부 속성은 애니메이션 불가능

/* 생성 방법 */
@keyframes 애니메이션이름 {
  from {
    transform(권장)
  }
  to {
    transform(권장)
  }
}

/* 사용 방법 */
animation: 애니메이션이름 5s ease-in-out [infinite(무한반복)];

반복 애니메이션
원하는 만큼 step 분리
0%,100%는 같은 효과 설정

@keyframes 애니메이션이름 {
  0% {
    transform(권장)
  }
  50% {
    transform(권장)
  }
  100% {
    transform(권장)
  }
}

샘플애니메이션제공

Media Queries
화면의 크기, 모바일, 가로모드 등 스크린사이즈에 따른 css설정
orientation: landscape : 가로 모드
orientation: portrait : 세로 모드

@media screen and (max-width: 400px){ 
  css작성... 
} 
@media screen and (min-width: 650px) and (max-width: 750px) { 
  css작성... 
}

CLONING TIME

BEM(Block Element Modifier)

block : .btn {}

elements : .btn__price {}

modifiers : .btn--big {}

BEM 한국어로 정리

아이콘 제공 사이트

Font Awesome

Heroicons

컨테이너 중심에 놓기

justify-content나 space-between은 컨테이너들의 width가 다를 경우 가운데 컨테이너가 가운데에 오지 않을 수 있다.

.status-bar {
    display: flex;
    justify-content: center;
}
.status-bar__colum {
    width: 33%;
}
.status-bar__colum:nth-child(2) {
    display: flex;
    justify-content: center;
}
.status-bar__colum:last-child {
    display: flex;
    justify-content: flex-end;
}

각 컨테이너의 width를 3등분 한뒤 가운데는 flexbox의 center정렬 마지막 flexbox의 flex-end정렬을 한다.

또 다른 방법(더 간단한 코드)

div:first-child {
  margin-right: auto;
}
div:last-child {
  margin-left: auto;
}

Reset CSS

브라우저에 기본적으로 적용되어 있는 스타일을 초기화

추가하면 좋은 것

input:focus{
  outline: none;
}
a {
  color: inherit;
  text-decoration: none;
}
* {
  box-sizing: border-box;
}

box-sizing: border-box;: 여백과 테두리 두께를 포함한 박스 계산 방법

:not

특정 요소를 제외하고 효과주기

input:not([type="submit"]){}

inherit

부모요소의 값 상속받기

#login-form a {
  color: inherit;
}

a태그의 color는 id가 login-form인 요소를 상속받는다

Form 속성

<form action="friends.html" method="get" >
</form>

action : 전송할 데이터를 받을 URL
method

get : 데이터를 쿼리에 담아서보낸다. 보안 취약
post : 데이터를 body에 담아서 보낸다. 백엔드 서버 필요

get방식 데이터 전송: name=value&name=value 이런식으로 전송되는데 여기서 name은 input태그의 name속성값이 된다.

Navigation Bar

검색엔진은 navigation을 찾아서 ul의 li 안에 있는 link를 가져온다
position: fixed;,width: 100%;

<nav>
  <ul>
    <li>
    </li>
  </ul>
</nav>

…: ellipsis(생략)
>: chevron, angle

대문자 만들기

HTML 코드에선 대문자를 나타내려고 해도, 우선 소문자로만 작성한다. 대문자는 디자인적인 요소이기 때문에, CSS로 설정

text-transform: uppercase;

| 만들기

.divider {
  width: 1px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0.2);
}

채팅 대화창 만들기

상대가 보낸 메시지

<div class="message-row">
  <img src="screenshots/user.png" />
  <div class="message-row__content">
    <span class="message__author">Lion</span>
    <div class="message__info">
      <span class="message__bubble">Hi ~</span>
      <span class="message__time">20:08</span>
    </div>
  </div>
</div>

.message-row {
    width: 100%;
    display: flex;
    margin-bottom: 25px;
}
.message-row img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}
.message__author {
    margin-bottom: 5px;
    display: block;
}
.message__info {
    display: flex;
    align-items: flex-end;
}
.message__bubble {
    background-color: white;
    padding: 13px;
    font-size: 18px;
    border-radius: 15px;
    border-top-left-radius: 0px;
    margin-right: 5px;
}
.message__author,
.message__time {
    opacity: 0.8;
    font-size: 14px;
}

내가 보낸 메시지

<div class="message-row message-row__own">
  <div class="message-row__content">
    <div class="message__info">
      <span class="message__bubble">Hi ~ How r u?</span>
      <span class="message__time">20:08</span>
    </div>
  </div>
</div>

.message-row__own {
    justify-content: flex-end;
}
.message-row__own .message__bubble {
    background-color: #fae100;
    border-top-right-radius: 0px;
    border-top-left-radius: 15px;
    margin-right: 0px;
    margin-left: 5px;
}
.message-row__own .message__info {
    flex-direction: row-reverse; /* 자식 요소 순서 변경 */
}

Splash Screen

로딩 효과처럼 처음에 잠시동안 보이다가 사라지는 애니메이션
forwards속성: 애니메이션이 끝난 값을 쭉 유지
animation-delay: 애니메이션 시작 전 딜레이

@keyframes hideSplashScreen {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
#splash-screen {
    background-color: var(--yellow);
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 132px;
    animation: hideSplashScreen 0.4s ease-in-out forwards;
    animation-delay: 0.5s;
}

알림메시지 애니메이션

infinite 애니메이션 반복

@keyframes notificationAnimation {
    0% {
        transform: none;
    }
    50% {
        transform: translateY(-5px) rotateY(360deg);
    }
    100% {
        transform: none;
    }
}
.nav__notification {
    animation: notificationAnimation 2s ease-in-out infinite;
}

네이게이션바 애니메이션

@keyframes appearBtnAnimation {
    from {
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}
.nav__btn {
    transform: translateY(50px);
    opacity: 0;
    animation: appearBtnAnimation 0.3s ease-in-out forwards;
}
.nav__btn:nth-child(2) {
    animation-delay: 0.2s;
}
.nav__btn:nth-child(3) {
    animation-delay: 0.5s;
}
.nav__btn:last-child {
    animation-delay: 0.8s;
}

will-change: 애니메이션이 불안정한 경우 브라우저에게 어떤 것이 변할 것이지 미리 예고해 줌으로써 부드럽게 동작할 수 있도록 한다.(그래픽 카드를 이용해서 애니메이션을 가속화)
will-change: transform;

Author And Source

이 문제에 관하여(코코아톡 클론코딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tjdgus3160/코코아톡-클론코딩

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

코코아톡 클론코딩