728x90 > 프로그래밍 언어104 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. 이전 1 2 3 4 5 ··· 18 다음 728x90