'Front-End/HTML' 카테고리의 글 목록

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right

Front-End/HTML 2019. 10. 1. 17:50

1. 영역 2개 만들기

[태그 모양]

[적용후 모습]

첫번째 영역: 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 여기에 그림이나 글자 또는 광고 등을 넣음

2. 두번째 영역을 첫번째 영역 옆에 올려 나란히 붙이기

위의 태그에 "float:left 또는 right;"를 추가한다.

[태그 모양]

<div style="width:200px; height:150px; border:1px solid red; float:left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float:left;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두 영역사이를 띄우려면, margin(바깥 여백)을 준다.
첫번째 영역의 오른쪽에 여백을 주어도 되고, 두번째 영역의 왼쪽에 여백을 주어도 된다. 여기서는 첫번째 영역의 오른쪽에 여백을 준다.

[태그 모양]

<div style="width:200px; height:150px; border:1px solid red; float:left; margin-right:10px;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
오른쪽에 바깥여백을 줌 => margin-right:10px;
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float:left;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 오른쪽에 바깥여백을 줌 => margin-right:10px; 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

3.두 영역을 나란히 놓되, 첫번째 영역은 왼쪽에 붙이고, 두번째 영역은 오른쪽으로 붙이기

[태그 모양]

<div style="width:200px; height:150px; border:1px solid red; float: left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:right 여기에 그림이나 글자 또는 광고 등을 넣음

※ 영역 아래의 글이 따라 올라가는 것 막기
위와 같이 영역을 설정하고 나면, 그 아래에 있는 글이나 그림이 영역 옆으로 딸려 올라가게 된다. 이것을 막는 방법은 몇 가지가 있는데, 그 가운데 가장 편한 방법은 두번째 영역을 지정한 </div>에 바로 붙여서 <div style="clear:both:"></div>를 추가하는 것이다.

[태그 모양]

<div style="width:200px; height:150px; border:1px solid red; float: left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div><div style="clear:both:"></div>

※ 너비주기
실제로는 영역의 높이(height) 그리고 테두리(border:~)를 설정할 필요가 없는 경우가 많다. 그림이나 글씨 등을 넣게 되면, 높이는 그에 따라 자동으로 맞추어 지기 때문이다.

너비(width)는 두개의 영역이 나란히 놓여야 하므로 지정을 해주어야 한다.
전체 너비는 100%이므로, 왼쪽 오른쪽의 너비를 알맞은 비율(%)로 주어도 되고
예) width: 30%

비율이 아닌 고정너비(px)단위로 지정을 해주어도 된다.
예) 250px

[태그 모양: 왼쪽 영역의 너비는 30%를 주고, 오른쪽 영역의 너비는 65%를 줌, 두 영역 사이는 자동으로 5%(=100% - 30% - 65%)가 됨 ]

<div style="width: 30%; height:150px; border:1px solid red; float: left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width: 65%; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:right 여기에 그림이나 글자 또는 광고 등을 넣음

출처

https://ojji.wayful.com/2013/12/HTML-set-Two-Parallel-DIVs-columns.html

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시 (새창열림)

'Front-End > HTML' 카테고리의 다른 글

HTML5 버전 이상 가운데 정렬 사용하기 (0)	2019.04.29
HTML 문법정리 (0)	2019.04.28
HTML 테이블 짜보기 (0)	2019.04.22
HTML 실습 주소 (0)	2019.04.22

:

HTML5 버전 이상 가운데 정렬 사용하기

Front-End/HTML 2019. 4. 29. 13:39

HTML5버전 이상부터는 <center>명령어를 사용하게 되면 제한적으로밖에 사용할 수가 없기 때문에 다음과 같은 style명령어로

대체하도록 한다.

<div style="text-align:center;">

가운데 정렬할 문자

</div>

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시 (새창열림)

'Front-End > HTML' 카테고리의 다른 글

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right (4)	2019.10.01
HTML 문법정리 (0)	2019.04.28
HTML 테이블 짜보기 (0)	2019.04.22
HTML 실습 주소 (0)	2019.04.22

:

HTML 문법정리

Front-End/HTML 2019. 4. 28. 17:46

문 법	설 명
<title>~</title>	탭 이름을 정할수 있음
<br>	줄 바꿈
<h숫자>~</h같은숫자>	글씨 크기 지정 (1이 제일크고 숫자가 커질수록 글씨 크기 작아짐)
<p>	한줄 건너뛰고 줄 바꿈
<center>~</center>	가운데 정렬시킴
<ul>~</ul>	목록 지정 (번호가 없는 목록)
<li>~</li>	목록안에 객체 지정
<ol>~</ol>	목록 지정 (번호가 있는 목록)
<dl>~</dl>	목록 정의
<dt>~</dt>	<dl>~</dl>안에 쓸 객체 지정
<dd>~</dd>	<dt>~</dt>안에 있는 객체에 대한 설명
<img src="g:/img/coffee_a.jpg" width=250 height=250>	경로에있는 이미지를 삽입하고 크기 지정
<a href="g:/htmltest/menu.html" target="_blank">	다른 파일과 연결하는 하이퍼 링크 태그 삽입 (blank는 새로운 브라우저로 생성)
<a href="g:/htmltest/menu.html" target="_self">	다른 파일과 연결하는 하이퍼 링크 태그 삽입 (self는 기존에 있던 브라우저에서 이동함)
<audio src="g:/owlcity.mp3" controls>	경로에 있는 음악 삽입
<align="center">, <align="left">, ............	정렬 시킨다 (중앙, 왼쪽, 오른쪽 등등..)
<method="post">	페이지에서 자신이 작성한 값을 암호화한다.
<method="get">	페이지에서 자신이 작성한 값을 URL에 표기해준다.
<charset=....>	Http client(웹 브라우저)가 받아볼 페이지의 인코딩 방식
<PageEncoding=....>	JSP 파일(페이지)에 기록된 코드 자체의 인코딩 방식
<!DOCTYPE html...>	웹 문서가 어떤 버전의 HTML언어로 작성되었는지 결정하는 기능
<DTD...>	웹 문서의 버전을 웹 브라우저에 전달
<meta ....>	키워드 검색엔진에 특정 홈페이지 또는 HTML문서에 대한 색인정보. 즉, 키워드와 약간의 정리된 내용(콘텐츠)을 표현하는 HTML Tag이다.
<colspan="숫자">	숫자 만큼의 칸을 합친다.(가로로) 세로로 정보를 읽고 싶을때 사용
<input type = "submit" value = " 전송">	태그내에 입력된 데이터를 서버로 전달하는 기능을 가짐.

동영상

https://youtu.be/EtLbvFbvI3A

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시 (새창열림)

'Front-End > HTML' 카테고리의 다른 글

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right (4)	2019.10.01
HTML5 버전 이상 가운데 정렬 사용하기 (0)	2019.04.29
HTML 테이블 짜보기 (0)	2019.04.22
HTML 실습 주소 (0)	2019.04.22

:

HTML 테이블 짜보기

Front-End/HTML 2019. 4. 22. 23:50

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
 
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
 
tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<h1>나의 정보 테이블<h1>  
 
<table style="width:80%">
<tr>
<th>이름</th>
<th>나이</th>
<th>사는지역</th>
</tr>
 
<tr>
<th>이한섭</th>
<th>28살</th>
<th>인천</th>
</tr>
 
</table>
 
</body>
</html>
 
 
Colored by Color Scripter

cs

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시 (새창열림)

'Front-End > HTML' 카테고리의 다른 글

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right (4)	2019.10.01
HTML5 버전 이상 가운데 정렬 사용하기 (0)	2019.04.29
HTML 문법정리 (0)	2019.04.28
HTML 실습 주소 (0)	2019.04.22

:

HTML 실습 주소

Front-End/HTML 2019. 4. 22. 23:38

HTML 실습 주소

https://www.w3schools.com/html/default.asp

HTML Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시 (새창열림)

'Front-End > HTML' 카테고리의 다른 글

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right (4)	2019.10.01
HTML5 버전 이상 가운데 정렬 사용하기 (0)	2019.04.29
HTML 문법정리 (0)	2019.04.28
HTML 테이블 짜보기 (0)	2019.04.22

:

초보 개발자의 프로그래밍 공부방

'Front-End/HTML'에 해당되는 글 5건

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right

'Front-End > HTML' 카테고리의 다른 글

HTML5 버전 이상 가운데 정렬 사용하기

'Front-End > HTML' 카테고리의 다른 글

HTML 문법정리

'Front-End > HTML' 카테고리의 다른 글

HTML 테이블 짜보기

'Front-End > HTML' 카테고리의 다른 글

HTML 실습 주소

'Front-End > HTML' 카테고리의 다른 글

티스토리툴바