1. 학습내용

계속해서 반응형 레이아웃으로 예제를 진행했다.

html{
   font-family: "Open Sana", sans-serif;
   /* background-image: url("./images/img5.jpg");
   background-repeat: no-repeat;
   background-position: center center; */
   /* background-position: x-position y-position */
   /* :: left, center, right, %  :: top, center, bottom, % */
   background: url("./images/img5.jpg") no-repeat center fixed;
   background-size: cover;
   /* background-attachment: fixed; */
}

백그라운드 이미지를 위치 시키는 걸 좀더 자세하게 했다.
한 태그 (backgroug)에 위치나 이미지 저장소 등을 적어줄 수 있지만, 전체 감싸는 공간에 이미지를 덮기 위한 사이즈는 따로 적어주어야 한다.
background-position은 x축, y축 대로 이미지를 위치시키는 태그이다.

이어서 블로그를 주제로 반응형 웹페이지 예제를 실습했다.

img{border-style: none; vertical-align: bottom;}

vertical-align은 단순 수직정렬이라고 볼수도 있지만 구글링하다보니 몇가지 주의사항도 있어 아래에 정리했다.
vertical-align은 오로지 inline과 table-cell 엘리먼트에만 적용된다. block level 엘리먼트에 사용할 수 없다.
요소 자체만을 정렬하고, 내용에는 영향을 미치지 않는다.
하지만, table cell에 적용될 때는 영향을 미친다.

대부분 부모 요소에 상대적으로 적용된다.
출처: https://aboooks.tistory.com/171

2. 어려웠던 점 및 해결방안

counter-increment: list;

처음보는 것들 위주로 정리해 보았다. 위의 counter-increment: list;는 가상선택자에 들어가는 'content'에 넣을 요소이름을 임의로 작성해 목록의 리스트 스타일을 따로 바꿔주는 것을 말한다.

article ol li{
   counter-increment: list;
}

article ol li:before{
   content: counter(list);
   color: #93d9d0;
   display: inline-block;
   margin-right: 8px;
}

만약 일련번호로 붙이고 싶다면, 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정한다.
출처: https://www.codingfactory.net/10799

article blockquote:before{
   content: '\201C';
   top: 2.5rem;
   left: 0;
}

인용문앞에 들어가는 따옴표를 추가할 수 있는 태그는 html에서 'blockquote'이고 모양을 다르게 하려면 'content'에서 바꿔줄 수 있다.

.post-img{
   width: 100%;
   height: 260px;
   object-fit: cover; /*이미지가 정해진 공간에 가려지더라도 딱 맞게 들어갈 수 있게 함*/
   border-radius: 40% 70% 50% 30%/50%;
}

border-radius에 대해 각 모서리를 둥글게 한다는 건 알고 있었지만, 기본 문법을 정확히 인지하지 못해, 강의 시간때 여쭤봤었다. 원을 퍼센트로 나누는건 이해 했지만 왜 나누는 기호가 들어가는 지 알수 없었는데, 검색해보니 수치를 나누는게 아닌 x,y 값을 나눠 적는다는 의미였다.

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

이미지 방향대로 둥글게 만들 수 있다.
출처: https://www.codingfactory.net/10957

3. 학습소감

조금씩 배열이라던가, 반응형 레이아웃에 익숙해져 가는것 같다. 아직 CSS 스타일에 생소한 것들이 나오긴 하지만 따로 알아보니 해낼 수 있을거란 생각이 들었다.
다음 시간에는 좀 더 CSS를 쉽게 작성 하는 법을 배운다고 하니 기대가 된다.