css5 [TIL 2023.06.08] css 가상선택자 / javascript 요소의 속성 값을 정의하는 메서드 💻오늘 배운 내용 css 가상 선택자 / 가상 요소 선택자 1. 가상 클래스 선택자 (pseudo-class) 먼저, 가상 클래스 선택자(pseudo-class)는 HTML 문서에 작성된 요소에 가상의 클래스를 만들어 부착할 수 있다. 가상 클래스 선택자의 종류는 다음과 같다. 1 :active ,과 함께 사용하는 경우가 많다. 사용자가 활성화한 요소를 나타낸다. (마우스로 요소 클릭 시) 2 :only-child 형제가 없는 요소를 선택할 때 사용된다. :first-child:last-child 와 동일하다. 3 :hover 마우스 커서가 올라가 있을 때(마우스 오버)선택된다. :link, :visited, :active를 함께 쓴다면 css작성시 순서에 주의해야 한다. 4 :only-of-type 같.. 2023. 6. 9. [TIL 2023.05.18] 팀소개 프로젝트 오류수정 ❓발생한 이슈/고민 💡해결과정 서버와 합치는 과정에서 이전과 같은 문제가 발생!😱 동적으로 추가되는 카드라서 형제요소를 찾지 못한 것이 원인이었다. card.innerHTML = temp_html; // 컨테이너 생성 및 카드 추가 const container = document.createElement('li'); container.classList.add('card-container'); container.appendChild(card); list.appendChild(container); $('.js-click-modal').click(function () { const container = $(this).closest('.card-container'); container.addClass('moda.. 2023. 5. 19. [TIL 2023.05.17] CSS와 jQuery에 대한 이해와 .env…? 💻오늘 배운 내용 jQuery CSS trasition .env? 📖 jQuery 길고 복잡한 자바스크립트 문법을 손쉽게 코딩하도록 간소화한 자바스크립트 라이브러리. 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 HTML 문서 탐색과 조작 이벤트 처리 애니메이션 Ajax 등을 훨씬 더 간단하게 만들어준다. jQuery 써서 html 변경하려면 안녕 이렇게 코드 양이 절반으로 줄어들어서 쓰는 것이다. $ 이건 querySelector와 동일하게 사용하면 된다. jQuery 써서 스타일 변경하려면 안녕 이러면 css 스타일 변경이 가능하다. (주의) html 셀렉터로 찾으면 html 함수들을 뒤에 붙여야하고 jQuery 셀렉터로 찾으면 jQuery 함수들을 뒤에 붙여야 잘 된다. $('어쩌구').i.. 2023. 5. 19. [TIL 2023.05.16] 팀프로젝트 css 수정과 내 컴퓨터의 이미지 파일을 링크화 하기 💻오늘 배운 내용 CSS : cubic-bezier post images에 이미지 업로드해서 링크 만들기 ❓발생한 이슈/고민 여전한 repository 연동 이슈. mian에 있는 파일들을 내 branch에 pull 해오고 싶었는데 왜인지 오류가 났다. 가져오지를 못해! 모달창 내 요소들이 좌측에 몰려있다, 그리고 수직으로 정렬되어 있는 것이 마음에 들지 않았다. 이미지와 팀원소개 텍스트를 나란히 놓고 싶다! 어제 만들었던 모달창 애니메이션 기능이 마음에 들지 않았다 클릭해서 위로 올라오는 모션까지는 좋지만 브라우저 창 전체를 덮어버린 것이 불만! 올라오는 애니메이션이 실행되면서도 페이지 타이틀은 계속 보이게 하고 싶었다. 💡해결과정 main의 파일들을 가져오려하니 “refusing to merge un.. 2023. 5. 19. HTML / CSS ? HTML과 CSS 개념 이해하기 ⚒️HTML=구조(기획자) 웹페이지를 만드는 컴퓨터 언어이다. 페이지의 제목, 문단, 표, 이미지 등 웹의 구조를 담당한다. ✨CSS=장식(디자이너) 웹페이지에 시각적 표현(디자인)을 입히는 언어이다. 실제 화면에 표시되는 방법(색상, 폰트 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당한다. ⚙️JS(JavaScript) : 동적처리(개발자) 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당 HTML Tag 구조 HTML은 Tag를 이용한 Markup 언어이다. 👇주요 Tag 모음 나는 구역을 나누죠 나는 문단이에요 h1은 제목이에요. h2는 소제목입니다. h3~h6 h 뒷 숫자가 커질수록 글자 크기는 작아져요. 하이퍼링크 버튼입니다. HTML.. 2023. 5. 19. 이전 1 다음
