FrontEnd49 모던 웹 디자인의 정석(1장) 1장 웹 페이지의 단 구조. 1-2 박스 가로 정렬 clearfix(클리어픽스)는 플로팅 박스가 뒤에 있는 박스의 레이아웃에 영향을 주지 않게 만드는 기술입니다. 다시 말하자면 특정 박스 C에 clearfix를 적용하면, 그 앞에 있던 박스들의 float 속성을 모두 취소합니다. 바로 앞에 있던 것 하나만 취소하는게 아니라 앞서있는 모든 것을 취소합니다. 그림을 예로 들면 다음과 같습니다. clearfix 값을 왼쪽, 오른쪽 각각 줬을 때를 비교해보면서 확인하겠습니다. box1, box2 가 각각 float:left, right 속성이 적용되어 있고 box4 는 box2 다음에 위치해있습니다. 만약 앞서 있는 것만 취소한다면 clear:right 속성을 준 것과 같으므로 다음과 같이 그려질 것입니다. c.. 2019. 11. 10. 코드스피츠 76-4(Transform 3D & SCSS & Compass) 목차 개요 전체적인 흐름 Post Process 개요 CSS 코드스피츠 4강 강의를 듣고, 내용을 복습하고 정리하는 차원에서 글을 작성하였습니다. 해당 강좌를 학습하시는 분들께도 도움이 되었으면 합니다. 전체적인 흐름 먼저 Post process 라는 추가적인 단계가 geometry, fragment 단계 외에도 존재하는 것을 배웁니다. 그리고 CSS 속성 중 transform 내에서 3D 속성을 줄 수 있는 perspective, perspective-origin, transform-style, transform-origin, backface-visibility 에 대해 배웁니다. 그리고 실습 예제로 드럼통을 만들어 봅니다. 3D를 구현하려면 2D 보다 더 많은 개념이 필요합니다. 특히 수학적인 개념이.. 2019. 11. 5. 코드스피츠 76-3 (CSSOM & Vendor Prefix)-2 Keyframes Keyframes에 대한 문법을 간략히 짚고 넘어가겠습니다. 이렇게 정의한 keyframes는 다음과 같이 사용할 수 있습니다. animation-name에 keyframes로 선언한 이름을 설정하면 사용할 수 있습니다. 다시 강의로 돌아가보겠습니다. from, to 는 keyframe-animation 셀렉터로 일반 DOM 셀럭터와 다릅니다. 문법에서 봤듯이 from, to, %만 사용할 수 있습니다. 그래서 DOM 셀렉터와 다른 방법으로 parsing을 합니다. 어떻게 이걸 객체화 시킬지 살펴보겠습니다. 일단 keyframes 속성은 기존에 우리가 CSS 속성을 담기위해 만들었던 Sheet 객체에 그대로 담긴 어려우므로 기존 Sheet 클래스에서 분기를 시켜줘야 합니다. select.. 2019. 10. 31. 코드스피츠 76-3 (CSSOM & Vendor Prefix) ** Vendor prefix 참고자료 (출처 : TCP School, 지구별 안내서) 벤더 프리픽스(vendor prefix)란? 크롬이나 익스플로러 같이 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다. 사용방법을 예를 통해서 조금 더 살펴보겠습니다 ( 나중에 Vendor-prefix 를 갖고 framework를.. 2019. 10. 20. 코드스피츠 76-2 (Box model & Absolute Position) 개요 Box model Box-sizing Box shadow 예제 Offset Offset Parent Offset Value 예제 개요 코드스피츠 CSS 수업 2강을 듣고 핵심적인 내용을 정리하고, 추 후에도 보고 기억이 날 수 있도록 기록하기 위해서 정리하였습니다. Box model과 Absolute Position이 주된 내용인데, 한번 같이 살펴보겠습니다. (이 블로그 내용을 보실 때 코드스피츠 76-2 교안을 같이 보시면 내용 진행에 대한 이해가 더욱 잘 되실 수 있습니다) 다음 두 가지 키워드를 염두해두면서 보시면 학습에 더욱 도움이 될 수 있습니다. geometry 단계 : 영역을 잡는 단계 fragment 단계 : 그림을 그리는 단계 브라우저 렌더링 시스템은 geometry 단계를 거친 .. 2019. 10. 8. 코드스피츠 76 - 1 (Graphic system) 강의 정리 보호되어 있는 글 입니다. 2019. 9. 30. 코드스피츠 s80 - 2 역할모델 정리 엔트로피의 증가방향을 컨트롤 해서 완화시키고 복잡한 상황을 포함해 여러가지 상황의 변화를 잘 받아들일수 있는 구조를 짜는 것을 '디자인' 또는 '아키텍처'라고 함. 객체지향에선 역할을 분리하여 엔트로피 증가를 막는다. 역할을 분리하는 요소 3가지 - 변화율 (가장 중요) : 변화율이 같은 것들끼리 모아놓으면 어떤 변화가 일어날 때 다른 것들에 변화를 주지 않으므로 엔트로피 증가가 최소화 됨. - 그외 2가지 복잡한 문제를 나눠서 분석하기 위한 도구 : 추상화 도구 - 카테고라이징 - 모델링(많이 사용) 2019. 6. 12. 코드스피츠 82 5주차 코틀린에서 메소드는 중위법이 가능하다 수신함수를 이용하면 두가지 쌍으로 구성이 가능하다. infix 를 이용하면 서로 상이한 형들을 초기화 할 수 있음. infix 는 병렬로 결합할 수 있는 이점이 있기 때문에 많이 사용한다. 중위법을 사용하면 괄호와 같이 사용할 때 편하게 사용할 수 있고 operator 들과 잘 어울리게 사용할 수 있음 - 속성 delegation : mutable delegation, emmutable delegation KFunction KProperty Kclass - map delegation : Kotlin의 delegate package는 꼭 외우자(자주 쓰임) NotNull : 너는 이걸 Null 인채로 사용할 수 없다, Null 이면 죽일 거다(무섭) Delegates .. 2019. 6. 11. 코드스피츠 s81 4주차 만델브로드 도형의 특징 : 수렴하는 것과 수렴하지 않는 집합이 있을 때 수렴하지 않는 집합이 점차적으로 수렴하는 것이 보임 크기 / 2 는 대부분 중앙정렬 저번 시간이 선형적 보간함수를 통해 채웠다면 이번 시간은 각각을 별도의 요구사항으로 평가하여 특정 집합으로 나눠서 채우는 것이 특징, 연산이 느림 하나하나 평가할 때마다 비용이 듦, 집합을 통한 Co-recursion은 해상도(width, height) 크기 만큼의 메모리가 필요함, 상태를 가짐. (지난 시간의 선형함수는 예측 가능, 값을 넣으면 해당값이 나옴) 밸류노이즈 : 나의 의도를 반영한 상태에서 만들 수 있음(장점), 이런 특성은 특정 값 이후로 반영율이 급격히 떨어지는 곡선(로그함수의 형태)를 띔. 밸류맵은 랜덤만 사용하지 않고 이처럼 사용.. 2019. 4. 30. 이전 1 2 3 4 5 6 다음
