반응형

​HTML 홈페이지 레이아웃을 제작해보려고 합니다!

일단 시작하기전에 div태그의 id를 궁금해 하시는 분들이 계시는데

id는 해줘도 안해줘도 상관은 없지만 실제로 html홈페이지를

제작할때는 많은 div를 이용하기 때문에 헷갈리지 않게끔 구분해서 사용해주시는 습관을 들여두시는게 좋습니다!!


 

 <html>
    <head>
       <title>
           레이아웃
       </title>
    </head>

    <body>

 

       <div id="wrap" style="width:800px;height:460px;border-width:2px;border-style:solid;border-color:black;clear:both;">


           <div id="Header" style="width:800px;height:60px;background-color:orange;">Header</div>
           <div id="menubar" style="width:800px;height:60px;background-color:green;clear:both;">Menubar</div>
           <div id="menu" style="width:150px;height:290px;clear:both;float:left;background-color:brown;">Menu</div>
           <div id="screen" style="width:650px;height:290px;float:left;background-color:white;">Screen</div>
           <div id="footer" style="width:800px;height:50px;clear:both;background-color:red;">footer</div>
       </div>


    </body>
</html>

 







 div태그를 이용해서 크게 한개의 영역(wrap)을 만들었고

그 wrap 영역안에 5개의 영역을 만들었습니다.

(Header, Menubar, Menu, Screen, Footer)

​

일단 Wrap영역을 한눈에 알아 볼 수 있게 border속성을 이용했고​

나머지 영역에 영향을 받지 않게끔 설정하는 clear:both; 속성도 사용했습니다.

(clear:both;=플롯의 초기화)​

​그리고 wrap의 영역안에 차례대로 5개의 영역을 만들었습니다.


이렇게 몇 번 홈페이지 레이아웃을 잡아보시면 나중에 어렵지 않게 하실 수 있습니다!!




내용이 도움이 되셨으면 공감 한 번 눌러주시길 부탁드립니다!!!

반응형

'Programming > Web' 카테고리의 다른 글

[자바스크립트]함수 정의 방식  (0) 2018.04.27
[Jquery/javascript] 셀렉트 박스 selected 변경  (0) 2018.02.08
[HTML] 게시판 만들기(기본틀)  (0) 2018.02.06
Input text 박스 에서 Input Text 박스로 value 옮기기  (0) 2018.01.15
Missing artifact com.oracle:ojdbc 에러 해결  (0) 2017.12.14
반응형

문자열

명령어

의미

w, W, b, B

단어 앞으로, 단어 뒤로

e, E

단어 끝으로

), (

다음 문장의 시작, 이전 문장의 시작

}, {

다음 문단의 시작, 이전 문단의 시작

] ], [ [

다음 절의 시작, 이전 절의 시작

행

명령어

의미

0, $

현재 행에서 첫 번째 위치,현재 행에서 마지막 위치

^

현재 행에서 공백이 아닌

첫 번째 문자

+, -

다음 행에서 공백이 아닌

첫 번째 문자, 이전 행에서 공백이 아닌 첫 번째 문자

n |

현재 행에서 n번째 열

H

화면 맨 위 행

M

화면 중간 행

L

화면 맨 마지막 행

nH

화면 맨 위에서부터 n번째 행

nL

화면 맨 끝에서부터 n번째 행


반응형

'Programming > LINUX&UNIX' 카테고리의 다른 글

[UNIX]프로세스 관리 명령어(nohup명령어)  (0) 2016.01.26
[UNIX]프로세스 관리 명령어(kill명령어)  (0) 2016.01.24
[UNIX]프로세스 관리 명령어(ps명령어)  (0) 2016.01.24
[UNIX]vi명령어(이동명령어-2)  (0) 2016.01.22
[UNIX]vi명령어(명령행 옵션)  (0) 2016.01.17
반응형

명령어

동작

vi file

file을 연다.

vi file1 file2

file1과 file2를 차례로 연다.

view file

file을 읽기 모드로 연다.

vi -R file

file을 읽기 모드로 연다.

vi -r file

file을 복구하고 잘못된 동작

이후부터 file을 편집한다.

vi -t tag

태그를 검사하고 정의된 위치에서

편집을 시작한다.

vi + file

file을 열 때 커서가 본문의 마지막 행에 위치한다.

vi +n file

file을 열 때 커서가 n행에 위치한다.

vi -c command file

file을 열 때 검색 명령어나 행 번호에 관련된 일반적인 명령을 실행한다(POSIX).

vi +/pattern file

pattern 위치에서 file을 연다.


반응형

'Programming > LINUX&UNIX' 카테고리의 다른 글

[UNIX]프로세스 관리 명령어(nohup명령어)  (0) 2016.01.26
[UNIX]프로세스 관리 명령어(kill명령어)  (0) 2016.01.24
[UNIX]프로세스 관리 명령어(ps명령어)  (0) 2016.01.24
[UNIX]vi명령어(이동명령어-2)  (0) 2016.01.22
[UNIX]vi명령어(이동명령어)  (0) 2016.01.17
반응형

쉬운 이해를 위하여 주석을 추가 하였습니다!!



반응형

'Programming > C' 카테고리의 다른 글

[C언어]소수 구하기  (0) 2016.01.17
반응형




반응형

'Programming > C' 카테고리의 다른 글

[C언어]소인수 분해하기  (0) 2016.01.17

+ Recent posts

티스토리툴바