-
화면구현 실습 (HTML,JS,CSS)자바 초보개발/HTML 2023. 12. 13. 01:15
배우는 수업에서 화면 디자인을 중점적으로 두지는 않기에, BootStrap3를 이용하고 기본적인 HTML 주의사항들은 많이 배우진 못한 것 같다.
그래서 이번에 화면구현을 하는 도중 막히는 일이 좀 많았는데, HTML과 JS, CSS 를 통해 프로젝트의 화면을 구현하는 도중 해결했던 문제, 헷갈렸던 것들을 정리해보려고 한다.
BootStrap3의 btn Class와 inline-block, float
상품 리스트를 보여주는 화면을 만들 때, BootStrap의 btn btn-default 클래스를 적용한 "상품 등록" 버튼이 의도치않은 곳에 위치하게 되었다.
상품 리스트 검색을 통해 BootStrap의 버튼은 inline-block 속성을 가지고 있다는 것을 알아냈는데, 버튼을 block 속성으로 지정하는 BootStrap클래스 btn-block 을 추가했으나, 여전히 문제가 발생했다.
나중에 문제를 발견했는데, 팀원과 공유한 css 속성에서
.btn {
float : right;
}
해당 부분이 추가되었는데, float를 이용해 레이아웃을 구성하면, 요소가 원하지 않는 위치에 이동하게 되는 경우가 있다고 한다.
첫번째 해결 방법으로 그냥 float : right; 속성을 삭제하는 것과
두번째 해결 방법으로, "상품등록"버튼을 감싸고 있는 부모 요소에 clear : both; 스타일을 적용하여 float에 영향을 받지 않게 해서 해결할 수 있었다.
요소의 정렬을 위해 float를 자주 사용하는것은 지양해야겠다.
display : none 과 visibility : hidden
두개의 속성은 선택된 요소를 보이지 않게 만든다는 공통점이 있지만,
display : none은 해당 요소가 차지하던 영역도 사라져서 다음 요소가 선택된 요소의 원래 있던 공간에 위치할 수 있다.
visibility : hidden은 해당 요소가 보이지만 않을 뿐 원래 차지하던 영역만큼 그대로 영역을 차지하기 때문에 다른 요소가 선택된 요소 다음 영역부터 쌓이게 된다.
float, clear , flex
float: left , float: right를 입력해서 이미지나 텍스트를 손쉽게 정렬하곤 했는데, 그러다보면 꼭 원하지않던 요소까지 float의 영향을 받는 경우가 생겼다.
그런 경우에 float를 원하지 않는 요소들의 부모요소에 clear : both ; 속성을 입력해서 후손 요소들이 float의 영향을 받지 않게 해주는 방법으로 해결할 수 있었다.
float의 범위를 정밀하게 조정하고, 그다음에 clear를 사용해서 레이아웃을 제대로 정렬하는 것도 요소 정렬의 한 방법이겠지만, 다른 방법도 여러가지가 있는 것 같다. 텍스트나 버튼등은 text-align 속성을 이용한다던가, 수동으로 컨테이너의 width와 height를 정하고 position 속성과 margin, padding으로 직접 조정하는 방법이 떠오른다.
여러 정렬 방법중 하나로 부모 요소(주로 Container라고 부르는 것 같다)에 display : flex 속성을 사용하고,
부모와 자식 요소들(주로 flexItem)에 관련 속성들을 사용하는 방법도 있는 것 같다.
당장 인터넷에 css flex라고 검색하면 요소들을 세분화해서 정리한 포스트가 보이지만, 내 나름대로 정리를 해보자면
부모요소에 적용하는 속성
부모(컨테이너) 에 display: flex 속성을 입력하면, 자식요소들에 적용되는 효과는
1. 내용물 만큼만 width가 정해진다.
2. height는 부모(컨테이너)를 따른다.
3. 각 자식요소가 수평 정렬된다.
컨테이너에 flex-direction 속성을 적용해 아이템들이 쌓이는 방향을 정할 수 있다.
수평 = row , 수직 = column
컨테이너에 쌓인 아이템들을 정렬하는 방법은 아래 두가지가 있다.
justify-content : 메인축 방향 .flext-direction이 row인경우 수평.
align-content : 교차축방향. flext-direction이 row인경우 수직
두가지 속성에 flex-start, center,flex-end 등의 값을 입력해 컨테이너의 시작부분과 끝부분,중앙에 쉽게 정렬할 수 있다.
아이템에 적용할 수 있는 속성
flex-basis : 아이템 기본 크기 설정
50% , 100px, 등 flex-direction에 따라 row이면 너비, column이면 높이단위를 직접 입력할 수 있다.
혹은 content를 입력해 내용물 만큼의 크기만 가지도록 할 수 있다.
flex-grow , flex-shrink : 내용물만큼 아이템들이 차지하고 남거나 넘치는 컨테이너 공간의 처리
grow를 사용할 시, 아이템이 기본 크기보다 커져서 남는 컨테이너 영역을 나눠 가지게 된다.
shrink는 아이템이 기본 크기보다 작아져서 컨테이너 영역만큼만 아이템이 영역을 차지하도록 한다.
웹페이지 처리에 관한 정보들을 찾을 때 정말 많은 요소와 속성들이 존재한다.
앞으로 특정 요소와 속성에 대해 최소한 간략하게 정리해서 여러가지를 익혀보도록 해야겠다.