코코아톡 필기1

div 와 유사한 semantic태그 (content sectioning)

• header
• main
• footer

ElementDescription

<address>	HTML <address> 요소는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.
<article>	HTML <article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
<aside>	HTML <aside> 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
<footer>	HTML <footer> 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
<header>	HTML <header> 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>	HTML <h1>–<h6> 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.
<main>	HTML <main> 요소는 문서 body의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
<nav>	HTML <nav> 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
<section>	HTML <section> 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.

 

html 에 css적용하기

1. <style></style> 넣기

2. <link href="style.css" rel="stylesheet" />

 

* inline : height, width 가질수없음. 안에 content의 사이즈만 가짐

block : box > margin, border, padding 가짐

margin : box의 border(경계) 의 바깥공간

 

collapsing margins 현상 : margin 위아래만 나타남, 안에꺼 경계와 밖에꺼 경계가 같을때(bording) margin이 하나가 됨

 

Position

static : 처음위치한 곳

relative: >> top bottom left right 사용가능 >> 현재위치에서 쪼매씩 움직이고싶을때

fixed: 화면상에서 같은곳에 고정

apsolute : 가장 가까운 relative부모를 기준으로 이동

 

 

Pseudo selectors : 좀 더 제부적으로 엘리멘트 설정  

:~~ 이거

CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io)

CSS Diner

 

Combinator

States  >> state적용안된 기본거 에다가 해야함

:hov 누르면 나옴

• active : 누르고있을때
• focus : 키보드로 선택됐을때
• visited : 방문했던거
• focus-within : focused인 자식을 가진 부모엘리먼트의 상태 
• >> combination 가능함 

::placeholder  >> placeholder를 스타일링함

::selection >> 드래깅한거 스타일링함

::first-letter >> 첫글자 스타일링

::first-latter etc..

 

변수사용하기 : root { --main-color: ~~;}

" custom property "

:root {
	--main-color: ~~~;
   	--abc-abc: ~~;
}

{
color : var(--main-color);
}

Transition : 변화를 애니메이션으로 만듦

>> state(:hover ...)가 없는쪽에 써야함

a {
	color: wheat;
    background-color: tomato;
    text-decoration: none;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 55px;
    transition: background-color 0.2s ease-in-out, color 5s;
    // transition: all 3s ; >> 변화하는거 전부에 적용
}

a:hover {
	color: tomato;
    background-color: wheat;
}

mathewlein.com/tools/ceaser

 

transform 

translate, rotate, scale, perspective ..

* sibling을 변화시키진 않음., box에 영향주지 않음. box 차원에서 일어나지 않음. 3d 차원으로 움직임

* transiton이랑 combination해서 잘씀

transform mdn 사이트 추천

 

animation : 뭘 하지않아도 계속 재생되게 함

@keyframes superSexyCoinFlip {
	from {
    	transform: rotateX(0);
    }
    to {
    	tranform: rotateX(360deg) translateX(100px);
    }
}

img {
	 animation: superSexyCoinFlip 5s ease-in-out;
}

>> 실행후 제자리로 돌아감

>> 안되게 하려면 밑에로 

@keyframes superSexyCoinFlip {
	0% {
    	transform: rotateX(0);
    }
    50% {
    	tranform: rotateX(180deg) translateX(100px);
    }
    100% {
    	transform: rotateX(0);
    }
}

img {
	 animation: superSexyCoinFlip 5s ease-in-out infinite;
}

animista.net/play

https://story.pxd.co.kr/922

[인터랙션] CSS를 이용한 로딩 애니메이션

 

media query : min & max width & orientation etc

    @media screen and (min-width: 650px) and (max-width: 800px){
        div {
            background-color: tomato;
        }
    }

@media screen and (max-width: 600px){
        div {
            background-color: tomato;
        }
    }
    @media screen and (min-width:601px) and (max-width: 1200px) {
        div{
            background-color: wheat;
        }
    }
    @media screen and (min-width: 1200px) {
        div{
            background-color: turquoise;
        }
    }

    @media screen and (min-width:601px) and (max-width: 1200px) and (orientation: landscape){
        div{
            background-color: wheat;
        }
    }

>> landscape : 가로모드

device-width css mdn >> 예시많음

min-device-width & max-device-width >> 폰에서만 적용됨

 

3번째과제

https://replit.com/@YoungjuJang/3TwinCompatibleMode#style.css

3.TwinCompatibleMode

1. transform: translate(...)
   • translate의 경우 단순히 animation을 위한 움직임으로 사용할 수 있지만, 요소를 원하는 위치에 배치하기 위한 수단으로 사용할 수 있습니다.
   • 특히 position: absolute; 인 요소를 부모의 정중앙에 배치하고자 할 경우에 사용할 수 있습니다.
   • absolute가 선언된 요소에 top: 50% 과 left: 50% 을 선언했을 때, 정중앙에 오는 것은 absolute 요소의 좌상단 꼭지점입니다.
   • 여기에 transform: translate(-50%, -50%); 를 선언해주면, 요소의 크기를 기준으로 너비 50%, 높이 50% 만큼을 좌상으로 이동합니다.

.tests {
  margin-top: 200px;
  position: relative;
  border: 1px solid black;
}
.test {
  position: apsolute;
  top: 50%;
  left: 50%;
  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*/
}
.test:hover {
  transform: translate(-50%, -50%);  
}