CSS14 HTML - attribute(속성) 이란? attribute(속성)을 나타내는 태그 안녕하세요. 고코더 입니다. ● 1. 오늘은 HTML에서 attribute 이라는 것을 배워 보려고 합니다. 영어 사전의 이 뜻을 살펴면 아래와 같습니다. attribute 자질,속성 - 영어사전 ● 2. 예를 들면 아래와 같은 폰트 태그가 있습니다. 태그 안에 들어가는 요소들의 대한 성격 및 스타일을 나타내는 상태 구분을 말합니다. 즉 size 라는 크기와 color 라는 색깔을 지정하여 속성을 나타내었습니다. ● 3. 다시 말하면 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소입니다. 속성은 항상 "이름='값'" 이런식의 쌍으로 된 정보가 옵니다. 만약에 아래와 같은 div요소가 있습니다. 그럼 여기서 div는 element라는 요.. 2021. 1. 20. CDN - JSDelivr js,css 버전 변경하기 / 구버전 사용하기 JSDelivr 구버전 소스 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSDelivr에서 구버전 소스를 참조하는 방법을 알아보겠습니다. JSDelivr는 강력한 js, css CDN 서버입니다. 게다가 무료입니다. 각종 필요한 라이브러리를 타 서버를 이용해 빠르게 사용할 수 있다는 건 분명 큰 장점입니다. 그리고 무엇보다 최신 버전의 라이브러리를 제공받아서 사용이 가능하다는 장점이 있습니다. 그런데 가끔 구버전의 라이브러리가 필요합니다. ● 2. 우선은 URL에 버전이 생성된 경우가 있습니다. 아래와 같은 경우는 URI 중간에 4.7.0이 있습니다. 이 부분은 버전입니다. 중간에 숫자를 변경하는 것만으로 버전을 변경 가능합니다. 이렇게 접속하면 4.7.0 버전의 CDN 소스를 사용 가.. 2021. 1. 18. CSS - li 점 대신 다른 모양으로 / list-style-type , list-style-image li 디자인 속성 변경 안녕하세요. 고코더 입니다. ● 1. li 특별한 CSS 속성 없이 태그를 작성하면 점 이 기본으로 앞에 붙습니다. ● 2. 이 li에 기본 모양은 변경이 가능 합니다. list-style-type : li 앞에 모양을 변경 가능 list-style-image : li 앞에 모양을 이미지로 변경 ● 3. 그리고 속성 옵션은 아래와 같습니다. disc : 검은 원 circle : 공백 원 square 사각형 decimal : 십진수 lower-alpha : 알파벳 소문자 lower-roman : 로마자 소문자 upper-alpha : 알파벳 대문자 upper-roman : 로마자 대문자 none : 표시 안함 initial : 기본값 cjk-ideographic : 한자식 수 (一,.. 2019. 6. 21. CSS - 책 제목 처럼 왼쪽에 색 기둥 만들기 왼쪽에 색상 있는 제목 형식 안녕하세요. 고코더 입니다. 가끔 블로그나 홈페이지를 보다보면 책의 소제목처럼 왼쪽에 네모 박스에 색이 입혀진 디자인을 볼 수 있습니다. ● 1. 오늘은 이 모양과 같은 CSS를 만들어 보겠습니다. ● 2. 아래 코드를 HTML로 실행해보세요. 123456789101112131415161718192021222324252627282930313233343536 .div_gocoder_point_1 p { padding: 0px 5px 0px; border-bottom: 0px solid #000; border-left: 10px solid #000; color: #000; } .div_gocoder_point_2 p { padding: 0px 5px 0px; border-bott.. 2019. 6. 20. jQuery UI - 이미지 드래그, 리사이징 / resizable() draggable() 제이쿼리 이미지 드래그 드랍, 사이즈 조절 안녕하세요. 고코더 입니다. jQuery UI를 쓸때 가장 많이 활용하게 되는 기능이 두가지가 있습니다. 바로 이미지 드래그와 리사이징 입니다. 레이어 팝업을 만들거나 사용자에게 크기를 조절하게 편의를 제공 하는 기능은 많이 씁니다. 그래서 이번 시간에 제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다. ● 1. 아래 소스를 웹사이트에서 실행해보세요. 1234567891011121314151617 $( document ).ready(function() { $('#GoCoderImg1').resizable(); $('#GoCoderImg2').draggable(); }); Colored by Color Scriptercs ● 2. 하나는 사이즈 조절이 가.. 2019. 6. 11. CSS - Font Awesome 버전별 아이콘 확인하기 Font Awesome 아이콘 리스트 웹사이트 확인 안녕하세요. 고코더 입니다. 웹 아이콘으로 가장 많이 사용 되는 Font Awesome 제 블로그에도 홈페이지에서도 사용중입니다. 반응형 웹부터 일반 홈페이지까지 필요한 아이콘을 바로 가져다 쓰는게 가능합니다. 오늘은 이 편리한 아이콘 버전별로 어떤 icon들이 있는지 확인하는 방법을 알아보려고 합니다. ● 1. 제 블로그의 Font Awesome 버전은 4.7.0 입니다. 블로그를 꾸미다 보니 해당 버전의 어떤 아이콘들이 존재하는지 확인하는 방법을 찾다가 첫번째는 ● 2. 소스를 열어보면 이렇게 준비된 아이콘들의 이름을 볼 수 있습니다. 하지만 개발자는 효율적으로 일해야겠죠 ● 3. 해당 4.7.0버전의 아이콘 리스트는 아래에서 확인 가능합니다. ht.. 2019. 6. 11. 티스토리 - Flatinum 스킨, colorscripter 정렬 오류 수정 Flatinum 소스코드 정렬 CSS 수정하기 안녕하세요 고코더 입니다. 봄이 왔나보네요. 졸려 죽겠습니다. 그래도 졸면 안되겠죠? 새 스킨을 갈아타고 페이지를 확인하니 난감한 상황이 펼쳐졌습니다. 컬러스크립터 소스가 가운데 정렬이 되어 버렸습니다. ▼이런 소스코드를 배우러 오는 블로그인데 이렇게 되니 가독성이 떨어지네요 ▼CSS 코드 문제가 확실해서 관리자에서 CSS를 우선 열어봅시다. http://[블로그].tistory.com/manage/design/skin/edit#/source/css ▼한 750줄 정도 내려오면 아래와 같은 css 코드가 보입니다. 문제는 여기 table>tbody>tr>td 가 정렬이 가운데로 되어 있습니다. ▼css를 수정하자니 또 다른 폭탄이 터질거 같아서 아래 코드를 .. 2018. 3. 21. Front- 프론트엔드 디자인 무료 공개소스 / codepen.io 코드펜 사이트 사용법 코드펜은 흥미로운 사이트입니다. 프론트엔드 디자이너들이 만들어놓은 수많은 오픈 소스가 존재합니다. 업무의 있어서도 상당히 도움이 되는 좋은 곳입니다. 누구나 와서 가입 후에 HTML , CSS , JS 를 코딩해서 결과물을 놓고 자랑하는 사이트입니다. 프론트 개발자라면 학습으로도 좋습니다. ▼우선 사이트 주소는 이렇습니다. 사이트 디자인도 CI도 이쁘고 정갈하네요 https://codepen.io/ ▼ 공개된 소스중 하나를 선택하여 살펴보겠습니다 크리스마스 볼이라는 작품인데요 아래 URL로 접근해보세요 https://codepen.io/Mamboleoo/pen/VrdYxN ▼그럼 HTML, CSS, JS 가 있습니다. 해당 작품의 코딩 결과입니다. 이것들을 복사해가서 실행하면 그대로.. 2018. 1. 11. 사이트 - 개발소스 라인 정렬 하기 / HTML / JS 개발코드 정렬 하기 얼마전 소스 리뷰를 보는데 MIN으로 압축된 JS 파일을 유지보수 하는 분을 보았습니다. 한줄로 된 그 코드를 분석하는 개발력에 놀라웠지만 생산적인 면에서는 소스를 정렬하고 유지보수 하는게 좋아 보이더군요 소스를 정렬 하는 방법은 상당히 많습니다. 첫번째로 해당 기능을 제공하는 사이트에서 정렬 하는 방법이 있고 두번째로 IDE 기능을 통해 하는게 사실 가장 좋고 세번째는 손으로 직접 정렬 하는 방법이 있을 것입니다. 그래서 오늘은 첫번째 방법을 알아보겠습니다. 바로 http://jsbeautifier.org/ 사이트를 활용 하는 방법 입니다. ▼ 접속하면 아래와 같이 바로 기능 페이지가 나옵니다. 기능에 충실하네요 ▼이번에는 정렬해볼 소스를 구해봅시다. http://code.jquer.. 2017. 12. 16. 이전 1 2 다음
