🟨카카오톡 클론코딩

h1은 글의 제목을 의미하는 태그다.p는 본문을 의미하는 태그다.img는 이미지를 삽입할 수 있는 태그다.각 태그는 속성(Attribute)를 가질 수 있다.p의 style(색), font-size(폰트 사이즈)img의 width(사진 사이즈), src(사진 링크)CS

만약 웹 개발자나 풀스택 개발자가 되고 싶다면, 심지어 그냥 개발자가 되고 싶더라도 HTML과 CSS는 알고있어야 하고 웹사이트를 만들 수 있어야한다.구글 크롬 혹은 Brave 브라우저(구글 크롬 + 광고 차단 Ad-Blocker)브레이브 브라우저는 구글 크롬을 기반으

CSS(Cascading Style Sheet) CSS만 따로 사용하거나 HTML만 따로 사용하지 않는다. 두가지를 모두 사용한다. HTML은 browser에게 웹사이트의 content가 무엇인지에 대해 알려주고, CSS는 browser에게 웹사이트의 그 content

웹사이트는 텍스트로 이뤄져있고 vscode는 텍스트 편집기다.웹사이트는 만드는데 꼭 vscode가 필요한 것은 아니다. 확장자명을 .html로 해서 메모장으로도 웹사이트를 만들수 있다.WakaTime - 하루에 얼마나 오래 코딩 했는데 알려주는 확장 프로그램Commun

브라우저는 우리가 작성한 tag(여기가 h1 title이야!)를 읽어서 사용자에게 웹사이트를 통해 그 컨텐츠를 보여준다. 사실 tag를 쓰지 않아도, 즉 HTML 문법을 따르지 않아도 우리가 vscode에 쓴 내용이 뭐든지 간에 브라우저는 그 내용을 보여준다. 브라우저

html에서 list tag는 두 가지 종류가 있다.unordered list 태그를 열고 -> list item 태그를 열고 -> 목록을 채우고 -> list item 태그를 닫고 -> unordered list 태그를 닫는다.맥주, 김치, 고기, 우유는 list i

1.`` tag a tag에서 a는 anchor(닻)을 의미하는데, 이는 다른 웹사이트로의 이동을 의미한다. 📌href 다른 웹사이트로 이동하기 위해서는 이동 할 웹사이트 주소가 필요한데, 이는 a tag 안에 href라는 속성을 이용해서 써주면 된다. href

이 코드는 브라우저에게 이건 text 파일이 아니라 html 파일임을 알려준다.head : 웹사이트의 환경을 설정 (외부적으로 보여지지 않는 부분)head에서 설정 해 주는 것들 중 하나가 <title></title>이다.head 태그 안에 있는 모든 태그들

meta는 다양한 종류의 부수적인 데이터라는 뜻이다.meta 태그는 self-closing 태그다.name은 단순히 개발자가 붙혀주는 이름이고 content는 구글에 nexflix를 쳤을 때 보이는 description(설명)이다. content는 google이 검색할

html, css, javascript을 검색할 때 mdn을 붙혀서 검색하면"Mozilla developer Network"로 안내해준다.

html form tag는 정보를 제출하기 위한 웹페이지에서의 입력 양식을 의미한다. 예를 들어 로그인, 회원가입글씨를 입력하거나 '제출' 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 된다.self-closingform 양식 중에 제일 중요한 태그는 i

label tag는 form에 question을 추가할 수 있다.

문서를 보기만 해도 그 의미를 짐작할 수 있는 것을 semantic이라고 한다.division : 분할, 구분, 경계선 또는 Box(박스)<div></div>는 의미는 없지만 (Non-semantic이라고 한다.) 문단을 구문할 수 있는 박스 기능이 있는

3.0 How to add CSS to HTML

CSS Cascading(물은 위에서 아래로 흐른다) Style Sheets ** Cascading Style Sheets의 의미는 브라우저가 css코드를 읽을 때 위에 있는 코드부터 차례차례로 읽는다는 뜻. ** 앞 게시글에서 CSS는 근육과 피부이고 HTML은

스타일 태그 내 div는 body 내 세개의 div중 어떤 div에 적용될까?세개의 div 모두에 적용된다.하지만 요소 검사를 해보면 구역은 다르다. 하나의 긴 박스로 보이지만 세 개의 박스로 나눠져있다.또한, 박스 옆에는 아무것도 오지 않는다. 예를들어 div, he

Block에서 inline으로, inline에서 Block으로 바꾸는게 가능할까? 가능하다. 이걸 Display 속성이라고 한다.<span></span>의 디폴트 display 속성은 inline이다. 아무것도 적용하지 않으면 <span></spa

사방으로 margin 20px 적용위아래 20px, 오왼 10px margin 적용위 20px, 오 5px, 아래 10px, 왼 15px (시계방향)body 안에 div의 위아래 margin 경계가 body의 margin 경계와 만나면 둘 중 큰 값의 margin으로

Margin : Box의 border로 부터 바깥에 있는 공간Padding : Box의 border로 부터 안쪽에 있는 공간

Border는 box의 경계를 의미한다.\*은 전체를 의미한다. border는 inline과 block 모두에 적용된다.hello라고 쓰인 부분이 inline이고 나머지 박스들이 block이다.가장 마지막의 div안에<span>Hello</span>을 주었고

span은 inline이기 때문에 너비와 높이를 가질 수 없어서 위,아래에 margin을 가질 수 없다.요소 검사를 해보면 inline에 margin은 좌우에만 적용되는 것을 볼 수 있다.margin을 위아래에 적용하고 싶으면 inline을 block으로 바꿔줘야한다.

Block box 옆에 아무것도 못옴 ``를 세개 그렸는데 연속으로 나타난다. 높이와 너비를 갖는다. Inline inline 옆에 다른 요소가 올 수 있다. div는 box인데 inline은 너비와 높이를 갖지 못하기 때문에 브라우저상 보이는게 없다. 이를 해결하기

저번 글에서 우리는 사용자의 화면 크기에 구애받지 않고 div 상자들을 같은 간격으로 배치하고 싶었다. 이번 글에서는 inline-block은 해결하지 못했던 것을 Flexbox로 해결해보고자 한다.flexbox는 박스들을 자유롭게 어떤 곳이든 둘 수 있다. 2d(2차

저번글에서 주축과 교차축은 디폴트로 수평, 수직이라고 했다. 이 둘을 서로 바꾸기 위해서는 flex-direction을 수정하면 된다. flex-direction의 옵션에는 row와 column이 있다.수평방향이 주축이 된다.flex-direction: column;을

Position Fixed를 이용하면 페이지 상에 항상 같은 위치에 고정된다.예) 광고 팝업창, 넷플릭스 메뉴바스크롤을 내리면 position: fixed;를 한 \`하지만 top, left, right, bottom 중 하나만 수정해도 완전히 서로 다른 레이어에 위치

레이아웃이 박스를 처음 위치하는 곳에 두는 것아주 조금 이동시키고 싶을 때top, bottom, left, right 속성 사용할 수 있다.element가 처음 놓인 자리를 기준으로 상하좌우로 움직인다.top과 left를 쓰지 않은 relative 상태. 초록색 div

보통 선택자는 HTML 태그, class, id등 HTML 요소(element)를 직접적으로 선택하여 CSS를 통해 꾸며준다. 하지만, Pseudo Selector를 이용하면 HTML를 수정할 필요없이 CSS에서만 선택하면 되니까 복잡한 과정을 간단히 할 수 있다. 첫

span들만 tomato색으로 바꿔보기 Parents, Children selectors 부모 p밑의 자식인 span에 효과주기 부모 selector인 p를 쓴 다음에 span을 쓴다. CSS가 p를 찾고 p안에서 span을 찾는다. 위와 같은 형태도 가능하다.

optional, required form 형식에 optional input과 required input 칸을 만들어보았다. border: 1px solid부분이 겹치므로 다음과 같이 축약할 수 있다. input:required는 class 추가 없이 form에서

개발자 도구에서 가장 중요한 selector는 states이다.activehoverfocusfocus-withinvistied해당 요소를 마우스로 클릭할 때 효과를 적용할 수 있다.클릭을 놓으면 원래로 다시 돌아간다.클릭하지 않은 상태클릭한 상태마우스가 해당 요소 위를

::placeholderplaceholder에 스타일을 주고 싶을 때 사용::selection 클릭해서 긁을 때 발생::first-letter첫 글자에만 적용::first-line첫 줄에만 적용,화면 크기를 드래그 할 때 마다 '첫 줄'이 달라짐active클릭할 때 작

원하는 color의 코드는 크롬 익스텐션에서 'Color Picker'를 통해 가져올 수 있다.여기서 alpha는 투명도를 말한다.같은 코드가 반복되면 :root라 불리는 엘리먼트에 변수를 추가할 수 있다.variables는 색상 뿐만 아니라 border도 지정할 수

Transitions은 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법이다. 변화는 이동이 될 수도 있고, 크기의 변화나 색깔의 변화 등 무엇이든지 될 수 있다. 변화가 일어나려면 기본적으로 변화하기 "전"과 "후" 그리고 "언제" 변화할 지에 대한

Transformation을 이용하면 CSS로 3D까지 할 수 있다. Transformation은 일종의 3D transformation이기 때문에 2D인 box차원에서 작동하지 않는다. 즉, Transformation은 다른 요소의 box를 변형시키지 않고 원하는 요

이전 글에서는 img 위에 마우스를 올려 놓는 조건 하에 Transition이 실행됐다. 만약 계속 재생되는 애니메이션을 만들고 싶으면 어떻게 해야할까? 이번 글에서는 마우스의 움직임 없이 페이지가 새로고침 되면 Transition이 계속 실행되는 애니메이션에 대해 배

업로드중..from-to 외에 0% 25% 50% 75% 100% 같이 여러 단계를 나누어 애니메이션을 만들 수 있다.0%와 100%인 딱 두 단계만 쓸거면 from-to로 대체 할 수 있다.꼭 Transform으로만 애니메이션을 만들 수 있는 건 아니지만 Transf

Media Queries Media Queries는 오직 css만을 이용해서 '스크린의 사이즈'를 알 수 있는 방법이다. 여기서 말하는 '스크린 사이즈는' 내가 만든 웹사이트를 보고 있는 사용자의 스크린 사이즈를 의미한다. 예를 들면, iphone이나 안드로이드 폰

Git **git의 용도는 파일의 변경 사항을 계속 추적(Tracking)하는 것이다. ** 코드가 긴 경우에는 파일의 히스토리를 알고 있어야 한다. 파일이 크면 처음에 뭘 작성했는지, 나중에 뭘 추가했는지, 변경 내역 등을 알고 있어야 하는데 git을 사용하는 것

github은 git의 변경내역을 볼 수 있는 사이트다.코드를 저장하는 저장소Private(비공개)와 Public(전체 공개) 중 선택 가능코드를 저장한 시점(pointing time)ex) "이제 이 파일의 버전을 ㅇ저장하고 싶어."라고 말하는 시점.ex) 커밋이 2

1) repository name : 공백없이 소문자로 작성할 것2) public 으로 설정할 것public으로 설정하면 다른 사람들이 나의 코드를 볼 수 있기 때문에 피드백을 받을 수 있고 나 또한 다른 사람들의 코드를 보고 참고하거나 피드백을 줄 수 있음.priva

README.md 파일은 모든 git repository가 가지고 있어야 되는 파일이다. github desktop에서 만들어 놓은 폴더 안에 README.md 파일을 만들었다. 이렇게 파일을 만들고나서 저장 후, github desktop 프로그램을 열어보면, R

.DS_Store는 맥os나 윈도우에서 만든 보이지 않는 임시파일이다..gitignore는 무시하고 싶은 파일 이름을 기록하는 파일이다.screenshot 폴더 안에 kakao talk 클론 코딩 이미지들을 다운 받았다.다음 시간부터 이미지들 처럼 클론 코딩을 본격적으

대부분의 웹서버가 디폴트로 index.html을 찾아보도록 설정 되어있다.index는 영어로 '첫번째'라는 뜻이다.따라서 02.png의 내용은 첫 페이지이기 때문에 index.html에 작성했다.상태바는 맨 위에 하나이기 때문에 id = "상태바"로 설정해준다.<

BEM을 사용하는 목적은 코드를 더 쉽게 읽기 위해서다.css를 작성할 때 이게 id였는지 class였는지 헷갈릴 때가 많다. 그래서 오랜시간 문제를 겪은 프로그래머들이 모든 부분에 클래스를 사용하자고 결정했다. 그렇게 되면 모두 .class명이 될 것이기 때문에 id

아이콘 추가하기 아이콘을 추가하는데는 2가지 옵션이 있다. 아이콘 홈페이지에서 html 코드 복사하기 svg 파일 이용하기 svg : 픽셀이 아닌 path로 구성된 이미지이다. 수학 좌표로 되어 있어서 이미지 크기나 디자인은 css를 사용해서 바꿀 수 있다. 이

이번 글에서는 02.png의 header를 만들어보자. 여기서 주의할 점은 header가 엄청 많기 때문에 css에 어떤 header를 가리키는지 알려줄 필요가 있다.header의 경우 웹사이트에 최소 5개 이상 되기 때문에 class명으로 header를 구분지어준 것

이번 시간에는 css를 해보자. kokoa-clone-2023 폴더에 css 폴더와 style.css 파일을 만든다.css 링크를 import 할 수 있는 단축키다.(header가 아닌) head에 단축키 link:css를 써서 엔터를 치면 css를 import할 수

리셋 CSS 브라우저는 우리가 원하든 원하지 않든 알아서 html에 margin을 적용시키는 기능이 있다. 하지만 우리는 브라우저에 의해 맘대로 적용되는 스타일을 원하지 않는다. 다행히도 이 모든 걸 없앨 수 있는 방법이 있는데, '리셋 css'라고 불린다. 리셋

Github Source Code 1. input 자체 큰 틀 👇 3. input 내부 박스 #login-form input { padding: 15px 0px; /위아래 여백주기/ }

오늘의 목표 Log in, Sign up 버튼 밑에 border 선 없애기 버튼 Background-color 색 입히기 버튼 모서리 부분 둥글게 링크(a) 가운데로 위치 링크(a) 기본 Decoration 없애기 링크(a) 색 검정색으로 바꾸기

카카오톡 클론코딩

파일 순서를 지키는게 중요 첫줄: font를 import 두번째: 모든 style을 reset 세번째: variables.css 파일 import

VSC 단축키 원하는 단어 드래그 + Ctrl + D 를 누르면 한번에 드래그 된다. 아이콘 사이즈를 'fa-lg'에서 'fa-2x'로 바꾸려고 할 때, 'fa-lg'를 드래그 하고 Ctrl + D를 누르면 모든 'fa-lg'가 드래그 된다. link는 기본적으로

width가 200px인 연두색 box가 있다.이 box에 padding-left를 50px을 준다고 가정해보자.그럼 CSS는 (프로그래머 주인님이 명령한) box의 width를 200px으로 유지하려 할거다. 그래서 CSS는 연두색 box를 200px으로 유지한 채로

Navigation Bar의 '업데이트' 표시를 만들어보자 '1'표시 .navlink(아이콘)을 기준으로 absolute(빨간업데이트)를 이동하고 싶으면 .navlink의 poition이 relative가 되어야한다. 가장 가까운 relative를 기준으로 abs

오늘은 'Friends' Names Display'을 만들어보려고 한다.Friends' Names Display를 누르면 다른 창으로 넘어가기 때문에 Block 전체가 '링크'로 감싸져야 한다.글자 Friends' Names Display 앞뒤로 아이콘 두 개가 있다.

User Component에서는 크게 섹션을 2가지로 나눠서 코드를 짠다.첫번째 섹션(column:first-child): 프로필 사진(avatar), 이름(title), 메세지(subtitle)두번째 섹션(column:second-child): 시계, 숫자이번 글에서

📌Github Source Code

Github Source Code

screen-header인 Chats 글씨와 main-screen 사이에 공백이 있다.Friends 페이지에서 Friends 글씨와 friends-display-link 사이의 공백을 줄이고 싶은데 Friends screen-header에 margin-bottom을 줄

단축키를 이용해 빠르게 코드 입력 후, tab으로 span 사이를 이동할 수 있다. 만약 다른 버튼을 누른 상태라면 tab키가 안 먹힌다.<find.html>⬇️⬇️⬇️방법1) html에서 아이콘 클래스에 코드 추가방법2) css에서 아이콘 font-size 코드

<find.html><find.css>✔️변수 설정자주 쓰는 코드가 있거나 같은 코드가 반복된다면 변수로 만들어서 사용한다.<variables.css>📌Github Source Code

\`페이지에서 대문자로 보여주고 싶을 때 html 상에서 소문자로 표현해줘야 한다. 대문자는 디자인적 요소이기 때문에 일단 html에서 소문자로 작성하고 css에서 대문자로 바꾸는 코드를 작성해준다.📌Github Source Code

⬇️⬇️⬇️

i에 margin이나 padding 등을 주고 싶을 때 i가 아닌 span을 이용해서 스타일링 해주기 위해!

column이 3개니까 width를 33%으로 맞춘다.z-index는 여러개의 div가 겹칠 때 div의 layer 순서를 결정할 수 있다.더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.default: 0position이 fixed나 absolut

.main-chat에서 display, flex-direction, align-items를 한 줄씩 주석 처리해서 각각의 존재 이유에 대해 알아보자.일단, margin-top 한 줄은 기본 값으로 깔아주고 아무 코드도 적지 않았을 때의 모습이다. span (Friday

각 모서리에 border-radius를 주고 싶으면 다음 4가지를 사용하면 된다.border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius전체에 borde

흰색 말풍선과 노란색 말풍선의 기본적인 틀은 같다.1\. 말풍선의 형태를 띄고 있는 것2\. 말풍선 옆에 시간을 갖는것노란색 말풍선은 흰색 말풍선과 비교해서1\. 오른쪽 끝에 정렬 되어 있다.2\. 시간과 말풍선의 위치가 서로 바뀌었다.3\. 말풍선의 색이 노란색이고

children에 width를 주기 위해서는 parent에게 먼저 width를 줘야한다.예를 들어, .reply input에 width를 주기 위해서는 parent인 .reply\_\_column:last-child에 width를 먼저 줘야한다.padding을 준 후에

스플래시 화면은 모바일 앱 실행 시 가장 처음 만나게 되는 화면이다. 짧게는 1초에서 길게는 5초 정도 까지 이어지는, 서비스와 사용자 간의 중요한 연결고리라고 할 수 있다.오늘은 카카오톡의 스플래시 화면을 만들어 보려고 한다.자, 이제 splash 화면을 만들었으니,

<nav-bar.css>마우스의 움직임을 잘 보면,사용자 아이콘을 클릭하면 splash 화면이 나오고,채팅 아이콘 위에는 빨간 색 점에 애니메이션 효과(위로 올라갔다가 내려옴)가 적용되어 있고,채팅, 돋보기, 설정 아이콘을 누를 때 마다 네비게이션 바의 애니메이션

'설정' 아이콘인 gear 위에 마우스를 올려 놓았을 때 회전하는 코드를 짜보려고 합니다.gear 아이콘이 회전하는 것에 집중해 주세요.ease: 천천-빠름-천천linear: 등속ease-in: 천천-보통ease-out: 보통-천천ease-in-out: 천천-보통-천천

fadeIn (페이드인) 페이드인은 '서서히 나타남'을 의미하는 CSS Animation 효과다. opacity, 즉 불투명도를 n초동안 0에서 1까지 주면 된다. 채팅방 translateY(30px) main-chat(메인 채팅 화면)을 '위에서 아래로 (tran

사용자가 desktop 혹은 laptop 이나 ipad 같은 큰 화면이 아닌, 모바일 폰으로만 내가 만든 웹사이트에 들어오게 하고 싶다면 Mobile Media Query를 사용하면 된다.일단 모든 html 파일에 다음 코드를 작성한다. 사용자의 화면이 큰 경우, 사용

각 동그라미는 commit을 의미하고, 어떤 commit이라도 거기서 부터 다른 프로젝트를 시작할 수 있다. 대부분 사람들은 master branch에는 stable한 (잘 작동하는 것으로 어느정도 검증이 된) code를 올린다. 그리고 실험하고 싶은 기능이있거나 새로

문제 1. 이미지가 보이지 않음문제 2. screen-header의 아이콘이 아래로 밀림. 스크린이 너무 작아서 문제인걸로 추정이 된다. flex-wrap: nowrap;을 쓰면 될 것 같은데 어느 코드에 작성을 해야할 지 잘 모르겠다.처음 이 수업을 시작했을 때 ht