잰니의 성장블로그✈

HTML5 레이아웃 활용

HTML5 레이아웃 요소 div 요소를 이용해서 웹 페이지를 레이아웃하면 태그가 필연적으로 많이 사용되게 된다. 페이지 내에 산재되어 있는 태그들은 웹 페이지의 구조를 복잡하게 만들고 웹 페이지의 가독성을 떨어뜨린다. 이렇게 되면 웹 페이지의 유지 보수가 어렵고 작업자 이외에는 문서를 이해하기 어려워서 공동작업도 어렵게 될 것이다. 이런 단점을 보완하기 위해서 HTML5 웹 페이지의 레이아웃을 상대 위치 지정(position : relative) 요소 A 요소 B 요소 C 절대 위치 지정(position : absolute) 요소 A 요소 B 요소 C 절대 위치 지정(position : absolute, 부모 요소가 있는 경우) 요소 A 요소 B 요소 C 위치 고정(position : fixed) 요소A

div태그란 ? 태그는 division(구분)으로써 HTML 요소를 담는 박스와 같은 것으로 생각하면 된다. 또한 는 HTML 요소들을 화면에 배치, 즉 레이아웃하는 데 많이 사용된다. 박스 모델이란? 웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다. CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있으며 여백을 조정하여 요소를 화면에 배치할 수 있게 한다. 박스 모델이란? 웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다. CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있으며 여백을 조정하여 요소를 화면에 배치할 수 있게 한다.

내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다. -영화, '비포엔셋' 가격: 13,000(부가세별도) 물의 화학식은 h20입니다. E=mc2 34,000원19,000원 텍스트에 밑줄 긋기 새로운 내용을 삽입 기존 내용삭제

테이블 웹 페이지에 테이블을 삽입하는 데에는 , , , 태그를 사용한다. 테이블을 만들고, 행과 열을 병합할 수 있다. 테이블 삽입 - , , , 종류 설명 참고 전체 테이블을 감싸는 것(border="1" 경계선의 두께) border="1" 경계선의 두께 테이블의 제목 각각의 행을 만들 때 (table row) table row 테이블의 첫 번째 행에서 각 열의 제목 생성 (table header) table header 테이블 행 내에 있는 각각의 셀 표현 (table division) table division 표 구조의 제목부분 표 구조의 본문부분 표 구조에서 요약이나 정리 부분 표에서 열의 스타일 지정 표에서 여러 열을 함께 묶어서 스타일을 지정 ** 태그나 태그에서 사용하는 colspan 속성..

폼 양식과 테이블 텍스트 입력창 input type="text" 버튼 input type="submit" 비밀번호 입력 창 input type="passworld" input type="button" 라디오 버튼 input type="radio" input type="reset" 체크박스 input type="checkkbox" 선택박스 파일 input type="file" 다중 입력창 년,월,일,시각 input type= "datetime_local, month, time, week" 년,월,일 input type="date" 이미지 input type="image" 슬라이드바 input type="range" 이메일 input type="email" 숫자 input type="number" 색깔 in..

목록만들기 웹 페이지의 목록(list)을 표시하는 방법애는 동그라미가 붙는 것과 (ul,ui)과 일련번호가 붙는 순서 있는 목록(ol,li) 두 가지가 있다. 태그의 속성 웹이란 무엇인가? 웹은 거미줄인데 www(world wide web)의 약어이다. 인터넷과 웹 브라우저를 통해서 원하는 정보를 얻을 수 있다. 웹 브라우저를 통해서 원격이 있는 사용자와 상호 소통이 가능하다. 웹 관련 직업으로 웹 디자이너, 웹 퍼블리셔, 웹 프로그래머 등이 있다. 태그의 tyoe, start 속성 레드향 샐러드 레시피 재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g 드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간 재료 준비 샐러드 채소를 씻고 물기를 제거한 후 준비합니다. ..

이미지(IMG) 웹 페이지에 이미지를 사용하려면 태그를 사용한다. 이미지를 삽입할 때 태그와 이미지의 너비와 높이를 설정하는 width와 height속성도 지정해야한다. 이미지 경로는 절대경로(무조건 최상위 위치)와 상대경로(html파일과 같은곳)로 입력하면 된다. 상대경로는 ./~로 시작되지만 ./를 생략해도 된다. 상대경로에서 현재 경로는 ./ 이고 하나 위 경로는 ../, 두 개 위 경로는 ../../ ~로 위치를 나타낸다. 이미지 파일 종류와 설명 포맷 설명 jpg 24비트 트루컬러, 사진 이미지, 파일크기를 줄일 수 있음 png 24비트 트루컬러, 무손실 압축, 휴대폰 등에서 고화질 유지, 최근 널리 사용 gif 8비트(256컬러), 무손실압축, 그래픽 이미지에서 널리 사용, 파일크기 작음 sv..

HTML이란? Hyper Text Markup Language의 약어로써 웹 사이트를 구축하는데 가장 기본이 되는 컴퓨터 언어이다. 버전에 몇 가지 있는데 2014년 10월에 제정된 HTML 5가 최신버전이다. HTML 문서는 기본적으로 HTML 태그(Tag)를 뼈대로 해서 구성된다. HTML문서의 기본 구조 1. 또는 : 현재 문서가 HTML5언어로 작성한 웹문서라는 뜻 ​ 2. ~ : 웹문서의 시작과 끝을 나태는 태그, 웹 브라우저가태그를 만나면 까지 소스를 읽어 화면에 표시, 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그 lang 속성을 사용해 문서에서 사용할 언어 지정 문서정보를 지정하는 : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보 입력, 브라우저에게 정보를 주는 태그 문서..

웹은(Web) 웹(Web)은 World Wide Web의 약자로써 간단하게 WWW로 표현한다. 웹이란 인터넷에 연결된 컴퓨터를 통해서 전 세계와 정보를 공유하는 사이버 공간이다. 사용자는 웹 브라우저를 통해서 각 컴퓨터에 구축된 웹 사이트 콘텐츠를 이용하게 된다. 세계적인 웹 브라우저는 인터넷 익스플로(Internet Explorer), 크롬(Chrome), 파이어폭스(Firefox), 사파리(Safari) 등이 있다. 웹에서 웹브라우저는 상당히 중요한 역할을 수행하는데 웹이라는 명칭이 붙어있는 모든 서비스는 이 브라우저를 통해 활용이 가능하다. 웹메일에서는 웹 브라우저를 통해서 메일을 주고받을 수 있고, 웹 게임도 웹 브라우저를 통해서 플레이하는 것이기 때문에 웹이라는 명창이 붙은것이다. 이외에도 웹 ..