✔ TODAY
주말동안 공부계획과 방향 그리고 세부목표를 삼고 힘차게 시작할려고 했지만...자연의 섭리로 컨디션이 무너져서 강의내용도 겨우 따라갔다.ㅜ 오늘은 css layout 2번째 수업이로 주로 정렬에 관해 수업하였다.
✔ 학습한 내용
z-index
z축에 여향을 미치는 속성
형제관계에서 3차원의 fide,absolute 사용하면 레이어가 겹치는 현상이 일어난다.
레이어를 위로 올리고 싶은 경우.
- z축인텍스 사용.
- z측의 높이에 영형을 미치는 영향 숫자값만 넣으면 된다.(단위는 생략)
- 더높은 값이 위로 올라온다.
- z축의 위치를 조정할 수 있다.
💥 주의점
'z축이 있다.'는 뜻은 3차원적인 특징포지션 속성값에서만 적용이 가능하다는 뜻이다.
.z-one{position: absolute;
width: 200px;
height: 400px;
background-color: yellow;}
.z-two{width: 200px;
height: 300px;
background-color: blue;}.z-one{width: 200px;
height: 400px;
background-color: yellow;}
.z-two{position: absolute;
width: 200px;
height: 300px;
background-color: blue;}첫 번째 형제가 position: absolute; 두 번째 형제가 static이면 레이어가 겹치는 형상이 생긴다.
첫번째 static, 두 번째가 position: absolute;이면 레이어가 안겹친다.
즉, 첫 번째 형제가 2,3차원인지 따라 레이어가 겹칠지 안겹칠지 정해진다.
💖tip
큰공간을 만들때 주로 2차원을 사용. 작은 구역은 2.3차원사용
큰섹션은 2차원을 사용- 이유 레이어겹치는 형상을 방지학 위함
(둘다 3차원)
float
선택한 영역을 앞선 방법(지난주 금요일 학습) 이외의 방법으로 x축으로 정렬하는 방법.
특정 오브젝트 브러우저 끝에 배치하는 효과.
.left-1{
float: left;
width: 100px;
height: 150px;
background-color: blue;}
.right-1{
float: right;
width: 100px;
height: 150px;
background-color: green;}공간을 만들때 사용하는 태그
header footer main section div
전부 다 block요소의 성격을 나타남
- 줄바꿈 현상이 일어나며 y축정렬
header{width: 100%;
height: 100px;
background-color: yellow;}
.left{width: 100px;
height: 200px;
background-color: pink;}
.center{width: 300px;
height: 200px;
background-color: blue;}
.right{width: 100px;
height: 200px;
background-color: green;}
footer{width: 100%;
height: 100px;
background-color: black;}플롯은 기본적으로 선택영역을 띄운다.
3차원적 특징을 일부 같게 만든다.
먼저 나오는 형제가 3차원일때 그 다음 형제의 레이어가 뒷쪽에 가는 출력이 나온다.(플롯도 그렇게 나옴)
float과 같이 기억해야되는 속성 clean
악어와 악어새와 같이 플룻을 시용했을떄 클리어가 따라나온다.
같은 선상의 박스들을 배치할때 사용한다. clean는 그 기능을 on/of한다.
플롯을 사용한 영역 다음 태그안에다가 넣어야 하한다. clear: both;는 양쪽 기능 모두를 끄겟다는 의미한다.
💥주의점
브러우저 폭을 줄이면 레이어가 틀어지게 된다.
플룻의 단점.
💖tip
플룻을 사용영역의 부모의 크기가 가변값이면 안된다. 고정값인 곳으로 사용해야 레이어 아웃이 틀어지기 않게 된다.
부모가 body . section으로 변경하는 경우,
고정되어 있는 레이어가 틀어지지 않는다.
고정값을 가진 부모를 가지고 있는 영역안에서 사용해야된다. 레이어가 틀어지는 현상을 방지할 수 있다.
- 고정값외, 가변값 사용 (px아닌 %사용) 영역자체가 가변값으로 됨으로 실시간을 리사이즈가 될 수 있다.
- 부모가 고정값이 아니더라도 상관이 없다.
- 섹션안에 넣을 필요가 없다.
- 공간의 크기 자체가 가변값.
💥주의점
1. 부모값이 자식값의 모든합의 float보다 크거나 같아야된다. 적으면 레이어가 틀어짐
2. float을 사용힌 영역은 그 영역의 높이값이 부모에게 영향을 주지 않는다.
3.float을 사용할때 포지션 static, relative 순수3차원간의 사용할 수 없다.
💖 실무팁
.left-2{float: left; width: 100px; height: 150px; background-color: yellow;} .right-2{float: right; width: 100px; height: 150px; background-color: blue;} footer{width: 100%; height: 100px; background-color: black;}html상에서는 어디서 어디까지 float인지 알 수 가 없음
그래서 실무적으로<div class="left-2"></div> <div class="right-2"></div> <div class="clearfix"></div> <footer></footer>div class="clearfix" ,
clearfix{clear: both;}css에는 위의 코드를 넣어서 float을 on/off하는 걸 구분한다.
💖실무팁2
사전에 오버플로우라는 개념을 알아야된다.overflow: hidden 영역에 벚어난 것을 숨김. 영역에 벚어난 것을 알고 싶음. overflow-y: scroll; overflow-x: scroll;overflow와 float을 결합하면 자식의 높이값을 부모가 인식할 수 있도록 할 수 있다.
flex
💖tip
클래스 2개 중 한 가지는 공간, 다른 한 가지는 부과적인css속성을 부여할 수 있다.
2개 부과적인css속성 서로 다른 부과적인css적용하고자 사용할 수 있음.
효과적 효율적 레이어아웃작업
보다 수얼하게 엡사이트 작업을 할때 사용한다.
float보다는 제약사항이 많이 줄어드는 장점이 있다.
display: flex;
부모에게 부여,자식에게 x축 왼부터 정렬이 됨flex-direction 정렬방향과 순서
flex-wrap: nowrap;
부모의 영역을 벚어나지않고 그 안의 박스 부모의 영역에 맞게 리사이즈 .
소수점의 크기가 나타나게 됨.
flex-wrap: wrap;
자식들의 영역이 크면 자동 줄바꿈현상이일어남
위의 레이어아웃 망가지는 거랑 같음.
flex-flow:
디렉션과 뤱을 동시에 사용할때 사용하는것.
x축 정렬작업
justify-content: flex-start;왼쪽부터 정렬
justify-content: flex-end; 오른쪽
justify-content: flex-center; 가운데
justify-content: space-between;
오브젝트사이에 동일한 간격.
justify-content: space-around;
안과 밖에 동일한 간격.y축 정렬작업
align-items: flex-start; 가장 윗쪽에 배치
align-items: flex-end; 가장 아래에 배치
align-items: center; 중앙에 배치
align-items: baseline; 가장 밑에 라인에 맞춰서 정렬그외 관련 여러 설정은 아래의 링크참조
flexbox help
중앙정렬하는 방법
1.margin: 0 auto;
margon 상하 좌우 수치입력
2.position: relative;
left: 50%;
왼쪽면에서 50%라 위에보다 살짝 오른쪽으로 더감.
margin-left: -150px; 위의 문제 보안.
2번 방법의 단점.
공간의 크가가 변경된 경우,
마진왼도 수정 즉 2번 수정해야된다.그외 정렬과 관련팁
위의 내용을 코드로 정리한 것은 아래 링크에 걸어둔다.
layout2.html
layout2.css
✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들
- 48가지의 position를 아직 확실히 숙지하지 않아서 그런지 수업내용을 잘 따라가지 못 했다.
- 각 정렬법의 장,단점 개념에 혼란이 오기 시작했다.
- 코드 작성시 오타가 아직도 발견된다.
✔ 해결방법작성
- 계속해서 position에 대해 학습
- 정렬법에 관해 정리학습을 해야한다.
- 오타가 일어나는 유형을 분류하여 숙지하니, 오타률이 많이 줄어들었다.
✔ 학습 소감
오늘 ....자연의 섭리로... 공부를 너무 못했다... 진도도..실습도... 심화,보충공부도 미루어져서 너무 마음이 초초하다....ㅜ
