각 div 들이 콘테이너 요소들이라고 생각하고원하는 곳에 배치하면 된다. Flexbox를 활용하면 레이아웃을 간단하게 구성할 수 있다. 특히 반응형 디자인을 구현할 때 매우 유용 코드 설명.outer-container는 position: relative;을 적용하여 내부 요소들이 상대적으로 배치될 수 있도록 설정했다..north, .east, .south, .west 요소들은 position: absolute;을 적용하여 특정 위치에 배치되도록 만들었다.각 요소를 top, right, bottom, left 속성을 활용하여 동서남북 방향에 배치했다. See the Pen Untitled by wpfhorez4 (@wpfhorez4) on CodePen.">See the Pen Untitled ..
웹 개발에서 레이아웃을 효율적으로 배치하는 것은 매우 중요합니다.특히 반응형 웹을 만들 때, 기존의 float이나 position을 사용하는 방식보다 Flexbox(Flexible Box)를 활용하면 훨씬 쉽고 직관적인 레이아웃 구성이 가능합니다.이번 포스팅에서는 CSS Flexbox의 개념부터 실전 예제까지 알아보겠습니다.1. Flexbox란?📌 Flexbox(플렉스박스)의 특징수평, 수직 정렬이 쉬움 – justify-content, align-items를 활용하여 간단하게 정렬 가능동적인 크기 조절 가능 – 화면 크기에 따라 유연한 레이아웃 구성복잡한 UI 배치를 간결하게 구현 가능2. Flexbox 기본 개념Flexbox를 사용하려면 부모 요소에 display: flex; 속성을 적용해야 합니다..
이번 글은 input 만을 이용하여 여러 css를 입혀 input 태그만 디자인 해보겠습니다. 실제 디자인의 경우에는 input 태그만을 사용하지 않을 때도 많습니다. 특히 홈페이지 로그인 부분들에서 태그 앞에 id 이미지나pw 이미지를 많이 볼 수 있는데 이미지나 이런것은 넣지 않고 input 태그만에 css를 입혔습니다. 디자인은 여러 사이트들을 참조하였습니다.
이번 글은 input 태그의 테두리 크기, 선 종류, 색상을 변경하는 방법과 테두리를 둥글게 만드는 방법, input 태그 클릭 시 테두리 색상을 변경 하는 방법을 알아보도록 하겠습니다. input type 기준은 text를 기준으로 작업할 예정이며, 테두리 크기, 선 종류, 색상 속성은 대부분 공통으로 사용할 수 있으니 div나 label 등에서도 모두 사용할 수 있습니다.
이번 글은 JSP Input 태그의 Text Type에 대해 3가지를 알아볼려 합니다. 프로젝트마다 틀리겠지만 진행하게 될 때 많이 쓰는 태그 중 하나인 input 태그는 다양한 type을 가지고 있습니다. 그 중 text type을 생성하는 방법과, 기본 테두리 제거 하는 방법 마지막으로 input 태그의 입력창을 클릭하게 되면 텍스트 커서가 이동하게 되는데 이때 테두리가 검게 되는 스타일이 나오게 됩니다. 이를 제거하는 방법을 알아보도록 하겠습니다.
