KBW's cosmos

스마트폰으로 웹페이지를 둘러볼 때 웹페이지가 App 스럽지 못하다는 생각을 해본적이 있을 것이다. 이는 테두리와 박스 때문이다. 또한 링크나 이미지를 길게 누르면 주소를 복사하거나 이미지를 저장할 수 있는 옵션이 나타난다. 이런 요소들은 웹페이지일 때는 상관없지만 App 처럼 동작하는 것을 방해한다. WebView의 기본 스타일과 동작을 제어할 수 있어야 App과 비슷한 느낌으로 웹페이지를 만들 수 있다. 이는 Webkit CSS의 속성을 통해 제어할 수 있다. html { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } -webkit-touch-callout 속성 : 화..

1. 실무에서 relative 속성은 특정 요소의 위치를 배치하는 것보다 absolute 속성의 기준점을 설정하는 용도로 많이 사용한다. 2. transform의 3D속성을 이용할 때 부모 태그의 perspective 속성은 원근감을 지정하는 것이다. z축으로 얼마나 떨어져서 볼 것인가를 결정하는 속성이라고 이해하면 된다. (그래서 자식 태그의 z-index를 100px로 하고 부모 태그의 perspective를 90px로 하면 자식 태그가 보이지 않게 된다. 왜냐하면 자식태그가 존재하는 곳보다 더 안쪽으로 보는 것이기 때문에) 3. box-sizing 속성을 이용하면 기존 박스의 크기를 유지하면서 안쪽 여백을 지정할 수 있다. padding 속성을 추가하면 기존의 박스 크기가 지정한 너빗값과 높잇값보다..

padding: 0.5rem calc((100vw - 1000px) / 2); 위 식으로 가운데 정렬을 시킬 수 있다. 0.5rem은 위아래 패딩이니 상관없고 핵심은 calc((100vw - 1000px) / 2)이다. calc() CSS함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다. vw는 vw = viewport width로 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다. 100vw가 전체 화면의 기준이 된다. 따라서 100vw는 전체 화면에서의 width값이고 거기서 1000px만큼을 뺀 값을 2로 나누어 이를 좌우 패딩으로 삼는다는 것이다. 이를 정리하면 calc((100vw - (사용할 공간 크기) / 2)로 사용하면 된다.

HTML과 CSS를 만만히 보고 그냥 JS를 배우면서 웹 공부를 시작했는데 막상 웹페이지를 만들다보니 HTML과 CSS의 기초가 부족해 검색창하나 만드는데도 애를 먹었다. 기본적인 것들은 먼저 배우고 시작해야겠다고 생각해 HTML CSS 카테고리를 새로 만들고 공부한 내용을 기록한다. 오늘은 생활코딩 WEB2 CSS 수업을 다 듣고 들으며 필기한 내용을 올려두려고 한다. 출처 : https://youtu.be/Ok0bBJPtgJI 선택자(Selector) : 그냥 태그 이름을 적으면 해당 태그 전체를 선택하는 선택자를 사용한 것이다. class를 이용해 해당 클래스의 선택자를 사용할 때는 .을 이용한다. 그런데 class는 아래와 같이 두 개의 이름을 지정할 수도 있다. 그러면 아래와 같이 속성을 지정할..