NULL

제목과 동일하게 슬라이드 퍼블리싱에 애니메이션 효과를 입히는 도중 확대되면서 크기가 부모 요소를 벗어나도록 되어있는 애니메이션을 구현 중이였다. 부모 요소에 크기가 고정으로 설정되어있어서 어떻게 해결할지 찾는 도중 부모 요소를 벗어나도록 허용하여 화면에서 잘림없이 애니메이션을 처리 할 수 있었다. 결론은 overflow: visible을 찾아서 해결하였다.

one-way UI 방법 1. 시작스타일 2. 최종스타일 3. 최종스타일 이벤트 코드작성 4. transition 추가 즉, 시작 전과 최종 화면단을 미리 구성해두고 트랜지션으로 부드럽게 해주면 애니메이션이 나온다. display: none에서 block이 되면 애니메이션 과정이 생략되서 display대용으로 visibility: visible, hidden을사용해야 애니메이션이 잘 먹는다. opacity를 써야한다. 그 이유는 투명도가 0에서 1이 되는 과정을 트랜지션으로 걸어두면 서서히 보이는 이펙트를 줄 수 있기때문이다. 사용법 시작스타일은 다음과 같은 코드를 넣는다. visibility: hidden; opacity: 0; transition: all 1s; 최종스타일은 다음과 같은 코드를 넣는다..

contain이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정.

opacity로 불투명도를 조절할 수 있습니다. opacity : 0 // 불투명도 100% opacity : 0.5 // 불투명도 50% opacity : 1 // 불투명도 0%

CSS background-attachment: fixed을 사용해서 파라렉스 디자인기법을 이용해서 웹사이트를 구현할 수 있다. https://opentutorials.org/course/2473/13856 Parallax(시차를 이용한 효과) - 생활코딩 수업소개 parallax는 시차라는 뜻으로 천문학에서 사용하는 용어입니다. 즉 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미하죠. 이 현상을 이용하면 입체감, opentutorials.org

1 2 3 1 2 3 div p:first-child { font-size: 20px; } div p:first-of-type { font-size: 20px; } 구조 가상 셀렉터인 first-of-type는 div안의 p기준으로 p의 부모태그인 div안에 있는 첫번째 p를 선택한다. 반면 first-child는 div안에 있는 p기준으로 첫번째 p만 선택한다.

div 태그로 만든 Layer를 안보이게 하는 두가지 방법 1. display:none block 아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨 2. visibility:hidden visible 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 3. display = "" 하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inline div 태그 안에 있으면 block 가 쓰여지게 된다.

~ 은 다른 형제들도 선택한다. + 는 바로 밑에 있는 요소만 선택한다.

justify-content (가로 정렬) flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. align-items (세로 정렬) flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다. baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다. stretch: 요소들을 컨테이너에 맞도록 늘립니다. flex-directi..

ol = 순서가 있는 리스트 ul = 순서가 없는 리스트 li = 리스트 아이템(리스트 안에 씀) ol태그 순서 맥이는법 예를 들어 에 type을 주고 a를 쓰면 그 다음은 bcdf로 자동으로 순서를 정렬된다. 네비게이션 바 만들때 자주 사용함 리스트 앞에 표시되는 글자를 없앨려면 li에 블록을 주면 해결된다. li스타일링 list-style: none;을 하면 앞에 표시되는 텍스르를 없앨수있다. 하지만 패딩값은 남아있기때문에 패딩도 0으로 초기화해준다.