1.학습한 내용

1)이미지 수정

이전에는 화면을 줄였을때 더보기 버튼의 이미지가 보더를 넘어가는 상태가 나타났다.

이를 해결하기 위해서 인터넷을 찾아본 결과
img를 싸고있는 label 태그에 arrow-box 클래스를 추가한후

.arrow-box{
    width:100%;
    position:relative;
    overflow:hidden;   
    padding-top:50%;
}
.arrow-box img{
     position:absolute; 
     top:0;
    left:0;
    bottom:0;
    right:0; 
    margin:auto;
    height:50%;
}

해당 css를 적용시키는 것으로

화면을 줄여도 보더의 크기에 맞게 이미지가 조절되도록 바뀌게 되었다.

2)CSS 세부조정

지금까지 CSS를 작업하면서
Max-width 를 기준으로 미디어쿼리 반응형을 작성하였는데.

Min-width 를 사용하여 일정 너비 이상일때의 미디어쿼리 반응형을 작성하였던 것을.
기본적인 CSS 를 min-width 로 설정한 값을 주고,
기존에 CSS로 설정 하였던 값을, Max-width를 이용하여 적용하였다.

또한 팀원들과 상의를 통하여
글씨의 크기를 특정 너비 구간별로 지정하여서 미디어쿼리를 적용하게 되었다.

현재 기준은
1024px 이상일때 타이틀 40px, 서브타이틀 18px.
1024px 이하일때 타이틀 35px, 서브타이틀 15px.
430px 이하일때 타이틀 28px, 서브타이틀 14px 이다.

2.학습내용 중 어려웠던 점

너비에 따른 반응형을 미디어쿼리로 작성을 하였을때,
어떤 부분에서는 작동을 하는데 갑자기 표현이 되지않고 사라지는 현상을 겪게되었다.

3.해결방법

이 부분의 경우에는
css의 스타일코드를 작성을 할때,
X라는 class를 가지는 p 라는 태그가 있을때.
어떤 부분에서는 .X 라는 클래스에 작성을 하였고,
어떤 부분에서는 p 라는 태그에 작성을 하여서 이 두가지가 충돌이 일어나면서,
기존에는

p{ height: 21vw;}

라고 되어있던 부분이
.X{ height: 0;}
라는 부분에 덮어씌워지게 되어서 발생한 문제였다.
해당 부분의 경우를 해결하면서 이 외에도 태그와 클래스의 선택자를 적절하게 사용하였는지를 확인하게 되었다.

4.학습소감

오늘은 세부적인 CSS 를 작성을 하면서, 시안을 다시 확인하게 되었는데.

이전까지는 line-height 설정이 없었다고 생각을 하였는데.

이 화면에서 29 라고 적혀있는 위아래 화살표 옆의 줄들이 있는 부분이 line-height 부분이라는것을 새롭게 알게 되었으며,
font-weight의 경우 bold가 700, medium이 500, 기본이 400 이라는것을 알게 되었다.
해당 부분에 대해서는 작성을 할때 각각 입력을 해보아서 시각적으로만 확인했었던 것에 비해서, 시안에 제대로 설정을 해주었는데 보지 못했던 점들을 다시금 발견하게 되었다.

이러한 정보들을 읽는 것에도 더 익숙해지게 되어야 이 후에 작성을 할때 나중에 추가로 수정을 했을 때, 시간 낭비와 오류가 발생하는 것을 최소화 할수있을것이다.