[자바 기초] 18일차 일지 3 - 8장. 반응형 웹 디자인하기

프로그래밍/자바(java) 융합개발자 2차

[자바 기초] 18일차 일지 3 - 8장. 반응형 웹 디자인하기

aSpring 2021. 1. 8. 17:35

728x90

2021/01/08 - [공부/자바(java) 융합개발자 2차] - [자바 기초] 18일차 일지 - Ch8. CSS3 효과와 애니메이션

2021/01/08 - [공부/자바(java) 융합개발자 2차] - [자바 기초] 18일차 일지 2 - Ch9. 자바스크립트 기본 문법

8장. 반응형 웹 디자인하기

PC가 있고 모바일이 있으면

창 사이즈에 따라 보여주는 내용이 다르다.

예제 3가지 해보기

Ex08-01 : 웹폰트

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <style type="text/css">
            @font-face { /* 서울남산체 (모바일전용)을 다운로드 받아 설정 */
                font-family: SeoulNamsanFont;
                src: url('SeoulNamsan.ttf');
                font-weight: normal; /* normal 스타일은 이 폰트로 등록 */
            }
            @font-face { /* 서울남산체 (Extra bold) 를 다운받아 설정 */
                font-family: SeoulNamsanFont;
                src: url('SeoulNamsanEB.ttf');
                font-weight: bold; /* bold 스타일은 이 폰트로 등록 */
            }
            p {
                font-family: SeoulNamsanFont; /* 웹 폰트 이름 사용 */
            }
        </style>
    </head>
    <body>
        <p>이 문장은 웹폰트로 <b>"서울남산체"</b>를 사용하였습니다.</p>
    </body> 
</html>

만들 때는 서울남산체를 다운받아서 작성하고사용자들이 사용할 때는 고객들의 컴퓨터에 저 폰트가 없어도된다.

Ex08-02

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="user-scalable=no, width=device-width" />
        <title></title>
        <link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:799px)">
        <link href="desktop_pc.css" rel="stylesheet" type="text/css" media="screen and (min-width:800px)">
    </head>
    
    <body>
        <h1>미디어 쿼리 연습</h1>
        <div id="pc_view">
            <h2>데스크탑 pc 화면</h2>
            <p>브라우저의 너비를 800 px보다 작게 줄여보세요.</p>
            <p>배경이 검정색에 글자가 흰색으로 바뀔 겁니다.</p>
        </div>
        <div id="mobile_view">
            <h2>모바일 화면</h2>
            <p>브라우저의 너비를 800 px이상으로 크게 늘여보세요.</p>
            <p>배경이 흰색에 글자가 검정색으로 바뀔 겁니다.</p>
        </div>
    </body>
</html>

mobile.css

@charset "utf-8";
body {
    color: #FFF; /* 글자 색상을 흰색 */
    background-color: #000; /* 배경 색상을 검정 */
}
#pc_view {
    display: none; /* pc_view 영역은 화면에서 생략 */
}

desktop_pc.css

@charset "utf-8";
body {
    background-color: #fff; /* 배경 색상을 흰색 */
}
#mobile_view {
    display : none; /* mobile_view 선택자 영역은 화면에서 생략 */
}

Ex08-03

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
        
        <title></title>
        
        <meta name="viewport" content="user-scalable=no", width="device-width" />
        <link href="common.css" rel="stylesheet" type="text/css">
        <link href="mobile2.css" rel="stylesheet" type="text/css" media="screen and (max-width:799px)">
        <link href="desktop_pc2.css" rel="stylesheet" type="text/css" media="screen and (min-width:800px)">
    </head>
    
    <body>
        <div class='pg'>
            <header class='head'>
                <h1>미디어아트 인터랙션 디자인</h1>
            </header> <!-- 'head' 끝 -->
            
            <article class="pg-main">
                <section class='entries'>
                    <h2>브라우저의 너비를 800px 미만으로 줄여보세요.</h2>
                    <p class='pcview_only'>이 문장은 pc화면에서만 보입니다. 이 문장은 pc화면에서만 보입니다. 이 문장은 pc화면에서만 보입니다. 이 문장은 pc화면에서만 보입니다. 이 문장은 pc화면에서만 보입니다.이 문장은&nbsp;pc화면에서만 보입니다.이 문장은 pc화면에서만 보입니다. 이 문장은 pc화면에서만 보입니다. 이&nbsp; 문장은 pc화면에서만 보입니다. 이 문장은 pc화면에서만 보입니다. <span style="color: blue;"></span></p>
                    <p>이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다.<sp style="color: blue;" an=""></p>
                    <hr/>
                    <h2>반대로 브라우저의 너비를 800px 이상으로 늘려 보세요.</h2>
                    <p class='pcview_only'>이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은&nbsp;모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. ;이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든&nbsp;디바이스 화면에서 보입니다.</p>
                    <p class='pcview_only'>이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은&nbsp;모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. ;이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모등&nbsp;디바이스 화면에서 보입니다.</p>
                </section><!-- "entriese" 끝 -->
                
                <nav class='sidebar'>
                    <h3>SNS 등록</h3>
                    <ul>
                        <li><a href="#">페이스북</a></li>
                        <li><a href="#">트위터</a></li>
                    </ul>
                    <h3>카테고리</h3>
                    <ul>
                        <li><a href="#">디지털 아트</a></li>
                        <li><a href="#">사운드 아트</a></li>
                        <li><a href="#">정보 가시화</a></li>
                        <li><a href="#">뉴 미디어 프로그래밍</a></li>
                    </ul>
                </nav> <!-- 'sidebar' 끝 -->
            </article> <!-- 'pg-main' 끝 -->
            
            <footer class='foot'>
                <p>Copyright &copy; 2011 All Rights Reserved</p>
            </footer>  <!-- 'footer' 끝 -->
            
            
        </div>  <!-- 'pg' 끝 -->
    </body>
</html></sp>

common.css

@charset "utf-8";
@font-face { /* 서울남산체 (모바일용)를 다운로드 받아 설정 */
    font-family : SeoulNamsanFont;
    src: url('SeoulNamsan.ttf');
}

@font-face { /* 서울남산체 (Extra bold)를 다운로드 받아 설정 */
    font-family: SeoulNamsanFont;
    src: url('SeoulNamsanEB.ttf');
    font-weight: bold; /* bold 스타일은 이 폰트로 등록 */
}
* {
    margin: 0px;
    padding: 0px;
}
body {
    line-height: 150%;
    font-family: SeoulNamsanFont; /* 웹 폰트로 '서울남산체' 설정 */
}
a:link, a:visited {
    color: inherit; /* 상위 엘리먼트의 색상 상속받음 */
    text-decoration: none;
}
a:hover, a:active {
    text-decoration: underline;
}
h1 {
    font-size: 22px;
    color: #FFF;
}
h2 {
    font-size: 19px;
    color: #333;
    margin-top: 5px;
    margin-bottom: 5px;
}
h3 {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    margin-bottom: 5px;
}
p {
    margin-bottom: 10px;
}
header, footer {
    display: block;
}

desktop_pc2.css

@charset "utf-8";
    
.pg {
        width: 800px; /* 가로 너비를 800px로 고정 */
        margin-right: auto; /* 좌우 여백을 같게 하여 가운데 정렬 시킴 */
        margin-left: auto;
}
.head {
    background-image: url(title.png); /* 타이틀 이미지를 배경으로 바꿈 */
    background-repeat: no-repeat;
    width: 800px; /* 이미지 크기로 설정 */
    height: 264px;
}
.head h1 {
    display: none; /* 텍스트 제목은 이미지로 대치하므로 화면에서 생략함 */
}
.entries {
    float: left; /* "entries"를 상자로 간주하여 왼쪽으로 float */
    width: 680px; /* 너비는 sidebar도 고려하여 680px로 줄임 */
}
.sidebar {
    float: left; /* entries 옆에 나란히 출력을 위해 float 시킴 */
    text-align: right; /* 너비는 sidebar도 고려하여 680px로 줄임 */
    width: 100px; /* 너비는 entries 고려하여 800px을 넘지 않도록 100px로 설정 */
    margin-left: 20px; /* entries와 간격을 만듬 */
}
.sidebar ul {
    list-style-type: none; /* 뷸렛 장식 제거 */
}
.foot {
    background-color: #333;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #999;
    padding: 10px;
    color: #FFF;
    margin-top: 10px;
    clear: left; /* 끌려 올라가지 않도록 clear 시킴 */
    text-align: center;
}

mobile2.css

@charset "utf-8";

.head {
    background-color: #473E37; /* 타이틀 그림 대신 고동색으로 변경 */
    padding: 1em;
}
.pg-main {
    padding-right: 10px;
    padding-left: 10px;
}
.entries p.pcview_only {
    display: none; /* pcview_only로 설정된 글 화면에서 생략 */
}
.sidebar ul { /* 맨 왼쪽 그림에 장식용 바 그림 */
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #ccc;
}
.sidebar ul li { /* 인라인 레벨로 바꾸고 오른쪽에 장식용 바 그림 */
    display: inline;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #ccc;
    padding-right: 5px;
    padding-left: 5px;
}
.foot {
    background-color: #333;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #999;
    padding: 10px;
    color: #FFF;
    margin-top: 10px;
    text-align: center;
}

728x90

저작자표시

'프로그래밍 > 자바(java) 융합개발자 2차' 카테고리의 다른 글

[자바 1일차] 20일차 일지 - Eclipse에서 Hello 출력, 변수, if문 (0)	2021.01.12
[자바 기초] 19일차 일지 - 8장. 반응형 웹 디자인하기 2 (0)	2021.01.11
[자바 기초] 18일차 일지 2 - Ch9. 자바스크립트 기본 문법 (0)	2021.01.08
[자바 기초] 18일차 일지 - Ch8. CSS3 효과와 애니메이션 (0)	2021.01.08
[자바 기초] 17일차 일지 - Ch7. CSS3 속성 (0)	2021.01.07

현재글[자바 기초] 18일차 일지 3 - 8장. 반응형 웹 디자인하기

HelloSpring

[자바 기초] 18일차 일지 3 - 8장. 반응형 웹 디자인하기

'프로그래밍 > 자바(java) 융합개발자 2차' 카테고리의 다른 글

'프로그래밍/자바(java) 융합개발자 2차'의 다른글

티스토리툴바

[자바 기초] 18일차 일지 3 - 8장. 반응형 웹 디자인하기

'프로그래밍 > 자바(java) 융합개발자 2차' 카테고리의 다른 글

'프로그래밍/자바(java) 융합개발자 2차'의 다른글

관련글

티스토리툴바