공부 기록일지📚

Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법 + 레이아웃을 잡을 때도 사용 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, asperiores neque. Perferendis numquam rem culpa sit illo nisi recusandae, delectus minima iusto odit harum voluptatem, ea facere a facilis commodi laudantium autem. Aspernatur deleniti recusandae et quis possimus ea fugit magnam, veniam accusamus totam fugiat. Quasi modi itaq..

media query : 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS 기능 (반응형 디자인의 핵심 기능) 사용법: @media 선언 후 ()소괄호 안에 스크린 조건을 적습니다. {}중괄호 안에는 해당 스크린 조건을 만족할 때 적용할 엘리먼트와 적용시킬 CSS를 기입합니다. (max-width) 최대 / 즉, 최대치보다 이하일 경우 (min-width) 최소/ 즉, 최소치보다 이상일 경우 ※미디어 쿼리를 작성할 때, 스크린의 크기가 작은 것이 아래로 오게 작성해야 합니다. Cascading개념을 유념하고 큰 범위가 아래로 오지 않도록 주의하면서 작성하도록 합니다. ~500px : red 501~600px : green 601px~ : blue 또한 브라우저에서 F12(검사)를 해서 반응형..

성배 레이아웃은 사람들이 성배를 찾기 위해 노력하지만 못찾은 것처럼 완벽한 레이아웃만들기에 비유해서 만들어진 말입니다. 위와 같은 레이아웃을 비유적으로 성배 레이아웃이라 하는데 이 모양을 만들어내는데 flex를 사용하면 간편하게 달성할 수 있습니다. 생활코딩 html css javascript AD 홈페이지 ->main에 있는 lorem1000 부분은 양이 너무 많아서 주석 처리 해놨습니다. main 내부에 content를 랜덤으로된 1000글자를 주면 성배 레이아웃의 모습을 제대로 볼 수 있습니다. Properties for the flex container flex-direction row /*기본값*/ row-reverse column column-reverse flex-direction row /..

flex - 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구, 레이아웃을 효과적으로 표현 가능 부여되는 속성을 나타낸 차트▼ Container item display order flex-direction /*기본값: row 행의 방향 column 수직*/ flex-grow /*기본값 0*/ flex-wrap flex-shrink flex-flow flex-basis justify-content flex align-items align-self align-content container에 height를 지정해주어야 flex의 효과를 제대로 알 수 있습니다. item관련 flex속성 flex-basis flex의 방향에 해당되는 엘리먼트의 기본크기를 설정하는 속성, row 면 가로폭 , column이면 세로폭..

will-change(불안정한 animation*사용 시 같이 사용): 기본적으로 브라우저에게 뭔가가 바뀔 것이라고 말해주는 것 (브라우저에게 렌더링 힌트를 주고 element에 실행되길 기대하는 변화를 명시함 +부가설명: will-change는 그래픽카드를 이용해서 애니메이션을 가속화한다.) 이 속성을 쓰면 브라우저가 애니메이션을 더 괜찮게 만들어준다. 왜냐면 이게 바뀔 거라는 것을 알고 있기 때문이다. *불안정한 animation이란? 어떤 요소에 keyframe을 걸어서 애니메이션 효과를 추가했는데 그 모습이 흔들린다거나 불안정적인 형상을 띄는 animation효과를 지칭합니다. e.g.) 기존의 animation "heartBeat"는 will-change속성이 없을 시, scale값에 따라 1...

▶animation-delay 이 속성은 말 그대로 지정된 animation의 시작을 연착시키는 속성입니다. 사용예시: animation-delay: 2s; //참고로 이 곳에 animation: 애니메이션이름 모션스타일 지속 시간; 이 작성돼있어야 겠죠? 따로 animation과 animaiton-delay를 적어줘도 되고 animation 하나에 delay를 포함해도 됩니다. ▶animation animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용한다. 초기값 (ref: MDN) as each of the properties of the shorthand: animation-name (en-US): none animation-duration: 0s animation-timing-..

▶vw, vh, %(percent) 구분 100vh = The screen's height = view height 100vw = The screen's width = view width 100% = 100% of the PARENT ▶animation: forwards CSS animation(@keyframe)을 활용해서 어떤 화면을 띄웠다가 없애고 싶을 때 forwards라는 속성값을 쓰면 된다. 우리가 이전에 사용했던 animation 속성값으로는 infinite 가 있었는데 해당 animation을 끊임없이 연속재생하기 위해서 사용했었다. forwards 개념: The final propery value(as defined in the last @keyframes at-rule) is maint..

▶border-radius세분화 border-radius는 4개의 CSS 속성의 단축 속성입니다. border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius 즉, 반대로 각각의 값을 따로 지정할 수도 있다는 뜻입니다. e.g.) border-radius전체에 15px 값을 주고 그 다음에 border-top-left-radius의 값을 0으로 줌으로써 말풍선 같은 모양을 만들어냈습니다. ▶flex children 기능: order order 라는 속성은 오직 flex children한테만 적용가능하다. (전제조건 - display:flex; ) 방법1) 순서를 바꾸길 원하는 자식요소에 ..