728x90 CSS46 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 크기(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. [CSS] li들 사이에 간격 주고 싶을 때 li들 사이에 간격 주고 싶을 때 li { margin-bottom: 20px; /* 아래쪽 간격 추가 */ } li:last-child { margin-bottom: 0; } 2024. 3. 29. [CSS] 폰트 적용하기 (구글 폰트) 폰트 적용하기 (구글폰트) Browse Fonts - Google Fonts Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 해당 사이트 이용 사용할 폰트 검색 Get font 눌러주기 Get embeded code 눌러주기 @import 를 눌러주기 CSS 맨 위에 복사붙여주기 해주면 된다. 이렇게 CSS 맨 상단에 넣어줌. 그리고 적용하고 싶은 부분 font-family 찾아서 CSS 에 넣어주기 아이디 mclive 에 적용 font-weight 를 SemibBold로 적용하기 위해 600 으로 수정. 2024. 3. 27. [CSS] 자꾸 까먹는 가운데 중앙 정렬 텍스트 중앙정렬하기 맥도날드 라이브라는 글자를 중앙으로 오게하고싶음. HTML "MacDonald’s Live" style 태그를 추가해서 CSS 적용 text-align: center 이미지 중앙정렬 display:block; margin:auto; 2024. 3. 27. 이전 1 2 3 4 5 6 ··· 8 다음 728x90
