본문 바로가기
반응형

프론트엔드

 (108)
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..
Viewport 뷰포트는 화면의 크기를 말합니다. 과거에는 컴퓨터가 웹사이트에 접근하기 위한 거의 유일한 수단이었기 때문에 뷰포트도 컴퓨터 화면에 최적화되었습니다. 문제는 상대적으로 큰 크기의 컴퓨터 화면에 최적화된 뷰포트는 작은 화면에서 표시되는 콘텐츠와 비율이 맞지 않아 미적기능이 저하되었습니다. 문제는 지정된 뷰포트의 크기보다 기기 화면이 작을 때 발생하는데요. 아래처럼 뷰포트의 크기가 기기 크기보다 클 때 콘텐츠가 화면에 다 표시되지 않습니다. 뷰포트의 설정된 크기보다 기기의 크기가 큰 경우는 무리 없이 화면에 표시됩니다. 디바이스의 종류와 관계없이 뷰포트의 비율을 조정하기 위해 아래와 같이 메타태그를 추가되었고 현재 널리 사용되고 있습니다. 뷰포트 메타태그는 아래와 같은 속성을 가집니다. 1. width 보기처..
Media queries 미디어쿼리는 조건에 따라 스타일을 적용하게 해 주는 CSS의 고급기능입니다. 주로 화면의 크기와 함께 사용되어 반응형 애플리케이션을 구현하는 데 사용되는데요. 사용하는 방법은 미디어 메타태그와 함께 옵션을 지정하여 사용합니다. 기본문법 @media 'mediaTypes' ('mediaFeatures') { targetElement: style } 'mediaTypes'은 기기를 특정하는 값으로 'all', 'print', 'screen' 등의 값을 가집니다. 생략할 경우 'all'이 적용됩니다. 'mediaFeatures'은 조건을 특정하는 값으로 종류와 조건이 다양합니다 (예를 들면 특정입력도구가 hovering이 가능한 경우 발동) 중괄호에는 위 조건이 모두 참일 때 스타일이 적용될 대상과 발동될 스..
클라이언트 측 데이터 저장소 - 인덱스드 디비 indexed db는 사용자의 브라우저에 데이터를 저장하는 기능을 말합니다. 클라이언트 측에 데이터를 저장한다는 점에서 웹스토리지와 비슷하지만 더 많은 데이터를 저장할 수 있는 장점이 있습니다. indexed db는 일반적인 데이터베이스처럼 생성, 저장, 활용하는 단계를 거칩니다. 생성하기 open("dbName", version): 데이터베이스 열기 (존재하지 않는 경우 새로 생성됨). 참고로 스키마 (데이터베이스의 구조)는 버전에 따라 달라집니다. const req = window.indexedDB.open("cars", 3); open 사용 시 바로 데이터베이스가 열리는 것이 아니라 요청에 대한 성공 또는 실패가 반환됩니다. 다만, 데이터베이스를 생성하거나 버전을 변경할 때는 '.onupgraden..
728x90

티스토리툴바