본문 바로가기
728x90
반응형

고윤서16

[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] 반응형 웹 사이트 구축하기 - 테이블, 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] 반응형 웹 사이트 구축하기 (1) rem = em 과 같이 쓰임.반응형을 위해서 최적화 된 단위.rem / em= HTML 에 설정된 폰트 사이즈에 영향을 받음.HTML 의 폰트 사이즈 = 16px1rem = 16px만약, HTML 의 폰트 사이즈가17px로 지정됐을 경우,1rem은 17px 이 된다.HTML 에 있는 font-size는시스템의 기본 설정에 의해서도 계속 바뀜.- "반응형"으로 제작할 땐,미디어 쿼리의font-size에 vw 를 삽입해준다.= 손쉽게 스타일들이 일정하게 줄어들도록만들어 줄 수 있음.피그마에서의 p태그 폰트 사이즈= 27.21rem = 16px이므로27.2를 16으로 나눠줌.27.2 / 16 = 1.7 나옴* 1.7 rem 인 것.em = 부모 / 자신의.. 2024. 4. 18.
[2-1] 반응형 웹 사이트 구축하기 - 코드 보호되어 있는 글 입니다. 2024. 4. 17.
728x90
반응형