💻 학습내용
💛 intro
overflow-x: hidden;
해당 브라우저의 x축을 벗어나는 외곽의 영역에 있는
브라우저 크기보다 큰 오브젝트는 전부 숨김처리를 하겠다는 뜻
가로스크롤이 생기는 것을 방지할 수 있음
background-color: transparent;
배경화면을 투명하게 만드는 속성값
position: relative;
중앙정렬을 하기 위해서left:50%;를 사용하려면
3차원 position영역에서만 사용이 가능
부모의 포지션 상태에 따라서 3차원적인 특징이 적용된 자식의 top,left,right,bottom 좌표 기준점이 달라 질 수 있기 때문에 top,left,right,bottom 으로 배치하려면 좌표기준점을 부모로 잡고 싶으면
부모 포지션을 relative로 설정해줘야 한다.
[x축 중앙 정렬 하는 법]
left:50% ;
margin-left: -380px
[logo positon: absolute;]
: 레이어층이 존재한다는 이야기 z축이 존재한다는 뜻
z-index: 100; -> 일종의 기준점
기준점 z-index보다 값이 더 크다면 logo위로 배치, 작다면 뒤에 배치됨
position이 absolute면z-index: 0이 기본값이다.
공간안에 백그라운드 이미지를 넣을 때 백그라운드 이미지는 이미지를 반복하면서 메꾸려고 하는 속성이 있다.
그렇기 때문에 이미지 작업을 할 때는 이미지의 크기에 맞춰서 공간의 크기를 설정하는 것이 좋다. 이 때, 배경에 깔리는 이미지는 다르게 처리해줘야 함
[cloud Wrap]
div 태그는 block 속성을 갖고 있기 때문에 y축 정렬로 나타난다.
구름을 좌우배치를 하려면 float을 사용할 수 있는데 이 때,
브라우저의 크기보다 양쪽 float을 합한 width값이 더 크면 브라우저의 크기에 따라 레이어가 틀어지게 되면서 문제가 생기니 float은 사용하지 못한다.
이럴 때는 자식을 absolute로 포지션을 설정하고 left 0 right 0 값을 준다
[dragonfly]
top 800px을 주면 분홍색 부모 부분을 기준으로 800px 내려오게 된다.
자식요소에 absolute를 쓴다면 부모를 relative로 작성해주는게 안전하다.
[로고를 밑으로 내리는 방법]
1. #intro 에 padding-top 100px을 준다
이 때 주의점은 현재 인트로의 전체 높이값은 공백에 의해서 1700으로 커짐 또 공백이 들어가면서 컨텐츠들이 100px씩 밀리게 됨 결론적으로 레이어가 틀어지게 된다.
2. margin-top은 마진병합현상 때문에 사용하지 못함
3. top을 사용하면 핑크색 부분 위치는 원래 위치 그대로 보존되고 노란색 부분이 핑크색 뒷 부분으로 들어가게 된다. positon:relative를 쓰면 레이아웃이 틀어질 일이 발생하지 않는다. 둘다 3차원일 경우에는 나중에 작성된 3차원이 z값이 더 크다. 그래서 핑크색 뒤로 노란색이 들어가게 됨.
[실무팁]
디자인 작업을 해야한다면 그 때 이미지의 크기는 숫자 5로 떨어지거나 짝수로 떨어져야함.
animation.css
1000ms = 1s
keyframes left를 사용할 수 있는것은 positon값에 영향을 받기 때문에 가능하다
mobile.css
우리가 left 50%라고 명시하지 않아도 미디어쿼리 밖에서 다 적용이 됨
위드 189px 에 맞춰서 margin-left도 width값 절반을 넣어줘야함 중앙정렬을 위해서
💛 Farm1
그라데이션은 레이어 작업이 힘들기 때문에 안 넣는게 좋다.
text-align : 인라인요소, 글자 중앙정렬 할 때 사용되는 속성
이미지지만 인라인하이퍼블럭 요소를 갖고 있기 때문에 텍스트 얼라인이 먹힘.
💛 Farm2
float : 어차피 만나기도 전에 모바일로 변경될거기 때문에 float를 사용해도 괜찮음
작업하기 전에 이미지를 먼저 보는 것이 아주 중요하다
📝 마무리
지금까지 배운 html과 css로 사이트를 카피하면서 만드는 실습을 했다.
기본적으로 인트로와 본문 부분을 나누고 본문을 세부적으로 나눠서 레이아웃 틀을 먼저 만들었다.
header로 intro 큰틀을 묶고 그 안에서 div로 공간을 나눴다.
intro 부분을 따라하면서 farm1, farm2 쭉쭉 하니 세부적으로 배치하는 건 다르지만 큰 틀은 비슷해서 따라하는게 재미있었다.
이미지의 크기에 맞춰서 이미지가 들어갈 공간의 크기 (width,height)를 설정해 줘야 한다는걸 배웠다.
부모 position은 relative로 자식 position은 absolute를 사용하는게 편하다는 점도 알게 되었다.
css에서 class를 호출할 때 .class명 사이에 공백이 있으면 안된다.
오탈자가 없는데도 불구하고 index.html에 적용이 안되길래 살펴보니 .class명 사이에 공백이 존재했었다.
