HTML Responsive Web

오늘은 HTML Responsive Web (반응형 웹) 에 대해서 알아보도록 하겠습니다.

반응형 웹 은 HTML 과 CSS 를 사용하여 웹사이트의 크기를 자동으로 조정하여 모든 장치 ( PC, Mobile ) 에서 잘 보이도록 해 주는 것을 말합니다.

반응형 웹을 잠시 살펴 보도록 하겠습니다.

먼저 실습 영상을 확인해봅시다.


 현재 영상에서 큰 차이는 없어보이지만 제목과 이미지 사이의 여백 부분이 보이시나요..?


잘 안 보이시면 눈 크게 뜨고 다시 한번 보시죠..? 


현재 예제를 보고 큰 차이점을 느끼지 못하시겠지만...


이미지가 많고 내용이 많은 웹 페이지에서는 많은 다른점들을 보여줍니다.


그럼 코드를 살펴 볼까요..?


<meta name="viewport" content="width=device-width, initial-scale=1.0">


메타 태그를 head 태그 안에 추가 해주면 반응형 웹이 적용 됩니다.


소스코드를 자세히 알아보겠습니다.


이름을 viewport 라고 지정해 줍니다. 컨텐츠의 너비 속성을 장치의 너비 로 줍니다. 


초기에 보여지는 크기 값을 디폴트로 1:1 비율로 줍니다. 


여기 속성을 0.6 이렇게 주면 축소가 되고 1.4 이렇게 주면 확대가 됩니다. 


다른 값으로도 적용해 보시고 차이점을 확인해 보세요..


그리고 영상에서 보이는 예제속에서 이미지 너비를 보시면 아시겠지만. 너비 값을 % 로 주었습니다. 


너비 값이 % 이어야 반응형 웹에서 유동적으로 변화가 되겠죠


너비 값을 px 단위로 주게 되면 반응형 웹으로 표현하기 어려울 수 있습니다. 


이점 참고 바랍니다.


그럼 오늘은 여기까지 하도록 하겠습니다. 









'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML #13 - iframe  (0) 2018.10.15
따라하며 배우는 HTML #12 - DIV 와 SPAN  (0) 2018.10.12
따라하며 배우는 HTML - #11 ( id 와 class )  (0) 2018.10.11
따라하며 배우는 HTML - #10 ( Table - border collapse )  (0) 2018.10.09
따라하며 배우는 HTML - #9 ( TABLE )  (0) 2018.10.09

HTML iframe

안녕하세요 오늘은 iframe 에 대해서 알아보는 시간을 갖도록 하겠습니다.


iframe 은 웹 페이지 내에 다른 웹페이지를 표시할 수 있도록 해줍니다.


먼저 실습 영상으로 확인해보겠습니다.



어때요 다른 사이트의 웹페이지를 불러와서 내 화면에 표현해주니 놀랍지 않나요..?


다른 사이트의 웹페이지 외에도 내가 만들고 있는 다른 페이지 를 불러올 수도 있습니다.


<iframe src="불러올 사이트의 페이지 주소" style="border:0; width:100%; height:200px;">


iframe 에 대한 속성은 src 로 불러올 주소 값을 적어주고 style 속성으로 너비값과 높이값을 조정해 줍니다. 


그리고 테두리 선을 보이지 않도록 border 값을 0 으로 줍니다.


어때요..? 참 쉽죠.?


다음 시간에는 반응형 웹 에 대해서 알아보는 시간을 가져보도록 하겠습니다.


그럼 다음 시간에 봐요. ^^


'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML #14 - Responsive Web  (0) 2018.10.15
따라하며 배우는 HTML #12 - DIV 와 SPAN  (0) 2018.10.12
따라하며 배우는 HTML - #11 ( id 와 class )  (0) 2018.10.11
따라하며 배우는 HTML - #10 ( Table - border collapse )  (0) 2018.10.09
따라하며 배우는 HTML - #9 ( TABLE )  (0) 2018.10.09

HTML DIV 와 SPAN

안녕하세요 ~ 이번에는 div 태그와 span 태그에 대해서 알아보도록 하겠습니다.


블록 수준 요소와 인라인 요소 에 대한 부분도 함께 알아보도록 하겠습니다.


div 와 span 태그에 대해 알아보기에 앞서 블록 수준 요소와 인라인 요소에 대해서 먼저 알아보죠 


블록 수준 요소는 새 줄에서 시작해서 전체너비를 사용합니다.
블록 수준 요소 태그는 여러가지가 있지만 대표적인 것으로 div 태그가 있습니다.
더 많은 것을 알아보시려면 검색엔진에서 Block level elements in HTML 라고 검색해 보시면 됩니다. 

인라인 요소는 필요한 만큼의 너비를 사용합니다.
인라인요소의 태그도 마찬가지로 여러가지가 있지만 대표적인 것으로 span 태그가 있습니다.
더 많은 것을 알아보시려면 검색엔진에서 Inline elements in HTML 라고 검색해 보시면 됩니다.
 
이제 DIV 와 SPAN 에 대해서 실습영상을 보겠습니다.


( 영상에 사운드 없이 플레이 되니 양해 바랍니다.)


영상을 보시니 이해하기 더 쉬우시죠..^^

<div style="border:1px solid red">
            div
        </div>
        
        <br>
        
        <span style="border:1px solid blue">
            span
        </span>
        
        <br><br>
        
        <div style="border:1px solid green; display: inline">
            inline
        </div>

위에 소스 코드를 타이핑 하시면 아래와 같이 실행 결과가 나타납니다.


참 쉽죠 ~ ? 

border 값에 보이는 것처럼 블록 수준 요소는 새 줄에서 시작해서 전체너비를 사용합니다.

인라인 요소는 필요한 너비만큼만 사용합니다.


영상에서 보신 것처럼 div 는 디폴트값으로 블록 수준 요소 의 속성값을 갖고 있지만,  

style 속성에서 display 값을 변경하여 인라인 요소 속성을 갖도록 변경할 수도 있습니다.



오늘 배운 내용이 어려우시더라도 여러번 복습하고 잘 이해하면 추후에 CSS 를 배울 때 쉽게 느껴지실 겁니다. 

감사합니다. 오늘은 여기까지 하고 다음 시간에 뵈요 ^^



 

'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML #14 - Responsive Web  (0) 2018.10.15
따라하며 배우는 HTML #13 - iframe  (0) 2018.10.15
따라하며 배우는 HTML - #11 ( id 와 class )  (0) 2018.10.11
따라하며 배우는 HTML - #10 ( Table - border collapse )  (0) 2018.10.09
따라하며 배우는 HTML - #9 ( TABLE )  (0) 2018.10.09

HTML id 와 class 

안녕하세요 오늘은 아이디와 클래스에 대해서 같이 한번 알아봅시다.


실습 영상 먼저 보고 올까요..^^


 



어때요..? 영상만 플레이 시켜봐도 내용을 알 수 있으시겠죠..? 그래도 같이 한번 내용을 알아보도록 해요.


id 속성은 HTML 요소에 대해 하나의 고유한 id 이름을 지정하고 CSS 및 Javascript 에서 특정 작업을 수행하기 위해 사용합니다. (#)문자 뒤에 아이디 이름을 쓰면 됩니다.

        

class 속성은 HTML 요소에 대해 하나 이상의 클래스 이름을 지정하고 CSS 및 Javascript 에서 특정 작업을 수행하기 위해 사용합니다. (.)문자 뒤에 클래스 이름을 쓰면 됩니다.



<p id="idName">id 속성에 idName 이라는 이름을 가진 p 태그 입니다.</p>

        

<p class="className">class 속성에 className 이라는 이름을 가진 p 태그 입니다.</p>

        

<p class="className">class는 여러 번 반복해서 수 있지만 id는 문서내에서 한번 만 사용할 수 있습니다.</p>


HTML <body> 태그 안에 위와 같이 소스 코드 내용을 적어줍니다.


idName 이라고 적어준 부분은 여러분이 아이디에 대해 특정한 이름을 지정해 주시면 됩니다. 


마찬가지로 className 이라고 적어준 부분도 여러분이 지정해 주고 싶은 이름을 적어주시면 됩니다.


<head> 태그 안에는 아래와 같이 스타일 소스 코드를 넣어줍니다.


<style>

#idName { color: red }

.className { color: blue }

</style>


id 이름을 적어주신 부분 앞에 # 기호를 붙여서 적어주면 스타일이 적용 됩니다. 폰트 컬러 색상을 red 로 주었습니다.


class 이름을 적어주신 부분 앞에는 . 기호를 붙여서 적어주면 스타일이 적용 됩니다. 클래스 에는 폰트 컬러 색상을 blue 로 주었습니다.


스타일에대해서 배웠던 것 기억나시죠..? 잘 모르시겠으면 이전 내용을 참고해 주세요 ~


2018/10/07 - [Program/HTML] - 따라하며 배우는 HTML - #6 ( HTML Style)

2018/10/08 - [Program/HTML] - 따라하며 배우는 HTML - #7 ( Internal CSS )

2018/10/08 - [Program/HTML] - 따라하며 배우는 HTML - #8 ( External CSS )


id 와 class 에 대한 부분 어느정도 이해가 되셨나요..?


다음 시간에는 div 와 span 에 대해서 알아보는 시간을 갖도록 하겠습니다.



'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML #13 - iframe  (0) 2018.10.15
따라하며 배우는 HTML #12 - DIV 와 SPAN  (0) 2018.10.12
따라하며 배우는 HTML - #10 ( Table - border collapse )  (0) 2018.10.09
따라하며 배우는 HTML - #9 ( TABLE )  (0) 2018.10.09
따라하며 배우는 HTML - #8 ( External CSS )  (0) 2018.10.08

TABLE ( Border-Collapse )

이번 시간에는 테이블의 테두리를 하나로 축소시키는 방법과 더불어 테이블 태그의 한 예인 게시판 형태로 만들어 보는 것에 대해서 알아보도록 하겠습니다 

먼저 영상으로 한번 확인 해 보시죠 ^^


테이블의 테두리를 하나로 축소시키는 방법은 스타일 속성을 이용하면 됩니다. 


table { border-collapse: collapse }


테두리가 2줄로 되어진것보다 훨씬 깔끔해 보이죠..

사람마다 바라보는 시각이 다르겠지만...그냥 그렇다고 해주세요..^^


테이블 태그에 제목 넣는 곳을 td 대신 th 로 변경 했습니다.  

th 로 변경을 하면 텍스트의 굵기가 두꺼워 집니다. 

테이블의 열 부분에서 제목으로서 역할을 하게 됩니다 .


테이블을 이용하여 공지사항 게시판 형태의 페이지를 만들어봅시다. 

아래와 같이 소스코드를 타이핑 하게 되면 게시판 형태가 만들어집니다. 


        <table>

              <tr>

                    <th>번호</th>

                    <th>제목</th>

              </tr>

              <tr>

                    <td>1</td>

                    <td>공지사항입니다.</td>

              </tr>

              <tr>

                    <td>2</td>

                    <td>두번째 공지사항입니다.</td>

              </tr>

              <tr>

                    <td>3</td>

                    <td>세번째 공지사항입니다.</td>

              </tr>

        </table>


테이블 태그에 집중하기 위해서 다른 소스코드를 넣지 않았지만

이전 시간에 배웠던 스타일 속성을 넣게 되면 더 멋진 게시판 형태의 공지사항 리스트를 만들어 낼 수 있습니다 .

그건 여러분의 몫으로 남겨 두겠습니다. 한번 꼭 해 보시길 권해 드립니다.


그럼 다음시간에 또 뵈요 ^0^


'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML #12 - DIV 와 SPAN  (0) 2018.10.12
따라하며 배우는 HTML - #11 ( id 와 class )  (0) 2018.10.11
따라하며 배우는 HTML - #9 ( TABLE )  (0) 2018.10.09
따라하며 배우는 HTML - #8 ( External CSS )  (0) 2018.10.08
따라하며 배우는 HTML - #7 ( Internal CSS )  (0) 2018.10.08

HTML TABLE


테이블 태그에 대해서 알아보도록 하겠습니다.


테이블 태그를 활용하면 다양한 페이지를 만들 수 있기 때문에 활용할 수 있는 범위가 넓어집니다. 


영상을 보면서 한번 살펴 보도록 하겠습니다.



테이블 소스를 살펴보면 <table>태그로 앞 뒤를 감싸줍니다. 

table 태그 안쪽에 tr 태그로 행에 대한 설정을 해 줍니다. 

tr 태그 안쪽에는 td 태그로 열에 대한 설정을 해 줍니다.  


<table>

<tr>

<td>1번</td>

<td>2번</td>

</tr>

<tr>

<td>1번</td>

<td>2번</td>

</tr>

</table>


지금 살펴본 테이블을 보면 2행 2열 짜리 테이블 이라는 걸 알 수 있습니다. 


테이블을 활용해서 만들 수 있는 것을 다음 시간에 해 보도록 하겠습니다. 

'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML - #11 ( id 와 class )  (0) 2018.10.11
따라하며 배우는 HTML - #10 ( Table - border collapse )  (0) 2018.10.09
따라하며 배우는 HTML - #8 ( External CSS )  (0) 2018.10.08
따라하며 배우는 HTML - #7 ( Internal CSS )  (0) 2018.10.08
따라하며 배우는 HTML - #6 ( HTML Style)  (0) 2018.10.07

HTML 문서에서 외부 스타일 사용하기

안녕하세요 이번시간에는 HTML 문서에서 외부 스타일 사용하는 방법에 대해서 알아보도록 하겠습니다.

외부 파일로 스타일을 만들어서 불러오는 경우는 여러 문서에 가져다 쓸 수 있기 때문에 확장성에 용이합니다.


실습 영상을 먼저 보도록 하겠습니다. 




일단 html 문서와 같은 폴더내에 style.css 파일을 만들어 둡니다. 같은 폴더가 아니더라도 href 속성값에 경로를 잘 지정해 줄 수 있다면 다른 경로에 파일을 만드셔도 됩니다. 

파일을 만들고 나서 <head> ... </head> 사이에 아래와 같이 소스 코드를 삽입합니다. 그리고  style.css 에서 태그에 대한 속성들을 지정해 주면 됩니다. 

css 에서의 주석은 /* ~ */ ( 슬래시 별표  ~ 별표 슬래시 ) 입니다. 

 


<link rel="stylesheet" href="style.css">


소스 코드를 삽입하고 나면 문서 파일과 스타일 파일이 연결이 됩니다. 

스타일 파일에서 태그에 대한 속성과 값을 지정해 주면 문서내의 글자 폰트, 색상, 배경색등...디자인이 변경됩니다.


/* css 에서의 주석입니다. */

body { background-color: powderblue }

h1 { color:blue }

p {color:red}


스타일 태그에 대해서 3회에 걸쳐 알아보았습니다. 

다음 시간은 테이블 태그에 대해서 알아보도록 하겠습니다. 






'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML - #10 ( Table - border collapse )  (0) 2018.10.09
따라하며 배우는 HTML - #9 ( TABLE )  (0) 2018.10.09
따라하며 배우는 HTML - #7 ( Internal CSS )  (0) 2018.10.08
따라하며 배우는 HTML - #6 ( HTML Style)  (0) 2018.10.07
따라하며 배우는 HTML - #5 ( a 태그 )  (0) 2018.10.06

HTML Style - Internal CSS

안녕하세요 오늘은 저번시간에 이어 스타일에 대해서 조금 더 알아보도록 하겠습니다. 
Style 은 태그 안에서 사용되는 Inline CSS와 문서의 head 부분에서 <style></style>사이에 정의 되는 Internal CSS 그리고 외부 문서에 별도로 저장되어지는 External CSS 로 구분되어 집니다. 이중에서 오늘은 저번시간에 배운 Inline CSS 를 복습하고 Internal CSS 를 배워보는 시간을 갖겠습니다.

먼저 실습영상을 보도록 하겠습니다.


이전 시간 내용을 복습해보는 시간을 가져봅니다.

리스트 태그 내에서 style 속성을 사용하여 글자의 색상을 변경해 보았습니다.

이전 시간의 내용을 확인해보시려면 

2018/10/07 - [Program/HTML] - 따라하며 배우는 HTML - #6 ( HTML Style)

을 참고하시면 됩니다.  


문서의 head 부분에서 아래와 같이 소스코드를 삽입하면


        <style>

            body { background-color: powderblue }

            h1 { color: red }

            p { background-color: green; color: white}

        </style>


문서의 내용이 변경되어지는 걸 보실 수 있습니다. 



소스를 분석해볼까요..? <style> ... <style> 은 문서의 스타일입니다.

body 는 문서내에 있는 body태그 입니다. background-color (배경색) 을 powderblue (파우더블루) 로 줍니다.

h1 태그는 글자의 색상을 빨강으로 p 태그는 배경색을 녹색으로 글자는 흰색으로 지정해 줍니다  



<style>

태그 { 속성(property) : 속성값(value) }

</style>


Internal CSS 사용하는 방법 이제 아시겠죠 ^^


눈으로만 보는 것보다 한번씩 작성해 보시면 더 이해하기 쉽습니다. 오늘도 즐거운 코딩 시간 되세요 ~









'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML - #9 ( TABLE )  (0) 2018.10.09
따라하며 배우는 HTML - #8 ( External CSS )  (0) 2018.10.08
따라하며 배우는 HTML - #6 ( HTML Style)  (0) 2018.10.07
따라하며 배우는 HTML - #5 ( a 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #4 ( ul 태그 / ol 태그 )  (0) 2018.10.06

HTML Style Attribute

안녕하세요 ~ 오늘은 화면을 꾸며보는 시간을 갖도록 하겠습니다.
글자에 색상을 입히고 가운데정렬, 오른쪽 정렬 그리고 배경색을 입혀보도록 하겠습니다.

먼저 실습 영상을 보고 학습을 진행하도록 하겠습니다.



자 이제 ~ 스타일 속성에 대해서 알아보도록 하겠습니다.


<h1 style="color:blue;">HTML STYLE</h1>

        

        <p style="color:red">이번 시간에는 HTML STYLE 에 대해서 알아보겠습니다.</p>

        

        <p style="text-align: center; color:blueviolet">텍스트 정렬 가운데</p>

        

        <p style="text-align: right; background-color: aqua">텍스트 정렬 오른쪽</p>


스타일 은 태그에 css 프로퍼티와 css 값을 입력해 주는 형태로 이루어집니다.

예를 들면 h1 태그에 style 을 주어 css 속성인 color 에 blue 라는 값을 주는 형태로 사용합니다.



위의 소스코드 실행 결과 화면은 아래와 같습니다.

스타일 속성에 대해서 잠시 알아보면  color 는 글자에 대한 색상 값이며,

text-align 은 글자에 대한 정렬을 할 수 있는 값입니다 - left, center, right 값을 넣을 수 있습니다.


스타일 에 대한 부분은 속성 값이 많아 다룰 부분이 워낙 많기 때문에 이후 배울 내용 중간 중간 계속 소개하는 방법으로 진행하도록 하겠습니다.


그럼 다음에 뵙겠습니다. ^^ 















'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML - #8 ( External CSS )  (0) 2018.10.08
따라하며 배우는 HTML - #7 ( Internal CSS )  (0) 2018.10.08
따라하며 배우는 HTML - #5 ( a 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #4 ( ul 태그 / ol 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #3 ( 줄바꿈 / 엔티티코드 )  (0) 2018.10.06

HTML 링크 a 태그 및 속성

안녕하세요 오늘은 오전부터 비가 조금씩 내리네요 ~

그래도 힘내서 HTML 배워볼까요...이번에는 HTML 의 꽃이라고 할 수 있는 웹 페이지 이동 태그를 배워봅시다.


먼저 실습 영상 보시겠습니다. 영상의 사운드는 무음 처리 되어 있으니 양해 바랍니다. 




일단 기본 템플릿을 가져와서 body 태그 안에 아래의 소스를 넣어봅니다.



        <ol>

            <li>nels's IT blog</li>

            <li><a href="https://nels.tistory.com">nels's IT blog</a></li>

        </ol>

        첫번째와 두번째의 차이점 아시겠죠..^^?? 링크를 클릭하시면 해당 페이지로 이동합니다.



그럼 아래와 같은 화면이 나오게 됩니다.


1. nels's IT blog

2. nels's IT blog


리스트 태그는 지난번 시간에 배우셔서 알고 계실 거라 생각되어집니다. 모르시는 분은  2018/10/04 - [Program/HTML] - 따라하며 배우는 HTML - 4  참고하시기 바랍니다.

1번 리스트는 링크가 걸려있지 않고 2번 리스트는 링크가 걸려 있습니다. 


a 태그는 이렇게 웹페이지를 이동시킬 수 있는 태그 입니다. 하지만 이 태그는 항상 속성과 같이 사용하게 되어 있습니다. 

href 속성은 링크의 대상주소를 지정합니다. ( https://nels.tistory.com/ )


링크를 지정해줄 글자 앞 과 뒤에 a 태그를 넣어 주고 시작 태그 부분에 href 속성을 지정해 주면 됩니다. 

a 태그에는 target 속성도 있는데 이것은 검색엔진을 통해 한번씩 찾아보시면 많은 도움이 되실 겁니다.


'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML - #7 ( Internal CSS )  (0) 2018.10.08
따라하며 배우는 HTML - #6 ( HTML Style)  (0) 2018.10.07
따라하며 배우는 HTML - #4 ( ul 태그 / ol 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #3 ( 줄바꿈 / 엔티티코드 )  (0) 2018.10.06
따라하며 배우는 HTML - #2 ( 이미지 넣기 )  (0) 2018.10.06

+ Recent posts

티스토리툴바