본문 바로가기

HTML5

[Web]간단한 랜덤 타이핑 페이지 HTML, CSS, Javascript를 이용한 간단한 랜덤 타이핑 페이지 제작 코드 설명 HTML language SUCODING | 100 Subscribe CSS * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: darkslateblue; } .wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; } .material-icons { font-size: 10rem; } .lg-text { font-size: 2rem; font-weight: bold; margi.. 2023. 7. 19.
HTML_멀티미디어 태그 멀티미디어 태그 정리를 정리해보려 합니다. video Tag 비디오를 지원하지 않는 경우 표시할 내용 video Tag는 위의 코드와 같이 간단하게 비디오를 넣을 수 있습니다. poster : 비디오가 로딩되는 동안 표시할 사진 이미지이입니다. HTML5에서 지원하지 않는 코덱일 경우 비디오 태그 안에 넣은 내용이 표시됩니다. autoplay : 로딩된 후 자동 재생할 지 아닐지를 선택할 수 있습니다. controls : 소리조절, 일시 정지 등의 메뉴를 표시할 지 선택하는 속성입니다. loop : 무한 반복 재생할지를 설정합니다. muted : 음소거 기능을 합니다. audio Tag 오디오를 지원하지 않을 경우 표시할 내용 audio Tag는 위의 video Tag와 거의 비슷합니다. autoplay.. 2023. 7. 14.
HTML_공간, 시맨틱 태그 HTML중 공간에 대한 태그는 3종류는 Block, lnline, lnline-block 입니다. Block 태그는 한 줄을 통쨰로 차치하고, lnline tag와 lnline-block 태그는 내용물의 길이만큼 공간을 차지합니다. lnline tag는 높이와 너비를 정할 수 없고, 상하 padding과 margin을 줄 수 없습니다. Block 형식의 태그 중 대표적인 것으로 div가 있습니다, lnline은 span이 있습니다. span1span2span3divspan4 위의 코드를 실행시 아래와 같이 결과가 나옵니다. span1span2span3 div span4 시맨틱 태그 header, nav, main, section, article, aside, footer header : 페이지 소개나 제.. 2023. 7. 12.
HTML_링크, 이미지, 테이블, 리스트 태그 사용법 링크, 이미지, 테이블, 리스트 태그에 대하여 정리해 보려고 합니다. 링크 Tag a 태그는 클릭 시 다른 페이지로 이동시켜주는 태그입니다. 속성은 href와 target이 있는데 herf는 주소를 나타내고, target은 새창을 어디에 띄울건지를 나타냅니다. 링크 이미지 Tag 이미지는 이미지를 불러오는 태그입니다. 이미지는 안의 내용이 없기 떄문에 닫는 태그가 없습니다. 속성은 이미지의 경로를 불러오는 scr와 이미지의 경로가 잘못됬거나 파일이 꺠질 시 나오는 메세지를 입력하는 alt가 있습니다. 테이블 Tag 테이블은 표를 표시하는 태그입니다. 테이블은 셀 하나 하나가 다 태그이기 떄문에 간단한 테이블도 양이 좀 많습니다. caption: 테이블의 제목입력 thead: 첫 줄 tfoot: 마지막 줄.. 2023. 7. 10.

티스토리툴바