※이번 시간은 해상도에 따라 레이아웃이 변형되는 반응형 레이아웃에 대하여 알아보겠습니다.

다양한 기술과 디바이스들이 나오면서 화면의 크기들도 천차만별로 늘어나고 있습니다. 레이아웃을 일반적인 모니터 해상도 크기에 맞춘다면 그보다 상대적으로 작은 태블릿이나 핸드폰으로 화면을 보기에는 불편함이 있을 수 있습니다.

화면해상도에 따라서 레이아웃을 변경해 줌으로써 편의성과 디자인을 확보할 수 있을 것입니다. 

목차

1. 반응형 웹

2. CSS

3. BODY

 

1. 반응형 웹

 

@반응형 레이아웃이란?

하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법입니다.

최근에는 모바일 사용자가 증가함에 따라 모바일 퍼스트 개념을 중요시하는 추세입니다.

웹 개발 시 모바일에 맞게 디자인 후 타 해상도에 맞추어 추가 개발을 진행하는 방식을 선호하고 있다고 합니다.

간단하게 레이아웃을 구성해 보고 코드를 해석해 보겠습니다.

 

-일반적인 전체 해상도에 대한 레이아웃 화면입니다. 

 

-1025px이상, 1280px이하일 때에 보이는 레이아웃 화면입니다.

태블릿에 적합하도록 구현해 보았습니다.

 

-768px이상, 1024px이하일 때에 보이는 레이아웃 화면입니다.

모바일에 적합하도록 구현해 보았습니다.

 

 

2. CSS

  <style>
    * {box-sizing: border-box;}
    h1,h2,ul,li,p,div {
        margin: 0px;
        padding: 0px;
    }
    li {list-style: none;}
    .clear::after {
        content: '';
        display: block;
        clear: both;
    }
    a {
        text-decoration: none;
        color: #333;
        line-height: 1.5;
    }
    body {
        background-color: #f1f1f1;
        font-size: 13px;
    }
    header {background-color: coral;}
    h1 {
        color: white;
        padding: 10px;
        font-size: 25px;
    }
    .lnb li {
        margin: 10px;
        padding: 10px;
        background-color: lightgreen;
    }
    .content {padding: 20px;}
    h2 {font-size: 20px;}
    .ext {
        margin: 10px;
        padding: 20px;
        background-color: lightgreen;
    }
    footer {
        padding: 10px; background-color: #aaa;
    }

    @media (min-width:768px) and (max-width:1024px) {
        .lnb {
            float: left;
            width: 25%;
        }
        .content {
            float: left;
            width: 75%;
        }
        .aside {
            clear: both;
        }
    }
    @media all and (min-width:1025px) {
        .wrap {
            max-width: 1280px;
        }
        .lnb {
            float: left;
            width: 20%;
        }
        .content {
            float: left;
            width: 50%;
        }
        .aside {
            float: right;
            width: 30%;
        }
    }
  </style>

 

@1025px이상, 1280px이하 적용 레이아웃

    @media all and (min-width:1025px) {
        .wrap {
            max-width: 1280px;
        }
        .lnb {
            float: left;
            width: 20%;
        }
        .content {
            float: left;
            width: 50%;
        }
        .aside {
            float: right;
            width: 30%;
        }
    }

-media 태그를 사용하여 최소 1025px(min-width:1025px)로 최솟값을 지정하여 주었고 최댓값은 1280px로 지정하여 1025~1280px의 범위를 갖게끔 설정하였습니다.

그 범위 안에 포함된다면 class lnb와 content를 가진 div box들은 float:left를 적용하여 좌측 정렬이 되도록 하고 class aside는 float:right를 적용하였습니다.

 

@768px이상, 1024px이하 적용 레이아웃

    @media (min-width:768px) and (max-width:1024px) {
        .lnb {
            float: left;
            width: 25%;
        }
        .content {
            float: left;
            width: 75%;
        }
        .aside {
            clear: both;
        }
    }

-media 태그를 사용하여 최솟값을 768px로, 최댓값은 1024px로 지정하여 768~1024px의 범위를 갖게끔 설정하였습니다. 그 범위 안에 포함된다면 class lnb와 content를 가진 div box들은 float:left를 적용하고 class aside는 float 설정을 해제, 비율을 조정해서 세로로 보이도록 수정하였습니다.

 

3. BODY

<body>
    <div class="wrap">
        <header>
            <h1>Musee d'Orsay</h1>
        </header>
        <div id="container" class="clear">
            <div class="lnb">
                <ul>
                    <li><a href="#">작가의 작품</a></li>
                    <li><a href="#">작가의 시대</a></li>
                    <li><a href="#">작가의 일생</a></li>
                </ul>
            </div>            
            <div class="content">
                <h2>PICTURES</h2>
                <p><a href="#">피리부는 소년</a> <br><a href="#">고흐의 방</a><br><a href="#">황색 그리스도가 있는 화가의 자화상</a><br><a href="#">오페라좌의 관현악단</a><br><a href="#">만종</a><br><a href="#">제비꽃 장식을 단 베르트모리조</a><br><a href="#">피리부는 소년</a> <br><a href="#">고흐의 방</a><br><a href="#">황색 그리스도가 있는 화가의 자화상</a><br><a href="#">오페라좌의 관현악단</a><br><a href="#">만종</a><br><a href="#">제비꽃 장식을 단 베르트모리조</a></p>                
            </div>
            <div class="aside">
                <ul class="ext">
                    <li><h2>Workshop Go</h2><a href="#">Life drawing workshop</a></li>
                    <li><h2>Summer Exhibition</h2><a href="#">A-level Summer Exibition Online 2010</a></li>
                    <li><h2>RA Collection</h2><a href="#">RA Collections</a></li>
                </ul>
            </div>
        </div>
        <footer>
            <p>&copy;2018 Les Amis du Musee d'Orsay. All rights reserved.</p>
        </footer>
    </div>
</body>
저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

CSS에 자주 사용되는 속성(2)  (0) 2023.03.07
CSS에 자주 사용되는 속성(1)  (0) 2023.03.03
비주얼스튜디오 코드(Visual Studio Code)의 로그인 폼 만들기  (0) 2023.02.27
비주얼스튜디오 코드(Visual Studio Code)의 그리드(Grid) 1  (0) 2023.02.25
비주얼스튜디오 코드(Visual Studio Code)의 TRANSFORM(변형)과 TRANSITION(변화)  (0) 2023.02.24

※form의 요소 중 사용빈도가 높고 중요도도 높은 <button>과 <input>에 대해 알아보겠습니다.

button 태그와 input 태그의 가장 큰 차이점은 button은 스스로 닫지 않는 태그이고 input은 스스로 닫는 태그라는 것입니다.

그래서 <button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만, <input> 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없습니다.

목차

1. BUTTON

2. INPUT

 

1. BUTTON

<button> 태그는 클릭이 가능한 버튼 요소입니다. submit, reset, button 3가지 type을 가질 수 있습니다.

<button>은 다양한 용도로 사용되고 브라우저마다 다른 type을 기본값으로 사용하게 될 수도 있기 때문에 HTML 문서를 보고 <button>이 어떤 역할을 하는 것인지 한눈에 알기 어렵기 때문에 type은 습관적으로 명시해 주는 것이 좋습니다.  

@<button type=" "> 속성

type="submit"  데이터를 제출하기 위한 버튼으로 지정한다. (기본값)
type="reset"  초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다.
기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
type="button"  버튼으로 지정한다. 클릭 이벤트 핸들러는 JavaScript로 직접 구현한다.

 

2. INPUT

@<input type=" "> 속성

type="submit"  <input>을 form handler에 데이터를 제출하기 위한 버튼으로 지정한다.
form handler는 보통 데이터를 처리하는 서버단 페이지로 지정된다.
버튼에 value 속성을 지정하면 <input>에 기본값(default value)로 표시된다.
type="reset"  <input>을 초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다.
기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
type="button"  <input>을 버튼으로 지정한다.
type="img" <input>을 이미지버튼으로 지정한다.
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
type="text" <input>을 한 줄 입력 가능한 텍스트필드로 지정한다. input의 기본 type이다.
size값을 지정하면 필드 너비가 자동조정된다. 기본 size값은 "20"이다.
type="search" <input>을 검색필드로 지정한다. 일반적인 텍스트필드처럼 동작한다.
type="password" <input>을 암호필드로 지정한다. 입력한 텍스트는 별표나 원으로 마스킹된다.
type="tel" <input>을 전화번호 필드로 지정한다.
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"과 함께 사용해서 형식을 지정할 수 있다.
type="email" <input>을 이메일을 포함해야하는 입력필드로 지정한다.
브라우저에 따라 제출 시 이메일 주소 유효성검사가 자동으로 이루어진다.
일부 스마트폰에서는 type="email"을 인식하고 키보드에 ".com"를 추가로 띄워준다.
type="url" <input>을 URL주소를 포함해야하는 입력필드로 지정한다.
type="number" <input>을 숫자 입력만 가능한 필드로 지정한다.
min, max값을 지정하면 자릿수에 따라 필드 너비가 자동조정된다. (그림은 min="-10000"일 때)
type="range" <input>을 슬라이드 컨트롤과 범위 내 숫자를 선택할 수 있는 컨트롤로 지정한다.
기본 범위는 0부터 100이고, min, max, step 속성을 추가로 지정할 수 있다.
type="radio" <input>을 라디오버튼으로 지정한다. 선택지 중 단 하나의 항목만 선택할 수 있다.
type="checkbox" <input>을 체크박스로 지정한다. 선택지 중 0개, 1개 또는 여러 개를 선택할 수 있다.
type="color" <input>을 색상팔레트로 지정한다. value="#ff0000"과 같이 헥사코드로 기본값을 지정할 수 있다.
type="time" <input>을 Time Picker로 지정한다. (no time zone)
type="date" <input>을 Date Picker로 지정한다.
min, max속성으로 날짜 범위를 지정하면 Date Picker 캘린더에 지정한 기간만 활성화된다.
type="datetime-local" <input>을 Date Picker & 시간입력 필드로 지정한다. (no time zone)
type="week" <input>을 Week Picker로 지정한다.
type="month" <input>을 연도와 달을 Picker로 지정한다.
type="file"  <input>을 '파일선택 버튼'과 '선택된 파일 표시'로 지정한다. 
type="hidden" <input>을 숨겨진 입력필드로 지정한다.
사용자가 보거나 수정할 수 없는 데이터를 포함하는 용도로 사용한다.
개발자 도구에서보거나 편집할 수 있으므로 보안의 형태로 사용해서는 안된다.
<input type="hidden" id="custId" name="custId" value="3487">

@<input form-*=" "> 속성

form <input>이 어느 <form>에 속하는지 지정한다. <input>의 form 속성과 <form>의 id 속성이 같아야 한다.
<form action="/action_page.php" id="form1">
<input type="text" id="lname" name="lname" form="form1">
formaction type="submit", type="image"와 함께 쓰이며, 데이터 제출 시 데이터를 어디로 보낼지 적는다.
<form>에서 지정한 action 속성보다 우선순위가 높다.
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
formenctype type="submit", type="image"와 함께 쓰이며, POST 메서드로 데이터를 서버에 제출할 경우 인코딩을 지정한다.
<form>에서 지정한 enctype 속성보다 우선순위가 높다.
<input type="submit" formenctype="multipart/form-data"   value="Submit as Multipart/form-data">
formmethod type="submit", type="image"와 함께 쓰이며, 데이터를 보낼 때 사용할 HTTP 메서드를 지정한다.
<form>에서 지정한 method 속성보다 우선순위가 높다.
<input type="submit" formmethod="post" value="Submit using POST">
formtarget type="submit", type="image"와 함께 쓰이며, form 제출 후 받은 응답을 어디에 표시할지 키워드를 적는다.
<form>에서 지정한 target 속성보다 우선순위가 높다.
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">

@그 외 <input>이 가질 수 있는 속성

name <input>의 이름을 지정한다. name 속성은 JavaScript에서 요소나 제출된 데이터를 참조해올 때 사용한다.
form을 제출할 때, name 속성이 있는 요소만 값이 전달된다.
value <input>의 기본값을 지정한다.
placeholder
 <input>에 입력해야할 형식 샘플이나 간단한 설명을 힌트로 제공한다.
pattern  <input>의 입력값을 확인할 정규식을 지정한다. 예시 pattern="[A-Za-z]{3}" 
required  <input>을 필수로 작성해야 한다고 지정한다.
max, min, step <input>의 최댓값, 최솟값, 숫자간격을 지정한다.
maxlength, minlength <input>의 최대, 최소 문자 수를 지정한다.
size <input>의 너비 (문자)를 지정합니다
readonly  <input>을 읽기전용으로 지정한다. form 제출 시 때 읽기전용 필드의 값도 전송된다.
읽기전용 필드는 수정은 되지 않지만, 그 외 사용자와 상호작용(드래그, 복사 등)은 할 수 있다.
disabled <input>을 비활성화되도록 지정한다.
accept <input type="file>에서 선택할 수 있는 파일확장자를 지정한다.
alt <input type="img">에서 이미지의 대체 텍스트를 지정한다.
src <input type="img">에서 사용할 이미지의 URL을 지정한다.
checked type="checkbox", type="radio"과 함께 쓰이며, <input>의 기본(선택)값을 지정한다.
autocomplete text, search, url, tel, email, password, datepickers, range, and color 타입과 함께 쓰이며, <input>에 자동완성기능 on/off 여부를 지정한다. on으로 지정할 경우 이전에 입력했던 값을 드랍다운으로 표시해준다.
autofocus <input>이 페이지가 로드될 때 자동으로 포커스를 가지도록 한다.
dirname <input>의 텍스트방향을 지정할 수 있다. dirname의 `속성.dir`은 name '속성'과 같아야 한다.
(한글처럼 왼쪽에서 오른쪽으로 읽을지, 아랍어처럼 오른쪽에서 왼쪽으로 읽을지의 방향을 말한다.) 
list <input>에서 <datalist>에서 정의한 옵션을 사용한다. <input>의 list 속성과 <datalist>의 id 속성이 같아야 한다.
height, width 입력 필드의 높이와 너비를 지정한다.
multiple type="file", type="email"과 함께 쓰이며, 입력필드에 복수의 값을 입력할 수 있도록 지정한다.
저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 FONT와 TEXT  (0) 2023.02.23
비주얼스튜디오 코드(Visual Studio Code)의 SELECTOR(선택자)  (0) 2023.02.22
비주얼스튜디오 코드(Visual Studio Code)의 FORM  (0) 2023.02.20
비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크  (0) 2023.02.19
비주얼스튜디오 코드(Visual Studio Code)의 LIST  (0) 2023.02.18

※하이퍼 링크란 다른 페이지나 사이트로 연결하는 링크(문자 또는 이미지)를 말합니다.

A태그를 사용하며 '<a href="사이트 또는 이동할 문서의 위치"> 링크에 사용될 문자 또는 이미지 </a>' 형식으로 사용합니다. 텍스트, 이미지, 버튼 등의 형태에 링크를 걸어 사용할 수 있습니다.

목차

1. A태그의 속성

2. A태그의 사용

3. A태그의 속성 값 변경

 

1. A 태그의 속성

@<a>

<a>는 'anchor', 즉, '닻'이라는 뜻입니다.

우리는 보통 인터넷 서핑, 웹서핑이라는 말을 많이 사용하는데 인터넷, 정보의 바다를 항해한다고도 표현합니다.

인터넷에서 정보의 바다를 항해하는 것은 대부분 링크를 클릭함으로써 이루어집니다.

그런 의미에서 html에서 링크를 표현하기 위해서 'anchor'의 약자인 <a> 태그를 사용합니다.

 

@href

링크를 클릭했을 때 이동할 페이지를 href 속성에 표현합니다.

href는 'Hypertext Reference'의 약자입니다.

 

@target

링크를 클릭했을 때 이동할 페이지를 띄울 위치를 지정해 줍니다.

 target의 속성은

 

_blank : 새 창이나 탭에 링크된 페이지를 보여준다.

_self : 현재 창에 링크된 페이지를 보여준다.

_parent : 부모 프레임에 링크된 페이지를 보여준다.

_top : 해당 프레임을 포함한, 최고 상단 페이지에 링크된 페이지를 보여준다.

페이지를 띄울 프레임 이름 : 사용자가 지정한 프레임에 링크된 창을 띄운다.

 

정리하면 아래와 같은 구조로 사용하게 됩니다.

'<a href="사이트 또는 이동할 문서의 위치" target="페이지를 띄울 위치"> 링크에 사용될 문자 또는 이미지 </a>'

 

2. A태그의 사용

@코드로 보기

<a href="https://www.naver.com/" target="_blank">네이버로 이동</a>

위와 같이 작성하게 되면 '네이버로 이동'이란 텍스트를 클릭하면 '_blank' 값에 의해 새창으로 네이버가 연결되게 됩니다.

 

<a href="https://www.naver.com/" target="_blank"><img src="이미지_경로"></a>
또는 이미지를 넣어주고 이미지를 클릭시 이동할 수 있도록 링크를 걸 수도 있습니다.

 

 

 

3. A태그의 속성 값 변경

하이퍼링크는 기본적으로 방문이 되지 않았을 때에는 파란색, 방문이 되었을 때는 자주색으로 표현되며 밑줄을 가지고 있습니다. 기능적으로 편리하기는 하나 보기에 좋지 않은 경우가 많은데 그러한 속성 값들을 변경하는 방법들을 알아보겠습니다.

 

@ text-decoration-line 속성 (하이퍼링크 밑줄 없애기)

text-decoration-line 속성은 선이 생성되는 위치를 변경하는 값입니다.

주로 하이퍼링크의 밑줄을 없애기 위해서  'text-decoration-line' 속성을 none으로 지정하여 사용합니다.

text-decoration-line 속성은 다음의 4가지 값을 가질 수 있습니다.

  • none : 선 없음
  • underline : 밑줄
  • overline : 윗줄
  • line-through : 취소선

밑줄과 윗줄, 취소선을 동시에 적용할 수도 있습니다.

 

@코드로 보기

   <style>     
        a {
            text-decoration-line: none;
        }
   </style> 

위와 같이 <style></style> 탭에 a태그에 대한 설정 값을 넣어 주거나

 

@코드로 보기

<a href="https://www.naver.com/" target="_blank" style="text-decoration-line: none;">네이버로 이동</a>

a태그 안에 직접 속성값을 넣어주시면 됩니다.

 

 

@ text-decoration-style 속성

text-decoration-style 속성은 선의 모양을 바꾸기 위하여 사용합니다.

text-decoration-style 속성은 다음의 5가지 값을 가질 수 있습니다.

사용방식은 text-decoration-line 속성의 방식과 같습니다.

  • 실선　text-decoration-style: solid;
  • 점선　text-decoration-style: dotted;
  • 굵은 점선 text-decoration-style: dashed;
  • 이중선　text-decoration-style: double;
  • 물결선　text-decoration-style: wavy;
저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 FORM_INPUT과 BUTTON  (0) 2023.02.21
비주얼스튜디오 코드(Visual Studio Code)의 FORM  (0) 2023.02.20
비주얼스튜디오 코드(Visual Studio Code)의 LIST  (0) 2023.02.18
비주얼스튜디오 코드(Visual Studio Code)의 TABLE  (0) 2023.02.17
비주얼스튜디오 코드(Visual Studio Code)의 기본코드  (0) 2023.02.16

※리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다.
HTML에서는 여러 요소들을 일렬로 나열한 목록이나 명단을 표현할 수 있는 태그를 제공하고 있습니다.

STYLE 속성을 이용하여 다양한 속성 부여도 가능합니다. CSS를 활용하여 다양한 연출이 가능하며 TABLE 태그와 같이 많이 사용되는 태그 중 하나입니다. CSS를 활용한 방법들은 다음 시간에 정리하도록 하고 기본적이 LIST태그에 대해서 알아보겠습니다.

목차

1. <ul></ul> 순서가 없는 목록

2. <ol></ol> 순서가 있는 목록

3. <dl></dl> 정의 목록

 

1. <ul></ul> 순서가 없는 목록

UNORDERED LIST의 약자로 HTML에서 순서가 없는 목록은 <ul> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 시작된다. 각각의 목록 요소 앞에는 기본적으로 글머리 기호인 검은색의 작은 원(bullet)이 표시된다. 

TYPE 값을 변경하여 목록 기호를 변경할 수 있다.

*list-style-type:none; 값으로 지정하면 기호를 표시하지 않을 수도 있다.

 

disc 검정색 작은 원 모양 (기본설정)
circle 흰색 작은 원 모양
square 사각형 모양
none 아무 모양도 없음.
   
@코드로 보기
 
    <ul style="list-style-type:circle">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>

 

@결과

 

2. <ol></ol> 순서가 있는 목록

ORDERED LIST의 약자로 순서가 있는 HTML 목록은 <ol> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 시작된다. 각각의 목록 요소 앞에는 기본 마커로 아라비아 숫자가 표시된다.

TYPE 값을 변경하여 목록 기호를 변경할 수 있다.

*list-style-type:none; 값으로 지정하면 기호를 표시하지 않을 수도 있다.

 

list-style-type 속성

  • decimal : 숫자 (기본설정)
  • upper-alpha or A : 영문 대문자
  • lower-alpha or a : 영문 소문자
  • upper-roman or I : 로마 숫자 대문자
  • lower-roman or i : 로마 숫자 소문자
   @코드로 보기
    <ol style="list-style-type:upper-alpha">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ol>

 

@결과

또는

@코드로 보기   

    <ol type="a">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ol>

 

@결과

3. <dl></dl> 정의 목록

 

DEFINITION LIST의 약자로 HTML은 설명 목록이라고 해서 정의 리스트를 지원하는데, 용어와 그에 대한 정의를 모아놓은 목록으로써 <dl> 태그로 표시한다. <dt> 태그에는 용어의 이름이 들어가고, <dd> 태그에는 해당 용어에 대한 정의가 들어간다.

<dd> 태그 영역은 자동으로 들여 쓰기가 적용된다.

   @코드로 보기
    <dl>
        <dt>제목</dt>
        <dd>내용1</dd>
        <dd>내용2</dd>
        <dd>내용3</dd>
    </dl>

 

@결과

 

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 FORM  (0) 2023.02.20
비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크  (0) 2023.02.19
비주얼스튜디오 코드(Visual Studio Code)의 TABLE  (0) 2023.02.17
비주얼스튜디오 코드(Visual Studio Code)의 기본코드  (0) 2023.02.16
비주얼스튜디오 코드(Visual Studio Code) 설정 및 단축키 모음  (0) 2023.02.15

+ Recent posts

티스토리툴바