1. div 태그로 배치(layout)하기
<코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>2022. 5. 18. - 오전 11:44:59</title>
<style>
/* * 선택자는 모든 태그들에게 적용하겠다 */
*{
/* article 너비가 커서 아래로 떨어졌다가 아래 속성을 주었더니 딱 맞춰서 나오게됨 */
/* width를 주면 padding과 margin, border 까지 포함해서 계산을 하는데 아래 속성을 주면 width 값을 준 걸 변경하지 않겠다. */
box-sizing: border-box; /* css 수업할 때 자세히 알려주실 예정 */
}
/* body 태그의 자식한테 상속되어져서 적용 */
body{
/* 글꼴, 글꼴, 글꼴 => 앞에 있는 글꼴이 없으면 그 다음 글꼴을 준다. 만약 다 없다면 시스템의 기본글꼴을 주겠다.*/
font-family: Arial, Helvetica, sans-serif;
}
#header{
background-color: #666;
color: white;
padding: 30px;
text-align: center;
font-size: 35px;
}
#footer{
background-color: #777;
color: white;
padding: 15px;
text-align: center;
font-size: 25px;
}
</style>
<style>
#nav{
background-color: #ccc;
height: 300px; /* 높이는 컨텐츠에 맞춰지지만 만약 높이보다 컨텐츠 양이 작으면 높이를 300px 고정하겠다. */
width: 30%; /* 부모기준(nav -> section -> body) */
padding: 20px;
float: left;
}
#nav ul{
/* background-color: red; ul 태그 범위를 확인하기 위한 설정 */
list-style-type: none;
padding: 0;
}
#article{
background-color: #f1f1f1;
/* height: 300px; 컨텐츠에 맞춰지지만 높이를 300px 고정하겠다. */
min-height: 300px;
width: 70%; /* 부모기준(article -> section -> body) */
padding: 20px;
float: left;
}
/* footer는 float: left를 안줬지만 영향을 받고있음 */
/* body 태그 안에.. <div style="clear: left;"></div> 이 코딩을 안주고 이렇게 하겠다. */
/*
#section::after{
content: "";
display: table;
clear: both;
}
*/
</style>
</head>
<body>
<h2>div(배치, layout) + css(float)</h2>
<!-- p*2>lorem -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur architecto alias animi facere perspiciatis ut fugit sit ab ratione a. Officiis culpa officia facere iure asperiores expedita iste hic maiores.</p>
<p>Maiores sed quis porro sit nam cum commodi voluptatum nemo quas perspiciatis est voluptates sapiente aut quos inventore perferendis temporibus esse magni explicabo ratione illum enim libero odio a saepe!</p>
<!-- #header>h2>{Cites} -->
<div id="header">
<h2>Cites</h2>
</div>
<!-- #section>(#nav>ul>li*3>a[href='#'])+#article>(h1>{London}^p*2>lorem)*3 -->
<div id="section">
<div id="nav">
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Seoul</a></li>
</ul>
</div><!-- nav -->
<div id="article">
<h1>London</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque laboriosam voluptatum architecto amet dolorum eius voluptas eum nisi ea tempore voluptate magnam sunt repudiandae odit quibusdam animi nam ad modi.</p>
<p>Cumque beatae harum eveniet doloremque molestias quo non sit maiores recusandae placeat minima laudantium commodi dolorum a ipsam soluta consequatur facere quidem odio porro asperiores sint quod magni repellendus assumenda!</p>
<h1>Paris</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quidem culpa ad fuga cupiditate consequatur neque esse sunt earum deserunt quas doloremque! Accusamus dolor odit facere quos fugiat tempore ipsum.</p>
<p>Aut reprehenderit neque voluptas accusantium inventore nesciunt enim ex veritatis optio commodi! Nulla assumenda fuga delectus aut atque in quidem debitis sunt voluptatibus fugit! Dolor inventore vero libero modi deserunt!</p>
<h1>Seoul</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est corporis rem sit tempore obcaecati quaerat fugiat labore quod nemo culpa saepe voluptatum ipsum omnis magni aperiam quasi maxime earum!</p>
<p>Architecto nostrum doloribus cupiditate animi nam corporis pariatur voluptate deleniti voluptas quae. Iste omnis veniam quis pariatur officia eveniet cupiditate commodi corporis architecto adipisci doloremque dignissimos quod accusamus a doloribus.</p>
</div><!-- article -->
</div><!-- section -->
<div id="footer">
<h2>footer</h2>
</div><!-- footer -->
</body>
</html>
<style 태그 안 코드 일부분>
nav와 article id명을 가진 div 태그를 float: left;로 띄우면 footer 부분이 nav와 article 아래로 깔리게 된다. float는 그 다음 요소에게도 영향을 미치게 되어 float와 clear를 하나의 세트처럼 생각하고 사용해야 한다.
body 부분에 float 설정을 받는 태그 다음에 의미없는 div태그로 스타일만 설정하여도 되고, style태그에 설정하여도 된다.
<body 태그 안 코딩>
<style 태그 안 코딩>
<clear 적용한 코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>2022. 5. 18. - 오전 11:44:59</title>
<style>
/* * 선택자는 모든 태그들에게 적용하겠다 */
*{
/* article 너비가 커서 아래로 떨어졌다가 아래 속성을 주었더니 딱 맞춰서 나오게됨 */
/* width를 주면 padding과 margin, border 까지 포함해서 계산을 하는데 아래 속성을 주면 width 값을 준 걸 변경하지 않겠다. */
box-sizing: border-box; /* css 수업할 때 자세히 알려주실 예정 */
}
/* body 태그의 자식한테 상속되어져서 적용 */
body{
/* 글꼴, 글꼴, 글꼴 => 앞에 있는 글꼴이 없으면 그 다음 글꼴을 준다. 만약 다 없다면 시스템의 기본글꼴을 주겠다.*/
font-family: Arial, Helvetica, sans-serif;
}
/* 아래 두가지의 차이점은 있음.. CSS할 때 알려주심 */
/* div #header{ */
#header{
background-color: #666;
color: white;
padding: 30px;
text-align: center;
font-size: 35px;
}
#footer{
background-color: #777;
color: white;
padding: 15px;
text-align: center;
font-size: 25px;
}
</style>
<style>
#nav{
background-color: #ccc;
height: 300px; /* 높이는 컨텐츠에 맞춰지지만 만약 높이보다 컨텐츠 양이 작으면 높이를 300px 고정하겠다. */
width: 30%; /* 부모기준(nav -> section -> body) */
padding: 20px;
float: left;
}
#nav ul{
/* background-color: red; ul 태그 범위를 확인하기 위한 설정 */
list-style-type: none;
padding: 0;
}
#article{
background-color: #f1f1f1;
/* height: 300px; 컨텐츠에 맞춰지지만 높이를 300px 고정하겠다. */
min-height: 300px;
width: 70%; /* 부모기준(article -> section -> body) */
padding: 20px;
float: left;
}
/* footer는 float: left를 안줬지만 적용되어지고있음 */
/* body 태그 안에.. <div style="clear: left;"></div> 이 코딩을 안주고 이렇게 하겠다. */
/* 공식처럼 암기.. */
#section::after{
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>div(배치, layout) + css(float)</h2>
<!-- 캐스캐이팅 스타일 시트 == css -->
<!-- p*2>lorem -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur architecto alias animi facere perspiciatis ut fugit sit ab ratione a. Officiis culpa officia facere iure asperiores expedita iste hic maiores.</p>
<p>Maiores sed quis porro sit nam cum commodi voluptatum nemo quas perspiciatis est voluptates sapiente aut quos inventore perferendis temporibus esse magni explicabo ratione illum enim libero odio a saepe!</p>
<!-- #header>h2>{Cites} -->
<div id="header">
<h2>Cites</h2>
</div>
<!-- #section>(#nav>ul>li*3>a[href='#'])+#article>(h1>{London}^p*2>lorem)*3 -->
<div id="section">
<div id="nav">
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Seoul</a></li>
</ul>
</div><!-- nav -->
<div id="article">
<h1>London</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque laboriosam voluptatum architecto amet dolorum eius voluptas eum nisi ea tempore voluptate magnam sunt repudiandae odit quibusdam animi nam ad modi.</p>
<p>Cumque beatae harum eveniet doloremque molestias quo non sit maiores recusandae placeat minima laudantium commodi dolorum a ipsam soluta consequatur facere quidem odio porro asperiores sint quod magni repellendus assumenda!</p>
<h1>Paris</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quidem culpa ad fuga cupiditate consequatur neque esse sunt earum deserunt quas doloremque! Accusamus dolor odit facere quos fugiat tempore ipsum.</p>
<p>Aut reprehenderit neque voluptas accusantium inventore nesciunt enim ex veritatis optio commodi! Nulla assumenda fuga delectus aut atque in quidem debitis sunt voluptatibus fugit! Dolor inventore vero libero modi deserunt!</p>
<h1>Seoul</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est corporis rem sit tempore obcaecati quaerat fugiat labore quod nemo culpa saepe voluptatum ipsum omnis magni aperiam quasi maxime earum!</p>
<p>Architecto nostrum doloribus cupiditate animi nam corporis pariatur voluptate deleniti voluptas quae. Iste omnis veniam quis pariatur officia eveniet cupiditate commodi corporis architecto adipisci doloremque dignissimos quod accusamus a doloribus.</p>
</div><!-- article -->
</div><!-- section -->
<!-- <div style="clear: left;"></div> 여기서 부터는 깨끗하게 하겠다. 위치를 모르면 both를 주기..(float: left를 끊기 위한 태그) -->
<div id="footer">
<h2>footer</h2>
</div><!-- footer -->
</body>
</html>
<결과>
clear 스타일 속성을 설정해주면 footer 부분이 아래로 잘 나오는 것을 확인할 수 있다.
2. html layout(배치) 방법
1) css float 속성 ***(오늘은 이 방법을 사용)
2) css 프레임워크 - 부트스트랩(Bootstrap) => 맛보기 정도로 다룸
3) css flexbox
4) css 그리드 레이아웃
3. html 시멘틱 태그
1) 시멘틱 태그 = 의미가 있는 태그 => 대상(개발자, 사용자, 브라우저)에게 어떠한 내용을 담고 있구나 라고 알 수 있는 태그
ex) form(입력받은 태그들을 담겠다는 의미), table(데이터를 담겠다는 의미)
2) 의미가 없는 태그 : div, span
3) 시멘틱 태그 종류들..
ㄱ. <section> : 일반적으로 제목이 있는 콘텐츠의 주제별 그룹을 나타낼 때 사용
ex) 장, 소개,뉴스 항목, 연락처 정보
하나의 section에 여러 개의 section으로 나눌 수 있음
ㄴ. <article> : 독립적이고 자체 포함된 콘텐츠를 지정
그 자체로 의미가 있는 콘텐츠이고, 웹 사이트의 나머지 부분과 독립적으로 배포할 수 있어야 한다.
ex) 포럼 게시물, 블로그 게시물, 사용자 의견, 제품 카드, 신문 기사들 등등
> 위의 두 가지 태그를 크게 구분해서 사용하지 않음..
사용 방식)
<section>
<article></article> 중첩
</section>
<article>
<section></section> 중첩
</article>
ㄷ. <header> : 콘텐츠 또는 탐색 링크(Navigation Menu 같은..) 집합의 컨테이너를 나타내는 태그
ex) 로고, 아이콘, 저작권 정보, 하나 이상의 제목(hn 태그)
하나의 웹문서(html문서)에 여러 요소(태그)가 있을 수 있다.
사용 방식)
<article>
<header></header>
</article>
ㄹ. <footer> : 문서 또는 <section>의 바닥글 정의할 때 사용하는 태그
ex) 연락처 정보, 저작권 정보, 사이트 맵, 맨위로 가는 링크, 관련된 문서
사용 방식)
<section>
<article></article> 중첩
<footer></footer>
</section>
ㅁ. <nav> : 링크 집합(탐색 메뉴 집합) => 다른 곳으로 이동하기 위한..
ㅂ. <aside> : 주 콘텐츠(내용)외 사이드에 배치된 콘텐츠 (한 쪽에 일부에 배치된 콘텐츠)
ex) 광고, 장바구니 정보
ㅅ. <figure>, <figcaption> : 사진, 코드 목록, 다이어그램, 일러스트레이션 등 콘텐츠를 지정할 때 사용하기 위한 태그
<time>, <summary>, <name>, <mark> 등등..
4. head 태그와 head 태그의 자식 태그
1) head 태그
- 메타데이터(데이터에 대한 데이터)의 컨테이너 역할을 하는 태그이다.
- html 태그의 자식
- 메타데이터 : 문서 제목
2) head 태그 자식 태그
- title 태그 : 문서 제목, 브라우저의 제목 표시줄 또는 페이지 탭에 표시 되어짐
- style 태그 : html 문서의 스타일 정보 정의
- link 태그 : 외부에 있는 자원(리소스)을 연결할 때 정의하는 태그 - 외부 css 파일 연결할 때 자주 사용
- meta 태그 :
1) meta charset="UTF-8" 웹문서에 사용된 인코딩(문자셋) 정의
(meta charset="UTF-8" 이걸 설정하지 않아도 기본 문자셋은 UTF-8 이다)
2) meta name="keywords" content="간장게장, 간장, 게장" 키워드 정의
왜 키워드를 정의하는가? 검색엔진에 대한 키워드 정의할 때 사용
3) 웹 페이지를 만든 저자를 정의
4) 웹 페이지에 대한 설명을 정의
5) n초 마다 문서를 새로고침(서버에 새롭게 요청 / 응답)
6) 웹 페이지가 모든 기기(스마트폰, 탭, 노트북 등)에서 잘 보이도록 표시하겠다는 영역 설정
장치의 너비에 맞춰서 1:1 비율로 해서 보여줘라
- script 태그 : javascript 정의하는데 사용하는 태그
- base 태그 : 페이지의 모든 상대 주소에 대한 기본 주소 및 대상을 지정하는 태그
(공통 주소로 들어가는 것을 base 태그로 빼겠다. base 태그는 1개만 줄 수 있음)
5. html 반응형 웹
1. 모든 장치에서 웹 페이지가 보기 좋게 만드는 것을 반응형 웹이라고 한다.
2. 다양한 화면 크기와 뷰포트(장치에서 사용자가 볼 수 있는 영역)에 맞게 자동으로 조정되게 하는 웹페이지
3. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 코딩 추가(메타 태그)
4. 다양한 화면 크기에 맞춰 디자인을 하는 것을 반응형 웹 디자인 이라고 한다.
1) 반응형 이미지 처리 ***
너비(width) 속성 단위 : % 퍼센트 사용 => %를 주어서 장치에 따라 맞춰서 보여지게 한다.
ex)
> 커피이미지 크기 : 너비 100px 높이 200px
> 장치의 크기 : 너비 400px
* 커피이미지 width: 100% 라고 잡아버리면 장치 크기의 100%이니 400px로 보여짐 -> 해상도가 깨지는 문제가 발생함
* 이럴 때 속성을 max-width: 100% 주면 원래 이미지 크기인 100px 이상으로 너비를 확대하지 않겠다.
2) 반응형 텍스트 크기
단위 : vw 사용 (vw == viewport width)
<h1 style="font-size:10vw;"></h1> 이렇게 사용
1vw == 뷰포트의 1%
장치의 너비 / 뷰포트 50cm = 1vw == 0.5cm
3) 미디어 쿼리를 사용해서 장치에 맞는 텍스트와 이미지의 크기를 조정한다. ***
ex) ex06_02.html => 시멘틱 태그로 배치하기 부분 참고
http://localhost/webPro/html/days05/ex06_02.html
* localhost == 내 IP 주소
cmd에서 ipconfig 명령어로 확인 가능
* 내부 네트워크 사용시 확인 가능
노트북/와이파이
휴대폰/와이파이
6. 뷰포트와 미디어쿼리
[뷰포트 - HTML 태그 중 메타태그]
> 화면에 보이는 영역을 다루는 기술
> HTML의 태그 중 meta태그에 name값에 viewport를 주고 content의 값을 설정하면 웹브라우저는 여기에 설정된 값에 따라서 화면의 크기를 각 디바이스에 최적화된 크기로 표현해줘서 보기 좋은 화면을 표시해줌
[ 미디어쿼리 - css ]
> 화면크기나 환경에 따라 웹사이트를 변경하는 기술
> 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용할 수 있도록 해줌 -> 반응형 웹을 구현할 수 있음
* 스마트기기는 기본 설정된 뷰포트 영역으로 인해 미디어쿼리가 정상작동하지 않을 수 있어 이를 방지하기 위해 뷰포트 메타 태그를 이용해 화면크기/배율 조정 필요
> @media 조건 {}
조건들..
- min-width : 최소 너비
- max-width : 최대 너비
- only screen : 화면에 표시될 때만 적용
7. 시멘틱 태그로 배치(layout)하기
> div 태그에 id 속성을 주는 대신 시멘틱 태그로 변경하여 배치 작업을 하였고, 뷰포터와 미디어쿼리를 사용하여 반응형 웹 페이지로 만들어보았다.
<코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>2022. 5. 18. - 오전 11:44:59</title>
<style>
/* * 선택자는 모든 태그들에게 적용하겠다 */
*{
/* article 너비가 커서 아래로 떨어졌다가 아래 속성을 주었더니 딱 맞춰서 나오게됨 */
/* width를 주면 padding과 margin, border 까지 포함해서 계산을 하는데 아래 속성을 주면 width 값을 준 걸 변경하지 않겠다. */
box-sizing: border-box; /* css 수업할 때 자세히 알려주실 예정 */
}
/* body 태그의 자식한테 상속되어져서 적용 */
body{
/* 글꼴, 글꼴, 글꼴 => 앞에 있는 글꼴이 없으면 그 다음 글꼴을 준다. 만약 다 없다면 시스템의 기본글꼴을 주겠다.*/
font-family: Arial, Helvetica, sans-serif;
}
/* 아래 두가지의 차이점은 있음.. CSS할 때 알려주심 */
/* div #header{ */
header{
background-color: #666;
color: white;
padding: 30px;
text-align: center;
font-size: 35px;
}
footer{
background-color: #777;
color: white;
padding: 15px;
text-align: center;
font-size: 25px;
}
</style>
<style>
nav{
background-color: #ccc;
height: 300px; /* 높이는 컨텐츠에 맞춰지지만 만약 높이보다 컨텐츠 양이 작으면 높이를 300px 고정하겠다. */
width: 30%; /* 부모기준(nav -> section -> body) */
padding: 20px;
float: left;
}
nav ul{
/* background-color: red; ul 태그 범위를 확인하기 위한 설정 */
list-style-type: none;
padding: 0;
}
article{
background-color: #f1f1f1;
/* height: 300px; 컨텐츠에 맞춰지지만 높이를 300px 고정하겠다. */
min-height: 300px;
width: 70%; /* 부모기준(article -> section -> body) */
padding: 20px;
float: left;
}
/* footer는 float: left를 안줬지만 적용되어지고있음 */
/* body 태그 안에.. <div style="clear: left;"></div> 이 코딩을 안주고 이렇게 하겠다. */
section::after{ /* 공식처럼 암기.. */
content: "";
display: table;
clear: both;
}
</style>
<style>
/* ex09 관련되어짐 */
/* 1. width : % 적용 완료 */
/* 2. 미디어 쿼리 */
@media(max-width:800px){
nav,article{
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>div(배치, layout) + css(float) + 반응형 웹</h2>
<!-- 캐스캐이팅 스타일 시트 == css -->
<!-- p*2>lorem -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur architecto alias animi facere perspiciatis ut fugit sit ab ratione a. Officiis culpa officia facere iure asperiores expedita iste hic maiores.</p>
<p>Maiores sed quis porro sit nam cum commodi voluptatum nemo quas perspiciatis est voluptates sapiente aut quos inventore perferendis temporibus esse magni explicabo ratione illum enim libero odio a saepe!</p>
<header>
<h2>Cites - 시멘틱 태그(semantic elements)</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Seoul</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque laboriosam voluptatum architecto amet dolorum eius voluptas eum nisi ea tempore voluptate magnam sunt repudiandae odit quibusdam animi nam ad modi.</p>
<p>Cumque beatae harum eveniet doloremque molestias quo non sit maiores recusandae placeat minima laudantium commodi dolorum a ipsam soluta consequatur facere quidem odio porro asperiores sint quod magni repellendus assumenda!</p>
<h1>Paris</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quidem culpa ad fuga cupiditate consequatur neque esse sunt earum deserunt quas doloremque! Accusamus dolor odit facere quos fugiat tempore ipsum.</p>
<p>Aut reprehenderit neque voluptas accusantium inventore nesciunt enim ex veritatis optio commodi! Nulla assumenda fuga delectus aut atque in quidem debitis sunt voluptatibus fugit! Dolor inventore vero libero modi deserunt!</p>
<h1>Seoul</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est corporis rem sit tempore obcaecati quaerat fugiat labore quod nemo culpa saepe voluptatum ipsum omnis magni aperiam quasi maxime earum!</p>
<p>Architecto nostrum doloribus cupiditate animi nam corporis pariatur voluptate deleniti voluptas quae. Iste omnis veniam quis pariatur officia eveniet cupiditate commodi corporis architecto adipisci doloremque dignissimos quod accusamus a doloribus.</p>
</article>
</section>
<!-- <div style="clear: left;"></div> 여기서 부터는 깨끗하게 하겠다. 위치를 모르면 both를 주기..(float: left를 끊기 위한 태그) -->
<footer>
<h2>footer</h2>
</footer>
</body>
</html>
<결과>
미디어 쿼리로 인하여 800px까지는 nav, article 태그의 너비는 100% 높이는 auto 설정하여 아래와 같이 웹브라우저의 px이 800까지는 아래와 같이 나오게 되고 800px 초과가 되면 위와 같이 나오게 된다.
8. 반응형 웹 디자인을 위한 스타일 태그 - 미디어 쿼리
<코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
*{
box-sizing: border-box;
}
body{
font-family: Verdana;
color: #aaa;
}
</style>
<style>
#header{
background-color: #e5e5e5;
padding: 15px;
text-align: center;
}
#footer{
background-color: #e5e5e5;
padding: 10px;
text-align: center;
margin-top: 7px;
}
</style>
<style>
/* #아이디명 .클래스명 */
/* menu 20, main 60, right 20 다 더해서 총 100% */
.menu{
width: 20%;
float: left;
}
.menu a{
background-color: #e5e5e5;
color: black;
display: inline-block; /* a태그 인라인 모드이므로 블럭 모드로 변경 후 너비 설정 */
width: 100%;
text-align: center;
text-decoration: none;
margin-top: 7px;
}
.main{
width: 60%;
padding: 0 20px; /* 상하0 좌우 20 */
float: left;
}
.right{
width: 20%;
background-color: #e5e5e5;
text-align: center;
margin-top: 7px;
padding: 15px;
float: left;
}
</style>
<style>
/* 반응형 웹 디자인을 위한 스타일 태그 */
/* 미디어 쿼리 */
/* only : 오직 screen : 화면에만(프린트시 적용X) */
@media only screen and (max-width:620px){ /* 최대 620까지는 이 스타일을 적용하겠다. */
.menu, .mian, .right{
width: 100%;
/* 3개의 클래스를 모두 너비를 100% 잡아라 */
}
.right{
display: none; /* 620px 까지는 보이지 않게하겠다. */
}
}
</style>
<title>2022. 5. 18. - 오후 3:49:05</title>
</head>
<body>
<div id="header">
<h1>Hello World</h1>
</div>
<div style="overflow: auto">
<!-- <div> -->
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<div class="main">
<h2>Lorem ipsum.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium rem praesentium ratione iusto. Porro voluptates minima
numquam voluptate facere ratione culpa recusandae eos atque
assumenda velit at eaque optio est?</p>
</div>
<div class="right">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Possimus maiores.</p>
</div>
</div>
<div id="footer">@ copyright yaliny</div>
</body>
</html>
<결과>
위의 미디어 쿼리가 적용이 되어서 620px 초과가 되면 아래의 화면처럼 적용되어지고
620px까지는 아래의 화면처럼 적용이 되어진다.
9. 부트스트랩 프레임워크를 사용하여 배치하기 + 반응형 웹
- <head> 태그 바로 위에 아래 코딩을 추가하기
- <body> 태그 안 코딩
<결과>
[참고] style 태그에서 id와 class 스타일 설정하는 방법
style 태그에서 id는 #아이디명 으로 스타일을 설정할 수 있고 class는 .클래스명으로 스타일을 설정할 수 있다.
'TIL > Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글
| [SIST] Web_HTML_days05/06_form(양식) 태그와 jsp 맛보기+select, textarea, input 태그 (0) | 2022.05.19 |
|---|---|
| [SIST] Web_HTML_days05_iframe 태그 (0) | 2022.05.18 |
| [SIST] 자바스크립트(JavaScript) 자동완성 플러그인 "Tern" 설치하기 (0) | 2022.05.17 |
| [SIST] 이클립스 Emmet(zencoding) 설치하기 + Emmet 사용법 (0) | 2022.05.17 |
| [SIST] Web_HTML_days04/05_div 태그 + javascript, jquery 맛보기 (0) | 2022.05.17 |