728x90 전체 글563 리액트 환경에서 동적인 UI 만드는 법 (모달창 만들기) 보호되어 있는 글 입니다. 2024. 5. 7. CSS Flexbox 완전 정리 CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript (youtube.com)float텍스트와 이미지 배치Flex박스(콘테이너) 에 적용되는 속성아이템들에 적용되는 속성 존재박스 적용 속성아이템 적용 속성Flex 박스에는 중심축과 반대축 존재 왼쪽에서 오른쪽으로 정렬되는 거 확인수평축 - 메인축(중심축)수직축 - 반대축수직축 - 메인축수평 - 반대축실습하기JS Bin - Collaborative JavaScript Debugging JS BinSample of the bin:jsbin.comitem 마다 고유의 번호를 의미 = item$$ = 지정번호*10 = 10번 반복하기Container(박스) 에 속성 부여display: .. 2024. 5. 6. [SASS] & 의 사용법 &의 역할&는 부모 선택자를 참조하는 특수한 키워드&를 사용하면 현재 규칙의 부모 선택자를 참조&:last-child.parent { color: blue; &:last-child { color: red; }}&:last-child는 부모 요소의 마지막 자식 요소를 선택하는 CSS 의사 클래스입니다.&:last-child 는 .parent:last-child 로 해석&:last-child의 역할.background { display: flex; justify-content: space-between; width: 100%; height: 100vh; position: absolute; padding: 0 1rem; span { display: block; h.. 2024. 5. 5. [3-3] 날씨 API 웹 포스터 (1) - 이벤트리스너, 요소추가, innerText, Data Attribute window가 클릭됐을 때 이벤트를 듣고있다가 클릭이라는 이벤트가 발생했을 때snowClick 이라는 것이 실행이벤트리스너에 들어가는 이 함수는 자동적으로 이벤트와 관련된 요소를 받음.const snowClick = (e) => { }window.addEventListner("click", snowClick);const snowClick = (e) => {console.log(e);}window.addEventListner("click", snowClick);이렇게 출력해보면개발자모드 콘솔탭에서 화면을 눌렀을 때 pointEvent가 정상적으로 작동하는 지 확인 가능만약 마우스로 클릭했을 때가 아니라 터치로 클릭했을 경우, 요소들의 속성이 달라짐.- 콘솔을 계소 확인해주면서 코딩하기요소를 화면에 추가하기.. 2024. 5. 3. [3-2] 날씨 API 웹 포스터 (1) - 코드 보호되어 있는 글 입니다. 2024. 5. 2. [3-2] 날씨 API 웹 포스터 (1) - 그림자, 이벤트 리스너 함수, 마우스 값 피그마 기능분할돼있는 path 손쉽게 내보내는 방법= 피그마에서 모두 선택한 다음,ctrl + E 해서 합쳐주기피그마에서 손쉽게 그라디언트 정보내보내기인스펙트 코드 사용그림자 요소 적용시키기- Figma의 inspect 탭에서 적용돼있는 box-shadow 그대로 갖고 와서 사용완벽한 반응형을 맞추고 싶으면 쓰는 단위- 고정픽셀들을 rem 이나 em 으로 바꿔서 사용하기이벤트 리스너 함수 사용 방법const eventHandler = () => {document.querySelector(".sun-circle").style.background="red";}document.querySelector(".sun-circle").addEventListner("click",function(){});이거에서docu.. 2024. 5. 2. 이전 1 ··· 42 43 44 45 46 47 48 ··· 94 다음 728x90
