HTML 1 페이지

HTML

전체 14건 1 페이지

[pico css] 쉬운 반응형 페이지 작성 순수HTML 활용

난 복잡한 부트스트랩이나 테일윈드 같은것 사용하기 싫고 순수 html 로만 페이지를 만들고 싶다.보통 백오피스 페이지가 그렇습니다.(시간이 들어가니 그렇지요. 집에서 양복 입지 않는것과 같은 이치~)하지만 반응형은 필요하고 보여지는 것은 좀 괜찮아야 한다면 pico css를 추천합니다.폰트사이즈만 약간 줄여서 사용하면 그만.아래는 폰트사이즈 때문에 테스트 해본것입니다.결론 부터 말하면1rem은 16pxpico css 기본은 21px 입니다. 부트스트랩5도 이정도 될듯.그렇다면 내가 보기엔 왜? 폰트사이즈가 무지막지 하게 크냐!나 같은 시력이 좋은 사람을 위한것이 아니라 항상 그렇듯이 기준은 나쁜쪽에 둬야 하기 때문에 그…
[pico css] 페이지 네비게이션

기본적으로 제공이 안되고 있어서 확인 후 테스트 해본 것입니다.간단하며 어떤 방식으로 사용 할것 인지는 본인 판단으로 하면 되며 rem 방식이 제일 무난 하게겠지요. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="color-scheme" content="light dark" /> <!-- <link rel="s…
CDN활용 css, js 라이브러리 파일 오류시 로컬파일로 대체하여 사용하는 방법

외부파일을 읽어서 사용하는 경우에 오류가 있을 때 처리하는 방법에 대한것입니다.이런 문제 발생 할 걱정이 되면 자신의 서버에 모두 저장하고 사용하면 됩니다.일반적인 경우는 모두 자사의 서버에 두고 사용하기 때문에 이런것을 신경쓸 필요는 없지만 그래도 이런 방법도 있는것을 알고 있으면 좋겠지요~아래는 먼저 읽힌것이 실패할 경우 처리 하는 방법의 예 입니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device…
HTML FORM INPUT 파일태그 특정 이미지 목록만 받기

파일 첨부할때 사용합니다.기본이 모든 파일로 되어 있는데 특정 워드파일만 받고 싶다든지 아니면jpg 이미지만 받고 싶을때 선택을 그것만 가능하게 하는 방법에 대한 것입니다. accept 속성에 MIME 값을 넣어주면 됩니다.  <input type="file" accept="audio/*"> <input type="file" accept="video/*"> <input type="file" accept="image/*"> <!-- 특정 이미지포맷만 보여주고자 할때는 아래…
부트스트랩 위,아래,왼쪽,오른쪽, margin(마진), padding(패딩)

부트스트랩에서는 대부분 영문의 약자를 생각하면 되면 되는데 문제는 왼쪽, 오른쪽이 아니라 시작, 끝 인것이 있다는 것이다.마진: m패딩: p * 위, 아래top: tbottom: b * 왼쪽 오른쪽 보다는 시작과 끝으로 생각하면 된다.left: sright: e * 포함이다.즉 위아래는 top, bottom이 되고 x는 left, right가 되는것이다.위아래: y ( left / right )양옆: x (top / bottom)위와 별도로 부트스트램 템플릿의 경우 임으로 스타일 주면서 pc에서 rem으로 높은 값을 주면 모바일에서 깨지는(너무 켜저버리는) 문제가 있으니 건드리지 않는것이 좋다.기본적인 부분만 건드리고…
부트스트랩 모달 닫기버튼만 보이도록 하기

원하는 것은 이런것입니다.메시지를 보여주고 닫기 버튼만 있어서 닫을 수 있게 하는것이 없네요. 많이 사용할텐데 좀 만들지? 버전이 5.2까지 올라오면서 왜? 그랬을까 하는 생각이 먼저 듭니다.** 부트스트랩 모달 닫기버튼만 보이도록 하기 **<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> …
부트스트랩 버튼을 가운데(중앙) 정렬하기

부트스트랩 연습하는데 한쪽으로 쏠립니다.다운데로 버튼을 보내고 싶은데요 생각처럼 되지 않아 찾아 보아 정리 한것입니다.다른것들도 방법은 비슷합니다. 가운데 정렬하고 싶을대 말입니다. 테이블 같은것도 비슷한 원리 입니다. 부트스트랩 버튼을 가운데(중앙) 정렬하기 <div class="row"> <div class="col text-center">  <button class="btn btn-primary" type="button"…
부트스트랩 레이아웃과 빌더

빌더는 처음 사용하는 개발자에게는 상당히 유용 합니다.다운로드를 클릭해야 소스를 볼 수 있습니다.부트 스트랩 빌더https://www.layoutit.com/build 부트스트랩 레이아웃http://shoelace.io/만들어진 레레이아웃 위것 예제https://webruden.tistory.com/76화면 크기별 레이아웃https://blogpack.tistory.com/823
div 테이블(table) 만들기

DivTable.com 이란곳에서 가져온것입니다.이 사이트 방문하면 마우스로 끌어서 쉽게 만들 수 있는 방법을 보여 줍니다.테이블은 표이기 때문에 이것으로 레이아웃을 만들지 말라는것입니다. 표 인줄 착각할 수 있기 때문에 그래서 레이아웃 짤때는 아무의미가 없는 div 사용해야 된다는 것입니다.표 형식으로 된것은 당연히 table 사용해야 되는데 이때 div 쓰면 이 또한 바보 입니다.부트스트랩 테이블https://mdbootstrap.com/docs/standard/tools/builders/table/ https://divtable.com/generator//* DivTable.com */.divTable{ displ…
부트스트랩 테이블 왼쪽, 오른쪽으로 지정하는 방법

보통 찾으면 테이블 안에 있는 것을 어떻게 정렬 하는것에 대해서 나왔는데요.아래 부분은 그것이 아니라 테이블 자체를 왼쪽, 오른쪽 지정 하는것입니다. 부트스트랩은 기본적으로 가운데로 지정 되는것 같습니다.https://stackoverflow.com/questions/38160951/how-do-i-horizontally-center-a-table-in-bootstrap justify-content-startjustify-content-centerjustify-content-end<div class="row justify-content-center"> <div class="col-auto"> …
부트스트랩 테이블 특정 요소 모바일에서 제외시키기(보이지 않게)

테블릿까지 고려하면 좋지만 바쁜 관계로 모바일에서만 보이지 않게 하는 기능 입니다.테이블의 TD에서 특정한것은 모바일에서는 빼주는 역활의 부트스트랩니다.<!DOCTYPE html><html lang="ko"><head> <title>부트스트랩 테이블 특정 요소 모바일에서 제외시키기(보이지 않게)</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//cdn.…
HTML 문법체크 사이트 (유효성 검사)

사람의 기억은 알고 있는것과 꺼내는것과는 좀 다른것 같습니다.오래전부터 알고 있던것인데 갑자기 생각나서 확인하게 되었는데 수정할곳이 있군요.HTML 제대로 작성했는지 확인하는 사이트 입니다.아래 사이트에서 체크해서 내가 잘못 생각했거나 실수한 부분을 찾을 수 있습니다.브라우저에서 오류를 잘 보여주면 좋을텐데 일반적으론 보여주지 않기 때문에 자신도 잘 모릅니다.* HTML 문법체크 사이트 (유효성 검사) HTML 체크 주소체크 준비 - Nu Html 체커 (w3.org)
자주사용하는 HTML 태그 목록

웹봇으로 수집한것을 바탕으로 통계를 낸것입니다. 제가 잘 안쓰는것도 있네요.그런데 정말 이곳에 있는것만 익혀도 큰 무리는 없습니다. 그리고 이곳에 있는것만 익혀도 국내에선 안쓰는것들이 있어서 다른분들보다 많이 아실거란것 확신합니다.<html>, <head>, <body>, <title>, <meta>, <div>, <a>, <script>, <link>, <img>, <span>, <p>, <li>, <ul>, <style>, <br>, <h2&…
HTML의 역활과 쓰이는곳

마크업 언어라고 하는데요. 웹페이지를 구현할때 기능적인 역활을 하는것입니다.HTML이 먼저이고 그 다음 CSS 입니다.즉, 건물로 말하면 골격이 있어야 거기에 대리석 타일을 붙이든 장식을 할 수 있습니다.HTML은 다음과 같은 기능을 가집니다.. table - 표형태로 데이터를 보여줍니다.. a - 다른 페이지와 연결을 시켜 줍니다.. form - 데이터를 받아서 서버쪽에 보내줍니다.. <h1 ~ - 제목에 대한 설정. <img - 이미지를 보여줍니다.. <meta - 현재 웹페이지에대한 정보를 나열 합니다.......기본적으로 위와 같은 형태로 되어 있습니다.여는 태그가 있으면 닫는 태그가 있습니다.하…

게시물 검색