728x90 반응형 > 콜로소/[고윤서] 인터랙티브 웹사이트 만들기16 [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) - 그림자, 이벤트 리스너 함수, 마우스 값 피그마 기능분할돼있는 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. [3-1] 날씨 API 웹 포스터 (2) - 폰트, sass 경로, flex 배경생성, 콘텐츠 생성텍스트 준비- woff , woff2 라는 확장자를 가진 폰트 준비- Pretendard 같은 경우에는 subset 으로 마련sass 경로1. root 폴더에 만들게 끔 설정2. style 폴더 안에 지정> 별도 지정 방법- extensions 안에 들어간다- 다운 받았던 것 중에서 Live Sass와 관련된 것을 선택 후우클릭 한 다음 Extension Settings 를 누른다.그 다음 Edit in settings.json 클릭- 그 다음, liveSsassCompile.settings.formats 라는 것을 지정할 수 있다.- "savePath" : "/" = root 폴더에 저장.- "savePath" : "~/" = Sass 폴더가 있는 그 폴더 안에 저장.- foram.. 2024. 4. 30. [3-1] 날씨 API 웹 포스터 (1) - Pseudo, 이벤트 Pseudo ClassPseudo Class- 가상 클래스: hover 할 때 ,: ( 콜론) 이 하나 들어가는 것들을CSS의 가상 클래스 라고 함.:active= 사용자에 의해 엘리먼트가 활성화 됐을 때( 마우스를 누르는 중일 때 ):hover= 사용자의 커서가 엘리먼트 위에 있을 때( 마우스가 올라가 있을 때):target= 상호작용된 요소가 가리킨 URL과target 요소가 일치할 때 사용되는 가상 class:any-link= link / visited 이 두개를 포괄하는 가상 class= 방문 여부와 관계없이 링크가 걸린 요소 전부의 style 적용 가능:checked= 대상 체크박스가 체크됐을 때:focus= 대상 요소가 활성화됐거나 된 직후일 때:focus-within= label/form 안.. 2024. 4. 29. [2-5] 웹 명함 구축하기 (2) - svg 비율 깨기, 애니메이션 preserveAspectRatio="none"preserveAspectRatio="none"의 사용svg는 기본적으로 비율이 지켜지도록 하는 설정이 돼있음.- 비율을 깨기 위해 사용- svg 자체에 속성을 주기- 많은 속성이 있지만 none 이라는 속성 이용- 적용해주면 svg 비율이 깨져서 쭉 늘어난 것 확인 가능.preserveAspectRatio="none"다른 logo들에게 적용시켜주기animation-timing-function: ease-in-out;시작할 땐 서서히 했다가 점점 빨라지고 끝부분에 가서는 서서히 속도가 줄어듦- 속도와 관련된 그래프이기 때문에 cubic-bezier라는 속성을 이용해서 함수를 따로 설정해 줄 수 있음.궁금한거 해결할 부분const links = document.. 2024. 4. 29. [2-5] 웹 명함 구축하기 (1) - ul, ol, a태그 , before Ul 태그- Unordered list- 순서가 없는 목록Ol 태그- 순서가 있는 목록바로 자식에는 li 태그들을 사용- Ordered list외부 웹사이트 혹은, 같은 페이지 안에서 이동시키기 위해 사용하는 태그= a 태그= href 라는 속성 안에 있는 주소로 이동시켜줌.= a 태그에는 target 이라는 속성 사용- target 을 통해서 새 탭으로 이동시킬 건지, 한 탭 안에서 이동시킬 건지 결정Anchor 태그 안에 텍스트를 입력함으로서텍스트를 눌렀을 때, href 속성 안에 있는 주소로 이동시킴.target="_blank" 하고 target="_self"이 두 개 쓰임새와 차이를 모르겠음blank 를 사용해서 외부 사이트로 이동을 시키더라도그 창을 닫았을 때 다시 우리 웹사이트로 돌아와서더 서.. 2024. 4. 29. [2-4] 웹 명함 구축하기 (2) - 웹폰트, 변수 지정, sass 기능 웹 폰트 불러오기- 로컬 폴더woff, woff2로 돼있는 파일 확장자 2개를폴더로 옮겨주기- font 라는 폴더 따로 생성해서 관리해주면 수월// 2-4) 폰트 연결해주기 - @font-face 사용@font-face { // 불러올 폰트파일의 이름 지정 font-family: "KoddiUD OnGothic"; // 폰트 파일의 위치 지정. 폰트 파일에 넣었던 폰트들 넣어주면 된다. // 폰트 확장자가 여러개 있는 경우, // 브라우저마다 호환되는 폰트파일이 다를 수 있음. // 반점(,)을 쓰고 아래에 다른 포맷도 불러와줌. src: url("/font/KoddiUDOnGothic-Regular.woff2") format(woff2), url("/font/KoddiUDOnGot.. 2024. 4. 28. [2-4] 웹 명함 구축하기 (1) - 기본 설명 정리 (css, sass, js) CSS, Sass 변수 사용CSS와 SCSS에서는 변수를 지정하여 속성 값을 컨트롤할 수 있다.:root 요소 안에--name 을 지정하여 속성 값 저장 가능$name 을 통해 속성 값 저장 가능.- CSS로 컴파일 되기 때문에컴파일 된 후에는 변수처럼 사용할 수 없다.- 여러 파일을 사용하여 변수를 한 번에 관리하기 용이- CSS의 변수는 이후에 JS를 이용해서요소의 속성 값을 변형할 수 있음.= 다크모드 / 라이트모드 사용할 때 자주 사용. SCSS$primary: #FF008A;$sub_primary: #31E6FF;$1h: 1.55em;CSS:root{ --primary: #FF008A;}p{ color: var(--primary);}:root { --primary: #f1c6d6; --tex.. 2024. 4. 27. [2-3] 웹 명함 구축하기 (2) - 피그마, 일러스트레이터, 기본세팅 피그마의 autoLayoutCSS의 display: flex 와 유사피그마에서 고정된 스페이스가 아닌,오브젝트 안에 있는 요소를 늘렸다가 줄였다가 하려면justify-contents 의 space-between과 같이Advanced layout settings 이거 누르면(Auto layout 우측에 점 3개)Spacing mode에 Space between 확인 가능.누르게 되면 간격을 유동적으로 조정하는 것 확인 가능.피그마에서 고정점인Constraints 를 함께 사용하게 된다면,position:fixed 나position:absolute 같은 것 쉽게 구현 가능로고같은거 소수점 지양하기.피그마 - 설정(Preferences) - Snap To Pixel Grid 체크돼있는지 확인.그 다음, 커맨드.. 2024. 4. 26. 이전 1 2 다음 728x90 반응형
