본문 바로가기
반응형

전체 글

 (464)
프로젝트 - 계산기 계산기 애플리케이션 index.html 1 2 3 - 4 5 6 + 7 8 9 * . 0 c / = main.css @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-color: rgb(149, 193, 231); display: flex; align-items: center; justify-content: center; font-size: 'Lato'; } .calculator { border-radius: 5px; width: 375px; } .screen { heig..
Inline VS Block and Inline-block 요소는 크게 inline요소와 block 요소로 나누어집니다. inline 요소는 크기를 지정할 수 없고 포함된 콘텐츠만큼만 공간을 차지하며 줄 넘김이 없으나 block요소는 부여된 높이만큼의 공간을 화면에서 차지하며 다른 요소가 같은 줄에 오는 것을 허용하지 않습니다. a inline-block 은 block과 inline의 특성을 조합하여 크기를 지정하지만 다른 요소가 같은 줄에 오는 것도 허용합니다. a block 요소들 , , , , , inline 요소들 (if it has visible controls) 마무리 이상으로 block과 inline요소에 대해 알아보았습니다. 참고 Inline elements - HTML: HyperText Markup Language | MDN In this ar..
Absolute absolute는 position 속성이 가지는 값 중에 하나입니다. 일반적으로 모든 요소는 요소의 흐름을 따라 코드가 설치된 순서대로 표시가 되는데요. absolute는 이러한 흐름에서 벗어나서 원하는 위치에 해당 요소를 위치시키도록 해줍니다. 사용방법 먼저, 관련된 속성들을 보겠습니다. top: 해당 요소가 들어있는 요소의 상단으로부터의 거리 bottom: 해당 요소가 들어있는 요소의 바닥으로부터의 거리 left: 해당 요소가 들어있는 요소의 좌측으로부터의 거리 right: 해당 요소가 들어있는 요소의 우측으로부터의 거리 absolute사용 시 부모요소의 position을 설정하지 않으면 root로부터 산정됩니다. This is a paragraph. 부모를 기준으로 위치를 지정하려면 아래와 같이 부..
Fixed fixed는 position 속성이 가지는 값 중에 하나입니다. 일반적으로 모든 요소는 요소의 흐름을 따라 코드가 설치된 순서대로 표시가 되는데요. fixed는 이러한 흐름에서 벗어나서 원하는 위치에 해당 요소를 위치시키도록 해줍니다. 사용방법 먼저, 관련된 속성들을 보겠습니다. top: root 상단으로 부터의 거리 bottom: root의 바닥으로부터의 거리 left: root의 좌측으로부터의 거리 right: root의 우측으로부터의 거리 Fixed fixed와 absolute 차이점은 fixed는 부모요소의 설정과 관계없이 무조건 windoe (screen)로부터 산정됩니다. 이러한 특성으로 콘텐츠의 길이와 상관없이 항상 화면에 같은 자리에 위치하여 내비게이션이나 모달 등에 유용하게 사용됩니다. ..
Grid CSS grid는 레이아웃을 결정하는 디스플레이 요소 중 하나로 테이블처럼 열과 행을 지정해서 원하는 레이아웃을 간편하게 만들 수 있게 해 줍니다. flex와 비슷한 기능을 제공하지만 열이나 행 둘 중 하나의 레이아웃을 지정하는 flex와 달리 grid는 열과 행을 동시에 지정할 수 있습니다. 사용법 먼저 grid와 사용가능한 속성들을 보겠습니다. grid 지정 속성 Template area grid-template-area: grid 레이아웃 지정 (컨테이너에서 지정) grid-area: grid-template-area에 지정된 레이아웃에 들어갈 박스를 지정 (박스에서 지정) Template rows columns grid-template-rows: grid 행의 크기 지정 grid-template-..
Flex CSS flex는 레이아웃을 결정하는 디스플레이 요소 중 하나로 테이블처럼 열 또는 행을 지정해서 원하는 레이아웃을 간편하게 만들 수 있게 해 줍니다. 사용법 먼저 flex와 사용가능한 속성들을 보겠습니다. flex 지정 속성 flex-direction: flex 컨테이너의 방향을 열 또는 행으로 지정 (행이 기본값) flex-shrink: 컨테이너의 크기가 줄어들 때 줄어들 비율 flex-grow: 컨테이너의 크기가 증가할 때 증가할 비율 flex-basis: 기본크기 flex: flex-grow, flex-shrink, flex-basis를 한 번에 지정하는 속성 styling 속성 gap: 간격 정렬 속성 justify-content: 가로 또는 세로 정렬 (플렉스의 방향에 따라 달라짐) align..
Add to Home screen (A2HS) 거의 모든 브라우저에서 제공하는 기능으로 웹앱을 설치할 수 있게 해 줍니다. 설정방법 모바일과 데스크톱의 설정 방법은 같으나 설치에서 조금 차이가 있는데요 먼저 설정방법을 보겠습니다. 설정방법은 간단한데요. 먼저, manifest file을 만듭니다 (root 폴더에 설치 권장). 이때, .webmanifest 또는 .json 연장자를 사용합니다. example.webmanifest 또는 example.json { "background_color": "red", // 배경색이 들어가는 화면에서 제공됨 "description": "test", "display": "fullscreen", "icons": [ // 브라우저 아이콘 { "src": "icon/fox-icon.png", "sizes": "192x..
Web app manifests 웹애플리케이션 정보를 제공하는 파일로 웹애플리케이션 다운로드와 표시할 정보를 담고 있습니다. 참고 Web app manifests | MDN Web app manifests are part of a collection of web technologies called progressive web apps (PWAs), which are websites that can be installed to a device's homescreen without an app store. Unlike regular web apps with simple homescreen links or bookmarks, PW developer.mozilla.org
728x90

티스토리툴바