Web 04. Layout을 위한 div 디비전태그, 반응형웹 기초

비쥬얼스튜디오 코드, 서브라임 텍스트, w3school Try yourself 등 다양한 웹에디터를 이용해서 웹퍼블리싱 작업을 할때유튜브 영상의 공유를 통한 아이프레임태그를 이용한 동영상, 글,그림 등의 요소들은 무조건적으로 아래로 내용이 펼쳐집니다. 어떤 요소들을 원시적인 상태가 아닌 박스형태의 틀 속에 담아 레이아웃에 활용하는 디비전 태그들을 소개합니다. 미첼 가족과 기계 전쟁 처럼 디비전태그는 일반적이기도 하지만 , 바깥세상과 다른 [ 작은집단인 가족 구성원 속]에서의 재미있는 각 요소별 스토리텔링을 디비전의 포지션 속성을 배우며 독특한 레이아웃을 구성 할 수 있습니다.

https://www.w3schools.com/html/html_youtube.asp

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
<!-- 아이디?자동재생&음소거없음&콘트롤러제거 순으로... id?autoplay=1&mute=1&controls=0 -->

보통 유튜브 영상은 정해진 크기로 가져오지만 너비에 맞게 높이를 자동조절하는 기능은 인라인 방식으로 스타일을 Inner Frame. iframe내에 삽입하는 방법도 있는데 아래 블로그를 참고한다.

유튜브 iframe height 자동 조절

유튜브 iframe height auto 해결 방법 유튜브 동영상 iframe을 넣다 보면 가로 세로 값을 정해줘야 하는데 반응형을 위해 width="100%" height="auto"로 할 경우 height 값이 적용되지 않는다. 구글링을 하다 보면

bobosszone.tistory.com

일반적인 웹문서에 제목과 설명, 그림, 영상 등은 가장 원시적인 태그이다. 보통 입력을 하면 아래로 내려가는 것이 일반적인데, 좌우에 레이아웃(배치)을 위한 태그가 바로 디비전태그이다. 디비전태그 태그는 div로 표현되며, 가장 보편적인 표현은 글과 같이 아래로 내려진다.

디비전태그는 상대위치와 절대위치로 구분되고, 레이어와 같이 상위 떠있는 개념으로 포지션 스타일 속성(css)를 적용해 포현하기도 한다.

https://www.opencheongwadae.kr/mps

청와대, 국민 품으로

청와대 살펴보기 청와대의 주소는 서울시 종로구 청와대로 1입니다. 북악산을 뒤에 두고 있으며, 시청과 종로·을지로 등 사무실이 밀집한 도심지역의 북쪽에 있습니다. 일제 강점기인 1911년, 청

www.opencheongwadae.kr

★ 브라우저에서 페이지 소스보기

모든 웹사이트는 이미지가 없는 빈공간에서 오른클릭 후 페이지 소스보기 메뉴를 통해서 태그를 볼 수 있습니다.

대부분의 HTML, CSS 코드에 대한 설명은 아래 더블유쓰리스 닷컴에서 보고 배울 수 있는 학습장이 있습니다.

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

분할, 분리라는 뜻의 디비전 Division <div> 태그는 글, 이미지, 영상 등 원시적인 요소들인 태그들을 싣고 있는 레이아웃 요소로 활용되는 일정한 크기의 박스모델로 싣고 다닌다 해서 컨테이너로 사용되고 됩니다.

CSS분리 저장방법

우선 div태그가 등장하면서 스타일과 내용들이 여러줄에 걸쳐서 보여져 복잡합니다. 필요한 경우는 현재문서내에 스타일을 임시로 구성하고 유사한 표현이 있는 경우에는 CSS라는 파일에 중복된 스타일 규정을 매번 만드는 방법을 탈피하는 방법을 소개합니다.

01. 기존의 스타일이 있는 문서를 열고, 스타일 내부에 있는 줄을 복사한다. 그리고 새 문서를 만들고 영어이름.css 이렇게 저장한 후에 복사한 내용을 붙이고 저장하면 된다.

02. 이 css문서를 통해 다양한 웹문서들이 스타일을 공유하는데, 링크태그를 이용한다. 폴더(디렉토리)명 포함해서 css/commom.css 연결하면 된다. 연결된 스타일은 전체 문서에 영향을 주고 수정하면 반영된다.

아래 파일은 CSS를 분리해서 연결한 샘플파일입니다.

서브라임텍스트에서 CSS에 스타일을 붙이면 줄내림이 안되는 경우가 있다. 이러면 View-Word Wrap클릭하면 줄내림이 된다.(메모장도 줄내림 옵션이 있다.) 작업한 웹문서가 빠른 접속을 위해 쿠키, 열어본 임시파일 저장된 경우에 동일한 내용을 속도때문에 그대로 이전내용대로 계속 보여 짜증을 유발할 수 있다. 이런 경우 새로운 브라우저(firefox)등에서 확인하거나, 크롬브라우저에서 설정-개인정보-임시파일, 웹, 쿠키를 삭제후 보면 제대로 보인다.

정상적으로 보이던 스타일을 css/현재css문서로 연결해서 상대경로인 이미지파일이 연결이 안되서 안보이는 경우는 기존의 imgs폴더와 연결된 메인의 뿌리같은 루트(..)를 거쳐 보여지기에 imgs/flower.gif를 ../imgs/flower.gif와 같이 경로명을 수정해야 한다.

A-1. 일반적인 div 레이아웃

일반적으로 글,그림 등의 요소들은 양떼라고 생각하고 요소들을 div에 가둬봅니다. 컨테이너 기능을 합니다. h1과 p태드들이 하나의 컨테이너 박스에 담겨있는 구조입니다. 아래 태그를 body에 붙여 보세요. div마다 배경색을 인라인 방식으로 적용한 샘플입니다.

<h1>Multiple DIV Elements</h1>

<div style="background-color:#FFF4A3;">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 13 million inhabitants.</p>
</div>

<div style="background-color:#FFC0C7;">
  <h2>Oslo</h2>
  <p>Oslo is the capital city of Norway.</p>
  <p>Oslo has over 600.000 inhabitants.</p>
</div>

<div style="background-color:#D9EEE1;">
  <h2>Rome</h2>
  <p>Rome is the capital city of Italy.</p>
  <p>Rome has almost 3 million inhabitants.</p>
</div>

<p>CSS styles are added to make it easier to separate the divs, and to make them more pretty:)</p>

A-2. 상대위치와 절대위치

상대위치( position: relative; )가 지정된 내부의 작은 디비들을 배치한 후에 내부에 작은 디비전들을 배치하고 절대위치(position: absolute )로 지정해 작은 세상을 구현을 할 수 있다. 상대위치를 우선 정한 부모개체내에 자식개체를 준비하고 절대위치로 지정하는 순서로 코딩합니다. 자식인 절대위치는 top, bottom, left, right 등이 기본으로 스타일을 지정합니다. 상대위치는 큰 박스 위치정보를 안써도 된다.

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
	<style type="text/css">
	body{margin:100px;border:1px #aaa solid;}
	#AB{position:relative;border:1px #f00 solid;height:400px;}
	#aa,#bb{width:100px;position:absolute;}
	#aa{border:1px #0f0 solid;left:0px; top:0px;}
	#bb{border:1px #00f solid;right:0px; bottom:0px;}
	</style>
</head>
<body>
	<h1>1.디비전태그에 대해</h1>

	<div>일반적인 웹문서에 제목과 설명, 그림, 영상 등은 가장 원시적인 태그이다. 보통 입력을 하면 아래로 내려가는 것이 일반적인데, 좌우에 레이아웃(배치)을 위한 태그가 바로 디비전태그이다. 디비전태그 태그는 div로 표현되며,</div>
	<p>가장 보편적인 표현은 글과 같이 아래로 내려진다.</p>
	<div id="AB">
		<div id="aa">AAA</div>
		<div id="bb">BBB</div>
	</div>
</body>
</html>

" 디비전태그의 상대-절대위치 부분까지
진도 놓친사람은 아래 소스로"

B. flot:left 스타일로 수평배열된 div 레이아웃

입력한 디비전이 아래로 내래가서 표현되는 것이 아닌 옆으로 즉 CSS를 통해서 수평으로 배열된 샘플에는 비율계산이 필요합니다. 넓이(너비, width)를 100%라고 보고 3개로 나누면 정확히 33.333333% 입니다. class로 구분해서 내부에 있는 div의 크기를 3개로 분할처리한 소스입니다. 분할된 자식 개체인 디비전태그에 크기가 일정할때는 문제 없이 잘 표현됩니다.

<style>
div.mycontainer {
  width:100%;
  overflow:auto;
}
div.mycontainer div {
  width:33%;  
  float:left;
}
</style>

<div class="mycontainer">

  <div style="background-color:#FFF4A3;">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>London has over 13 million inhabitants.</p>
  </div>
  
  <div style="background-color:#FFC0C7;">
    <h2>Oslo</h2>
    <p>Oslo is the capital city of Norway.</p>
    <p>Oslo has over 600.000 inhabitants.</p>
  </div>
  
  <div style="background-color:#D9EEE1;">
    <h2>Rome</h2>
    <p>Rome is the capital city of Italy.</p>
    <p>Rome has almost 3 million inhabitants.</p>
  </div>

</div>

C. flex 반응형 div 레이아웃

글씨와 내용이 몇 줄 차이로 높이가 일정하지 않을때 Flexbox 레이아웃 모듈은 float이나 위치 지정을 사용하지 않고도 유연한 반응형 레이아웃 구조를 더 쉽게 디자인할 수 있도록 도입되었습니다. 전시하다는 뜻의 display와 함께 사용합니다.

디스플레이 속성이 포함된 부분이라 어려울 것입니다. 아래 링크에서 display속성들을 알아보세요.

https://www.w3schools.com/css/css_display_visibility.asp

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

/* 디스플레이를 플랙스로 하부요소(A>b) 수평배치. 하부요소들은 수평3분할 100/3=33.333333% */
/* 점은 클래스 .a1, 샾은 아이디 #ok1, 이름 순서는 영문+숫자순 대소문자구분 보통 소문자*/

/* 서브라임텍스트에서 클래스와 아이디 이름을 변경시, 바꿀내용을 드래그 하고 Ctrl+H 하고 바꿀내용을 아랫줄에 쓰고 Replace All 버튼 누르면 교체된다.*/

<!DOCTYPE html>
<html>
<head>
<style>
body{background:gray;margin:0px;}
.myc2,.myc3,.myc4 {display: flex;margin-bottom:20px;} 
.myc2 > div{width:50%;border:1px red solid;background:#ff6;}
.myc3 > div{width:33.333333%;}
.myc4 > div{width:25%;border:1px red solid;background:#fff;}
</style>
</head>
<body>
<div class="myc2">
  <div>1</div>
  <div>2</div>
</div> 

<div class="myc4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>  

  <!--3분할-->
<div class="myc3">
  <div style="background-color:#FFF4A3;">
    1
  </div>
  <div style="background-color:#FFC0C7;">
    2
  </div> 
  <div style="background-color:#D9EEE1;">
    3
  </div>
</div>

</body>
</html>

D. 폰트어썸과 함께 사용하는 position:fixed 스타일을 이용한 위로 올라갓

상대위치, 절대위치도 아닌 세번째 위치정보를 갖는 디자인 스타일 속성이 고정된 뜻의 position: fixed; 뷰포트에 상대적으로 배치된 요소는 페이지를 스크롤하더라도 항상 같은 위치에 유지됩니다. top, right, bottom, left 속성은 요소를 배치하는 데 사용됩니다. 고정된 위치가 적용된 요소는 일반적으로 위치해야 할 페이지에 불변의 원칙으로 그대로 있습니다. 절대 움직이지 않고 같은 자리에 말입니다.

<style>

html{scroll-behavior: smooth;} /*부드럽게 상하이동이 표현됨*/
div #fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>

<div id="fixed">
위로가라 폰트어썸 아이콘을 써라!
</div>

폰트어썸 모르면 링크 클릭하세요

Web 03. <a href="url">하이퍼링크, 그림글씨 폰트어썸(클래스,아이디)

Hyper link : 웹 문서, 웹 사이트 등의 URL연결시에 사용하는 태그이다. 외부연결시에는 타겟이 필요하다. _blank">바로가기(그림은 배너) 일반적인 하이퍼링크, 독특한 벡터형태의 그림글씨인 폰

oztv.tistory.com

Position관련된 자세한 내용은 아래 링크를 참고하세요.

https://www.w3schools.com/css/css_positioning.asp

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

배경이미지를 한쪽에 배치하는 것은
div 태그의 position과는 다릅니다.

body, div 등에 공통으로 적용가능한 배경처리 한줄을 아래 정리한다. 배경색 + 이미지 경로 + 반복 + 고정 + 공간내 레이아웃 배치 / 쉼표없이 아래와 같은 문법으로 나열하면 된다.

body {
background: #b3e6ff url("imgs/flower.gif") no-repeat fixed left center;
}

#Ship{
background: #b3e6ff url("imgs/flower.gif") no-repeat fixed left center;
}

@media, CSS Media Queries

반응형웹의 필수적인 요건을 갖추고, 각 요소들을 데스크톱, 노트북, 태블릿 및 휴대폰(예: 아이폰 및 안드로이드 폰)에 맞춤형 스타일 시트를 제공하기 위한 일반적인 기술이 CSS의 미디어 쿼리입니다. At이라는 전치사로 ...에서 라는 어떤 조건일때의 변화를 내부에 스타일을 기술하는 것으로 CSS의 마지막 부분에 표기하는 구조이다. 아래의 샘플을 참고하세요.

/* 너비가 992px 이하인 화면에서는 배경색이 파란색입니다. */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
    color: white;
  }
}

/* 너비가 600px 이하인 화면에서는 배경색은 올리브색입니다. */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
    color: white;
  }
}

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Responsive Web의 CSS 필수조건

<!DOCTYPE html>
<html>
<head>
<title>반응형웹 기초</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/*보더와의 두께에도 비율유지*/
*{box-sizing:border-box;}
body{background:gray;margin:0px 50px;}
.myc2,.myc3,.myc4 {display: flex;flex-wrap: wrap;margin-bottom:20px;} 
.myc2 > div{width:50%;border:1px red solid;background:#ff6;}
.myc3 > div{width:33.333333%;}
.myc4 > div{width:25%;border:1px red solid;background:#fff;}
#goT{positio\n:fixed;right:10px;bottom:50px;background:#f00;color:#fff;}
#footer{position:relative;background: #fff url("https://cdn.pixabay.com/photo/2023/04/03/17/55/dog-7897456_640.png") no-repeat scroll left bottom;height:200px;background-size:150px;padding:40px;}
/*제일아래 미디어쿼리문*/
@media screen and (max-width: 914px) {
body {margin:0 20px;background:#fff;}
.myc2>div{width:50%;padding:10px;}
/*.myc3>div{width:50%;padding:10px;}*/
.myc4>div{width:50%;padding:10px;}
}

@media screen and (max-width: 412px) {
body {background:#ff6;}
.myc3>div,.myc4>div{width:100%;padding:10px;}
#footer{background-size:90px;padding:20px;}
}
</style>
</head>
<body>
<div class="myc2">
  <div>1</div>
  <div>2</div>
</div> 

<div class="myc4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>  

  <!--3분할-->
<div class="myc3">
  <div style="background-color:#FFF4A3;">
    c1
  </div>
  <div style="background-color:#FFC0C7;">
    c2
  </div> 
  <div style="background-color:#D9EEE1;">
    c3
  </div>
</div>

<img src="https://cdn.pixabay.com/photo/2024/01/02/10/33/stream-8482939_1280.jpg" width="100%">

<div id="footer">
  <div style="float:right;background:rgba(255, 165, 0, 0.4);">Woof woof</div>
  <div style="position:absolute;left:50%;top:0px;">Copyright © 2024 Epple Inc. All rights reserved.</div>
</div>

<div id="goT"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i></div>
</body>
</html>

html07_v2.3.zip

6.11MB

저작자표시 비영리 변경금지

'UI UX(Web)' 카테고리의 다른 글

Web 06. 웹서버에 FTP로 파일연결, 파일질라 (0)	2024.08.12
Web 05. 웹호스팅, 도메인, 반응형템플릿(FTP) (6)	2024.08.12
Web 03. <a href="url">하이퍼링크, 그림글씨 폰트어썸(클래스,아이디) (0)	2024.08.05
Web 02. HTML Style, Color, List, Table, Border, Margin, Padding (0)	2024.08.05
Web 01 Part1. 스마트문화앱 콘텐츠 설계, HTML입문 (0)	2024.08.05

Ongolzin TV

티스토리툴바

Web 04. Layout을 위한 div 디비전태그, 반응형웹 기초

★ 브라우저에서 페이지 소스보기

분할, 분리라는 뜻의 디비전 Division <div> 태그는 글, 이미지, 영상 등 원시적인 요소들인 태그들을 싣고 있는 레이아웃 요소로 활용되는 일정한 크기의 박스모델로 싣고 다닌다 해서 컨테이너로 사용되고 됩니다.

CSS분리 저장방법

A-1. 일반적인 div 레이아웃

A-2. 상대위치와 절대위치

B. flot:left 스타일로 수평배열된 div 레이아웃

C. flex 반응형 div 레이아웃

D. 폰트어썸과 함께 사용하는 position:fixed 스타일을 이용한 위로 올라갓

배경이미지를 한쪽에 배치하는 것은
div 태그의 position과는 다릅니다.

body, div 등에 공통으로 적용가능한 배경처리 한줄을 아래 정리한다. 배경색 + 이미지 경로 + 반복 + 고정 + 공간내 레이아웃 배치 / 쉼표없이 아래와 같은 문법으로 나열하면 된다.

body {
background: #b3e6ff url("imgs/flower.gif") no-repeat fixed left center;
}

#Ship{
background: #b3e6ff url("imgs/flower.gif") no-repeat fixed left center;
}

@media, CSS Media Queries

'UI UX(Web)' 카테고리의 다른 글

티스토리툴바

티스토리툴바

Web 04. Layout을 위한 div 디비전태그, 반응형웹 기초

★ 브라우저에서 페이지 소스보기

분할, 분리라는 뜻의 디비전 Division <div> 태그는 글, 이미지, 영상 등 원시적인 요소들인 태그들을 싣고 있는 레이아웃 요소로 활용되는 일정한 크기의 박스모델로 싣고 다닌다 해서 컨테이너로 사용되고 됩니다.

CSS분리 저장방법

A-1. 일반적인 div 레이아웃

A-2. 상대위치와 절대위치

B. flot:left 스타일로 수평배열된 div 레이아웃

C. flex 반응형 div 레이아웃

D. 폰트어썸과 함께 사용하는 position:fixed 스타일을 이용한 위로 올라갓

배경이미지를 한쪽에 배치하는 것은 div 태그의 position과는 다릅니다.

body, div 등에 공통으로 적용가능한 배경처리 한줄을 아래 정리한다. 배경색 + 이미지 경로 + 반복 + 고정 + 공간내 레이아웃 배치 / 쉼표없이 아래와 같은 문법으로 나열하면 된다.

body { background: #b3e6ff url("imgs/flower.gif") no-repeat fixed left center;}

#Ship{ background: #b3e6ff url("imgs/flower.gif") no-repeat fixed left center;}

@media, CSS Media Queries

'UI UX(Web)' 카테고리의 다른 글

'UI UX(Web)' Related Articles

티스토리툴바

배경이미지를 한쪽에 배치하는 것은
div 태그의 position과는 다릅니다.

body {
background: #b3e6ff url("imgs/flower.gif") no-repeat fixed left center;
}

#Ship{
background: #b3e6ff url("imgs/flower.gif") no-repeat fixed left center;
}