Clloud's devlog

이번 포스팅에서는 화면 Display상의 표시 영역을 뜻하는 뷰포트(ViewPort)에 대하여 공부를 해보고자 한다. 뷰포트(ViewPort)란 Viewport는 웹 페이지의 가시 영역을 의미하는 용어로, 사용자가 웹 페이지를 볼 수 있는 실제 화면 영역을 말한다. 브라우저는 웹 페이지를 렌더링 할 때 이 가시 영역을 기준으로 내용을 표시하게 된다. 기본적으로 브라우저는 뷰포트의 너비와 높이를 디바이스의 물리적인 해상도로 설정한다. 그러나 모바일 기기와 같은 작은 화면을 갖는 디바이스에서는 웹 페이지의 전체 내용을 한 번에 보기에는 너무 작기 때문에, 브라우저는 뷰포트를 확대 또는 축소하여 더 적절한 화면 크기로 조정한다. 뷰포트는 주로 뷰포트 메타 태그를 사용하여 설정된다. 이 메타 태그는 웹 페이지의..

이번 포스팅에서는 CSS 속성 중 하나인 Flex 컨테이너에 대하여 공부를 해보고자 한다. Flex 컨테이너란 Flex 컨테이너는 웹 개발에서 사용되는 반응형 디자인을 구현하기 위한 CSS 속성 중 하나다. Flexbox 레이아웃 모델을 사용하여 요소들을 유연하게 정렬하고 배치하는 데 도움을 준다. Flexbox는 요소를 행 또는 열의 형태로 배치하고, 각 요소의 크기와 간격을 조정할 수 있는 강력한 도구다. Flex 컨테이너는 부모 요소에 적용되는 CSS 속성이다. 아래는 Flex 컨테이너를 구성하는 주요 속성들에 대한 설명입니다: display Flex 컨테이너를 정의하기 위해 display: flex 또는 display: inline-flex를 사용한다. display: flex는 블록 수준의 컨..

이번 포스팅에서는 CSS3에서 사용되는 단위인 px, rem, em의 차이에 대하여 공부를 해보고자 한다. 이 단위들은 웹 페이지의 요소들의 크기를 지정하는 데 사용된다. 각 단위에 대한 설명 px(픽셀) px은 "픽셀"을 나타내며, 고정된 크기를 나타낸다. 예를 들어, font-size: 16px;는 해당 텍스트의 글꼴 크기를 16픽셀로 설정한다. 픽셀 단위로 크기를 지정하므로, 장치의 해상도에 따라 크기가 변하지 않는다. 고정 크기로 웹 페이지를 디자인하고자 할 때 주로 사용된다. rem (루트 엠) rem은 "루트 엠"을 나타내며, 상대적인 크기를 나타낸다. 기본적으로 HTML 요소의 기본 글꼴 크기인 "루트 엠"을 기준으로 삼는다. 예를 들어, font-size: 1.2rem;은 해당 텍스트의 글..

이번 포스팅에서는 프론트엔드(Front-End) 기본 지식에 대하여 공부를 해보고자 한다. 프론트엔드(Front-End) 프론트엔드는 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(User Interface, UI)를 말한다. 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 화면상 나타나는 아주 깔끔한 레이아웃을 가진 인터페이스라고 생각하면 된다. 프론트엔드는 프로토타입(prototype)을 기반으로 웹사이트의 화면을 만들어 나간다. 사용자는 이 웹사이트에 접근하기 위해 구글 크롬, 엣지, 웨일 등을 사용하는 형식이다. 웹 사이트의 화면을 구성하는 데엔 세 가지 언어(HTML, CSS, JavaScript)가 필요하다. 프론트엔드 개발은 주로 웹 및 모바일 ..