css
-
메시지 입력창 간격 조절하기 - 가변 패딩 활용!개인 공부/코코아톡 클론 코딩 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 안에 있는 태그를 가리켜서 각종 스타일..