HOME
-
메시지 입력창 간격 조절하기 - 가변 패딩 활용!개인 공부/코코아톡 클론 코딩 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" 처럼 띄어쓰기를 ..
-
파이썬 변수 재할당 관련 (+ C언어 변수와 비교?!)학교 공부/파이썬 2020. 12. 29. 17:06
파이썬을 처음 배우고 있는데 헷갈리는 점이 하나 있다. 파이썬은 변수를 재할당할 때마다 메모리 주소가 변한다고 한다. 그런데 C언어는 그렇게 배운 기억이 없어서 혼란이 오고 있다. 😑 https://python-world.tistory.com/entry/python-variable 파이썬 변수 변수 선언 파이썬은 아래와 같이 변수 선언 >>> a = 1 # int 형 선언 >>> type(a) # type() 빌트인 함수를 사용하여 형 확인 int >>> a 1 >>> a = '1' # ''를 사용하면 str 형이 선언 >>> type(a) str >>> a '1'.. python-world.tistory.com 일단 이 블로그 글을 참고하면, 파이썬의 변수는 C언어와 다르게 자료형을 미리 지정하지도 않..
-
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을 공부하면서...일기 2020. 9. 23. 02:23
개강하고 정신이 없어서 많이 공부하지도 못했지만... 일단 지금까지는 너무너무 재밌다!! 옛날.. 진짜 옛날부터 내가 직접 홈페이지를 뚝딱 만들고 싶었고(옛날엔 홈페이지라는 말을 많이 쓰지 않았나? ㅋㅋ) 정말 많이 시도해보려고 했었다. 그때마다 어린 내 눈에는 html 태그들은 다 외계어처럼 보였고... 고작 써본 html 태그라고는 파X룸... 야X 꾸러기 홈피... 이런 데서 뭣도 모르는 초딩들이 쓰던 태그들 퍼오는 게 다였다....^^ 지금 생각해보니까 우리나라 초딩들 참 무섭다.. 그 어린 나이부터 어떻게 html을 썼던 걸까? 아무튼 천재들은 누가 가르쳐주지 않아도 알아서 코딩을 공부해와서 홈페이지 하나는 그냥 만들었겠지만 나는 능력이 안 돼서 그런지 엄두도 내지 못하고 손가락만 쪽쪽 빨며 티..
-
HTML - head 관련 여러 가지 태그들개인 공부/코코아톡 클론 코딩 2020. 9. 23. 02:06
는 웹 사이트가 어떻게 생겼는지, 어떤 속성을 가졌는지, 검색 엔진이 사이트를 어떻게 바라보는지 등의 정보를 담는 곳이다. 1. 각종 부가적인 정보를 담는 태그로 self-closing tag이다. charset : 브라우저가 우리가 사용하는 언어를 이해하도록 만든다. (한글, 특수문자 등...) description : 구글에서 웹 사이트를 검색했을 때 나오는 설명이 있는 곳 2. 웹 사이트가 주로 어떤 언어를 사용하는지 알려준다. ex) kr 3. 웹 사이트 아이콘 관련 태그 + og:image - 카카오톡에서 url 공유할 때 뜨는 이미지가 있는 곳