◼︎ 오늘 학습한 내용
4. 레이아웃
6) z-index
지난번에 박스의 x축과 y축을 이동해서 위치를 바꾸는 법을 배웠다면, z-index는 말 그대로 z축을 이동시키는 것이라 볼 수 있다. z-index가 클수록 상단으로 올라오므로, 두 개 이상의 개체가 겹쳐서 내가 보여주고 싶은 개체가 뒤로 가려졌을 경우 z-index 값을 더 높게 잡으면 해결!7) float과 clear
내가 제일 어려워하는 float... 개념만 보면 참 쉬운데, 여러 개체로 작업하다 보면 원하는대로 움직이기가 너무 힘들다 ｡•́︿•̀｡
● float과 함께 사용해야하는 개념 clear!
- float은 같은 선상에 박스들을 배치하는 기능을 켜고자 할때 사용한다.
- clear은 반대로 그 기능을 꺼줄때 사용! float을 마지막으로 사용한 태그 다음 태그 안에 clear을 사용하면 된다.
● float 사용시 주의할 점!
- 창 크기를 조절하면서 레이아웃이 틀어질 수 있다 (개체가 겹치는 경우 하단으로 밀리면서 틀어짐)
- 그래서 이런 상황을 방지하기 위해서는, float을 사용할 영역의 크기가 가변값이면 안됨!8) overflow
● 박스 크기보다 그 안에 텍스트가 차지하는 영역이 넓을 경우 사용!
- overflow: hidden -> 영역을 벗어나는 오브젝트들이 그냥 가려짐
- overflow-x / overflow-y: scroll -> 스크롤하며 가려진 텍스트 보는 것 가능해짐
Tip)
overflow와 float을 결합해서 사용하면 자식의 높이값을 부모가 인식하도록 만들 수 있다!9) flex
flex는 아이템의 부모 안쪽에 넣어준다.
ex) display: flex;
자식들이 모드 x축으로, 왼쪽에서부터 정렬되는 결과를 볼 수 있음!
flex-direction을 통해 정렬 방향도 바꿔줄 수 있음
ex) row(기본값), column, row-reverse, column-reverse
flex-wrap: nowrap -> 아이템들이 컨테이너의 사이즈를 초과하는 경우 자동으로 컨테이너의 사이즈에 맞게 조정해줌(아이템 사이즈 변경)
flex-wrap: wrap -> 자동으로 줄바꿈 현상(아이템 사이즈 변경하지 않음)
flex-flow -> direction과 wrap을 한번에 지정
ex) flex-flow: row wrap;
justify-content -> flex로 정렬되는 개체들의 위치 결정
ex) flex-start(기본값), flex-end,
center, space-between, space-around
justify-content: space-between;
align-items: flex-start; 등과 같이 사용 가능
flex 종류 너무 많아! 포기하고싶어!
-> Google에 검색하면 다 나옵니다!!!
*** flexbox.help 활용하기 ***10) 중앙정렬 하는 방법
x축 중앙정렬, y축 중앙정렬, x&y축 모두 충족하는 중앙정렬....
구글링하면 공식이 다 나온다......ㅎ11) 실습 : 기본 레이아웃
오늘은 실습으로 그동안 배운 것들을 활용해서 네이버 메인에 있는 기사 썸네일?부분이랑 카카오톡 친구목록 만드는 연습을 했다.
사실 오늘은 실습만 하고 나머지는 어제 한 부분들인데, 어제 개발일지를 안썼으니까(۶•̀ᴗ•́)۶◼︎ 어려웠던 점 & 해결못한 것들
위 실습으로 만든 캡쳐본을 보면 알겠지만, 내가 만든 페이지들은 항상 폰트의 디폴트가 세리프이다... 왜지? 강사님도 맥북 사용하시던데 산세리프여서 혼란스럽다@@
덕분에 똑~같이 만들어도 폰트 크기나 높이 같은게 달라서 조금씩 다른 결과나 나오는게 너무너무 거슬린다. 빨리 다양한 폰트 스타일 적용하는 법을 배우고싶다!◼︎ 해결방법
<p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">
내가 넣고싶은 텍스트
</p>
사실 이런식으로 폰트를 바꿔주면 되긴 하는데... 디폴트가 왜 강사님이랑 다르게 세리프인지는 알아내지 못했다.◼︎ 소감
하루에 나가는 진도가 많은 양은 아니라서, 차근차근 공부할 수 있어서 좋다. 그렇다고 시간이 남아돌 정도로 적은 양은 아니고.. 꼼꼼하게 이것저것 테스트해볼 여유가 있는 정도?
이렇게 하나씩 공부하다보면 내가 정말 극혐^^해하는 웹프와도 친해질 수 있을 것만 같다ㅎㅎㅎㅎㅎ
오늘도 열공〆(´ω`●)ゞ!