2021.3.11(Thu) - Def

box-sizing: border-box; - explorer 에선 작동이 안됨,,,,, > 적용하는 방법도 있음

 

 

문제점 A:

con_item> a

부분에서 바로가기 폰트 크기 조절이 안됨

폰트를 줄이면 border도 같이 줄어들었음

해결 A:

border자체에게 width랑 height를 부여해서 폰트 크기에 따라가지 않게 해준다

 

>> 이것만 하면 되는게 아니라 a에 line-height를 줘서 text랑 박스 사이에 간격을 만들어줘야지 박스가 텍스트 크기를

따라가지 않는다. 

 

+ 폰트 가운데로 보낼때는 use text-align: center; rather than padding > why? 

>> tried through padding

.con_item > a{
    display: block;
    width: 100px;
    height: 30px;
    margin-top: 40px;
    background: #81b4f2;
    border-radius: 15px;
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    padding: 1%;
}

 

RESULT

 

 

 

이걸 text-align: center; 처럼 만드려면 padding을 왼쪽 오른쪽으로 다 넣어야 한다.

결론? >> 그냥 text-align써라^^

 

 

 

 

 

 

문제점 B:

.con_item > h2 > span

에서 글이 옆으로 붙음

해결 B:

obviously use {display: block;} 하나의 블럭이 한줄을 차지할 수 있게

 

 

 

 

문제점 C:

마지막에 notice 1~4에 이미지 넣었는데 글자 레이아웃은 잘 되어있었지만 하나 빼고 나머지 notice들에 format이 적용이 안됨

해결 C:

a. browser에서 관리자 도구 사용해서 source에 css가 제대로 적용 되었는지 확인함. / 어떤 css가 적용이 안 되었는지도 확인함 >> 문제 원인 알기

b. .con_item > a만 적용이 되었다는 걸 알았다. 

c. format css가 .com_notice1 안에 들어가 있어서 notice1에서만 적용이 된거였다.

d. .com_notice1을 .com_item(모든 notice들이 가지고 있는 속성(?))으로 바꾸니 해결!

 

>>다른 해결법: .con_item 대신 .con_notice > ul > li 도 사용 가능!

>> 뭐가 다른건지 모르겠음 item이 좀 더 작은 단위 아닌가? 뭘 사용하든 결론은 같았음

>> 아니었음!! li든 con_item이든 결국 li에게 con_itme이라는 이름을 사용한 거!!

 

 

 

 

문제점 D:

화면을 확장 축소할때 깨짐 >> 레이아웃이 움직임

해결 D:

a. #visual에서 margin: 0 auto;를 사용해서 가운데로 정렬해주고 visual에 넣은 이미지 크기에 맞춰서 width(이번 경우는 1920px)를 설정해준다.

바꾸기 전

#visual{
    height: 500px;
}

RESULT

 

25% >> 이런식으로 옆으로 움직임

 

바꾼 뒤

#visual{
    height: 500px;
    margin: 0 auto;
    width: 1920px;
}

RESULT

같은 25% >> 가운데로 정렬되어있음

 

 

 

b. .con_notice> ul> li 에서 box-sizing: border-box를 사용해서 border이 기준이 되어 콘텐츠의 영역을 정하도록 한다.

바꾸기 전

.con_notice> ul> li{
    float:left;
    width: 39%;
    height:200px;
    padding:5%;
    border:1px solid #ececec;
}

RESULT

25%로 설정했을때 이런식으로 아래로 떨어짐

바꾼 뒤

.con_notice> ul> li{
    box-sizing: border-box;
    float:left;
    width: 50%;
    height:250px;
    padding:5%;
    border:1px solid #ececec;
}

RESULT

같은 25%에서 바르게 정렬됨

 

 

>>css에서 overflow-x/y를 이용해서 세로, 가로 축 스크롤을 조절해주고 (이번 경우에는 x: hidden; y:auto;로 설정)

 

 

 

문제점 E:

화면 확장 축소할때 아래 con_notice가 양 옆으로 움직임

해결 E: 

html에서 con_notice부분을 다 뮤트하고 (<!--->) css에서 container와 contents부분에 background 색을 부여해 문제를 살펴본다.

a. contents에서 30 px auto 0 auto;를 삭제하고 container에서 margin-top: 30px을 넣는다 >> 뭐가 다른거지>> 상관 없음

 

b. contents의 width는 항상 1200px로 height는 없어도 됨

     >> 숙제하다가 width 1200px로 잡는 걸 까먹었는데 margin: 0 auto; 때문에 확장 축소할때 contents가 같이 움직임

          width에 정확한 값을 정해줘야함!

 

c. .con_notice의 width가 부여되지 않았었음. 

>>내용에 맞는 width를 부여함으로써 페이지 맞게 조절해준다!

 

400px로 넣었을때

 .con_notice{
    width:400px;
 }

RESULT

 

박스 자체가 작아지면서 안에 이미지들이 깨짐

 

600px

 .con_notice{
    width:600px;
 }

RESULT

 

정상적으로 나옴