농장/HTML5·CSS 9

Vscode 비주얼코드 브라우저 실행 단축키 설정하기

Html 파일을 실행하기 위해 폴더에서 직접 더블클릭하는 것은 매우 번거롭다. 툴에서 곧바로 실행하는 것이 훨씬 효율적이다. 1. 비주얼 코드 좌측 바에서 EXTENSIONS를 눌러준다. 2. 브라우저에서 바로 실행하고자 하니 검색창에 'browser' 라고 쳐보았다. 가장 위에 있는 것을 Install해보겠다. 원래 나는 적용이 되어있었는데 사용자 계정을 바꾸었더니 초기화되어버렸다. 3. 설치한 기능의 정보를 읽어보니 Alt+B 또는 Shift+Alt+B 를 사용하라고 한다. 실행시키고자 하는 문서에 단축키를 사용해보면 기본 브라우저로 문서가 열릴 것이다.

농장/HTML5·CSS 2020.04.25

[CSS] position : relative, absolute +중앙정렬하기

My First JavaScript Animation My First JavaScript Animation 출처: https://www.w3schools.com/ 추가로 참고하면 좋은 글: https://rgy0409.tistory.com/2951 ※ 주의할 점. absolute 속성은 inline이 아닌 div와 같은 블럭 element에 지정해야 작동함. 버튼에 absolute 지정해도 안먹힘. absolute속성에서 중앙정렬하기(CSS) 1. 수직과 수평에 대해 중앙정렬 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 2. 수직에 대해 중앙정렬 top: 50%; transform: translate(-50%); 3..

농장/HTML5·CSS 2020.03.31

[ HTML ] 이미지 원본사이즈를 최대한 유지하여 페이지에 맞추기 / 반응형 웹디자인

img태그 속성에 style="max-width:100%; height:auto;" width:100%는 이미지 원본 사이즈와 상관없이 페이지 너비에 맞추어 꽉 채우는 반면, max-width:*%는 페이지 너비가 원본 이미지 크기보다 크면 이미지 사이즈를 원본대로 하고, 페이지 너비가 이미지보다 작아지면 이미지 사이즈를 페이지 너비에 *%로 맞춘다.

농장/HTML5·CSS 2020.02.15

[ HTML ] 이미지 특정 범위에 클릭영역 지정하기 / img map

img 태그 속성으로 usemap을 지정(id와 유사) usemap='#*' 이미지 위치 상관없이 map태그를 기술. map태그 속 name 속성에 맵을 지정할 이미지의 usemap을 '#'없이 기입. map태그(와 마감태그) 사이에 area태그 기술. 필수속성으로 shape='도형이름:rect/circle/poly/default', coords='위치좌표값' shape속성값 : default는 전체, poly는 다각형 coords를 지정할 때 : 사각형(rect) - 상좌 꼭짓점의 x좌표, y좌표, 하우 꼭짓점의 x좌표, y좌표 원(circle) - 차례로 x좌표, 4좌표, 반지름(길이) 다각형(poly) - 꼭짓점들의 x좌표, y좌표 나열 활용 href 속성 - 클릭시 링크 이동 onClick 속성 ..

농장/HTML5·CSS 2020.02.14

[ HTML ] img 태그의 alt 속성

alt 속성은 사용자가 어떤 이유로 든 이미지를 볼 수없는 경우 (연결 속도 저하, src 속성 오류 또는 사용자가 화면 판독기를 사용하는 경우) 이미지의 대체 텍스트를 제공합니다. / 출처:w3school alt는 alternative의 줄임으로, 그 뜻은 1. 대안, 선택 가능한 것 2. 대체 가능한, 대안이 되는 3. 대안적인, 대체의(전통적인 방식과 다른) 이다. 웹문서를 방문한 사용자 중 이미지가 정상적으로 표시되지 않는 경우도 분명 존재할테니 이미지를 제공받지 못하는 사용자를 위해 대체 텍스트를 적용하는 것이 좋을 것 같습니다.

농장/HTML5·CSS 2020.02.14