My Web Story

IT/HTML

[HTML]페이지 공유시 썸네일 이미지 예쁘게 나오게하기

html 상위에 코드 입력시 카카오톡, 페이스북 등의 sns 및 소셜 공유시 이미지가 깨지지 않게 나오게 해줍니다.

IT/HTML

a태그 페이지 상단이동 방지 방법

A링크 를 사용하여 링크를 클릭하면 페이지 스크롤이 자동으로 초기화되어 상단으로 올라간다. 이를 방지하기 위해 아래 3가지 방법을 사용 할 수 있다. 방법1. A링크 방법2. A링크 방법3. A링크

IT/CSS

마크업, css 웹표준 검사 사이트

각 사이트마다 나오는것이 다를 수 있으므로 다 검사해보는것이 좋다. ​ CSS, 마크업 두개다 체크 https://validator.w3.org/unicorn/# css검사기 http://www.css-validator.org/validator.html.ko# https://jigsaw.w3.org/css-validator/ 마크업 검사기 https://validator.kldp.org/# https://validator.w3.org/

IT/HTML

웹표준이란

웹표준 · 웹 사이트를 만들 떄 지켜야 하는 약속들을 정리한 것 · 웹 표준을 지켜 사이트를 제작하면 장소나 브라우저와 상관없이 쉽게 웹사이트를 볼수있다. (크로스브라우징 가능(모든 브라우저(익스플로어, 크롬, 파이어폭스, 사파리)에 작동가능) · 웹 표준으로 문서 하나를 만들면 어떤 기기(브라우저)에서나 볼 수 있기 때문에 개발자와 디자이너의 시간 절약 · html5로 문서를 만드는 것 = 웹 표준을 지킨 문서를 만드는 것 · html , css , js 3가지를 갖춘 것을 말한다. · html5부터 웹표준을 준수한다. · 의미(디자인) : css ​ ▶ html : 뼈대를 갖춘다. ▶ css : 디자인을 만든다. , 효과를 적용시킨다. ▶ JS : 효과를 적용시킨다.

IT/HTML

html 기본 태그정리

● 제목태그 : ~ 까지 있으며 h1은 페이지에 하나만 존재한다. ● div : division의 약자로 레이아웃(웹사이트 틀)을 만들때 주로 사용한다. 웹페이지에서 논리적 구분을 정의하는 태그이며 블록을 알맞게 배치하고 width값, height값을 정해줄 수 있다. ● p(paragraph) : block요소며 긴 글을 단락에 따라 나눌때 사용한다. ● span : inline속성으로 div와 달리 width값, height값을 정해줄수 없다. 보통 중요단어에 사용하나 필요에 따라 사용 할 수 있다. ● pre : 공백을 살려주는 태그 (줄바꿈 적용됨) ​ ​ ● 항목태그 · ul : (unordered List) > li: 순서가 없다. · ol : (ordered List) > li: 순서가있다...

IT/HTML

웹접근성1탄

웹접근성(폭넓은) · 장애우를 위한 사용 할 수 있게 하는 것 · hover를 사용하면 focus도 같이사용하는것이 좋다. · tab키를 index로 줘야한다. · alt태그 사용만해도 웹접근성을 지킬수있다. ▶ 이미지같은경우 alt값으로 처리해주거나 내용이 많을경우 ul,li로 만들어 blind처리해주고 alt="하단참고"라고 해준다. ★blind 처리방법은 css게시판을 참고하세요★ ​ 1)온라인 서식과 웹표준/웹접근성 ▶ 온라인 서식 코딩시 웹표준 및 웹접근성을 준수하는 코딩은 각 서식에 label의 for와 name, title 속성을 부여하는 것이다. ▶ 또한 label for와 id로 연결되기에 둘의 값은 일치시켜야한다. ▶ 한편,온라인서식 코딩시 웹표준/웹접근성을 고려해야하는 서식의 종류는 ..

IT/HTML

html이란?

html(hyper Text Markup Language) 이란 무엇일까? - 웹에서 웹에 맞는 형식인 *.html(또는 *.html)로 문서를 저장해야 한다. - 텍스트뿐만 아니라 이미지, 링크 등 여러 요소들을 다루고 표시 할 수 있어야한다. - 웹에서 자유롭게 오갈수 있는 웹문서를 만드는 언어가 html - 하이퍼텍스트(Hyper Text) : 웹사이트에서 일크를 클릭해 다른 문서나 사이트를 즉시 이동할수 있는 기능 - 마크업(mark up) : 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느부분이 사진이고 링크인지 표시하는것을 말한다. - 하이퍼텍스트 + 마크업 -> 웹에서 자유롭게 오고갈수있는 웹문서를 만드는 언어 - 꺽세를 항상 닫아준다. - html문서(웹문서)는 파일 ..

IT/CSS

[css] radio버튼 디자인 바꾸기

▶ HTML 라디오버튼1 라디오버튼2 ▶ CSS input[type="radio"] { display:none; } input[type="radio"] + label span.round{ display:inline-block; width: 22px;height: 22px; margin: -2px 9px 0 4px; font-size: 0; vertical-align: middle; background: url('../images/common/radio_brn.png') no-repeat;cursor:pointer; } input[type="radio"]:checked + label span.round { background: url('../images/common/radio_brn_slc.png') no..