코딩하는 복서 🥊

1. 태그에 직접 Style 넣기 * 보통 이렇게 inline으로 작업하진 않지만 참고 1) 주의할 점은, 스타일을 객체로 넣어야 한다는 것! 이렇게 객체로 작성 2) 값은 ""따옴표로 감싸준다. (only 숫자는 그냥 기입해도 무방) 3) html + css 에서는 font-weight 인데 리액트에서는 fontWeight (다 이런식) const Hellow = (prop) => { return Hellow {prop.name} you are {prop.age} years old } 2. css 파일 활용하기 * css 파일은 두 가지 종류가 있는데 전역에 영향을 미치는 css와 컴포넌트 전용 css가 있다 * class 선택자 사용하는 경우 className="" 으로 해야 함. 1) 전역 css ..

좌,우로 넘어가는 배너가 아닌 CSS의 z-index를 활용하여 앞,뒤로 넘어가는 배너를 만들어보자 1. z-index란?CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.=== Z축 순서를 정하는 속성이라고 한다. 1) 그럼 Z축은 무엇인가?보통 X축이 가로, Y 축이 세로일때 앞뒤축이 Z축이다. 2) demo를 통해 z-index의 역할을 알아보자.- auto는 부모요소의 순서를 그대로 따른다. - 숫자가 들어갈 경우, 숫자가 높은게 더 앞에서 보이는 것을 알 수 있다.=== z-index의 숫자를 높이면 앞으로 튀어나온다. 그럼 이걸로 뭘 할 수 있다? 옆으로 넘어가는게 ..

1. 수동 슬라이드 배너 만드는 방법은 지난 포스팅 참고 https://stukkifather.tistory.com/51 [html, css, js] 초간단 슬라이드 배너 (캐러셀) 만들기 1. 슬라이드 원리 1) 일정한 크기의 이미지들을 float:left로 '가로'로 정렬 2) overflow: hidden 으로 딱 한장씩만 보이게 함 3) 버튼을 누르면 transform: translateX(±한장크기)로 한장씩 다음/이전 슬라이드 stukkifather.tistory.com 2. 자동 슬라이드를 만들어보자 1) 기존에 만들어둔 함수를 활용 2) setInterval 함수를 활용, 2초마다 넘어가고 마지막 장이면 처음으로 돌아가도록 세팅 setInterval(()=>{ if(currentSlide ..

1. 슬라이드 원리1) 일정한 크기의 이미지들을 float:left로 '가로'로 정렬 2) overflow: hidden 으로 딱 한장씩만 보이게 함 3) 버튼을 누르면 transform: translateX(±한장크기)로 한장씩 다음/이전 슬라이드 이동 2. HTML 작성1) 슬라이드는 4개 준비 2) 이전 버튼, 다음 버튼도 빠지면 섭함 3) 아이콘은 폰트어썸(fontawesome)에서 연결 DOCTYPE html> new_slide 3. CSS 작성1) float: left 로 이미지를 가로열로 정렬 .slide_item { float: left; } 2) 슬라이드에 한장 크기로 width를 정하고 넘치는건 숨기는 overflow: hidden 시전 (이쁘게 센터도 잡음) - 여기서 배너 수가 많아..

1. flex의 속성은 아래와 같다.container에 적용되는 속성과 item에 적용되는 속성이 다르다.1.1 container 속성1) flex-wrap: 아이템을 감싸서 박스크기는 유지하면서 화면 크기에 따라 배치를 유연하게 함. *default는 nowrap *왼쪽이 nowrap, 오른쪽이 wrap 2) justify-content: 중심축 기준에서 컨테이너 안에 ITEM들 '정렬'을 어케할거냐? *flex-end 는 아이템 순서는 유지하면서 reverse (끝나는 부분에 붙어서 정렬) *space-around 는 item에 가상의 테두리를 둘러서 그 간격만큼 떨어짐(첫 간격과 마지막 간격은 중간 간격보다 작음) *space-evenly 는 item을 컨테이너 크기에 맞게 일정한 간격 유지하며 떨..

0. 들어가며 프론트 엔드를 구조적으로 보면 여러 개의 박스로 이루어져 있는데 이 박스를 CSS에서 어떻게 자리배치 할 수 있는지 알아본다. 1. display 대상이 블록(blcok) 속성을 따를 것이냐 인라인(inline) 속성을 따를 것이냐 e.g. 디스플레이 바꿔주면 박스도 줄바꾸지 않고 한줄에서 나오게 할 수 있음 ※ 디스플레이 변경 방법 셀렉터 안에 display: 원하는 상태 넣어주면 됨 1) block - 대상이 block element 속성을 따름 - 한 줄에 하나 2) inline - 대상이 inline 속성을 따름 - 한 줄에 여러개 (너비가 허용하는 한) 3) inline-block - 대상이 inline 처럼 한 줄에 나오는데 block일때 처럼 박스 형태는 유지 함. 4) fle..

0. 들어가며 : CSS는 무엇의 약자? 1) Cascading Style Sheet : 연속적으로 종속(상속)되는 스타일 시트 *캐스캐이딩은 폭포처럼 한칸 한칸 내려오는 것을 표현하는 말임. 2) 작성시, 띄어쓰기에 유의하자 자바스크립트처럼 알아서 안해준다. 3)동일한 대상에 겹치는 스타일링이 있다면 더 좁은 범위로 지정된 것을 따름. 1. Cascading ▶ 종류 1) Author style : 개발자가 작성하는 스타일 (e.g. css 파일) 2) User style : 사용자가 지정하는 스타일 (e.g. 브라우저 다크모드) 3) Browser: 브라우저상에서 기본적으로 지정된 스타일 ▶ 우선순위 Author > User > Browser e.g. 개발자가 지정안했어? 유저 찾아봐, 유저에 지정안..