코코아톡클론
1.[코코아톡]1일차(1.5~1.9)_ 기초설명(웹페이지/HTML/CSS/JS)
1.5~1.9강웹사이트는 단지 text(언어) 파일이다. 최소 2에서 최대 3가지 종류의 text(언어)로 되어있음\_ HTML CSS Javascripttext(언어)로 개발자가 코딩을하면 브라우저가 코드를 이해해서 웹사이트를 만들어줌.그러므로 개발자는 어떤종류의 t
2.[코코아톡]2일차(2.0~2.4)_ VS code & 파일 세팅 / HTML 태그와 속성
2.0~2.4강 2.0 Our First HTML File html파일 생성 시 주의사항 폴더와 파일경로를 같은곳에 저장하기 저장하는 습관 들이기 폴더명과 파일명은 소문자로 확장자는 .html 새로고침 단축기: cmd + r 1.6 HTML Hypertext Mar
3.[코코아톡]3일차(2.5~2.11)_ HTML 기본 구조 & 태그 / id / semantic 과 non-semantic
2.5~2.11강<!DOCTYPE html> : 브라우저에게 이파일이 HTML이라는것을 알려줌<html></html>: 이 태그들 사이에 있는 코드들이 html 코드이다.<head></head>: 페이지의 환경설정 ; 외부적으로 보이지 않음
4.[코코아톡]4일차_코딩 챌린지 1
2.7~2.8강 2. LEARNING HTML 2.5 More Tags and Head html기본구조 & 태그 `` : 브라우저에게 이파일이 HTML이라는것을 알려줌 ``: 이 태그들 사이에 있는 코드들이 html 코드이다. ``: 페이지의 환경설정 ; 외부적
5.[코코아톡]5일차(3.0~3.5)_ CSS와 HTML 연결 / 작성규칙 / block & inline / margin
3.0~3.5방법1 html 파일의 <head></head>섹션에 <style></style>태그를 사용하여 그 사이에 CSS 코딩 (추천!)방법2 css 파일을 따로 만들고 html에 <link rel="stylesheet" hre
6.[코코아톡]6일차(3.6~3.11)_ padding & border / class & id / display:flex
3.6~3.11paddingmargin과 달리 box의 경계로 부터 안쪽의 공간.입력방식은 margin 과 같음▶️ pading-top / left / right / bottom모두 따로 지정할 수 있음▶️ padding: 1 value = top / left / r
7.[코코아톡]6일차_코딩 챌린지 2
◾️ 강의 듣고 코딩으로 제공된 이미지와 똑같이 만들기 포인트💡css 사용하기display: flex 속성 응용 ▶️ align-items:center이 적용되지 않을때는 부모 요소의 높이가 자식요소와 같지 않은지 확인
8.[코코아톡]7 & 8일차(3.12~3.16) + 코딩챌린지_ 가상선택자
3.12~3.16position : 위치를 아주 조금 옮길때 사용 ▶️ position:fixed화면을 스크롤에 상관없이 box의 위치를 고정 (fixed적용전 위치에)top left right bottom의 속성을 지정해주면 위치가 변경되어 고정top left ri
9.[코코아톡] 9일차(3.17~3.19, 4.0~4.4)_ 가상선택자 복습 / CSS 변수지정 / Transitions / Transformations / Animations
3.17, 4.0~4.4▶️ 선택한 요소의 상황에 따른 스타일 적용 \_ 태그뒤에 :로 적용:active : 마우스 클릭되었을때 :hover : 마우스 커서가 올려져 있을때 :focus : 키보드로 선택되었을때 :visited : 방문기록이 있는 사이트의 링크