27. (html/css/javascript/jquery) position , float 사용해 div 정렬 및 p 태그 텍스트 중앙 정렬 실시

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					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

Tags more

Archives

Today

Total

관리 메뉴

투케이2K

27. (html/css/javascript/jquery) position , float 사용해 div 정렬 및 p 태그 텍스트 중앙 정렬 실시 본문

FrontEnd

27. (html/css/javascript/jquery) position , float 사용해 div 정렬 및 p 태그 텍스트 중앙 정렬 실시

투케이2K 2021. 6. 6. 11:31

/* =========================== */

[ 개발 환경 설정 ]

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

/* =========================== */

[소스 코드]

<!DOCTYPE HTML>
<!-- 표시 언어 지정 -->
<html lang="ko">

<!-- 헤더 정의 부분 -->
<head>
    <title>HTML TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    

    <!-- 내부 CSS 스타일 지정 -->
    <style>
		/* 
		[요소 설명] 
		1. font-family : 폰트 표시 형태 스타일 지정
		2. width : 가로 크기 지정
		3. height : 세로 크기 지정
		4. margin : 마진 (외부) 여백 설정
		5. padding : 패딩 (내부) 여백 설정
		6. border : 테두리 (선) 표시 설정
		7. background : 배경 표시 설정
		8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)
		9. float : 정렬 기준 설정
		10. div : 레이아웃 표시 블록
		11. position : 레이아웃 위치 정렬 설정
		12. cursor : 마우스 커서 스타일 정의		
		    	
    	
		[세부 설명]
		1. width : 100%; : 가로 크기를 (%)로 지정 - 반응형 설정
		2. margin : 0 auto; : 중앙 배치 설정
		3. border : none; : 테두리 스타일 없음 설정
		4. background-color : #343d46; : rgb 색상을 사용해 배경색 지정	
		5. position : relative; : 부모를 기준으로 위치를 정렬합니다
		6. cursor : pointer; : 마우스 커서를 포인터 모양으로 설정
		7. float : top; : 세로 기준으로 정렬
		8. float : left; : 수평 왼쪽 기준으로 정렬


		[참고 설명]
		1. 이미 부모 div에 display inline-block 등 먼저 설정 시 텍스트 수직 수평 가운데 정렬이 안될 수 있습니다
		2. 그럴경우, position으로 표시 및 위치 정렬을 개별 수행 후 display table 을 설정합니다
		3. position으로 정렬 시 float 값을 top, left 등으로 설정해 수직, 수평 정렬을 실시합니다
		*/
				    			 	
    	
		/* html, body 영역 스타일 지정 */
		html, body{
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;	
			
			/* 스크롤바 표시 지정 */
			overflow : auto;					
		}
		
		
		/* body 스크롤바 메인 스타일 지정 */
		body::-webkit-scrollbar {
			/* 스크롤바 너비 지정 */
			width: 10px;
			
			/* 스크롤바 배경 색상 지정 */
			background-color: #c1c1c1;
		}
		/* body 스크롤바 thumb 스타일 지정 */
		body::-webkit-scrollbar-thumb {					
			/* 스크롤바 thumb 색상 지정 */
			background-color: #444444;
		}
        
        
		/* 부모 div 스타일 지정 */
		#main_container {
			width : 20%;
			height : 20%;
			margin : 0 auto;
			padding : 0;
			border : none;
			/* background-color : #0a1a2e; */
					
			/* 컨테이너 배치 정렬 실시 */
			float : top;
			position : relative; 
			top : 15%;
			left : 0%;
			
			/* 마우스 커서 스타일 정의 */
			cursor : default;
		}


		/* 자식 div 스타일 지정 */
		#one_container {
			width : 50%;
			height : 100%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #0a1a2e;
					
			/* 배치 정렬 실시 : float를 통해서 가로 및 세로 정렬 수행 */
			float : left;
			position : relative; 
			top : 15%;
			left : 0%;

			/* 자식 p 태그 텍스트 수직 정렬 위함 */
			display : table;			
		}
		#one_txt {
			/* 텍스트 가로 정렬 지정 */
			text-align : center;
			
			/* 텍스트 색상 지정 */
			color : #ffffff;
			
			/* 텍스트 굵기 지정 */
			font-weight : bold;
			
			/* 텍스트 사이즈 지정 */        	
			font-size : 100%;
        	
			/* 텍스트 수직 정렬 실시 */        	        	 	
			display : table-cell;
			vertical-align : middle;
		}


		/* 자식 div 스타일 지정 */
		#two_container {
			width : 50%;
			height : 100%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #444444;
					
			/* 배치 정렬 실시 : float를 통해서 가로 및 세로 정렬 수행 */
			float : left;
			position : relative; 
			top : 15%;
			left : 0%;

			/* 자식 p 태그 텍스트 수직 정렬 위함 */
			display : table;			
		}
		#two_txt {
			/* 텍스트 가로 정렬 지정 */
			text-align : center;
			
			/* 텍스트 색상 지정 */
			color : #ffffff;
			
			/* 텍스트 굵기 지정 */
			font-weight : bold;
			
			/* 텍스트 사이즈 지정 */        	
			font-size : 100%;
        	
			/* 텍스트 수직 정렬 실시 */        	        	 	
			display : table-cell;
			vertical-align : middle;
		} 
								
		      				                          
    </style>

</head>

<!-- body 몸체 부분 -->
<body>

<!-- 콘텐츠 div 레이아웃 -->
<div id = "main_container">
	<div id = "one_container">
		<p id = "one_txt">ONE</p>
	</div>
	<div id = "two_container">
		<p id = "two_txt">TWO</p>
	</div>
</div>

</body>

</html>

/* =========================== */

[결과 출력]

/* =========================== */

[요약 설명]

[요소 설명]

1. font-family : 폰트 표시 형태 스타일 지정

2. width : 가로 크기 지정

3. height : 세로 크기 지정

4. margin : 마진 (외부) 여백 설정

5. padding : 패딩 (내부) 여백 설정

6. border : 테두리 (선) 표시 설정

7. background : 배경 표시 설정

8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)

9. float : 정렬 기준 설정

10. div : 레이아웃 표시 블록

11. position : 레이아웃 위치 정렬 설정

12. cursor : 마우스 커서 스타일 정의

[세부 설명]

1. width : 100%; : 가로 크기를 (%)로 지정 - 반응형 설정

2. margin : 0 auto; : 중앙 배치 설정

3. border : none; : 테두리 스타일 없음 설정

4. background-color : #343d46; : rgb 색상을 사용해 배경색 지정

5. position : relative; : 부모를 기준으로 위치를 정렬합니다

6. cursor : pointer; : 마우스 커서를 포인터 모양으로 설정

7. float : top; : 세로 기준으로 정렬

8. float : left; : 수평 왼쪽 기준으로 정렬

[참고 설명]

1. 이미 부모 div에 display inline-block 등 먼저 설정 시 텍스트 수직 수평 가운데 정렬이 안될 수 있습니다

2. 그럴경우, position으로 표시 및 위치 정렬을 개별 수행 후 display table 을 설정합니다

3. position으로 정렬 시 float 값을 top, left 등으로 설정해 수직, 수평 정렬을 실시합니다

/* =========================== */

저작자표시

'FrontEnd' 카테고리의 다른 글

29. (html/css/javascript/jquery) 텍스트 text 길이 초과 시 생략 처리 - table layout, white space, text overflow (0)	2021.06.09
28. (html/css/javascript/jquery) 동적으로 div 레이아웃 생성 및 스타일 속성 지정 실시 (0)	2021.06.09
26. (html/css/javascript/jquery) 드래그 앤 드롭 (drag and drop) 기능을 사용해 div 속성값 교체 실시 - 브라우저, 모바일 (0)	2021.06.04
25. (html/css/javascript/jquery) onclick location href 사용해 특정 태그, url, 파일 이동 실시 (0)	2021.06.02
24. (html/css/javascript/jquery) highlight color 사용해 클릭 이벤트 발생 시 파란색 영역 테두리 박스 표시 하이라이트 제거 실시 (1)	2021.06.02

'FrontEnd' Related Articles

Comments

투케이2K

27. (html/css/javascript/jquery) position , float 사용해 div 정렬 및 p 태그 텍스트 중앙 정렬 실시 본문

27. (html/css/javascript/jquery) position , float 사용해 div 정렬 및 p 태그 텍스트 중앙 정렬 실시

'FrontEnd' 카테고리의 다른 글

티스토리툴바