728x90 반응형 웹UI46 HTML/CSS - vscode 자동 저장, 실시간 링크설정(live server) 1. vscode 자동 저장 ctrl + , 로 설정 진입 -> auto save 검색 - off : 수동 저장 - afterDelay : 수정 후 몇 초 후 저장 (ms단위로 디폴트 1000) -> Auto Save 밑 Auto Save Delay 에서 설정 - onFocusChange : vscode의 현재 탭 이외의 곳을 클릭하면 저장됨 - onWindowChange : vscode 외의 창을 클릭하면 저장됨 2. vscode Live Sever vscode 좌측 메뉴 바에서 Extensions 클릭 (단축키 ctrl + shift + x) -> Live Sever 검색 -> Install html 파일 우클릭 -> Open with Live Server 선택 2021. 3. 18. HTML/CSS - 이미지 정렬, 이미지의 일부만 노출 ** f12 혹은 ctrl + shift + i 로 개발자 도구를 열 수 있다 1) div태그 내에 이미지 삽입 시 여백이 생기는 경우 display: block; - (이미지는 기본적으로 inline) vertical-align: bottom; - (인라인 요소의 기준선을 bottom으로 설정) 2) 페이지 축소 시 메인 이미지가 중앙이 아닌 좌로 정렬될 경우 display: block; margin: 0 auto; 3) 설정된 크기의 영역보다 큰 이미지를 삽입해야할 경우 overflow: hidden; - 영역 내 이미지만 보이게 -> 영역 태그에 작성 transform: translate(0, 0); - 이미지 위치 조절 -> 삽입된 곳 : (0, 0) 을 기준으로 + or - 부호로 조절 2021. 3. 18. HTML/CSS - CSS float과 inline block (블록 스타일을 위로 정렬) display inline-block -> 영역을 inline style의 block으로 설정하여 block스타일을 유지하면서 공백이 삭제된다 float left, right -> float은 해당 영역 이후를 3차원화하여 공백 영역을 삭제한다 (겹치는 부분 발생) **inline-block의 경우 border가 각각 생성되어 겹치는 영역의 border가 2배가 되기 때문에 float:left를 사용하여 border의 선이 겹치게 해주면 편리함 clear both -> claer가 적용된 영역부터 float 해제 큰 테두리 안의 작은 영역들에 float을 주면 테두리 밖 영역에는 영향을 미치지 않는 것 같다 반대의 경우로, 큰 영역에 float 설정 시에도 내부에 영향을 미치지 않는 것 같다 생각대로 위.. 2021. 3. 11. 2021.03.10) HTML/CSS - css속성 overflow, boxsizing 등 학교소개 교육과정 취업정보 커뮤니티 상담신청 #header > #container > #gnb > li > a 에서 a의 높이를 키우면 상위 div태그도 함께 height가 늘어날줄 알았지만 커지지 않았다 a태그의 높이는 106이지만 header와 container는 height가 각각 90으로그대로였다 css파일에서 #container { overflow: hidden; }overflow visible: 기본 값, 상자 밖으로 컨텐츠가 보여진다 hidden: 영역을 초과하는 부분을 숨긴다 ( 겹쳐진 부분 없이 영역 분리 후 적용 되는듯) scroll: 초과하는 컨텐츠는 숨기고 스크롤이 생긴다 (가로/세로 모두) auto: 영역을 초과할 경우 스크롤 바가 생긴다 (넘치는 영역에만 생성) -> 영역을 초과.. 2021. 3. 10. 이전 1 2 3 4 5 6 7 8 ··· 12 다음 728x90 반응형
