개인 공부/코코아톡 클론 코딩
-
메시지 입력창 간격 조절하기 - 가변 패딩 활용!개인 공부/코코아톡 클론 코딩 2021. 1. 9. 17:36
처음에 니꼬쌤이 알려준 대로 코드를 작성했을 때는 몰랐는데, 나중에 다시 들어가보니까 메시지 입력장 아이콘들의 간격이 마음에 들지 않았다. + 아이콘은 왼쪽에 동떨어져 있는데 입력창은 또 오른쪽 간격이 엄청나게 좁고... + 아이콘이 있는 첫 번째 column의 너비가 10%로 되어있는데, 이게 너무 수치가 큰가 싶어서 너비를 줄여보면 모바일 화면에서는 또 수정한 너비가 너무 좁아서 입력창과 겹쳐 보였다. 너비를 수정하고 가운데 정렬도 시도해봤지만 다 모바일 or PC에서 균형이 예쁘게 잡혀있지 않았다. 그러다 padding을 각 화면에 맞게 조절할 수는 없을까?!! 라는 생각이 들었고, 검색을 해본 결과 가변 패딩을 활용하는 방법이 있었다. 사실 % 단위를 활용하는 게 가변 패딩인데.. 지금까지 이걸 ..
-
CSS 생소한 개념들 정리개인 공부/코코아톡 클론 코딩 2021. 1. 9. 16:17
will-change : 컴퓨터에게 애니메이션이 일어날 것임을 미리 알려주어서 애니메이션이 더욱 부드럽게 일어나도록 함. 클래스명 > 식별자 : 클래스 바로 밑에 있는 식별자를 직접 선택하게 함. .reply__column:last-child > i { right: 40px; top: 10px; }.reply__column:last-child i 로 작성하면 button 안에 있는 i까지 스타일이 적용된다. 따라서 last-child 바로 밑에 있는 i만 스타일을 적용하고 싶을 때는 >로 직접 가리킬 수 있다. 클래스 선택자를 여러 개 사용할 때도 있다. 가령 전체적으로 적용되는 속성을 사용하되 어느 한 부분만 다른 스타일을 적용해야 할 때... 이럴 땐 class="선택자1 선택자2" 처럼 띄어쓰기를 ..
-
CSS 기초개인 공부/코코아톡 클론 코딩 2020. 12. 19. 20:36
블로그를 방치해둔 지 너무 오래되어서...ㅎㅎ;; 간단히 배운 것들이라도 정리해놔야겠다. HTML이 웹의 뼈대와 같다면 CSS는 그 뼈대에 살을 붙여주는 역할을 한다. CSS를 HTML에 추가하는 방법은 크게 두 가지이다. 1. HTML 파일 안에 CSS 코드 삽입하기 2. HTML 파일 밖에 CSS 코드 삽입하기 (CSS와 HTML 분리하기) 확장자가 .css인 파일을 새로 만들고 이 파일을 HTML 파일에 연결한다. CSS를 따로 수정 및 관리하는 것이 더욱 편하기 때문에 외부에 CSS 코드를 두는 것이 좋다고 한다. CSS 코드의 기본 형식은 h1 { color: blue; } 와 같다. h1은 HTML 코드 안에 있는 태그를 가리키는 '선택자'이다. HTML 안에 있는 태그를 가리켜서 각종 스타일..
-
HTML - Form Tags개인 공부/코코아톡 클론 코딩 2020. 9. 24. 04:18
Form 태그는 attribute를 익히기에 아주 좋은 태그이다. 1. input input 태그를 입력하면 텍스트를 입력할 수 있는 박스가 생긴다. 여기에 다양한 attribute를 추가할 수 있다. 2. type="color" 색상을 선택할 수 있는 창이 나오게 해준다. 3. type="password" 로그인 창에 존재하는 패스워드를 가려주는 박스를 만들 수 있다. 여기에 minlength="10"을 추가하면 최소 10글자 이상을 입력해야 한다는 조건을 걸 수도 있다. 4. type="text" 텍스트를 입력하는 박스를 만들 수 있다. required : 박스 안에 박스에 대한 설명을 입력할 수 있는 attribute 5. type="submit" 사용자가 클릭할 수 있는 버튼을 만들 수 있다...
-
HTML - 다양한 태그들개인 공부/코코아톡 클론 코딩 2020. 9. 24. 03:45
HTML 태그들을 하나하나 다 외울 필요는 없다. 모든 것은 구글에서 찾을 수 있으니까!! 우리는 HTML이 어떻게 작동하는지만 알면 된다. https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. developer.mozilla.org MDN을 참고하면 좋다. + 참고 attributes에 붙이는 enabled와 true는 같은 의미!
-
HTML - head 관련 여러 가지 태그들개인 공부/코코아톡 클론 코딩 2020. 9. 23. 02:06
는 웹 사이트가 어떻게 생겼는지, 어떤 속성을 가졌는지, 검색 엔진이 사이트를 어떻게 바라보는지 등의 정보를 담는 곳이다. 1. 각종 부가적인 정보를 담는 태그로 self-closing tag이다. charset : 브라우저가 우리가 사용하는 언어를 이해하도록 만든다. (한글, 특수문자 등...) description : 구글에서 웹 사이트를 검색했을 때 나오는 설명이 있는 곳 2. 웹 사이트가 주로 어떤 언어를 사용하는지 알려준다. ex) kr 3. 웹 사이트 아이콘 관련 태그 + og:image - 카카오톡에서 url 공유할 때 뜨는 이미지가 있는 곳
-
HTML - Tag Attributes개인 공부/코코아톡 클론 코딩 2020. 9. 23. 01:18
1. anchor를 뜻함 링크를 연결하는 태그 2. href 링크를 연결하기 위해서는 어디로 가는지 부가적인 정보가 필요하다. 이때 이용하는 것이 attributes이다. href는 attributes의 한 종류로, 태그에서만 사용 가능하다. Go to google 👉 이때 a와 href는 꼭 띄어써야 한다! 3. target target="_self" : 기본값. 같은 탭에서 페이지 열기 target="_blank" : 다른 탭에서 페이지 열기 이 attribute 역시 에서만 사용 가능 Go to another website 4. self-closing tag. 다른 태그들과 다르게 텍스트 내용이 필요하지 않음! 5. src 태그에서 작동하는 attribute