CSS(Cascading Style Sheet) CSS(Cascading Style Sheet)는 웹이 어떻게 보여질 것인지를 담당하는 언어로, 웹의 표현을 제어합니다. CSS를 도입함으로써 얻을 수 있는 장점은 웹 페이지의 경량화, 쉬운 유지 및 보수를 들 수 있습니다. CSS의 연결 CSS를 HTML에 연결하는 방법으로 1. Link Type : 외부 파일로 분리 2. Embedded Type : HTML 파일 내에 Style Sheet 부분을 포함 3. Inline Type : HTML 요소 안에 직접 지정 [알아두기] CSS를 HTML에 연결하는 방법 1. 링크 타입(Link Type) : 별도의 CSS파일을 만들어 연결하는 방법 2. 임베디드 타입(Embedded Type) : HTML 파일 내..
최근 HTML5에 대한 관심이 높아지고 있는데요. 여러분은 HTML5에 대해서 많이 들어보셨는지 모르겠습니다. 이번 포스팅에서는 HTML5에 대한 적용지수를 표시해주는 웹사이트가 있어 이를 소개하려고 합니다. 여러분이 사용하고 있는 웹브라우저에서는 HTML5를 얼마나 지원하는지 점수로 확인해 보세요 당신이 사용하고 있는 웹브라우저는? 여러분은 어떤 웹브라우저를 이용하고 계시나요? 우리나라의 경우 많은 사람들이 마이크로소프트에서 발표한 인터넷 익스플로러(Internet Explorer)를 사용하고 있는데요. 최근에는 크롬이나 파이어폭스를 사용하는 분들이 많아지고 있는 추세라고 하네요. 그냥 말로 하면 모르니까 현재 웹브라우저 점유율을 보여주는 사이트는 어디없나 찾아보았습니다. 좋은 사이트가 있더라구요. 바..
이번 강좌에서는 HTML Element Level 이라는 것에 대해서 한번 설명해 드리고자 합니다. 태그들은 크게 Block Level Element와 Inline Level Element로 구분됩니다. 무엇이 다른가요? 두 요소가 무엇이 다른지 설명드리자면 종 류 설 명 태 그 Block Level Element 여는 태그로 시작하거나 닫는 태그로 끝날 때 줄바꿈이 되는 것 , , 등 Inline Level Element 여는 태그로 시작하거나 닫는 태그로 끝날 때 줄바꿈이 안되는 것 , , 등 하지만 이 것은 CSS를 사용해서 변경할 수 있습니다. Block Level Element에는 다른 Block Level Element나 Inline Level Element를 포함할 수 있지만, Inline ..
이 DOCTYPE은 반드시 쓰지 않아도 큰 문제는 없습니다. 하지만 이 DOCTYPE을 선언해줌으로써 브라우저가 좀 더 빠르고 정확하게 문서를 분석하여 표현해주며, 제작도구에서도 이 선언에 따라 문서에 제약을 걸어 정확한 표현을 해줄 수 있도록 해줍니다. DOCTYPE XHTML의 DOCTYPE은 strict, transitional, frameset의 세 종류로 이루어져 있으며, HTML 문서 최상단에 어떠한 요소보다 우선적으로 선언되어야 합니다. 그래야 웹브라우저에서 DOCTYPE을 구분할 수 있습니다. XHTML 1.0 Strict dtd strict dtd는 XHTML을 엄격하게 적용하는 규칙입니다. 경우에 따라서는 HTML 4.01 기반에서 사용하던 태그를 사용하지 못하는 경우도 있습니다. XH..
오늘은 Javascript의 getElementById()를 사용한 예제를 한번 보도록 하겠습니다. 실행화면 이 예제는 링크1을 누르면 링크1을 숨기고 링크2를 보이게 하고 링크2를 누르면 링크1을 보이게 하고 링크2를 숨기는 예제입니다. 실행하면 아래와 같이 나옵니다. 링크2를 누르면 아래와 같이 나옵니다. 그러면 이제 소스를 한번 살펴볼까요? 소스 보기 이 예제는 링크1을 누르면 링크1을 숨기고 링크2를 보이게 하고 링크2를 누르면 링크1을 보이게 하고 링크2를 숨기는 예제입니다. 링크1 링크2
난수란 무엇일까요? 난수(random number)란 특정한 배열 순서나 규칙을 가지지 않는 연속적인 임의의 수를 말합니다. [알아두기] 난수(random number)란? 특정한 배열 순서나 규칙을 가지지 않는 연속적인 임의의 수 C언어에서는 시스템 라이브러리에서 난수를 만드는 함수를 제공하고 있어요. (그러고 보니 난수 만들기를 지원하지 않는 언어는 없는 것 같네요) 시스템 라이브러리에서 제공하는 함수 rand()를 이용하면 난수를 만들 수 있는데 이 함수를 사용하기 위해서는 stdlib.h 파일을 포함시켜야 해요. [알아두기] 난수를 만들기 위해서 필요한 것! 헤더파일인 stdlib.h를 포함시켜 함수 rand()를 이용 (stdlib.h에 함수 rand()의 함수 원형이 정의되어 있기 때문에 포함..
현재의 년월일을 이미지로 된 숫자로 표시하는 자바스크립트 소스 홈페이지에 현재의 년월일을 이미지로 된 숫자로 표기하고 싶을 때 사용하는 자바스크립트 소스입니다. 출처는 http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=130342940&qb=7J6Q67CU7Iqk7YGs66a97Yq4IOyGjOyKpA==&enc=utf8§ion=kin&rank=52&search_sort=0&spq=0입니다. 개인적으로도 쓸 일이 있어 한 번 테스트한 후 남겨 봅니다. 실행 화면 실제 실행한 화면은 아래와 같습니다. 실제로 실행하면 아래와 같이 오늘 날짜의 연월일이 표시됩니다. 위의 소스를 받아서 한번 실행해 보시기 바랍니다.
~ 태그에 대해서 ,,,,, 태그에 대해서 알아보도록 하겠습니다. ~ 은 제목을 작성하는 태그입니다. 이렇게 설명을 드리면 그러면 h뒤에 붙은 숫자는 무엇입니까?라고 질문을 하실지도 모르겠습니다. [알아두기] ~ 태그 제목을 작성하는 태그 제목도 큰 제목이 있고 작은 제목이 있죠? 은 가장 상위 계층의 제목을 표시할 때 사용합니다. h뒤에 숫자가 커질수록 작은 제목을 표시할 때 사용됩니다. 즉 부터 까지 6단계로 제목을 표시할 수 있다는 것입니다. h뒤의 숫자는 웹페이지의 정보를 계층별로 구조화하는 기능을 담당하기도 합니다. 정보 구조화에 대한 관점에서 보면 중요한 ~ 태그 디자인적인 시각에서 보면 이 태그는 그다지 중요하지 않을지도 모르겠습니다. 디자인적인 시각에서 본다면 이 태그는 단순히 글자의 크기..
HTML 쉽게 이해하기 강좌가 계속 진행중입니다. 많은 관심 부탁드립니다. 이번시간에는 로 끝이 나는데, 일반적으로 웹 문서의 내용이 아니라 웹 문서의 제목이나 머리말에 해당하는 정보를 입력합니다. [알아두기] 로 끝남 웹문서의 제목이나 머리말에 해당하는 정보를 입력합니다. head 태그 안에 들어가는 요소 head 태그 안에는 태그, 태그, 태그 등이 들어갈 수 있습니다. 이 태그들을 하나씩 알아보도록 하겠습니다 - 페이지의 제목 표시 태그는 페이지의 제목을 표시합니다 태그는 웹페이지의 제목을 표시하는 태그입니다. 태그는 HTML문서의 실제 소스를 보면 위와 같습니다. 메모장에 위와 같이 입력해서 저장한 후 실행해 보면 위의 그림과 같이 나옴을 볼 수 있습니다. '백문이 불여일타' 라는 말이 있다고 합..
HTML 문서의 기본 구조 이번 시간에는 HTML 문서의 기본 구조에 대해서 알아보도록 하겠습니다. 잠시 개미 이야기를 해볼까 합니다. 개미의 구조는 일반적으로 머리, 가슴, 배로 나눈다고 합니다. 이와 같이 HTML의 기본구조도 나눌 수 있는데요. HTML의 기본구조는 크게 와 로 나눕니다. 아래 그림을 통해 쉽게 이해하실 수 있을 것입니다. 위의 그림과 같이 HTML의 기본구조는 크게 와 로 나뉘는데 이를 HTML 소스로 표현하면 아래와 같습니다. 앞서 설명한 기본구조는 와 로 나뉘지만 HTML문서임을 표시하기 위해 전체를 과 로 묶어준다는 사실을 아셨으면 합니다. 이번 시간은 HTML 문서의 기본 구조에 대해서 알아보았습니다. 제 글이 도움이 되셨다면 아래에 손가락 모양을 꾹 눌러주세요 1초도 안걸..
주석이 뭔가요? 주석은 실제 웹브라우저 화면에는 보이지 않고 소스에서만 보이는데 주로 웹페이지의 제작자의 부가적인 설명이나 메모를 기록할 때 사용합니다. [알아두기] 주석이란? 주석은 실제 웹브라우저 화면에는 보이지 않고 소스에서만 보이는데 주로 웹페이지의 제작자의 부가적인 설명이나 메모를 기록할 때 사용 HTML에서의 주석문 작성법 HTML의 주석문은 아래와 같은 형태로 작성합니다. [알아두기] HTML의 주석문 사이에 내용을 넣어 작성 예) 실제 활용 예 아래와 같은 소스를 작성하고 저장해서 실제로 어떻게 나오는지 확인해 보겠습니다. 메모장을 이용해서 실습 메모장을 열어 아래와 같이 작성하고 주석.html이라고 저장합니다. 실제로 실행해보면 보이지 않는 것을 확인할 수 있습니다. 제 글이 도움이 되셨..
혹시 HTML이라는 들어보셨나요? 못들어보셨다구요? 이제 배우신다구요? HTML이 뭔지 쉽게 설명해 드릴테니 저만 따라오세요. 그럼 출발! HTML이란 무엇일까요? HTML은 HyperText Markup Language의 약자입니다. 아래 그림을 보시면 빨강색으로 표시된 앞자를 따서 간단하게 HTML이라고 씁니다. HTML이 뭐냐하면 약자의 끝에 Language라고 써 있듯이 언어입니다. 한국어, 영어, 일본어 등과 같이 언어라는 것입니다. 무슨 언어냐 하면 PC에 있는 웹브라우저(쉽게 말해 인터넷을 할 수 있게 하는 녀석)을 말하죠. 이 녀석에게 'OOO해' 라고 말하는 것입니다. 영어권의 사람들에게 영어로 말을 해야 알아들을 수 있듯이 컴퓨터에게는 HTML이라는 언어로 표현해야 알아듣고 그에 맞게 ..
HTML/CSS 마우스 커서 모양(스타일) 바꾸기 웹페이지를 HTML과 CSS를 이용해서 만들다 보면 각 상황에 맞게 마우스 커서의 모양을 바꿔야 하는 경우가 있는데요. 이런 경우에 HTML과 CSS를 이용해서 어떻게 바꾸는지 정리해 보도록 하겠습니다. 마우스 커서 모양(스타일) 바꾸는 방법! 그럼 이제부터 한번 알아보도록 하겠습니다. 예를 들어 아래와 같이 HTML 태그를 이용해서 버튼을 만들었을 때 버튼에 마우스를 올려보면 마우스 모양은 기본(화살표) 형태로 나오게 되는데요 이런 경우 손모양으로 바꿔주면 좀더 친절한 표현이 되겠죠? 마우스 포인터의 모양을 바꾸기 위해서는 태그 안에 CSS를 사용해서 style="마우스 커서 모양" 을 넣어주면 됩니다. [핵심정리!] 마우스 포인터의 모양을 바꾸기 위해..
- Total
- Today
- Yesterday
- W3Schools Online Web Tutorials
- 구차니의 잡동사니 모음
- [IT]블로거팁닷컴
- 비앤아이님의 블로그
- Blog Suspect
- 즐거운하루 blog
- zinicap의 검색엔진 마케팅(SEM)
- 머니야머니야님의 블로그
- [Friend] AtinStory
- [기타배우기]해브원 박스
- [웹표준] SINDB.com
- 해커 C 이야기
- [애드센스] 길라잡이
- 정순봉의 IT SCHOOL
- 씨디맨의 컴퓨터이야기
- 2proo Life Story
- 못된준코의 세상리뷰
- [IT강좌] 정보문화사
- IN 대전
- 에우르트는 나쁜남자 -_-
- 씬의 싱크탱크
- 엔돌슨의 IT이야기
- 진이늘이
- 'Cooltime'의 블로그
- 후이의 Tistory
- Soulstorage
- 앤드&엔드의 블로그
- June Blog
- 노지의 소박한 이야기
- gbWorld
- 인터넷 속 나의 생각
- HarshNix
- ART of WEB
- 녹두장군 - 상상을 현실로
- 프로그래밍 문제
- 강의
- C언어 문제
- MBTI 강좌
- 강좌
- php
- 스마트폰
- 소스
- MBTI 자료
- 인터넷 익스플로러
- 성공
- 효과음
- HTML
- C언어 소스
- C언어
- JavaScript
- 모토로이
- 소스코드
- 리뷰
- It
- 안드로이드 어플
- MBTI 검사
- 안드로이드 어플 추천
- 인터넷
- C
- 프로그래밍
- 안드로이드
- 예제 소스
- MBTI
- MBTI 테스트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |