728x90 반응형 웹UI/HTML_CSS26 HTML/CSS - html label태그 label 태그 input영역의 이름을 클릭해도 input과 같이 작동하게 할 수 있다 label 태그의 for 속성 값이 같은 값을 같는 id를 찾는다 2021. 3. 26. HTML/CSS - overflow: hidden; 으로 특정 영역만 보이게 부모 자식 관계를 갖는 영역 세 그룹, 자식 노드에는 형제를 갖는 형태로 준비한다 (조부모, 부모, 자식) 자식 노드에 크기 설정, float: left; 부모 노드에 자식 노드를 전부 담는 크기 지정 조부모 노드에 자식 노드 1개를 담을 수 있는 크기와 overflow: hidden; 지정 2021. 3. 23. HTML/CSS - display: flex; (요소를 수평 구조로 정렬) 요소를 수평 구조로 정렬하기 div등의 blcok 요소를 다루다보면 display: inline-block; 설정을 주고 자리가 충분히 남아있음에도 좌 상단으로 정렬되지 않는 현상이 있다 float 등을 사용하면 되지만 요소들을 3차원으로 배열하다보면 화면 구조 전체가 무너지기도 한다 -> 정렬할 영역 상위 영역에 display: flex를 주면 2차원 요소들을 쉽게 수평 구조로 정렬 가능 -> flex의 경우 부모 영역의 크기 1줄에 자식 영역 요소들을 모두 채워넣는다 2021. 3. 19. 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. 이전 1 2 3 4 5 6 7 다음 728x90 반응형
