본문 바로가기

Language40

HTML5 anchor/ image map anchor 만들기이미지 맵 만들기SVG image image map 만들 때 이미지 주소로도 생성이 가능하다.image map에서 area shape가 circle일 경우 coords는 좌표값과 반지름크기로 지정한다. Q: 이미지맵 좌표 쉽게 알아내는 방법(그림판 이용하는 방법 말고) A: 그림판이 제일 쉬운 방법.. 프로그램을 이용하는 방법도 있지만 이게 제일 간편하다.anchor 만들기id 속성을 이용해 이동할 위치 지정 후, 태그와 href 속성을 사용 anchor로 연결할 링크 만들기.도착 표시될 텍스트/이미지 출발 표시될 텍스트/이미지 출발에서 클릭하면 도착으로 이동텍스트 태그목록 태그표 생성이미지와 하이퍼링크 태그이미지 맵 만들기map태그 area태그, usemap 속성을 이용해 이미.. 2022. 4. 8.
HTML5 하이퍼 링크/ 이미지 링크/ 텍스트 링크 하이퍼 링크이미지 링크텍스트 링크background-color 변경 할 때 html color codes에서 가져올 때 #을 꼭 앞에 붙여야한다. (#FEFCAC)images폴더에서 이미지 가져올 때 같은 레벨에 있는 폴더에서는 상위폴더를 찍고 와야한다.이때는 '..'으로 표시한다. ex) Q:표 안의 텍스트 정렬하는 방법 A: 말고 ,,,에도 적용 가능. Q:이미지 옆으로 텍스트가 오도록 정렬하는 방법 A:더보기로 위치 지정. 를  정렬하고자 하는 텍스트 밑에 태그해서 범위를 지정. 안 붙였더니 그 뒤에 다른 텍스트들까지 전부 정렬되어버림.+ 추가 :  짧은 단어 같은 경우는 태그를 이용하면 inline속성으로 자연스럽게 옆으로 정렬된다.가장 간단한 방법은 {float:left} 혹은 {float:ri.. 2022. 4. 6.
HTML5 표 태그 / caption/summary/rowspan/colgroup html을 이용해서 표 만들기 응용 (요즘은 table 사용빈도가 많이 낮다고 합니다. 참고하세요.) caption 표 제목과 설명을 표 상단에 표시 table 안에 위치 브라우저 제조업체 사이트 크롬 google www.google.com 파이어폭스 mozilla www.mozilla.org 엣지 microsoft www.microsoft.com figcaption table 밖에서 figure와 함께 쓰이며 중앙정렬 아님 브라우저 제조업체 사이트 크롬 google www.google.com 파이어폭스 mozilla www.mozilla.org 엣지 microsoft www.microsoft.com aria-describedby="summary"를 table 안에 태그해서 표에 문장 연결 가능 capt.. 2022. 4. 6.
HTML5 텍스트 태그/ 목록 태그/ 표 태그 텍스트 태그 strong : 내용을 강조할 때 b :단순히 굵게 표시할 때 강조할 내용 강조할 내용 em : 내용을 강조할 때 i : 단순 기울림 강조할 내용 강조할 내용 abbr : 약자 표시 IoT title 속성을 함께 사용할 수 있음. title의 내용이 마우스 커서를 대면 표시됨 약자 cite : 웹문서나 포스트에서 참고 내용 표시 예) 'https://developers.google.com/search/docs/beginner/get-started?hl=ko' 'https://developers.google.com/search/docs/beginner/get-started?hl=ko' kbd : 키보드 입력이나 음성 명령 같은 사용자 입력 내용 예) "F5키를 누릅니다." 음성명령 내용 sma.. 2022. 4. 5.