Language/HTML&CSS

개요반응형 디자인의 프로젝트를 진행하면서 몰랐던 부분이, CSS에서는 em과 rem이라는 개념이 있다는 것이다. 이 개념을 모르다 보니까 크기를 조절하는 부분에 있어서 엥?? '크기가 왜 이렇게 나오냐...'가 반복되었고 em, rem, px에 대해 먼저 정리해갈 필요성을 느꼈다. 1. px(픽셀) - 절대 단위px은 디스플레이에서 한점을 표현하는 최소 단위이다. 디바이스의 해상도에 따라서 크기가 달라보일 수는 있지만, 설정한 값 자체는 변하지 않기 때문에 고정된 크기를 의미한다. 가로 200px 와 세로 100px  -> width : 200 px; height : 100px; 로 설정했기 때문에 화면의 크기와 관계없이 항상 동일한 크기로 표시된다.  즉, 1280 * 720에 웹 화면에서와 360 *..

개요웹 사이트의 UI를 본격적으로 만들기 시작하면서 요소의 상대적인 위치에 대해 적용하기 위해서는 CSS에 포지셔닝에 대해 알아야 할 필요성을 느끼고 있다. 1. position 속성CSS에서 position은 요소의 위치를 어떻게 지정할지를 정하는 속성이다. 이 속성 값에는 static, relative, absolute, fixed, sticky가 있는데 각각의 속성에 대해 알아봅시다. //GridBlock.css.grid { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); gap: 4px; width: max-content; background-color: white; ..

개요프로젝트 템플릿 코드를 분석하면서 자꾸 flex라는 단어가 나오는데 이게 도대체 어떻게 사용하는거지 알 수가 없어서, 정리하고자 한다. 1. Flexbox란?CSS의 레이아웃을 구성하는 도구 중 하나로, 컨테이너 내부의 요소들을 효율적으로 정렬하고 배치할 수 있도록 도와준다.기존에 사용하던 float, inline-block과 같은 레이아웃 방식보다 유연성이 뛰어나고, 다양한 화면 크기에 대응하기가 쉽다.특징 1) 자동 크기 조절-> 아이템 크기가 자동으로 조정된다. 2) 반응형 레이아웃-> 다양한 화면 크기에 적용할 수 있다. 3) 간편한 정렬-> 중앙 정렬, 간격 조정 등이 쉽게 가능하다. 4) 아이템 순서 변경 가능-> HTML 구조를 변경하지 않고도 아이템 순서를 조정할 수 있다. Flexbo..

개요프론트나 안드로이드나 UI를 구성하는데 제일 까다로운게 배치나, padding, margin 같은 것들을 설정하는 것이다. 정말 세심하게 해야 기존에 기획했던 디자인에 벗어나지 않는 완벽한 플랫폼을 만들 수 있다!! 그런 의미에서 CSS에 박스 모델은 정말 중요하기 때문에 정리해야겠다. 1. 박스 모델모든 HTML 요소는 CSS에서 박스 형태로 표현되고, 이 박스 모델은 웹 페이지에서 요소가 차지하는 영역을 정의하는 개념이다. Content, Padding, Border, Margin 이렇게 네 가지 영역으로 구성되는데 하나씩 알아보자. 1-1. Content 영역-> 웹 요소가 표시하는 실제 데이터가 들어가는 부분이다.-> 텍스트, 이미지, 동영상 등의 콘텐츠가 배치되는 공간이다.-> 요소의 wid..