JAVA 웹개발 과정 국비 34일차 정리
34일차
※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!
1. Layout 이어서..
div + float 으로 레이아웃을 구성하는 방법을 배웠다.
1) span + inline-block 의 단점
이전 시간에 span + inline-block 파와 div + float 파가 나눠져서 싸우다가 결국 div + float 파가 이겼다고 했었다.
span은 inline-block 속성으로 단점을 해결하려했고, div는 float 속성으로 단점을 해결하려고 했는데 span + inline-block은 레이아웃 박스 사이의 틈이 의도치 않게 자꾸 벌어지는 일이 생기는 크나큰 단점이 있었다. 그에 반해 div + float 는 그런 단점이 딱히 발생하지 않았다. 따라서 div + float은 레이아웃에 사용되었고, span + inline-block은 특정 상황에서만 가끔 사용하는 방법이 되었다.
2) Layout 세로 3단 구조
세로 3단 구조는 별다른 주의할 점이 있지 않다.
- 구조를 잘 보기위해 우선 div에 border 값을 준다.
- container에 너비 width 값을 준다.
- header/contents/footer에 각각 height 값을 준다.
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
3) Layout 가로 3단 구조
가로 구조는 세로 구조보다는 생각할 것이 많다. 바로 float 속성 때문이다.
어려운 내용이기 때문에 단계별로 나눠서 정리한다.
① 틀 만들기
세로 3단 구조와 별반 다를 것이 없다.
div태그로 틀을 만들어주고, div에 border값을 주고, container에 width를 준다.
그러면 아래와 같이 진한 줄 하나가 보이는데, 내용을 가지고 있지 않아 납작해진 div가 여러개 겹쳐있어서 그렇게 보이는 것이다.
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
② float 속성주기
float 속성은 쉽게 말해서 앞(z축)으로 띄워주는? 속성이라고 보면 된다.
block요소는 기본적으로 한 line을 다 차지하는 특성 때문에 가로로 정렬할 수 없었는데, float 속성으로 앞쪽으로 띄워버리면 그 특성이 사라지기 때문에 크기를 마음대로 조정할 수 있게 된다.
따라서 container 안 div들에 float:left 속성을 주면 normal flow 영역(브라우저 흰바탕)에서 앞으로 튀어나오게 된다.
그러면 긴 줄 하나와 아주 작은 네모칸 3개를 볼 수 있는데, 긴 줄은 안에 있던 내용들이 float 속성을 받아 앞으로 튀어나가서 가지고 있는 내용이 없어 다시 납작해진 container이고, 네모칸 3개는 각각 left, center, right class를 가진 3개의 div가 앞으로 튀어나와 가로로 정렬된 모습이다.
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
③ container에 내용 넣기
납작해진 컨테이너에 내용을 넣어야 한다.
그렇게 쓰라고 만들어진 속성은 아니지만 overflow:hidden 속성을 주면 컨테이너가 normal flow영역만 주시하고 있다가 float 속성을 받아 앞으로 튀어나간 애들까지 확인할 수 있게 되면서 자동으로 다시 튀어나간 애들도 자기 내용으로 인식하여 집어넣게 된다.
또한 컨테이너는 normal flow 영역에서 규칙을 줘야하는 경우가 많기 때문에 되도록이면 float를 주지 않는 것이 좋다.
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
④ div에 너비, 높이 주기
이제 left, center, right 영역에 각각 너비와 높이 속성을 주면 된다.
높이는 모두 동일하므로 container 안에 div에 한꺼번에 height 를 주고, 너비는 각각 width 속성을 준다.
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
⑤ border값 빼기
높이를 50px로 맞춰주고, 각각의 height를 20%, 30%, 50%로 총 100%로 맞췄는데도 불구하고 결과를 보면 한 줄로 정렬이 되지 않고 right 영역이 밑으로 내려와있다.
그 이유는 border 값 때문인데, 처음에 1px씩 border 속성을 줬기 때문에 총 6px만큼이 오버가 된 것이다.
border값을 매번 계산해서 빼주기는 힘들기 때문에, 규칙을 바꿔버리자.
border는 영역의 밖으로 만들어지는데, 보더를 영역에 포함시키는 box-sizing:border-box속성을 주면 된다.
그런데 모든 div에 이 속성을 부여하게 되면, 이 세 영역을 감싸고 있는 컨테이너의 너비도 보더를 포함해버리면서 줄어들게 된다. 따라서 컨테이너는 제외한 나머지 div에 이 속성을 부여해준다.
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
4) Margin과 Padding
Contents 영역과 그걸 감싸고 있는 Parent 영역이 있다고 했을 때, 같은 영역이지만 누구의 영역에서 보느냐에 따라 이름이 달라진다.
- Margin : Contents 입장에서 보는 Parent 까지의 여백(element를 밀어냄)
- Padding : Parent 입장에서 보는 Contents을 채워주는 공간
5) Navi bar 만들기
마찬가지로 어려운 부분이므로 순서를 나누어 정리해둔다.
Navi bar를 만드는 방법은 여러가지가 있지만 가장 많이 사용하는 ul 태그를 이용한 방법이다.
① ul태그로 메뉴 가로 정렬하기
네비 바에서 보여줄 메뉴를 ul과 li 태그를 이용하여 적어준다.
ul과 li 태그 모두 block 요소이므로 아래로 나열되어있는 메뉴를 가로로 정렬시켜주려면 float 속성을 준다.
그리고 기본적으로 li 태그에 붙어있는 점도 속성에 none을 주어서 없애준다.
ul태그(#navi)는 float를 한 il 태그들을 인식할 수 없기 때문에 overflow:hidden을 줘서 인식시킨다.
마지막으로 메뉴들이 전부 붙어있으므로 width를 줘서 너비를 조정해준다.
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
② margin과 padding 제거
왼쪽으로 메뉴들이 쏠린 느낌이 드니까 일단 텍스트를 중앙 정렬을 해준다.
그러나 왼쪽에 있는 여백은 없어지지 않았다. 바로 이게 ul 태그의 자동 padding 값이다.
또한 ul 태그는 margin 값도 자동으로 가지고 있는 것을 알 수 있다.
이 두가지 값들을 모두 0px로 없애준다.
마찬가지로 body에 있는 margin 값도 없애준다.
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
③ 색 입히기
맘에드는 색으로 배경과 글자를 바꿔준다.
hover 속성으로 마우스를 가져다댔을 때 커서를 바꿔주는 cursor:pointer 를 적용시켜주고, 배경색도 바꿔주면 그럴싸한 네비 바를 만들 수 있다.
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
④ 글자 중앙 정렬
네비 바가 너무 얇아서 두껍게 만들려고 #navi와 li태그에 height를 주었다.
그런데 메뉴들이 위쪽에 붙어서 중간 정렬을 해주고 싶다.
가장 간단한 방법으로는 텍스트의 높이를 바꿔주는 것이다.
텍스트는 작성하면 자동으로 한 줄의 높이가 정해진다. 이 줄의 높이를 line-height 속성으로 키워주면 줄이 늘어남에 따라 자동으로 텍스트는 중앙에 위치하게 된다.
단점은 한 줄의 높이를 키우는 것이므로 두 줄을 쓰면 너무 아래로 줄이 내려가게 된다. 그래서 이 방법은 한줄만 쓴다는 전제하에 많이 사용한다.
또한 line-height는 %를 주면 동작하지 않으므로 px를 써서 적용시켜주어야 한다!!
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
댓글남기기