float는 웹 페이지를 만들 때 가장 많이 사용하는 속성입니다. 원래는 부유하는 대상을 만들려고 개발했지만, 현대에는 레이아웃을 잡을 때 많이 사용합니다. 조금 어렵지만 정말 중요하므로 차근차근 살펴봅시다. float 속성에는 [그림 6-32]의 키워드를 입력할 수 있습니다. 다양한 키워드가 있지만 주로 [표 6-9]의 키워드만 사용합니다. img {float: hide, inherit, initial, intrude, left, multicol, next, none} 표 6-9 이 책에서 다루는 float 속성 키워드 키워드 설명left 태그를 왼쪽에 붙이기right 태그를 오른쪽에 붙이기 기본 예제 6-16 float 기본 속성 1. HTML 페이지 만들기 다음 코드를 실행하면 이미지와 글이 분리된..
프로그램을 개발 할 때 요소의 위친은 다음 두 가지 방법으로 설정 합니다.- 절대 위치 좌표 : 요소의 X좌표와 Y좌표를 설정해 절대 위치를 지정합니다.- 상대 위치 좌표 : 요소를 입력한 순서에 따른 상대 위치를 지정합니다. 지금까지 다룬 내용에는 태그의 X좌표와 Y좌푤ㄹ 직접 설정한 저이 없습니다. 즉, 상대 위치 좌표를 사용해HTML 페이지를 만든 것입니다. 이번에는 절대 위치 좌표를 사용하는 방법을 알아보겠습니다. NOTE_ 절대 위치 좌표와 상대 위치 좌표 좀 더 알아보기 위치 속성을 처음 접하면 머릿속이 약간 복잡할 테니 좀더 설명해보겠습니다. 저랟 위치 좌표는 드래그해서 만들 수 있으므로 상대 위치 좌표보다 개발하기 쉽습니다. 화면의 크기가 고정된 프로그램을 개발할 때는 절대 위치 좌표를 이..
HTML 페이지는 대학교에서 원격으로 논문을 제출하고 확인하려는 용도로 만들었습니다. 따라서 CSS에도 글자 속성이 굉장히 많습니다. 이 절에서는 글자 속성을 살펴봅니다. 5.1 font-size 속성font-size는 글자 크기를 지정하는 속성입니다. font-size 속성에는 크기 단윈아 [그림 6-20]의 키워드를 입력할 수 있습니다. [그림 6-20]font-size: inherit, initial, lare, larger,, medium, small, smaller, x-large, x-small 5.2 font-fmaily 속성 font-family는 글꼴을 지정하는 속성입니다. font-family 속성의 스타일 값에는 [그림 6-21] 처럼 사용자 컴ㅇ퓨터에 설치된 글꼴을 입력할 수 있습니..
[표 6-5] 속성 설명background-image 배경 이미지 지정background-size 배경 이미지의 크기 지정background-repeat 배경 이미지의 반복 형태 지정background-attachment 배경 이미지의 부착 형태 지정background-position 배경 이미지의 위치 지정background 한 번에 모든 배경 속성 입력 다음 배경 속성을 사용해 해다 ㅇ태그의 배경 이미지나 색상을 지정합니다. 4.1 background-image 속성background-image는 배경 이미지를 지어하는 속성으로 스타일 값에는 URL 단위나 그레디언트를 입력합니다. 그레디언트는 이후에 살펴보고 이번 내용에는 URL 단위를 사용합니다. 4.2 background-sizse 속성backg..
HTML5 시대가 되면서 display 속성에 입력할 수 있는 다양한 키워드가 등장 했습니다. 하지만 모든 display 속성을 제대로 지원하는 웹 브라우저는 아직 없습니다. 그러므로 모든 웹 브라우저에서 지원하는 display 속성을 중심으로 살펴봅니다. 3장의 공간 분할 태그에서 div 태그는 블록 형식이고 span 태그는 인라인 형식이라고 설명했는데 기억하나요/ 이번 주제를 살펴보면 도움이 될 것입니다. display 속성을 사용해 인라인 형식, 블록형식, 인라인-블록 형식을 설정할 수 있기 때문입니다. display 속성 : block, complact, flexbox, grid, inherit, initial, inline, inline-block, inline-flexbox 이 내용에서 다루는..
학습 목표- 태그(Tag), 요소(Element), 소성(Attribute)의 의미를 파악합니다.- HTML 페이지의 기본 작성방법을 파악합니다.- 검사로 디버그하는 방법을 익힙니다. Preview이 장에서는 HTML 페이지의 기본 구조와 더불어 웹 개발에서 전반적으로 사용하는 기본 용어를 살펴봅니다. 용어를 기억하지 못하면 이후 내용을 진행하기 어려우므로 반드시 확실하게 정리하고 넘어갑시다. 1. HTML5 기본 용어 정리 HTML5를 공부하려면 기본적으로 태그, 요소, 속성 용어를 알아야 합니다.웹 페이지를작성하기 전에 기본 용어를 먼저 정리하겠습니다. 1.1 태그와요소요소는 제목, 본문, 이미지 등 HTML 페이지에 위치하고, 태그는 이러한 요소를 만들 때 사용하는 기호입니다. TIP : 요소를 객..
1. 인터넷과 웹 소개 월드 와이드 웹은 인터넷에 연결된 커뮤터로 사람드리 정보를 공유할 수 있는 공간을 의미합니다.인터넷은 전세계를 연결하는 국제 정보 통신망이고, 웹은 인터넷에서 작동하는 서비스이므로 이 둘을 구분해주세요. 월드 와이드 웹은 1991년에 처음 등장했습니다.오래되지 않은 기술이지만 빠르게 발전했고 관련된 이야기도 많습니다. 이 절에서는 월드 와이드 웹의역사를 알아봅니다.웹의 역사를 아주 간략히 설명하므로 생략된 부분이 많습니다. 재미있다면 해당 내용을 더 찾아봅니다. NOTE 국내 인터넷은 1982년에 구미 한국전자기술연구소(현 ETRI)와 서울대학교 컴퓨터공학과를 연결하면서 시작되었는데 어느덧 30년이 넘었습니다. 1.1 인터넷의 시작 인터넷이 미국 국방성에서 시작되었다는 이야기는 어..
1장. 웹 개요와 실습 환경 구축2장. HTML5 기본 구조와 작성법 1장. 웹 개요와 실습 환경 구축 학습 목표 - 웹의 개념과 특징을 이해합니다.- 웹의 동작 원리를 이해합니다.- 대표적인 우베 표준 기술인 HTML5, CSS3, 자바스크립트의 개념과 특징을 이해합니다.- 웹 프로그래밍 개발 환경을 구축합니다. Preview 근처에 웹에 접속할 수 있는 장치가 있나요? 책 옆에 놓인 스마트폰은 물론 책상 위의 데스크탑이나 노트북으로도 웹에 접속할 수 있습니다. 최근에는 스마트 냉장고와 스마트TV등이 등장하면서 집안 모든 전자제품도 우베에 연결할 수 있습니다. 소니 에릭슨의 CEO은 2020년까지 약 500억 개의 장치가 웹을 사용할 것으로 예측했습니다. 웹은 1991년부터 정부 기관 및 대학에서 사용..
IT로 먹고사는 사람들의 IT 생활리뷰
