코코아 클론
1.웹사이트를 구성하는 언어 3가지
html은 link, title, image 등 content를 담고있는 뼈대.css는 그 content들이 어떻게 보일까에 대해서 디자인. html과 css는 항상 같이 쓰인다.JavaScript는 동적 상호연관성(interactivity)을 부여하는 언어고 여기서는
2.html
vsc 에서 사용하는 폴더명과 파일명은 항상 소문자로 작성한다. 그래야 에러가 안난다!!파일명 옆에 동그라미 표시는 저장 안됐다는 상태 >> 항상 저장하는 습관을 들이자...
3.css
htme에 css를 연결하는 방법 : <head> 안에 작성 html파일에 css 코드 작성하기<sytle> </style> 안에 css 작성한다. css와 html을 분리하기<link href = "스타일시트 파일명.css" rel = "styl
4.css - flexbox 레이아웃
block은 옆에 아무 요소도 올 수 없지만 display 속성 값을 inline, inline-block 등으로 지정해 인라인처럼 사용할 수 있다. inline-block : 블록으로 인식하게 하면서 바로 옆에 다른 요소가 올 수도 있음. 근데 쓰기에 불편함. 정해진
5.advanced CSS
transition어떤 상태에서 다른 상태로의 '변화'를 애니메이션으로 만드는 방법 state 가 없는 요소에 붙어야 하며, state 가 있는 요소에 적용된다. transition: 변화하는부분 지속시간 ease-in-out; ,로 추가 transition 쓸 수
6.git, github
git 어떤 파일이든 변경내역 확인(추적)에 도움을 줌. 파일의 변경내역을 계속 추적하는 시스템.(version control) github 파일의 변경내역을 업로드 하는 공간. git 설치하기 https://youtu.be/Q50UyB1tHrE 참조 깃허브 접속
7.클론 1 (login)
.DS_Store는 맥os나 윈도우에서 만든 보이지 않는 임시파일이다.(그런데 깃은 나의 디렉토리에서 모든 파일을 참조할 수 있다.)이렇게 몇몇 파일을 업로드 하고 싶지 않은 경우 커밋할때마다 제외시켜줘야 하는데 이럴 때 .gitignore 파일을 vcs에 만들어 해
8.클론 1-1
body를 보면 마진을 갖고 있는데 브라우저가 알아서 적용시키는 스타일이라 완전 처음부터 시작하기위해 이를 제거해주는 방법을 사용한다. 리셋css 파일: 대부분의 html태그에 마진, 패딩, 보더 등의 값이 0을 가진 css파일 파일 복사 후 css 폴더에 reset.
9.클론 2 (friends)
처음부터 작업할 필요 없다. index.html 내용 복사, 필요없는 부분 삭제
10.클론 3 (chats)
friends.html 모든 코드 복사 flex의 영향을 받고싶지 않은 녀석들은 div를 하나 더씌워서 부모-자식관계를 끊고 부모-손자 관계를 만든다..find-icons\_\_icon i { } : find-icons\_\_icon 클래스 안에있는 i 에 css 적
11.클론 4 (more)
사소한 디자인 커스터마이징을 위해서 파일을 하나 만들어준다. 동일한 component를 사용(공유)하는 페이지가 여러개 있는데 그 중 한 페이지의 컴포넌트만 변형하고 싶을 때 클래스를 하나 더 갖게 하여 이를 이용한다. flex-wrap: wrap 속성(부모요소)은 d
12.클론 5 (settings)
헤더가 약간 다르므로 이를 디자인할 새 파일을 만들어준다. 세팅은 기본적으로 리스트 형식 이름과 아이콘으로 이루어짐. ul > li > div 안에 아이콘과 span > 또 하나의 div (update표시)
13.클론 6 (chat)
chats.html에 chat.html로 이동할 수 있는 링크를 걸어준다. body에 배경색을 걸어준다. (id 사용)채팅창의 status-bar와 header의 배경색도 동일하게 만들어준다. 이 때 패딩값 때문에 텍스트가 가려지는 문제 발생. z-index 속성 각
14.배포하기
Branch 개념으로서, 어떤 커밋이라도 거기서부터 다른 프로젝트를 시작할 수 있다. stable코드를 master(main) branch에 올리고, 실험하고 싶거나 새로운 기능 추가할때 새로운 experimental branch를 만든다. 코드 수정 후 혹은 실험코
15.클론 7 (애니메이션)
will-change는 애니메이션이 좀 더 부드럽게 동작할 수 있게 한다. → 브라우저에게 어떤 것이 변할 것인지 예고해주는 것will-change는 그래픽 카드를 이용해서 애니메이션을 가속화 한다
16.label
폼의 양식에 이름을 붙이는 태그. input 태그의 의미를 정의하기 위한 태그다.for 속성을 이용한다. input의 id 값과 for 값이 같으면 서로 연결된다.label의 텍스트를 클릭하면 연결된 양식에 입력할 수 있도록 선택되어 사용자의 클릭 편의성을 높인다.la
17.css-요소 중앙배치, 변수 사용, 사칙연산
body { display: flex;justify-content: center;align-items: center;height: 100vh;}Flex Container(부모요소)인 body에 flex를 적용하고가로축, 세로축 모두 중앙값을 적용한다. 여기서 중요한 것