전체보기

전체보기 570

부모요소, 자식요소, 형제요소, 조상요소, 자손요소 그리고 상속

이 개념은 사실 css 강좌에서 설명드리는 편이 쉬울듯 하지만 html 태그의 의미와 함께 기본사이즈를 알아가자는 취지에서 다소 어렵더라도 미리 설명 드리고자 합니다.   위 이미지는 여지껏 해온 기본 html 문서에 p 태그만 포함된 문서 이며 좌측처럼 보이는 문서 입니다. html 태그 밑으로 head와 body가 있으며 head 밑으로 meta와 title, body 밑으로 p 태그가 존재합니다. 즉 head와 body를 html 태그가 감싸고 있습니다. 이경우에 html은 부모 요소가 되며 head는 자식 요소가 됩니다.그리고 head와 body는 형제요소가 되는 것입니다. 다시 body태그는 p태그를 감싸고 있습니다. 그러니 body는 p의 부모가 되고 p는 body의 자식이 됩니다.또 head..

body의 기본 사이즈

html 을 처음 공부하시는 분들께서는 각 태그의 의미를 가장 중요하게 보셔야 합니다.사실 실제로 사용되는 태그는 그다지 많지 않으며 매우 쉽게 되어 있기 때문에 의미 파악을 하지 않고 css를 통해 같은 효과로 표현하기도 하는데 올바른 방법은 아닙니다. 현재 웹은 장애인의 사용을 위한 웹접근성 지침이라는 것으로 가능한 모든 사람들이 사용할 수 있도록 발전하고 있는 상태이며 그것은 보다 많은 사람들이 내가 만든 컨텐츠를 볼수 있게하는 올바른 방법일테니까요의미 없이 표현된 컨텐츠는 누군가에게는 알 수 없는 내용이 될 수 있으며 궁금증만 남게 될 수 있습니다. html 공부시 중요하게 알아야 할 첫번째가 태그의 의미라면 두번째는 태그의 기본 사이즈라고 생각합니다.기본사이즈를 알아야 얼마나 더 강조할지, 숨길..

box model의 이해

html의 모든 요소들은 사각형 박스의 형태로 만들어 집니다. 박스의 크기가 얼마나 되는지 여백이 어떻게 되는지 색상의 어떻게 되는지 정렬은 어떻게 되는지에 따라서 화면 표현이 결정됩니다. 그러니 당연히 모든 요소들은 같은 박스 속성을 가지고 있으며 속성의 값을 조절하여 화면을 구성하게 됩니다.개발자도구 하단에 보시면 아래와 같은 박스를 보실 수 있습니다. 박스 모델의 margin = 박스 밖 여백의 간격border = 박스 테두리 간격padding = 박스 안 여백의 간격그리고 컨테츠 영역으로 구성되어 집니다. 이러한 박스 모델은 이전 시간에 언급한 블럭의 속성을 요소에 해당되며 인라인 속성을 가진 요소는 컨텐츠 영역으로만 자동 적용되기 때문에 박스 모델을 조절할 수 없습니다.    html 요소의 박..

블럭과 인라인

거의 모든 태그는 태그가 감싸고 있는 부분이 웹브라우저에 어떻게 표시될지를 결정하는 display라는 속성을 가지고 있습니다. 웹브라우저의 개발자 도구를 열어서 보면 기본적으로 정해진 태그의 display 속성을 확인 하실 수 있습니다.  위 그림에서서 styles 부분에 보시면 body의 display : block; 임을 확인 할 수 있습니다. 대표적인 display 속성은 block, inline 입니다.이외에도 inline-block, table, table-cell, flex, inline-flex, grid ... 등 다양하게 있지만 기본적으로 block과 inline 속성을 이해하면 나머지들은 대략 어떤 느낌인지 파악할 수 있으며 CSS강좌에서 다시 설명드리겠습니다.html5 전에는 대부분의..

개발자 도구의 활용

웹문서를 제작한 후에는 반드시 웹브라우저를 통해서 내가 만든 웹문서 정상적으로 작동되는지 확인하게 됩니다. 하지만 대부분은 내가 의도하지 않은 디자인 형태로 화면에 출력됩니다. 숙련된 개발자라도 복잡한 구조로 진행된 웹문서를 한 번에 코딩한다는 것을 불가능합니다. 처음에는 한 요소를 코딩하고 브라우저를 확인하고, 조금 숙련되면 몇 가지 요소를 코딩하고 확인하는 작업을 반복하게 되는 것이죠css와 자바스크립트가 포함되면 더 복잡하게 되며 필수적으로 웹브라우저의 개발자 도구라는 것을 통해 화면의 디자인과 동작이 정상구동되는지 에러는 없는지 확인하게 됩니다. 개발자 도구는 웹문서 작업에 필수 요소라 할 수 있습니다. 개발자 도구의 실행 방법은 3가지 정도로 할 수 있습니다. 브라우저 설정 및 제어 버튼을 통한..

head

head 태그는 현재 html 문서에 대한 정보를 정의합니다.head 태그 안에는 , , , , 태그 등이 사용될 수 있습니다. head 태그는 직접적으로 브라우저 화면에 보일 내용이 들어가지는 않습니다. 현재 html 문서에 이름이 무엇이고 어떤 언어로 만들어져 있는지 어떠한 브라우저에서 작동하는지 어떤 외부 소스를 가져오는지 등을 정의합니다.그러므로 당연히 하나의 웹문서에는 하나의 head태그만이 존재합니다. 기본적인 사용방법  meta 태그는 현재문서(컨텐츠)를 표현하기 위한 정보를 정의한 태그입니다.정보를 위한 정보라고 볼 수 있습니다. 가령 집에서 온 가족이 같은 크기의 김치만두완 고기만두를 빚었다고 합시다. 그리고 한 통에 담아 냉장고 냉동실에 보관했다고 하면 다음에 김치만두만 먹고 싶을 때..

픽셀 및 해상도

Pixel 은 Picture Element 의 준말로  이미지의 크기를 나타내는 가장 작은 단위를 말합니다. 좌측그림을 오른쪽그림처럼 작은 정사각형 크기로 자른다고 가정해 보겠습니다. 가로로 20개 세로로 13개 입니다. 그러면 전체 조각은 20*13 총 260 조각이 되겠네요.오른쪽 그림의 빨간 테두리 조각만 꺼내어 다시 잘라 보겠습니다.  위 그림은 빨간 테두리 조각을 20배 확대한 이미지 입니다.마찬가지로 이 조각을 더 작은 조각으로 계속해서 자르다고 생각해 봅시다. 결국에는 단하나의 아주 작은 조각으로 자르게 될 것 입니다.이 조각을 Pixel 이라고 생각하시면 됩니다.즉 Pixel 이란 화면의 구성하는 하나의 사각점입니다. 아주 작은 단위이기 때문에 1pixel은 눈으로 구분하기에는 쉽지 않으며..

자원봉사센터 홈페이지 제작 및 유지관리

자원봉사센터 홈페이지는 수요처와 자원봉사단체를 모집하고 각종 자원봉사프로그램을 홈페이지를 통해 자원봉사자들이 신청 할 수 있도록 하는 것이 중요합니다. 지역의 할인가맹점을 소개해 자원봉사자들이 가맹점에서 쉽게 찾아 할인을 받을 수 있도록 하는 역할도 합니다. 돋보기웹에이전시에서는 경기도 지역의 자원봉사센터을 다양하게 제작하고 있습니다. 주로 반응형 홈페이지로 제작하고 있으며 센터의 사정에 맞추어 필요한 웹프로그램을 맞춤형으로 제작해 드리고 있습니다. 유지관리도 년간으로 저렴한 비용에 처리해 드리고 있습니다. 전화문의 : 031-559-6280 돋보기웹에이전시 기업,쇼핑몰,체험농장,문화원,자원봉사센터,농업기술센터,팬션 홈페이지(모바일) 제작 및 유지관리, 웹사이트 제작, 웹솔루션 개발 www.dotbogi..

html tag 사용법

HTML tag는 tag 이름을 꺾쇠괄호()로 감싸서 표현합니다.사용방법 : 내용 블럭 타입단락 타입인라인 타입 기본적으로 tag는 시작 tag와 종료 tag의 쌍으로 이루어집니다.종료 tag는 tag명 앞에 (/)를 입력해서 종료태그임을 표시합니다. 일부 tag는 종료 tag가 없는 tag도 있습니다. 이러한 태그를 빈 tag(empty tag)라고 합니다.대표적인 빈 tag에서 , , 이 있습니다. tag는 위와 같이 tag로만 표시하기도 하지만 대부분은 속성이라는 것을 가지고 있습니다.속성은 공통으로 쓰이는 것도 있고 전용으로 쓰이는 것도 있습니다.전용으로 쓰이는 대표적인 태그는 , 등이 있으며 추가적인 정보를 제공합니다. 네이버 기본적인 사용법 : 내용a 태그의 경우 "href"라는 전용 속성..

ip 주소 확인

현재 사용하고 있는 pc의 ip 주소를 확인하는 방법입니다. ip 주소는 공인ip와 사설ip로 나누어 볼수 있습니다. 요새는 집에서도 여러기기에서 인터넷을 사용하기 때문에 가정에서도 사설ip를 많이 사용합니다. 이때 우리집에 들어온 매인에 해당하는 ip가 공인ip라고 생각하시면 되고요. 공인ip에서 각기기에 할당해준 ip가 사설ip라고 보시면 됩니다. 내 공인IP 주소 확인 방법 1. 네이버 접속 > ip 주소 검색 2. 명령 프롬프트 ( 시작메뉴 > cmd 검색 > 명령프롬프트 실행) nslookup myip.opendns.com. resolver1.opendns.com > enter 하단 Address가 현재 컴퓨터의 공인IP 주소이다. 내 사설IP(로컬 IP, 가상 IP) 주소 확인 방법 명령 프롬..