내용

-공간에 대한 크기를 이미지의 크기와 똑같이 설정해줘야한다.
현재 이 로고는 데코용이기 때문에 background-image로 설정했다.
background-image는 기본적으로 반복하는 성질을 가지고 있다.
웹사이트 제작시에 이미지의 사이즈는 보통 짝수이거나 5로 나누어떨어지는 크기이다. 레이아웃작업할 때 잘 맞아야하니까.

body {
overflow-x: hidden;
} : x축으로 가는 것을 웹브라우저 넘어가게되면 숨기겠다. / 가로 스크롤 생기는 것을 방지
각각의 이미지들은 width는 100%, height는 이미지 속성들어가서 높이값으로 설정해준다.
url 적는 방법: 현재 있는 문서기준에서 적기. 그후에는 폴더 순서대로 적기.
../ : 현재 폴더에서 바깥쪽으로 나옴.

left: 50%; -> 노란박스가 오른쪽 끝에 붙게됨.
margin-left: -380px; -> 그 박스를 왼쪽으로 노란박스(760px)의 반절만큼 옮김.
중앙으로 오게됨. - 항상 정 가운데 오게됨.
#intro .introWrap .logo {
position: absolute;
absolute를 잡는 이유는, 현재 로고의 상태가 레이어들이 겹쳐있는 상태기 때문에 3차원속성을 갖고 있다. 즉, z축이 존재한다는 것. 그래서 3차원 속성인 absolute를 사용했다.
left: 50% 속성을 사용할 수 있는 것은 3차원 속성이기 때문에 사용이 가능하다.
자식에 absolute; 사용해야한다면 부모에는 relative 있는게 안전하다.
부모의 position 상태에 따라서, 자식의 좌표기준점이 달라질 수가 있다.

구름은 div 태그로 감싸고 있고, div 태그는 기본적으로 block요소를 갖고 있다. block은 y축으로 정렬하는 성질이다. 그래서 구름이 y축으로 정렬하고 있는 모습.
구름을 브라우저상에서 좌우로 배치하려고 한다.
만약 float 성질을 사용하게 되면 레이아웃이 틀어지게 된다. 이것이 float을 사용할 때 주의점이었다.

이미지보다 브라우저의 크기가 크기 때문에 반복되는 효과 때문에 잠자리가 반복된다. 이럴경우에는 no repeat 하게되면 반복되지 않는다. 그런데 이렇게 하면, 브라우저의 반절만 채우게되고 나머지 반절은 비어버리게 된다. 백그라운드 이미지는 기본적으로 반복적효과가 있기 때문에 작은 이미지로도 (반복해서) 배경을 채울 수가 있다.

모바일버전 완성!

  <div class="leftRice1"></div>
        <div class="farmer"></div>
        <div class="rightRice1"></div>

        <div class="farmSpeechWrap">
            <img src="img/farm/farm1/farmspeech.png" align="우리쌀 점토">

            <p class="farmspeech">
                식재료만 넣은 안전한<br>
                우리쌀 점토 키즈가오는<br>
                우리 쌀을 사용하여 만들어요.<br>
                화학물질을 사용하지 않고,<br>
                식재료를 사용해서 만든<br>
                안전한 제품이랍니다.
            </p>
        </div>

위에 형제들이 전부 3차원(absolute)라서 farmSpeechWrap부분은 레이어에서 가장 윗부분에 위치하게 된다.

text- align : 글자나 inline요소에만 영향을 미친다.

이 경우는 float 사용 가능. 레이아웃이 틀어질일이 없으니까~

학습한 내용 중 어려웠던 점 또는 해결못한 것들

중간에 오타를 계속 작성해서 헤맸었음..

해결방법 작성

들었던 부분 다시 처음부터 들었음..

학습 소감

어렵습니다!