so woon!

학습일 : 2022. 12. 18 잔이비어라는 로고를 왼쪽으로 보내고 싶어서 1. margin-right로 로고를 배치 2. justify-self 속성을 이용하여 맨 왼쪽으로 보내기 등등을 생각하고 모두 적용해보았지만 뭐가 꼬였는지 제대로 적용이 안되었는데 왼쪽으로 보낼 로고에다 /*잔이비어 로고*/ body > header > .spring > .category > .title-logo { height: 100%; margin-right: auto; } 이렇게 margin-right: auto;를 적용해주었더니 로고가 맨 왼쪽으로 간 귀여운 모습.... 해결하기까지 과정은 아래 사이트를 참고하였다. css는 공부하면 할수록 너무 어렵고 또 재밌는걸 https://oneroomtable.tistory...

학습일 : 2022. 09. 16 미디어 쿼리(Media Query) 여러 조건에 따른 선택자 분기를 위해 사용한다. 주로 (브라우저) 화면의 최대 가로 크기의 변화에 따른 선택자를 적용하고자 할 때 사용한다. 다음과 같이 작성한다. @media screen and (max-width: [원하는 화면 최대 가로 크기]) { ... } 위 미디어 쿼리는 스크린(Screen)의 최대 가로 크기가 설정한 [원하는 화면 최대 가로 크기] 이하 일 때 중괄호({, })안의 선택자를 적용하겠다는 뜻.

학습일 : 2022. 09. 16 grid 관련 획일적인 레이아웃을 구성하기 위해 사용한다. 그리드 컨테이너가 가지는 자식들의 크기가 같거나 최소 크기의 배수일때 사용한다. (주로) 가령, 유튜브나 에르메스 사이트. 주의 : 데이터를 담기 위해 그리드를 사용하면 안되며, 레이아웃을 구성하기 위해 테이블을 사용하여서는 안 된다. 그리드와 테이블의 역할은 다름. 그리드화 할 부모 요소의 'display' 속성 값을 'grid'로 지정하면 된다. grid-template-columns 속성 그리드 컨테이너에 부여하는 속성으로, 열 크기의 비율(혹은 고정 크기)을 지정한다. (개수도 동시에 지정함) 열 크기의 비율은 fr(fraction) 단위를 이용한다. 가령, 크기가 같은 두 개의 열을 지정하기 위해 아래와..

학습일 : 2022. 09. 16 flex 관련 display 속성 값이 'flex' 혹은 'inline-flex'인 부모(Flex 컨테이너)가 가지는 자식 요소들의 흐름을 쉽게 설정하기 위해 사용한다. flex-direction 속성 Flex 컨테이너에 지정하는 속성이다. 이가 가지는 자식 요소들에 대한 흐름의 방향을 지정한다. 이때 자식 요소들의 display 값과 관계 없이 정렬한다. 속성 값 : - row : 행방향(가로방향) 정렬 - row-reverse : 행방향(가로방향) 역정렬 - column : 열방향(세로방향) 정렬 - column-reverse : 열방향(세로방향) 역정렬 justify-content 속성 Flex 컨테이너에 지정하는 속성이다. 'flex-direction' 속성 값의..

학습일 : 2022. 09. 15 태그(link) 중요도 : 🔴🔴🔴🔴🔴 종류 : 자동으로 닫는 태그 가능한 부모 : I'm red I'm blue

학습일 : 2022. 09. 07 transition-duration 속성 어떠한 요소에 CSS 속성이 추가되거나 변경될때 해당 추가 혹은 변경 사항이 적용되는데 걸리는 시간을 지정한다. 기본값이 0임으로 기본적으로는 이러한 속성이 변경될 때 즉시 변경된다. 중간값이 없는 속성(display, text-align 등)은 transition의 영향을 받지 않는다. 용법 ... { transition-duration: [?ms|?s]; } 이때 ms는 밀리초 단위이고 1000ms는 1초이다. 마찬가지로 s는 초 단위이고 1s는 1000ms이다. transition-timing-function 속성 트랜지션의 영향을 받아 변화하는 속성이 시간의 지남에 따라 변화할 수준에 대한 설정이다. 용법 ... { tra..

학습일 : 2022. 09. 07 transform 속성 요소의 형태나 위치를 변화시키기 위해 사용한다. 각 함수는 띄우기( )로 구분하여 여러개 사용한다. 절대 transform 속성을 여러개 사용하지 않는다. 함수 - rotate(?deg) : (해당 2D 상의 요소를 고정축 기준으로) 회전한다. (deg : Degree, 도) - rotateX(?deg) : X축으로 회전한다. - rotateY(?deg) : Y축으로 회전한다. - rotateZ(?deg) : Z축으로 회전한다. - scale([0.0~|0%~]) : 해당 요소를 확대/축소한다. 기본 값은 1(100%)이다. - translate([X축 이동량 : ?px|?rem|?%|...], [Y축 이동량 : ?px|?rem|?%|...]) :..

학습일 : 2022. 09. 07 filter 속성 색상과 관련된 효과(카메라에 있는 그것)를 위해 사용한다. 함수를 이용하며 함수 이용시 공백( )으로 여러개의 함수를 이용할 수 있다. (절대 filter 속성을 여러개 사용하지 않는다.) 함수 blur([?px|?rem|...]) : 해당 요소의 내용을 주어진 길이 만큼 흐린다. brightness([0.0~|0%~]) : 해당 요소의 밝기를 조절한다. 기본 값은 1(혹은 100%)이며 값이 작아지면 어두워지고, 커지면 밝아진다. contrast([0.0~|0%~]) : 해당 요소의 대비를 조절한다. 기본 값은 1(혹은 100%)이다. drop-shadow([X축 오프셋 : ?px|?rem|...] [Y축 오프셋 : ?px|?rem|...] [퍼짐 정..