728x90 > 프로그래밍 언어104 CSS calc() 산술식(사칙연산) - HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱 CSS calc() 산술식(사칙연산) - HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱 (youtube.com) calc 함수 사용 container 생성 width: 100% - 현재 브라우저 width 100% 에서 조금 빼고 싶은 경우, ( 40px 정도 빼고 싶은 경우) 이렇게 하면 될 것 같지만 CSS 는 이해를 못함. = calc() 함수를 사용해야 함. calc() 함수 사용시 주의점 calc 함수 사용할 때 위와 같이 띄어쓰기 있으면 안됨. 그리고 이렇게 괄호 안에 붙여도 안됨. Operator 좌, 우 에는 꼭 띄어쓰기 해야함. 1. calc() 활용 - 좌 우 마진 넓이 빼기 컨테이너 재설정 width: 1000px 마진 auto 로 중앙정렬 rmsep 1000px 이 아니.. 2024. 4. 22. CSS 크기(px,%,em,rem), 크기 계산 방법 21. CSS 크기(px,%,em,rem), 크기 계산 방법 (youtube.com) EM 19.2px 1em = 16px 1.2em은 현재 글꼴 크기보다 20%더 큰 것 자식 요소가 더 존재 div 태그 기준으로는 손자(span) 요소 span = 부모요소인 p 폰트 사이즈의 0.8 배라는 의미. 19.2px 에다가 0.8 까지 곱해줘서 계산해줘야 함. REM 문서 기본값이 16px 이므로 문서 기본값을 보고 계산 예시 기본 세팅 div 에 font-size 부여 p 태그에 폰트 사이즈 부여 div 밖의 p 태그 생성 16px 원래의 값을 갖고있음. span 태그 사이즈 부여 부모가 60으로 바뀜 (div 태그) 그래도 자식과 손자 폰트 사이즈는 바뀌지 않는다 = px 를 썼기 때문 ( 절대값) wid.. 2024. 4. 19. CSS 단위 em 과 rem | 예제 프로젝트 프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 ✨ (youtube.com) 절대적 / 상대적 사용 차이 1) 부모요소의 사이즈 / 브라우저의 사이에 따라서 사이즈 변경 2) 요소의 너비와 높이에 따라서 / 폰트 사이즈에 따라서 사이즈 변경 em 사용하는 경우 level 2 는 level 1 의 자식이므로 level 1 이 32 이니까 64 가 된다. level 3 = 128 글자가 점 점 커지는 거 확인 가능 em - 즉각적으로 사이즈가 보이지 않음 = 계산하는데 어려움 있을 수 있다. rem 사용하는 경우 부모요소에서는 16px 을 이용하고있음. 어떤 레벨에서 사용되는 지 상관없이 무조건 16배수. 2rem = 32 폰트 사이즈가 고정적인거 확인 가능 폰트 사.. 2024. 4. 19. 웹 폰트 사이즈 단위 5가지는 알고가자! (px, rem, em, vw, vh) 웹 폰트 사이즈 단위 5가지는 알고가자! (px, rem, em, vw, vh) (youtube.com) px 데스크탑이나 모바일등 어떤 환경에서든 폰트의 크기가 동일하게 보이고 싶을 경우 사용 창의 크기가 크든 작든 동일한 사이즈로 유지. em 부모인 wrap 의 font-size 는 30px 로 돼있음. p는 2em 으로 들어가있음. = 30px 의 두 배로 적용하겠다는 의미. = 60px 이 들어간다는 의미 위에 앞서 적용된 폰트의 크기에 영향을 받음. 배수로 적용 rem em 과 차이점 = 위 단계에서 상속받는게 아님. 웹 브라우저 기본 크기인 16px 에 영향을 받는 단위. 3rem 인 경우, 48px 이 된다. em 이나 rem = 부모나 브라우저 기본 크기에 따라서 폰트 속성 주고 싶을 때 .. 2024. 4. 18. [코딩애플] 진짜 웹개발로 배우는 실용 자바스크립트 6강 Alert 박스 X 버튼1 버튼2 3x minified 버전 복붙 제이쿼리 설치 끝 안녕하세요 Alert 박스 X 버튼1 버튼2 자바스크립트- html 변경 제이쿼리 문법을 쓰면 html 변경을 더 쉽게 할 수 있음. 원래 이렇게 사용 제이쿼리로 HTML 변경하는 방법 = 저 부분을 $()로 줄여서 사용하면 된다. 사용할 때 CSS 셀렉터 처럼 적어야 함. 아이디니까 # 클래스명 또한 찾을 수 있음. 이것과 비슷한 문법이 자바스크립트에도 있음 = document.querySelector() 대신 하나밖에 못찾음 #test 가 여러개 나온다 하면 맨 위에거만 찾아줌. 여러 개 찾고 싶으면 querySelectorAll을 사용 뒤에 [0] 이런거 같이 붙여서 활용 요소 바꾸려면 저렇게 사용 X jQuery .. 2023. 9. 23. [코딩애플] 진짜 웹개발로 배우는 실용 자바스크립트 5강 셀럭터 - class 명 alert-box 여러개 다 찾았으면 찾은 거 중에 0번째거 순서 지정 document.getElementById("alert-box")[2].innerHTML = "어쩌구"; 버튼1의 openbox => 알림창1열기() 로 전환 버튼 2 만들기 이 상태에서 버튼 2 에다가 openbox 말고 알림창2열기를 넣어준다. 두 개의 화살표가 비슷함 파라미터 사용 구멍 뚫기 버튼 1 에 알림창열기() => 알림창열기('아이디입력해라') 함수 또 만들필요 없이 버튼 2 도 알림창1열기 함수를 통해 활용 가능 저 코드 또한 더러워보일 수 있음. id 만 부여함 id = "close" 닫기 버튼 일단 셀렉터로 찾기. addEventLister - 함수 소괄호 있는 건 다 함수 function.. 2023. 9. 23. [코딩애플] 진짜 웹개발로 배우는 실용 자바스크립트 4강 숙제 실습 소괄호 안에 원하는 걸 집어넣을 수 있음 ( 모든 자료 ) 123이라는 자료를 집어넣을 수도 있음. 알림창 열기라는 긴 코드 실행해달라는 뜻 근데 구멍자리에 123이라는 숫자 넣어서 진행해달라. ( 숫자 표현할 땐 따옴표 없이 써도 ㅇ) 123이 구멍 자리에 들어간후 2번째 줄로 들어가서 실행 알림창 열기를 실행해줌. 구멍자리에 block 넣어줘서 실행. 첫 번째 코드는 알림창을 열어줌 ('block') 두 번째 코드는 알림창을 닫아줌. ('none') 함수 한가지 갖고 2가지 기능 구현한 것 알림창열기() => 알림창열기('none') 파라미터 값 넣어준 걸로 바꿈 밑에 코드는 지워준다. 지워준 모 2+1을 해주는 plus 함수 생성 plus() - 플러스 함수를 실행할 때마다 2+1을 함 .. 2023. 9. 17. [코딩애플] 진짜 웹개발로 배우는 실용 자바스크립트 3강 긴코드를 축약한거 아무렇게나 작명() 을 쓸 때마다 긴코드 들이 실행 알림창열기(); 이렇게 쓸 때마다 (소괄호는 무조건 포함) 안에있는 긴 코드 실행된다. 진짜인지 확인하려면 아까 담겨져 있던 긴코드 자리에 알림창열기() 적어줌. innerHTML의 왼쪽에 있는게 null 이라는 뜻. innerHTML의 왼쪽 실수로 셀렉터 잘못 쓴 경우 아까와 똑같은 에러 발생 오타가 난 경우의 에러 함수가 아니라고 알려줌. 2023. 9. 17. [코딩애플] 진짜 웹개발로 배우는 실용 자바스크립트 1강 ~ 2강 안녕하세요 -> 안녕 Id 에 의해서 HTML 요소 갖고와 요소 갖고오고 안에있는 html 내용을 안녕으로 바꿔달라는 뜻 뒤에는 뭘 바꾸고 싶은지 적음 내용물 바꾸고 싶으면 innerHTML .style.color = html 요소의 색상 변경 오른쪽 걸 왼쪽에 집어넣기 display: none; = 숨기기 none 말고 block 으로 하면 다시 보이기 버튼생성 클릭했을 때 안에 있는 자바스크립트를 실행하라는 뜻 아까는 아이디 속성이 있었으나 이번엔 아이디 속성이 없음. 아이디 부여해준다. 2023. 9. 17. 이전 1 2 3 4 5 ··· 12 다음 728x90
