0306

sinsin·2022년 3월 5일
0

'css layout master class' 를 들으며 챌린지와 클론코딩을 진행하고 있다.







📝  NOTE

  • 글자를 세로로 작성하려면 writing-mode를 사용해야 한다.

  • placehold.it 말고 실제로 임시 이미지를 랜덤으로 넣고 싶은 경우 다음과 같이 작성

	<img src="http://source.unsplash.com/random/500x500 /">
	
	맨 뒤에 이미지 사이즈만 지정해주면 됨.

  • style.scss 파일 내에서 정의한 변수를 다른 extend나 mixin 파일에서 정의하지 않고 사용하면 오류 발생!

  • grid 요소에 gap을 사용하는 경우 최종 요소에 background color를 주고,
    그 상위 요소에 라인으로 보일 배경색과 gap을 지정해주어야 함.

	.container{
    	background-color: black; gap: 1px; /* 검정색 라인 */
        .box{
        	background-color: white; /* 흰색 블록 */
        }
    }

  • position: absolute 준 요소를 정가운데 위치하게 하려면 다음과 같이 작성
	.container{ 
	    position: relative; 
        .box{
        	position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }
	}








💬  Comment

진짜 오랜만에 쓰는 것 같다.
뭔가 나만의 프로젝트를 하고 있거나 한 것은 아니라서 로그를 쓸 필요성을 잘 느끼지 못했는데,
어제 찾아본 걸 오늘 또 찾아보고 있는 나를 발견하고(...) 매일매일 알게된 것은 아무리 사소한 것이라도 잘 적어둬야겠다고 생각했다.
예전에 학원 다니면서 한 사이트 클론코딩하는 데 며칠씩 걸렸던 거 생각하면 많이 발전했다. 😊
시간을 좀더 단축하기 위해서는 무턱대고 html부터 짜기보다 사이트를 전체적으로 둘러보고,
어떤 식으로 구조를 짰는지, 어떤 부분들을 모듈화하여 깔끔하고 효율적인 코드를 짤 수 있을지 생각하며 코딩을 해야겠다.








⚪️  to go ・・・

  • besthorrorscenes.com
  • paint-box.com
  • 10x19.co
  • www.z-o-o.fr
  • schwartzmedia.com.au

0개의 댓글