728x90 반응형 전체 글407 [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. [2-3] 웹 명함 구축하기 (1) - CSS 정리 (vw,vh,position,inline,grid) vw, vhCSS의 반응형 단위= 대표적으로 vw, vh, rem, em을 자주 사용vw - 화면의 가로vh - 화면의 세로ex) 100vw뷰포트의 전체 영역을 100%라고 생각해서100vw 라고 함.em - 부모 폰트 사이즈 영향. 상속(상대) 개념rem - 절대 개념display: inline, display:inline-blockdisplay: inline 하고display: inline-block 차이display: inline= 딱 자기 컨텐츠 영역만 차지= 가로 정렬이 된 것처럼 보임.= 높이가 지정이 안됨.- 높이를 지정해도 설정이 되지 않음.display: inline-block- 자기 컨텐츠 만큼 차지- 높이 값 지정 가능= 인라인 요소지만, 블록 속성 가짐.= 높이 값을 바꿔주지 못했던.. 2024. 4. 25. [2-2] 반응형 웹 사이트 구축하기 (4) - 코드 보호되어 있는 글 입니다. 2024. 4. 24. [2-2] 반응형 웹 사이트 구축하기 (4) - 모바일 사이즈 // 2-2) 반응형 웹사이트 만들기@media screen and (max-width: 1024px) { .contents p { font-size: 1.4rem; }}@media screen and (max-width: 768px) { .door-line { display: none; } .static-door-line { // 태블릿 사이즈에서는 이게 보이게 하기. (새로 만든 door-line ) display: block; } .background { padding: 0; // 녹색 막대기 개수 조정 span { // span태그 너비조정 width: 25%; margin: 0; .. 2024. 4. 24. [2-2] 반응형 웹 사이트 구축하기 - 코드 보호되어 있는 글 입니다. 2024. 4. 24. [2-2] 반응형 웹 사이트 구축하기 - 테이블, anchor태그 table 태그 하나 작성하면 tbody 라는 것 안에 자동으로 들어가게 됨.td 들은 자동으로 display : table-cell 적용돼있는 것 확인 가능border-top과 bottom: 3가지의 속성이 들어감1) border-bottom-width2) border-bottom-style3) border-bottom-color 2024. 4. 24. [2-2] 반응형 웹 사이트 구축하기 - 애니메이션 돌아가는 막대기 doorline 스타일 지정// 막대기 돌려주기 - keyframes 활용 - 만들고 해당 속성에 부여// keyframes 작성 방법 다양 - from 과 to 활용// 첫 번째 상태와 마지막 상태 지정// from 과 to 말고도 0% 와 100%로 치환하여 사용 가능.// 회전하니까 rotate 사용 - 0degree 에서 360degree 까지 360도 돌아가게@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}Keyfrmaes 를 먼저 생성해주고해당 속성에 부여한다.// - keyframes 작성해주고 animation 지.. 2024. 4. 24. 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] rem 또는 em 계산 방법 (변환) 폰트 사이즈가 19.2px 일 때, rem 으로 변환 하는 방법. ( html 의 font-size 는 16px 일 때의 경우 ) 참고 사이트 PX to REM converter (instantly and bidirectional) (nekocalc.com) PX to REM converter (instantly and bidirectional) PX ↔︎ REM conversion tables PixelsREM1px0.06rem2px0.13rem3px0.19rem4px0.3rem5px0.3rem6px0.4rem8px0.5rem10px0.6rem12px0.8rem14px0.9rem15px0.9rem16px1rem18px1.1rem20px1.3rem24px1.5rem25px1.6rem28px1.8rem32.. 2024. 4. 22. 이전 1 ··· 10 11 12 13 14 15 16 ··· 46 다음 728x90 반응형
