1. 학습내용

어제 덜한 블로그 레이아웃 실습을 이어서 진행했다.

.side-box:before{
   display: block;
   width: 2rem; /*16px * 2 (rem은상대적인 크기임 상대적인 값이 없으면 기본값은 160px)*/
   height: 2rem;
   text-align: center;
   background-color: #fff;
   position: absolute;
   top: -1rem;
   left: 0;
   right: 0;
   margin: auto;
}

rem개념이 조금 생소해 따로 찾아보았다.
수업중에 rem은 상위요소의 값의 두배로 인식해서, 만약 상위요소(부모)가 값이 없다면 html기본 값인 16px * 2 가 된다.

.newsletter-form input[type='email']{
   border: 2px solid #ccc;
   border-radius: 10px 0 0 10px;
   background-color: #fff;
   padding: 1rem;
   width: 75%;
}

만약 특정 태그 안에 input태그가 여러개고 타입만 다르다면 위와 같이 적어 따로 스타일을 적용 시켜 줄수 있다.

input 타입이 검색기능 이라면 안의 글인 'placeholder'도 스타일을 바꿀 수 있다.

.newsletter-form input[type='email']::placeholder{
   color: #ccc;
}

안에 도형이 있으면 옆에 붙은 글이 도형의 모양에 맞춰 세로 정렬이 되도록 하는 것도 있었다.

.post-thumb{
      margin: 0 1rem 1rem 0;
      shape-outside: circle(); /*모양을 정해주는 함수-안에 도형이 있다면 그걸 타고 글이 흐름*/
      float: left;
   }

calc 함수에 대한 것도 배웠다. 이건 크기를 정할 때 사용한다. 즉 알아서 계산식을 적으면 결과값을 도출해 적용해준다. 계산 단위가 달라도 사용 가능하다.

또한 커스텀 속성(변수)와 조합이 된다.

위의 예시에는 --number라는 변수를 지정해 500이란 값을 넣었고, 그 변수를 calc에 넣어서 계산 식을 만든 모습이다.

여러번의 반복작업이 필요할때 주로 변수를 쓴다. 대신 {}안에 쓴 변수는 다른 태그안에 적용이 안된다. 그래서 이걸 해결하기 위해 :root라고 쓰고, {}에 변수를 넣으면 어느 태그에서든 동일한 변수를 쓸 수 있다.

:root는 대소문자를 구분하고, 속성명을 넣을 수는 없으며, 커스텀 속성을 호출한 뒤 단위(px,rem)를 덧붙이면 적용되지 않는다.

정 단위를 붙여주고 싶다면 *1(단위) 하면 적용이 된다.

CSS스타일시트를 좀더 계층적으로 편하게 적을 수 있는 Sass도 잠깐 배웠다.
Sass장점
셀렉터 부모 자식 관계를 네스트로 구현(계층구조로)
변수로 값 다시 사용하기 ($변수:스타일<-이런 식으로 적용 가능)
파일을 분할해서 관리

가 가능하다.

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

  .popular-posts{
      position: sticky;
      top: 1rem;
   }

position값을 거의 알고 있다고 생각했는데, 새로운게 나왔다. 'sticky'를 쓰면 스크롤 시 스타일을 적용한 공간 상단에 딱 붙게 스크롤이 된다고 설명을 들었지만 잘 이해가 안되서 따로 구글링을 해 보았다.

스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성.
IE 11 브라우저와 안드로이드 4.x 이하 버전에서 지원하지 않는다.

출처: https://tech.lezhin.com/2019/03/20/css-sticky

밑에도 새로운 개념이라 따로 정리했다.
mixin

@mixin circle($size){
width:$size;
height:$size;
border-radius: 50%;
}

div{
@mixin circle(180px)}

속성 값이 들어가는 부분에 변수로 처리하는 예제이다. $size에 값을 받아와서 쓰는 방식이다.
저 변수를 여러개로 쓸수 있다.

3. 학습소감

예전에 CSS를 쓸때, 애니메이션을 구글링 하면서, Sass에 대한것도 나와서 생소했는데 이번 기회를 통해 제대로 배울 수 있어 좋았다. 변수도 들어가면서 좀 어렵긴 했는데, 자바스크립트의 변수와 비슷한 개념이라 생각하니 좀더 생각하기 수월했다.