728x90 반응형 > 프로그래밍 언어100 VW단위를 사용해 보았습니다. CSS VW단위를 사용해 보았습니다. (youtube.com)줄이면서 같이 줄어드는거= 일반 rem 보다 쓸만하다. 이미지 같은건 % 넣으면 줄어들지만텍스트는 그렇지 않음. 텍스트까지 같이 줄어들게 하려면 vw 로 제작하기. rem 으로 작업하기. vw 로 제작하면이미지도 커지고 텍스트도 커짐. vw 공식: 현재 해상도 ( 기준 해상도 ) 1920 을 기준으로 작업을 할 것. ( 그때 그때 달라짐 ) 100vw 는 사용자 기기의 가로크기 만큼.with 의 100%와 같은 의미이렇게 계산. 나누기 1920 도 해야함. 반응형할 때미디어쿼리 자체가 필요 없게 된다. vw 를 사용하게 되면그래서 주석처리함.단점: 특정 구간에서 너무 작아보이고,특정 구간에서 너무 커보인다. 그래서 그 때는 따로 미디어 쿼.. 2024. 6. 15. 입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky 입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky (youtube.com) fixed예제포지션 fixed 부여 나머지 속성도 부여해줌.왼쪽과 위쪽에서 50px 떨어져 있는 것 확인 가능.stickysticky 적용sticky 는 일반적인 문서 흐름에 따라 배치함.저 위치가 자기 자리인 것.스크롤 되는 상위 요소에 대해서 오프셋을 적용근데 적용 안한 것처럼 보여짐.- 스크롤 이동이 이뤄질 때 그 속성을 발휘. 세부사항 top 수정문서 배치에는 정상적으로 위치해있는 걸 확인 가능스크롤 이동이 되다가 박스가 위에 붙어짐.top:0그리고 스크롤 내려도 고정이 됨.다시 스크롤 내리지말고 올라가게되면원래 문서 흐름대로 그 위치로 다시 되돌아감. 속성을 바꿔봄.bottom : 0스.. 2024. 5. 13. CSS 변수 사용법 5가지 중 1편 - root CSS3 - 104 [ css variables ] CSS 변수 사용법 5가지 중 1편 - 기본사용법 (youtube.com)기본 사용법동일 색깔동일 radius아이콘 색상 겹침 많음변수 안쓴 상태변수 써주기최상위에 변수 생성하기루트 선택자 사용파란색 = primary color = 변수 명색 지정해당 색상 필요한 곳에 변수명 사용한꺼번에 색 바꾸기 가능radius 도 지정변수명 만드는 규칙반드시 하이픈 2개로 시작ie 에서 먹통- 어차피 지원종료 2024. 5. 9. CSS에서 display: grid 의 사용법 CSS Grid 완전 정리 끝판왕 😎 (youtube.com)flex / grid아이템을 자유자재로 배치.flex - 아이템들을 1차원 적으로 배치.grid - 2차원 적 배치.물론 wrap 을 사용하면 flex 에서도 줄바꿈 가능.grid grid 도 flex 처럼 부모 Container에 grid 라고 지정해줘야 한다.이렇게 지정해주면 자식 요소들은 grid cell 로 변하게 됨.부모 Container 인 Grid 에 지정해 줄 수 있는 속성grid-template-columns가로 축으로 총 몇 개의 column 이 들어갈 수 있는 지,각각 column의 사이즈는 얼마인 지 지정해줄 수 있음.grid-template-rows세로로 몇 개의 row 가 있는 지, 사이즈가 어떻게 되는 지 지정해줄 .. 2024. 5. 8. 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. 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. 이전 1 2 3 4 ··· 12 다음 728x90 반응형
