728x90
반응형
230503 CSS 레이아웃
1. 레이아웃
웹의 레이아웃은 가구 배치와 비슷하다. 내가 위치를 결정한다.
(↔ 안드로이드는 부모의 영향을 많이 받는다. )
블록요소 : 가로가 매치이다. (블럭은 한줄에 하나씩만 놓여진다. )
인라인요소 : 가로가 wrap사이즈이다.(사이즈변경불가) 공간에 여유가 있으면 한 줄에 여러가지 둘 수있다. 인라인 블럭요소도 갖고있다.
display - hidden : 없어짐
display - none : 안드로이드 gone과 같은 의미.
요소의 위치 : 좌우상하의 좌표를 찍어서 위치를 결정 할 수도있다.
위치설정방법
- 정적위치설정 : 일반적인 배치
- 상대위치설정 : 원래 놓여지는 위치를 기준으로 좌우상하 움직이게한다. (안드로이드 렐러티브와 전혀상관없음)
- 절대위치설정 : 컨테이너가 기준 - 약간 붕떠있는 느낌이다. 겹친다. top : 30px left 30px
- 고정위치설정 : 브라우저가 기준 - 긴 웹문서를 생각하자. 브라우저에 붙어있어서 스크롤 내려도 같이 따라온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>레이아웃 CSS</title>
<style>
/* display 속성 연습 */
#aa{display: inline; width: 300px;} /* 이렇게 한다해도 사이즈조절이 안된다. 인라인요소는 랩사이즈이니까*/
#aa{display: inline-block; width: 300px;}
/* 인라인 요소를 블럭요소로 바꾼다. */
img.bb{display: block; width: 150px;}
/* display none . 이러면 #cc가 보이지 않는다. */
#cc{display: none;}
</style>
</head>
<body>
<!-- display 속성 : 블럭 <-> 인라인 요소의 성격을 뒤바꾸는것 -->
<!-- p는 블럭요소라서 한줄 다 차지한다. -->
<!-- a는 인라인요소, 공간이있으면 한줄에 다 붙는다. -->
<p id="aa">Hello World</p>
<a href="">Google</a>
<strong>굿모닝</strong>
<img src="./image/img001_big.jpg" alt="img001_big" class="bb">
<hr>
<!-- display : none값 -->
<!-- 리스트는 블럭요소 ,unorder list-->
<ul>
<li>aaa</li>
<li id="cc">bbb</li>
<li>ccc</li>
</ul>
<hr>
<!-- 블럭요소와 인라인 요소를 같이 사용할때 고려할 것들 -->
<!-- 블럭요소안에 인라인요소, 다른 블럭요소 모두 넣을 수 있음. -->
<!-- div(걍 그룹핑하는애들)는 블럭요소, 이안에 인라인요소가 들어가면 그냥 한줄로 표현됨 -->
<div style="background-color: tomato; border: solid; padding: 5px;">nice <strong>aaa</strong> wolrd</div>
<!-- 블록안에 다른 블록요소 , 다 한줄씩 띄어진다. -->
<div style="background-color: teal; border: solid; padding: 5px;">nice <p>aaa</p> wolrd</div>
<!-- 블록요소안에 같은 블록요소가 있다면? 첫번째줄만 배경색이 먹는다 왜??????????? -->
<!-- 중첩 p를 읽을수가 없다. 종료태그를 안썼다고 컴퓨터는 착각함. -->
<!-- 컴퓨터는 P요소 쓰다가 다시 p요소를 썼다고 생각한다. -->
<!-- 시작태그가 없고 종료태그만 있으면 잘못된것임. 무시된다. world는 그냥 태그문 없이 쓴 text로 인식한다. -->
<p style="background-color: yellow; border: solid; padding: 5px;">nice <p>aaa</p> world</p>
<!-- 그러나 div는 중첩을 인식한다. 요소마다 다 다르므로 성격을 고려해서 쓴다. -->
<!-- 인라인 요소안에 블럭요소를 넣으면? 원래 안됨 (html은 에러가 없으니까 함 해보자) -->
<!-- span은 인라인요소, div와 비슷한놈임 ,인라인은 블록을 감쌀수가 없다.-->
<span style="background-color: lightgreen; border: solid; padding: 5px;">nice <p>aaa</p> world</span>
<hr>
<!-- position 속성 -->
<div class="aaa">
<p id="one">block 1번</p>
<p id="one2">block 2번</p>
<p id="one3">block 3번</p>
</div>
<style>
#one{background-color: cyan; width: 200px; height: 50px;}
#one2{
background-color: yellow; width: 200px; height: 50px;
position: static; /* static: 원래 놓여질 위치에 배치됨 . */
position: relative; /* relative: 원래 놓여질 위치에서 위치속성으로 조정 가능함. */
/* 앱솔루트일때 부모의 영역(class)을 기준으로 배치하고싶다면? 부모요소의 position속성이 static이 아니면 됨 */
position: absolute; /* absolute: 문서의 좌측 상단을 기준으로 위치를 설정. 위치를 내맘대로 쓸수있다. (원래 배치될 위치에서 벗어난다.) */
position: fixed; /*브라우저 창의 좌상단을 기준으로함*/
/* 위치 좌표설정값 설정속성 -> 이 속성은 static일때 무시된다. static이 걸리면 좌표설정이 불가하다. */
/* 마진이랑 느낌이 다르다. 겹쳐서 움직인다. 3번을 밀어내는 느낌이 아님. margin top이면 밑에 애들까지 영향을 받는다 */
/* left: 50px;
top: 30px; */
right: 10px;
top: 20px;
}
#one3{background-color: lightgreen; width: 200px; height: 50px;}
/* 블럭들의 부모요소 : relative 내 위치를 가지면서도 자식들도 참조가능*/
div.aaa{
background-color: black;
position: relative;
}
</style>
</body>
</html>
float 속성
요소를 붕 뜨울 수 있는 속성
clear속성으로 딸려오는 요소를 막는다.
지금은 flex를 많이쓴다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Float</title>
<style>
/* 이미지를 올리되 가려지지않게 p요소를 옆으로 밀어준다. */
img.a{float: left; margin: 10px;}
</style>
</head>
<body>
<img src="./image/sunshine.jpg" alt="sunshine" width="160" height="120" class="a">
<p style="background-color: yellow; border: 2px solid red;">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia architecto dolorum libero ipsam unde error necessitatibus reprehenderit sapiente a eligendi, pariatur sit consequatur quos neque culpa nam cupiditate vitae quidem.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta ad nesciunt dignissimos perspiciatis ipsum, itaque quaerat impedit assumenda earum ipsa? Culpa obcaecati dolor, consequuntur id aliquam optio ipsa suscipit eaque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deleniti qui voluptas nostrum non illum, veritatis nobis doloremque. Reiciendis ratione veritatis facilis quibusdam adipisci natus, quidem hic accusamus doloribus quasi!
</p>
<!-- 공간의 여유가 있으면 이 영역도 float의 영향을 받는다. -->
<!-- clear로 빨려들어오지못하게 만든다. -->
<p style="clear : left;">여기는 위 기사와 상관없는 새로운 블럭</p>
</body>
</html>
z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z인덱스</title>
<style>
div{
position: absolute;
width: 100px; height: 100px;
}
#d1{
background-color: blue;
top: 0px; left: 0px;
z-index: 100;
}
#d2{
background-color: yellow;
top: 30px; left: 30px;
z-index: 50;
}
#d3{
background-color: green;
top: 60px; left: 60px;
}
</style>
</head>
<body>
<div id="d1">박스 1</div>
<div id="d2">박스 2</div>
<div id="d3">박스 3</div>
</body>
</html>
min사이즈
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>element size</title>
<style>
p{
background-color: yellow;
border: 1px solid red;
/*가로 요소는 최소 600px는 보장된다. */
min-width: 600px; min-height: 200px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione architecto excepturi a numquam magni corporis eaque saepe commodi, omnis odio aspernatur eos dignissimos laudantium fuga minima quidem ducimus itaque maiores?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, in ipsa natus ab, quo molestiae porro ad dolore quod odit eveniet quasi. Molestias, beatae facilis. Atque dolorem cumque soluta neque!
</p>
</body>
</html>overflow
<!DOCTYPE html>
<html>
<body>
<div id="target">
<p>블럭 1번</p>
<p>블럭 2번</p>
<p>블럭 3번</p>
<p>블럭 4번</p>
<p>블럭 5번</p>
</div>
</body>
<style>
p{
background-color: greenyellow;
width: 200px; height: 50px;
}
#target{
border: 1px solid black;
width: 300px; height: 100px;
/* 자식들이 흘러넘쳤을때 대응하는방법 overflow */
overflow: hidden;
overflow: scroll;
overflow: auto;
}
</style>
</html>
728x90
반응형
'HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS 회원가입 창 만들기 (0) | 2023.05.03 |
|---|---|
| CSS 레이아웃2 (0) | 2023.05.03 |
| CSS3 (0) | 2023.05.02 |
| HTML 멀티미디어 (0) | 2023.05.02 |
| HTML WebUI 구현 (0) | 2023.05.02 |
