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;은 해당 텍스트의 글..

이번 포스팅에서는 CSS3에서 flex 태그에 대하여 공부를 해보고자 한다. flex 태그란 flex는 CSS3의 속성 중 하나로, 유연한 박스 모델(flexible box model)을 생성하는 데 사용된다. 이를 통해 요소들을 좀 더 유연하게 정렬하고 배치할 수 있다. flex 속성은 부모 요소에 적용되며, 그 자식 요소들에게 유연한 동작을 제공한다. 부모 요소에 display: flex;를 적용하면, 해당 요소와 그 자식 요소들은 flex 컨테이너가 되며, 내부의 자식 요소들은 flex 아이템이 된다. flex 속성 flex 속성은 아래와 같은 세 가지 속성으로 구성된다. flex-grow 아이템의 확장 비율을 설정한다. 값은 양의 정수로 지정하며, 기본값은 0이다. flex-grow 값이 클수록 ..

이번 포스팅에서는 HTML의 입력 양식에 대하여 공부를 해보고자 한다. Form 요소 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다. 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다. 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다. 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다. method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나누..

이번 포스팅에서는 HTML의 공간 분할에 대하여 공부를 해보고자 한다. 블록(block)과 인라인(inline) HTML의 모든 요소는 display 속성을 가지며, display 속성 값으로 블록과 인라인 중 하나를 가진다. 블록(block) 타입의 요소 display 속성 값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. , , , , , 요소는 display 속성 값이 블록(block)인 대표적인 요소이다. 더보기 예제 p요소는 display 속성값이 블록인 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소이다. 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다. 더..

이번 포스팅에서는 HTML의 기본 요소에 대하여 공부를 해보고자 한다. HTML 링크(Link) 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재한다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 태그로 표현한다. HTML 링크 더보기 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시한다. 태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있다. target 속성 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시한다. target 속성값 설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self 링크로 연결된 문서를 현재 프레임(frame..

이번 포스팅에서는 HTML의 기본 요소에 대하여 공부를 해보고자 한다. HTML 스타일 (Style) HTML 요소의 style 속성을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있다. 하나의 HTML 요소에만 style 속성을 이용하여 스타일을 적용할 수 있다. 배경색 변경 예제 style 속성을 이용한 배경색 변경 글자색 변경 예제 style 속성을 이용한 글자색 변경 글자 크기 변경 예제 style 속성을 이용한 글자 크기 변경 문단 정렬 변경 예제 style 속성을 이용한 문단 정렬 변경 여러 스타일의 설정 위에 변경한 여러 가지 스타일을 한 번에 적용할 수 있다. ex) 예제 style 속성을 이용하여 한 번에 스타일링 하기! style 속성 값에 사용되는 CSS 속성(proper..

이번 포스팅에서는 HTML의 텍스트 요소에 대하여 공부를 해보고자 한다. 제목 (Heading) HTML은 제목을 표현할 수 있는 다양한 크기의 태그를 제공한다. 가장 큰 태그부터 가장 작은 태그까지 다양한 크기로 제목을 표현할 수 있다. 태그의 위아래로는 약간의 여백이 자동으로 삽입된다. 여러 검색엔진은 각 웹 사이트의 내용을 태그를 이용하여 키워드를 수집하고, 그 내용을 파악한다. 따라서 HTML 문서에 포함되는 제목은 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있다. HTML 문서의 제목에 해당하는 부분을 태그나 태그를 사용하면 안 된다. 단락(Paragraph) 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 한다. HTML에서는 태그를 이용하..

이번 포스팅에서는 HTML의 기본적인 구조에 대하여 공부를 해보고자 한다. HTML이란? HTML은 HyperText Markup Language의 약자다. 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다. 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는 데 사용된다. HTML 문서는 윈도우의 메모장, 리눅스의 vi와 같은 기본 에디터로도 작성할 수 있다. 확장자를 .html로 저장하면 웹 브라우저에서 바로 확인할 수 있다. HTML 태그(tag) HTML 태그는 태그 이름을 꺾쇠괄호()로 감싸서 표현한다. → 시작 태그 → 종료 태그 HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으..