공부시 참고 사이트
https://www.w3schools.com/html/html_blocks.asp
W3Schools.com
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
<block, inline>
block element=전체 폭을 다 차지한다-
width, height를 100으로 줘서 정사각형이 나오지만 사실 div1의 영역은 50x화면너비이다
inline element=정해진 크기만 차지한다.
*{ } 전체 tag에 대해 설정
<margin padding>
margin=바깥쪽 여백
margin top right bottom left; 각각의 margin 설정 가능 ex) margin 10px, 20px, 5px, 3px;
padding=안쪽 여백
<viewPort>
전체 화면
<display:flex>
Container 안에 자유롭게 배치 가능.
block요소 속성이 사라지고 inline 처럼 자신의 width height에 맞게 변경된다.
.wrapper{display: flex; }
<이미지 출력>
<img src="/common/images/photo/photo1.jpg" width="100px" height="100px">
<img src="/common/images/photo/photo2.jpg" width="100px" height="100px">
<img src="/common/images/photo/photo3.jpg" width="100px" height="100px">
<flex-grow>
나머지 공간을 n비율로 나눠서 가진다
이게 들어가면 width가 의미가 없다.
flex-grow:1;
flex-grow넣고 높이를 안주면 그냥 꽉차게 들어간다.
<style type="text/css">
div{ border:1px solid black }
.wrapper{display: flex; height:400px;}
#div1{flex-grow:1;}
#div2{width: 700px;height: 100px;}
#div3{width: 100px;height: 100px;flex-grow:1;}
</style>
<flex-direction>
수평, 수직으로 배치
flex-direction: column;
flex-direction: row;
<initial-scale>
모바일 화면에서 폭이 핸드폰 폭에 맞춰진다
initial-scale=1.0은 글자크기가 비율이 이전과 그대로 나온다.
그래서 글자가 자동으로 축소된다.
0.5로주면 글자 크기 절반, 2로 주면 글자 크기 2배로됨
content="width=device-width, initial-scale=1.0">
flex layout 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
#wrapper
{
display:flex;
flex-direction: column;
padding: 30px;
}
header
{
background-color: #666;
height: 200px;
text-align:center;
padding:30px;
font-size: 35px;
color:white;
}
section
{
display: flex;
flex-direction: row;/*이거 안해도 row방향임*/
height: 300px;
}
nav
{
width:200px;
background-color:rgb(254, 250, 243);
flex-grow: 1;
padding: 50px;
}
.no-link
{
color:#666;
text-decoration: none;
color: inherit;
pointer-events: none;
cursor: default;
}
article
{
background-color: rgb(227, 222, 216);
flex-grow: 7;
padding: 20px;
}
footer
{
background-color: #666; height:50px;
padding:10px;
text-align: center;
color:white
}
</style>
</head>
<body>
<div id="wrapper">
<h2> CSS Layout Float</h2>
<header><h2>Cities</h2></header>
<section>
<nav><!--menu tag-->
<ul>
<li><a href="#" class="no-link">London</a></li>
<li><a href="#" class="no-link">Paris</a></li>
<li><a href="#" class="no-link">Tokyo</a></li>
</ul>
</nav>
<article>
<h3>London</h3>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>Footer</footer>
</div>
</body>
</html>'개발' 카테고리의 다른 글
| [그래픽스] 렌더링 파이프라인 (0) | 2024.12.11 |
|---|---|
| [Javascript] 기초1 (2) | 2024.12.09 |
| 항해 99 클럽 후기 (1) | 2024.12.01 |
| [프로그래머스] n+1 카드게임 (C++) (0) | 2024.12.01 |
| [프로그래머스] 개인정보 수집 유효기간 (C++) (2) | 2024.11.30 |
