Archived (18) 썸네일형 리스트형 그래픽스 자료 그래픽스 강의 http://www.kocw.net/home/search/kemView.do?kemId=1268467 컴퓨터그래픽스 www.kocw.net 렌더링 윤성의 교수님 자료 http://cg-korea.org/index.php?page=view&pg=1&idx=55&hCode=BOARD&bo_idx=1&sfl=&stx= 한국컴퓨터그래픽스학회 KOREA Computer Graphics Society 한국컴퓨터그래픽스학회 홈페이지를 방문해주셔서 감사합니다. cg-korea.org 최광진 박사님 인터뷰 자료 https://m.blog.naver.com/PostView.nhn?blogId=kor_fw&logNo=50156016939&proxyReferer=https%3A%2F%2Fwww.google.co.. 그래픽스 책 목록 홍정모 교수님 유튜브 댓글에서 추천된 책 Interactive Computer Graphics: A Top-Down Approach Using OpenGL (5th Edition) 구현해볼 반응형 사이트 예시 https://www.bludot.com/splash-coat-rack.html Splash Coat Rack Powder-coated steel and solid walnut stand at the ready to relieve you of jackets, hats, scarves and bags in style. Dress it up or keep it naked. Either way, Splash modern coat rack remains easy on the eyes. Who says utility can’t be attractive? Available www.bludot.com 여기꺼 구현해보기. nth child의 의미 li div div div li div div div 가 있다고 할때, li: first-child는 div 이다. li, 너의 첫번째 자식 녀석을 내놓아라! 그런 의미. li들 중 첫번째를 내놓아라고 하는게 아니다. 아래의 예시를 보고나니 아주 명확해짐! (내 삽질들 안녕) 예시 https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstchild Tryit Editor v3.6 p:first-child { background-color: yellow; } This paragraph is the first child of its parent (body). Welcome to My Homepage This paragraph is not the.. list의 첫번째 child 빼고 hover effect 주고싶을 경우 (옳은 예) &:hover:not(:first-child) { scale } (틀린 예: 첫번째까지 선택됨) &:hover:not(first-child) { scale } 와 같이 :를 빼먹을 경우 안된다. 근데 not operator는 원래 not(first-child)와 같이 사용되는데 왜 :가 이 경우에 필요한지는 모르겠다. color-mod-function / system-ui / nesting rules / css grid kiss color-mod CSS에서 하나하나 색깔값 주기보다는 불투명도 살짝 조절해서 색깔 변동하고 싶다면? color-mod-function! 개발환경 준비 1. 설치 npm i postcss-color-mod-function 2. package.json 수정 "postcss": { "plugins": { "postcss-preset-env": { "stage": 0 }, "postcss-color-mod-function": {} } color-mod 텍스트의 색깔 및 투명도 조절. CSS4 준비 과정에서 deprecated 되어서, 따로 설치해줘야함 유의 h1 { color: color-mod(#0984e3); } h1:hover { color: color-mod(#0984e3 alpha(10%)); } g.. Grid 왜 Flexbox만으로는 부족했을까? Why grid? ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ 이렇게 오류가 생겨버리니까. 우리가 원한건 ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ 이건데! .father { display: grid; grid-template-columns: 30px 50px; // 첫번째 column width는 30px, 두번째 칼럼은 50px grid-template-rows: 30px 12px; // // 첫번째 row height는 30px, 두번째 row는 50px grid-gap: 10px } .box { background-color: pink; } 1 2 3 4 5 grid-auto-flow 추가적인 child component가 더해지는 방향. 기본적으로 row임. 예시 grid-auto-flow: r.. Flexbox 왜 Flexbox를 써야하는가? 이전의 inline-box 를 쓸 경우 margin 일일히 숫자 적어줘야하는데, 이게 찾아내기도 어렵고, 찾아내도 아이폰등 다양한 기기에서는 또 깨져버린다. 아래의 예시에서 볼 수 있듯이, 브라우저 사이즈에 따라 width가 300px 보다 작아지게 될 경우, flexBox가 비율에 맞게 자동으로 width 수정해준다. 개꿀! 사용시 유의사항 Father에게 적용한 예시는 children 컴포넌트에 영향을 미친다! 예시 CSS .father { display: flex; justify-content: space-between; //다른 옵션: flex-start, flex-end align-items: flex-end; } .box { width: 300px; height.. 이전 1 2 3 다음
