IT 내맘대로 끄적끄적

[HTML] 유용한 태그 모음 hr태그 <hr> 닫는 태그는 없다. hr 태그 자세한 내용 https://aboooks.tistory.com/256 label태그 <label> label태그는 양식 입력 창(form control)을 설명하는 이름표이다. label 요소로 묶인 텍스트를 클릭하면, form control(양식 입력 창)이 선택 된다. (다시 클릭하면 선택 해제 됨) form control이란 -> input, textarea, button, select 요소로 생선된 입력 제어 장치 label로 묶는 방법은 두 가지가 있는데, 1. for 속성을 사용하거나 2. <label>요소 안에 form control을 두는 것 label태그 자세한 내용 https://aboooks.tistory.com/298

[HTML] script태그를 body마지막에 쓰는 이유 HTML문서를 보다보면 script태그가 head안에 있는 경우도 있고 body안에 있는 경우도 있는것을 볼 수 있다. 그런데 왜 script태그를 body부분 마지막에 쓰는것이 좋을까? 1.  객체 값 안에 null이 들어갈수도 있어서 좋지 않다. 위와 같이 hw를 정의하지 못했으므로 그에 따르는 document.getElementById가 없어서var hw에서 hw에 null이 들어가게 된다 위와 같은 것을 피하기 위해서 window.onload()를 사용할 수도 있지만 추천하지는 않는다. 2. 사용자의 렌더링 부분이 길어진다 Head태그에서 자바 스크립트 코드를 오랫동안 잡고 있으면 블락되는 시간이 길어진다 이렇게 되면 사용자의 웹 페이지부분에 렌더링되는 부분이 길어지기 때문에 좋지않다. ex) 흰 화면만 오래 띄워지는 경우 등등 출처 https://opentutorials.org/course/1375/6620 

[HTML] a href="#" .. 의미 a 태그는 anchor의 첫 글자로서 '닻'이란 의미, 즉, 다른 문서로의 이동, 또는 같은 문서내의 이동을 위해 사용함 웹페이지의 href="#" 모습을 볼 수 있는데 각 경우 별로 정리해보았다 1. 클릭 이벤트 발생시 페이지 전환을 하지 않도록 하기 위해서 쓰임 # + id를 사용해서 같은 문서내의 해당 element로 이동하도록 하는 것인데, #으로 의미없는 링크를 주어 페이징이 안되도록 하는 것 2. 만약 화면 최상단으로 이동을 목적으로 #을 쓴다면 다음 코드와 같이 window.scrollTo()를 쓰는것이 더 좋은 방법 3. href="#"와 href="#;"(세미콜론)의 차이는 세미콜론이 붙으면 화면 최상단으로 이동하지 않는다 href="#"으로 하면 이벤트가 발생하기전 화면 최상단으로 이동한 후 이벤트가 수행됨 href="#;"으로 하면 최상단으로의 이동 없이 이벤트가 수행됨 출처 http://blog.naver.com/PostView.nhn?blogId=moonv11&logNo=60158966996 https://www.w3schools.com/bootstrap/bootstrap_buttons.asp

[HTML] table만드는 방법 < style type = "text/css" > .tg { border-collapse : collapse ; /*셀들간의 공백을 가질지 안 가질지를 결정*/ border-spacing : 0 ; /*separate 일때문 유효함*/ } .tg td { font-family : Arial , sans-serif ; /*Arial글꼴을 먼저 찾고 없으면 웹브라우저에서 설정한 명조 계열 글꼴을 찾음 영어는 Arial이 있고 한글은 없으면 한글은 웹브라우저에서 설정한 명조 계열 글꼴*/ font-size : 14px ; /*글자 크기를 지정 14px이처럼 구체적지정말고 smaller larger등등도 가능*/ padding : 10px 5px ; /*테이블 내의 여백*/ border-style : solid ; /*말그대로 테이블 외각 border style*/ border-width : 1px ; /*선 두께*/ overflow : hidden ; /*내용이 요소의 크기를 넘어갔을 때 어떻게 처리 할 것인지?*/ word-break : normal ; /*띄어쓰기가 없는 긴 단어를 어떻게 처리 할 것인지?*/ border-color : black ; } .tg th { font-family : Arial , sans-serif ; font-size : 14px ; font-weight : normal ; padding : 10px 5px ; border-style : solid ; border-width : 1px ; overflow : hidden ; word-break : normal ; border-color : black ; } .tg .tg-baqh { text-align : center ; vertical-align : top } .tg ....

[HTML] head에 어떤걸 써야 하나? 검색엔진이 웹 페이지에 처음 방문했을때, head 요소부터 살펴봄 head head요소의 정의 : 문서의 메타데이터의 집합 메타데이터 : 웹 페이지에 직접적으로 보이지 앟는 정보 검색 엔진 및 스크린 리더 등에서 활용  예를 들면 페이지의 정보 페이지가 검색엔진에 노출이 될지 안 될지 이 페이지에 대한 소개 글 CSS파일, JS파일을 연결하는 부분들 title 요소 <title> 문서의 제목 </title> title 요소는 제목이나 이름을 나타냄 브라우저 창 제목이나 페이지의 탭에 나타나게 됨 구글 같은 검색엔진에서는 검색된 페이지의 이름으로 나타냄 접근성을 위해 특수문자 사용은 자제해야함 meta 요소 <meta 속성="속성값" /> 메타태그는 스스로 닫는 태그이기 때문에 이와 같이 적는다.  메타에서 담을 수 있는 종류는 여러 종류가 있다 Style요소 <style type="text/css"> body{ color:#333; } </style> 일반적으로는 html과 css파일을 분리해서 사용하지만, html안에 css를 그대로 사용하는 방법 물론 관리 상 css파일을 분리하여 작성하는 것이 더 좋은 방법 종종 간단한 텍스트나 이 페이지만에서만 사용할 css라면 아주 유용 link요소 <link href="style.css" type="text/css" rel="stylesheet" /> 주로 css 파일을 연결할 대 사용 href : 해당 css파일의 주소를 적으면 됨 type : 주로 css를 쓰지만, 다른것을 사용하기도 함 rel(relationship) : 주로 stylesheet를 씀 ...

[HTML] img태그(alt) <img src = "image.jpg" alt = "이미지의 묘사 내용" /> 위와 같이 src속성에 이미지 주소를 넣어 사용한다. img요소에서 src속성과 alt의 속성은 필수 속성 ex) img src ="http://www.everdevel.com/material/images/HTML/asimo.png" alt  속성 img요소의 alt속성은 Alternate(대체하다)의 줄임 말 즉, 이미지의 대안 이미지는 외부의 주소이기 때문에, 주소가 잘못되었거나, 해당 위치의 서버에 문제가 있다면 이미지를 못 읽어 올 수도 있음 이럴 때 이 alt속성의 내용이 해당 이미지를 대체하여 나타냄 하지만 이미지가 제대로 로드가 될 경우에는 이 속성 값이 브라우저에 보이지 않음 그러나 꼭 써야하는 속성 왜냐하면 alt속성은 이미지를 보지 못하는 분들이 봄 시각장애인은 이미지를 볼 수 없기 때문에, alt속성을 스크린리더로 들음 또한, 이미지를 제대로 이해하지 못하는 검색엔진 역시 이 alt속성을 받아드림 <p> <img src = "bullet.png" alt = "블릿" /> 항목 1 </p> <!-- X --> <p> <img src = "bullet.png" alt = "" /> 항목 2 </p> <!-- O --> 만약,  위와 같이 alt로 블릿을 넣을 경우, 스크린 리더에서 '블릿 이미지. 항목 1', '블릿 이미지, 항목2' 이런 식으로 읽게 됨 무의미한 내용을 읽게 되므로 이럴 때는 alt속성을 비워야 함  출처 http://webberstudy.co...

[HTML] p, br, div, span 태그 br태그 A forced link break 줄바꿈태그 void element임, 즉 내용이 없는 태그  열리는 태그 하나만 있으면 됨 CSS를 이용해서 간격을 조정할 때 쓰면 좋음 p태그 Paragraph 줄바꿈 + 여백을 넣어줌 이러한 기본 여백으로 <br/><br/>보다 <p>를 씀 하나의 단락으로 표현하고 싶으면 p태그를 씀 줄바꿈을 할 때 p태그를 써도 되지만 p태그는 간격이 고정되어 있다 div태그 Division block 기능을 가지고 있다. 다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계 하는데 쓰임 주로 CSS와 연동하여 쓰임 줄바꿈만 (여백x) Span 태그 특별한 기능을 가지지 않고 CSS와 함께 쓰임 inline 기능을 가지고 있다. 줄바꿈이 되지 않는다 이러한 태그들을 적절히 사용해야 하는 이유 각각의 목적에 맞춰서 사용하여 HTML 문서를 작성하면 의미적/구조적으로 Well-Formed HTML Documnet가 되어 이럴 경우 다른 장치들과의 호환성을 극대화 시킬 수 있다. 출처 http://sinbd.com/index/hompy/study.php?mid=69&r=view&uid=24573 https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1

[HTML] DOCTYPE을 맨위에 쓰는 이유? 밑의 설명이 별로 필요가 없으면 HTML을 만들 때 맨 위에 <!DOCTYPE html>을 넣자 Document type declaration을 약자 html코드를 작성 할 때 어떤 방식의 html코드 및 태그가 어떠한 표준, 약속에 의해서 작성되었는지 브라우저에게 알려줌 HTML이 여러 버전이 있는데 현재 시점에서는 HTML5를 사용하기 때문에  <!DOCTYPE html>를 사용

[HTML] meta charset="utf-8"이란? HTML파일의 인코딩을 알려주는 태그  코딩을 명확하게 알려주지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 추정해서 처리해주는데, 처리가 정확할 경우도 있지만, 그렇지 못하는 경우도 있음 다양한 경우에 한글이 깨지지 않고 잘 보이기를 기대한다면 위의 태그를 꼭 적을 것 주의점 해당 html파일 utf-8이 아닌 다른 인코딩(euc-kr 등)으로 작성되어 있는 경우 해당 인코딩을 명시해 줘야 함 mysql같은 DB와 연동해서 결과를 출력할 때에는 해당 DB인코딩도 맞춰주지 않으면 DB출력 결과가 깨지는 문제가 발생할 수도 있음 인코딩이란? 문자 코드를 컴퓨터가 이해할 수 있도록 0과 1의  Binary값을 가지는 연속적인 bit형태로 mapping해주는 작업 요즘은 대부분 utf-8을 많이 사용함 참고 : https://github.com/codingeverybody/codingyahac/issues/107