본문 바로가기

Web + 디자인/Publishing + 코딩

HTML 기초 #2 [HTML Tag] 오늘은 알파벳 'A'로 시작하는 태그에 대해 알아보겠습니다. 만약 찾고 싶은 태그가 있으시다면 키보드의 Ctrl + F를 누르신 후 '태그이름'으로 검색해주십시오. 주석(설명)을 나타냅니다. 코드상에만 존재하며 본문에는 표시되지 않습니다. HTML 문서 형식에 관한 버전 정보(DTD)를 설정합니다. 웹표준에서는 반드시 모든 HTML 문서의 맨 앞에 있어야하며, HTML 문서의 구성 요소는 아니지만 에 따라 스타일 속성과 태그가 변하게 되니 알아두시면 좋습니다. 더 자세한 내용은 HTML 기초 #1에 설명되어 있습니다. 링크를 나타내는 태그이며 앵커(anchor)라 발음합니다. 페이지 이동, 자료 다운로드, 문서 내 이동(책갈피) 등의 기능을 활용할 때 사용됩니다. 링크이름 이동할책갈피이름 미리보기 : 링.. 더보기
[JavaScript] 사이트 주소 URL 앞에 'www' 붙이기 우리가 http://naver.com 이라는 주소를 인터넷 주소창에 적으면 네이버 홈페이지가 열리게 되고 주소창에 적혀있는 주소가 http://www.naver.com 으로 변하는 것을 볼 수 있다. 다른 예로 2개의 도메인을 사용하는 경우 주소값(URL)을 이용하여 API 값을 받아와야한다면 보통은 하나의 도메인당 하나의 아이디가 주어진다.쉽게 말하자면 anchorui.com과 www.anchorui.com은 사실상 같은 페이지를 보여주는데, 위의 설명과 같이 주소값을 이용하여 API값을 받아오는 경우 실제로 적용된 주소가 틀리기에 anchorui.com과 www.anchorui.com은 다른 도메인으로 인식한다는 말이다.이런 경우 하나의 통일된 API 값을 이용하기 위해서 도메인을 하나로 합쳐야하는데.. 더보기
HTML 기초 #1 언제 다시 업데이트 될지 모르는 HTML 강좌입니다. 처음글은 HTML의 기본 지식과 태그의 요소에 대해 알아보도록 하겠습니다. 01. HTML의 기본 지식. ## HTML이란? 책이나 웹에서 HTML의 정의에 대해 설명한 글들은 긴 서술형으로 설명하는 경우가 많은데, 쉽게 한마디로 요약하자면 웹문서입니다. 홈페이지의 내용을 보여주기위한 문서이죠. 한글을 보여주기 위한 문서는 hwp, MS Word를 보여주기 위한 문서는 doc 이런것처럼 웹페이지의 내용을 보여주기 위한 문서가 바로 html입니다.html의 확장자는 html과 htm으로 나뉘는데 두개의 차이점은 없고, 예전에는 htm문서도 사용되었으나 현재는 보통 html로 통일하고 있습니다. __## HTML문서를 제작하기위한 프로그램? 하드코딩(직접.. 더보기
Highlight Code JavaScript TEST pre태그와 code태그를 이용하여 본문에 코드를 삽입하는 스크립트이다. 사용방법은 pre태그의 자식요소로 code태그가 들어가야하며, 이 때 code태그에는 language-[적용할코드]가 클레스가 필요하다. HTML 예제내용입력. CSS 예제내용입력. JS 예제내용입력. 여기서 또 하나의 중요한 포인트!HTML과 JS, PHP, ASP, JSP 등의 문서에서 코드가 글자입력 위의 내용을 미리보기로 본다면 아래와 같이 표현될 것이다. HTML 예제글자입력 좀 더 확실하게 이해를 돕기위해 이미지 확인.위 이미지가 본문에 적용된 테스트 코드 중 HTML 부분이다.(아래 두번째 박스 HTML) 실제로 코드를 테스트 해 보았.. 더보기
Javascript를 이용한 주소(URL)변경. 2개의 도메인을 사용하는 경우 주소값(URL)을 이용하여 API 값을 받아와야한다면 보통은 하나의 도메인당 하나의 아이디가 주어진다. 이런 경우 정확한 API 값을 이용하기 위해서 도메인을 하나로 통일해야하는데 티스토리와 같이 PHP나 ,ASP, JSP등의 프로그래밍을 할 수 없는 HTML 환경이라면 아래의 자바스크립트를 이용하는 것도 좋은 방법이라 생각된다. 아래는 http://blog.delfiini.co.kr으로 접속할 경우 https://noeuldays.tistory.com으로 주소가 바뀌는 예제이다. __설명oldUrl = 1차 도메인(URL) 주소를 적는다.changeUrl = 1차 도메인을 주소창에 적을 경우 강제로 이동시킬 주소(URL)를 적는다. __미리보기카테고리 : http://bl.. 더보기
Tistory '#2' 스킨 수정 및 기능추가 Tistory '#2' 스킨 수정 및 기능추가. 티스토리에서 멋진 디자인과 반응형까지 포함한 새로운 스킨을 개발하여 사용자들에게 무료로 배포하고있다. 사람마다 각자 선호하는 모습이 다를수있지만 내가 사용함으로써 수정하고 싶은 몇가지 부분만 수정하였고, 수정된 내용과 적용방법 등 본문에서 확인할 수 있다. ## 수정사항사이드바 오픈 시 가로 스크롤 삭제.사이드바 온/오프시 애니메이션 삭제.사이드바의 스크롤바 수정(jQuery Plugin 사용)PC화면 우측상단의 티스토리 전용 메뉴 감춤 ## 수정된 내용수정시 삭제된 부분은 핑크색, 새로 추가된 부분은 보라색으로 표시하였음.skin.html 문서의 경우 기본적으로 포함되어 있는 내용은 파랑색, 새로 추가된 부분은 보라색으로 표시하였음. __style.css.. 더보기
jQuery length와 slideToggle 예제 본 글은 jQuery의 'length'와 'slideToggle'에 대한 예제입니다. 검정박스 안의 내용을 복사하셔서 html문서에 붙여넣으신 뒤 확인해보세요. > 카테고리 () 분류명1 () 카테고리1-1 카테고리1-2 카테고리1-3 카테고리1-4 분류명2 () 카테고리2-1 카테고리2-2 카테고리2-3 카테고리2-4 카테고리2-5 카테고리2-6 분류명3 () 카테고리3-1 카테고리3-2 카테고리3-3 카테고리3-4 분류명4 () 카테고리4-1 카테고리4-2 카테고리4-3 카테고리4-4 카테고리4-5 분류명5 () 카테고리5-1 카테고리5-2 카테고리5-3 > 카테고리 () 분류명1 () 카테고리1-1 카테고리1-2 카테고리1-3 분류명2 () 카테고리2-1 카테고리2-2 카테고리2-3 카테고리2-4 .. 더보기
jQuery toggleClass() Methods toggleClass 해당 객체에 Class값을 켜고 끄는 기능을 한다. (터치식 스위치라고 생각하면 된다.) 기본적인 사용방법.#('버튼으로 사용할 엘리먼트').click(function(){$('토글을 적용할 엘리먼트').toggleClass('클릭시 적용될 클래스명');}); 예제. 1) 아이디값이 color인 태그 클릭 시 클래스값 redColor을 적용 및 해제하기 클릭하면 글자가 빨강색으로 다시 클릭하면 글자가 파랑색으로 바뀝니다. 해석1. 실행부분 = $('#color').click(function(){})아이디가 color인 엘리먼트를 클릭하였을 때 아래의 기능을 작동시켜라.위와 동일한 엘리먼트(this)에 'redColor'이라는 클래스를 토글시킨다.2. 결과#color라는 앨리먼트를 클.. 더보기