본문 바로가기
반응형

전체 글122

[html] a 링크, a 태그 만들기 - 새창으로 이동 속성 a태그는 인라인 요소로써,텍스트나 이미지를 통하여 다른 곳으로 정보를 연결해 주는 역할을 담당하는 요소가 입니다. 내용을 입력해주세요→href="#" 에서 #자리에 이동할 경로, 사이트 주소를 입력하면 a태그 안에있는 글씨를 클릭했을때 이동하게 됩니다. 이미지에 링크를 걸고 싶다면? → src="#" #자리에 이미지 경로,사이즈 주소를 입력하면 이미지를 클릭했을 때 이동하게 됩니다. target="_blank" 는 연결된 정보 페이지를 새창에서 띄우는 속성으로기본형은 target="_self" 입니다. 위 소스코드를 입력했을 때 결과 화면입니다. 블록 요소인 p태그 안에 a태그를 입력하여 한줄로 출력됩니다. --> 이미지를 클릭하면 새창에서 on sunday 블로그 홈화면으로 이동합니다. 안녕하세요 on.. 2019. 12. 18.
[html] 인라인요소 태그 인라인요소 태그 ---------위 소스코드의 결과 화면--------- - 아래 이미지를 보면 이태리체처럼 기울어지는 효과가 있다. - 아래사진에서 보듯이 글씨를 굵게 보이는 효과가 있다. 하지만 태그는 꾸밈 효과일 뿐 (css에서 기울임 효과는 font-style:italic; font-weight:bold;) 스크린리더가 강조하며 읽지 않는다. 웹 접근성을 높이기 위해 스크린 리더기까지 생각하며 강조하는 태그를 사용하려면 을 쓰는것이 맞다. 웹 문서 내에서 구분선을 그을 때 사용하는 요소 - 마지막 줄 티스토리 앞에 있는 문자는 특수문자를 사용하는 코드로 특수문자를 출력하기 위해 문자 그대로를 쓰게되면 문법적 오류가 발생할 수 있기 때문에 entity로 변화해서 입력해야 한다. entity code.. 2019. 12. 17.
[html] 블록 요소, 인라인요소, 인라인블록 블록 요소 Block Element div p ul ol li dl dt dd h1~h6 table form blockquote address fieldset pre nosecipt 줄 바꿈이 일어난다. (가로사이즈가 100%차이한다고 보면 된다.) 블록요소 안에 블록요소,인라인요소를 포함할 수 있다. width, height 값을 적용 할 수 있다. padding, margin을 모든 방향에 적용할 수 있다. 인라인 요소 Inline Element span a img input strong b q strong em i textarea samp var cite addr sub select ins u 줄 바꿈이 일어나지 않고 한줄로 나열된다. 인라인 요소안에는 인라인 요소만 포함한다.(인라인 요소안에 블록.. 2019. 12. 16.
[html] 기본 문서 구조 - meta태그 html/css 를 사용하기 전에 문서 제일 상단에 등을 입력하여 현재 문서 타입이 무엇인지 어떤 문자를 쓰는지, 수집을 허용할것인지, 홈페이지 타이틀은 무엇인지, 간단한 소개 등 을 입력하여 다양한 브라우저들에서 마크업에 대한 일괄된 화면 표시가 될 수 있도록 도와준다. 아래 colorScripter에 어떤식으로 작성하는지 입력하고, 그옆에 주석처리하여 설명을 달아놨다. 태그는 검색에 대한 명령인데 index,follow는 수집을 허용하는 기본값(all)이고,허용하지 않을때에는 라고 입력해 주면 된다. 중간쯤에 있는 title태그는 on sunday :: on sunday 말 그대로 페이지의 타이틀이 되는 내용을 적으면 된다.하단이미지에 빨간 밑줄친 곳에 출력되는게 title태그이다. title 앞에 .. 2019. 12. 15.
티스토리 코드블럭 하이라이트 적용하기 (스크롤 생성) color script에 이어 새로 알게된 티스토리 새로운 에디터에서만 사용가능하다는 코드블럭입니다!! 티스토리에 유독 프로그램 언어 공유 및 기록 포스팅이 많았는데 직접 사용해보니 네이버 블로그에 비해 조금 더 편리하게 코드소스를 포스팅 할 수 있는 기능이 잘 활용되고 있어서 그랬던것 같다. 티스토리 관리페이지로 이동 티스토리 메인 페이지에서 톱니바퀴 아이콘을 클릭해서 플러그인 클릭해주세요~ syntax highlight라고 써있는 배너 클릭 플러그인들이 굉장히 많은데 그중 코드문법 강조 syntax highlight라고 써있는 배너를 클릭해줍니다. syntax highlight 코드 문법 강조 플러그인 적용 코드 문법 강조 설정창이 나오는데 아래에서 원하는 테마를 선택하여 적용 시켜주면 됩니다. 다양.. 2019. 12. 14.
블로그에 html 소스코드 쓰는 방법 'color scripter' 브라켓 에디터를 설치하고 확장프로그램까지 다 했으니 이제 블로그에 잘 올리면 되겠다~ 생각을 했었는데 html,css, javascript를 한페이지에 다 보이게 하려면 너무 길고보기도 않좋고 그걸 또 언제 일일이 캡쳐를 하고있나 고민하고었는데티스토리에 가독성 좋게 소스코드 넣는법 찾다가 color scripter를 발견했다. 이 로고를 클릭하면 color scripter로 바로이동합니다 ↓↓↓ 사이트 들어가면 보이는 화면인데 안에 내용은 잘 되는지 확인해보려고 내가 넣은 내용이여서 처음들어가면 아무것도 안쓰여 있는 텅텅빈 화면이다. 설정하고, 코드 작성한 다음 이미지 하단에 빨간 네모(클립보드에 복사) 클릭해서 잘 붙여넣기만 잘하면 끝이다. 1. 상단에 있는 설정창에서 언어 선택한다.다양한 언어를 지원.. 2019. 12. 14.
Bracktes 자주 사용하는 브라켓 단축키 Ctrl + / 주석처리 / 주석처리 해제 Ctrl + Shilte + / 부분 주석 (드래그 한 부분만 주석처리) Ctrl + b 드래그 + 단축키 멀티커서 사용 Ctrl + d 현재 커서가 있는 줄 복사 Ctrl + L 현재 커서가 있는 한줄 선택 Ctrl + Shift + d 현재 커서가 있는 줄 삭제 Ctrl + Shift + ↑, ↓ 현재 커서가 있는 행 위, 아래로 이동 Ctrl + g 입력칸에 숫자 입력하면 숫자 줄로 이동 Ctrl + e 편집(css편집하기 굉장히 쉬움) Ctrl + 마우스 왼쪽 클릭 커서 생성 Ctrl + h 단어검색(한번에 여러글자 수정할 때 사용) Ctrl + q 브라켓 종료 Ctrl + w 현재 파일 닫기 Ctrl + Shift + L 확장프로그램 beautify실행.. 2019. 12. 13.
Bracktes 브라켓 확장기능 'ftp 연결하기' 브라켓에디터도 전에쓰던 에디트플러스처럼 ftp를 연결해서 쓸수 있다는 얘기에 찾아서 바로 연결해봤다. 다운 받아야 하는 확장 프로그램은 Synapse (브라켓 확장 프로그램 설치하는 방법은 2019/12/11 - [IT/RE:VIEW] - Brackets 브라켓 에디터 설치 및 필수 확장 기능 ↑↑↑ 위 포스팅을 참고해서 설치하면 된다.) Synapse를 설치하고 나면 제일 오른쪽 파란색으로 보이는 아이콘이 생기는데 클릭하면 Synapse가 활성화된다. 왼쪽에 이렇게 화면이 나오면 오른쪽에 있는 플러스버튼을 누르고 ftp로 연결할 사이트정보를 입력하면된다. (더하기 버튼 안보이면 왼쪽 메뉴창을 오른쪽으로 더 늘리면 나온다) 빨간 네모박스가된 부분만 입력하면 된다. host 주소(ex. ~~.dothome.. 2019. 12. 12.
Brackets 브라켓 에디터 설치 및 필수 확장 기능 코딩 공부를 시작한지 벌써 8개월이 지나가는 동안 내가 썼던 HTML편집기는 3가지 종류이다. 제일 처음 사용한 편집기는 에디터플러스 그다음은 서브라임텍스트 마지막 브라켓. 요즘은 에디터플러스와 브라켓을 주로 사용하고 있는데 여러 확장 기능을 설치하고 사용하다보니 브라켓 에디터가 사용하기 편리하다고 느껴져서 앞으로는 브라켓만 사용하게 될 것같다. ↑ 위에 있는 이미지를 클릭하면 브라켓 에디터 윈도우용 다운로드창이 열립니다. 다운 받아서 설치하는방법은 next만 눌러서 하면 되니, 어렵지 않아서 패스~ 몇가지 확장 프로그램 설치 한 상태인 내 브라켓 화면. 이제부터 브라켓을 좀더 사용하기 편하게 확장 프로그램 설치해야되는데 아래 사진에서 오른쪽에 빨간색으로 표시간 부분(블럭모양)을 클리하면 설치하는 팝업창.. 2019. 12. 11.
반응형

티스토리툴바