본문 바로가기
728x90

> 콜로소/[고윤서] 인터랙티브 웹사이트 만들기16

[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) - 모바일 사이즈 // 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] 반응형 웹 사이트 구축하기 - 애니메이션 돌아가는 막대기 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.
[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] 반응형 웹 사이트 구축하기 - 메인화면 만들기 웹을 공부하면서 사전이 될 웹사이트들: MDN web docsw3big.comcss-tricks.com (꼼수 부려서 효과적으로 보이게 하기)stackoverflow.com( 개발하다가 모르는 거 생겼을 때 검색 또는 질문 가능)alt = 이미지가 어떤 것을 표현하는지 적어주면 됨.alt 태그를 작성해주는 것이 웹 접근성에 좋음id 작명 방법class 와 달리대문자를 사용해서 대부분 띄어쓰기를 표현ex)#countPlus#count_plus.count-plus.count_plusHTML 태그의 종류 = 인라인 태그target 속성 - _blank / _self 넣어줄 수 있음.외부 사이트로 이동 시킬 땐, 새 탭에서 여는게 좋기 떄문에blank를 가장 많이 사용.. 2024. 4. 17.
[1-2] 디자인 툴 및 플러그인 설치 & 개발 visual studio code - live sass compiler 설치 scss - scss 안에 있는 내용들을 css 포맷으로 변환 2024. 4. 14.
728x90

티스토리툴바