728x90
728x90
- 코드를 좌우로 정렬해준다
<html>
<head>
<meta charset = "utf-8">
<title>Document</title>
<link href = "css/main.css" rel = "stylesheet">
</head>
<body class="backgroundimagesea">
<div class= "container">
<div class="header"> </div>
<div class="left-menu"></div><div class="right"></div>
<div class="footer"></div>
</div>
</body>
</html>
- css에서 Inline block 설정을 해준다
.left-menu {
width:20%;
height:400px;
background-color: rgba(12, 50, 242, 0.5);
display: inline-block;
}
.right {
width:80%;
height:400px;
background-color: rgba(40, 112, 242, 0.5);
display: inline-block;
}
.footer {
width: 100%;
height: 50px;
background-color: rgba(12, 112, 242, 0.7);
}
위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드다.
display 속성만 inline-block 으로 조정하면 가로로 배치가 가능하다.
inline-block은 “내 폭과 높이만큼 자리차지하게 해주세요” 라는 뜻이다.
간편하지만 태그 사이에 스페이스바 공백이 있다면 그대로 보여준다
→ 가로로 정렬하려면 태그 사이의 공백도 제거해줘야 함
- 공백제거하는 방법
- 주석처리 기호 사용하기
- 부모의 폰트사이즈를 0으로 만들기
정상적으로 된다
💡 부모 태그로부터 inherit되는 속성은 중요도가 가장 낮다
<html>
<head>
<meta charset = "utf-8">
<title>Document</title>
<link href = "css/main.css" rel = "stylesheet">
</head>
<body class="backgroundimagesea">
<div class= "container">
<div class="header"> </div>
<div class="left-menu"></div><div class="right"></div>
<div class="footer">
<P>찬란한 미래를 위하여 </P.>
</div>
</div>
</body>
</html>
이렇게 글자를 쓰면 이상하게 나온다. 해결책은 Vertical-allign을 사용해야 한다.
중앙 정렬을 하는 역할.
inline을 사용하면 Baseline을 따르게 되기 때문이다.
- 코드를 좌우로 정렬해준다
<html>
<head>
<meta charset = "utf-8">
<title>Document</title>
<link href = "css/main.css" rel = "stylesheet">
</head>
<body class="backgroundimagesea">
<div class= "container">
<div class="header"> </div>
<div class="left-menu"></div><div class="right"></div>
<div class="footer"></div>
</div>
</body>
</html>
- css에서 Inline block 설정을 해준다
.left-menu {
width:20%;
height:400px;
background-color: rgba(12, 50, 242, 0.5);
display: inline-block;
}
.right {
width:80%;
height:400px;
background-color: rgba(40, 112, 242, 0.5);
display: inline-block;
}
.footer {
width: 100%;
height: 50px;
background-color: rgba(12, 112, 242, 0.7);
}
위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드다.
display 속성만 inline-block 으로 조정하면 가로로 배치가 가능하다.
inline-block은 “내 폭과 높이만큼 자리차지하게 해주세요” 라는 뜻이다.
간편하지만 태그 사이에 스페이스바 공백이 있다면 그대로 보여준다
→ 가로로 정렬하려면 태그 사이의 공백도 제거해줘야 함
- 공백제거하는 방법
- 주석처리 기호 사용하기
- 부모의 폰트사이즈를 0으로 만들기
정상적으로 된다
<aside> 💡 부모 태그로부터 inherit되는 속성은 중요도가 가장 낮다
</aside>
<html>
<head>
<meta charset = "utf-8">
<title>Document</title>
<link href = "css/main.css" rel = "stylesheet">
</head>
<body class="backgroundimagesea">
<div class= "container">
<div class="header"> </div>
<div class="left-menu"></div><div class="right"></div>
<div class="footer">
<P>찬란한 미래를 위하여 </P.>
</div>
</div>
</body>
</html>
이렇게 글자를 쓰면 이상하게 나온다. 해결책은 Vertical-allign을 사용해야 한다.
중앙 정렬을 하는 역할.
inline을 사용하면 Baseline을 따르게 되기 때문이다.
728x90
300x250
'2023 공부한것들' 카테고리의 다른 글
| [TIL] 20230626 (0) | 2023.06.27 |
|---|---|
| 202306026 오후 회고록 (0) | 2023.06.27 |
| [02-5] 자바스크립트의 특징 (0) | 2023.06.27 |
| 20230626 오전 회고록 (0) | 2023.06.26 |
| [코딩애플 html/css] 5강 : div를 이용한 네모네모 디자인 (0) | 2023.06.26 |
