[Day4] CSS 4 - overflow, 팝업폼, display, prev|next, 레이아웃배치(수직수평), css결합자, 의사클래스, 의사요소, 불투명, 탐색모듬, 드롭다운

[Day4] CSS 4 [11/15]

 

[overflow]

1. 요소의 콘텐츠(내용)가 너무 커서 지정된 영역에 맞지 않을 때 콘텐츠(내용)을 자를지 또는 스크롤바를 추가할지 여부를 결정하는 속성

2. li, a 인라인모드 메뉴 : float:left overflow:auto+다음요소..

 

- auto : 자동. 콘텐츠가 넘치는 경우에만 스크롤바 추가.

- visible(기본값) : 영역 외부에 넘치는 콘텐츠가 출력(랜더링) 되어진다.

- hidden : 콘텐츠가 넘치는 부분은 잘라버린다. 보이지 않도록 한다.

- scroll : 콘텐츠가 넘치는 지에 대한 여부와 상관없이 무조건 스크롤바 추가.

 

div{
	/* block모드 */
	/* 높이 지정 */
	background-color: coral;	/* 산호색 */
	border:1px solid;
	width:300px;
	
	height:600px;
	/* height:65px; */
	
	/* overflow:visible; */
	/* overflow:hidden;  */
	/* overflow:scroll; */
	/* overflow-x:scroll; */
	/* overflow-y:scroll; */
	overflow:auto;
}

 

(참고사항) overflow 속성은 [높이가 설정된] [block 모드]에서만 적용된다.

---

[float]

1. 사전적의미 : 둥둥 떠다니다.

2. 요소가 떠다니는 방법을 지정하는 속성

3. 콘텐츠를 배치하고 형식을 지정하는데 사용

4. 이미지 컨테이너의 텍스트 왼쪽, 오른쪽 배치( 떠 있게 한다. )

5. 속성값 : left, right, none(기본값), inherit - (부모요소의 float 값을 상속)

 

<style>
p{
	border:3px solid #4caf50;
	padding:5px;
	
	/* overflow:auto; */ /* 1번. */
}

/*
.clearfix{
	overflow:auoto;
}
*/

/* :의사클래스 */
/* ::의사요소 */
/* p::after{ */
.clearfix::after{
	content:"";
	clear:both;
	display:table;
}

p img{
	width:170px;
	float:left;
}
</style>

<p class="clearfix">
	<img src="../images/pineapple.jpg" alt="파인애플">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
	Ut ipsum ipsam quae veritatis assumenda cumque dicta 
	libero minus laboriosam in quaerat neque inventore a 
	ducimus doloribus magni fuga eos qui.
</p>

 

<style>
.clearfix div{
	padding:15px;
	border:1px solid;
	float:left;
}
</style>

<div class="clearfix">
	<div class="box1">box1</div>
	<div class="box2">box2</div>
	<div class="box3" style="float:right">box3</div>
</div>

* 의사클래스 의사요소 : https://velog.io/@chyori/CSS-%EC%9D%98%EC%82%AC-%ED%81%B4%EB%9E%98%EC%8A%A4

 

[clear] : https://ofcourse.kr/css-course/clear-%EC%86%8D%EC%84%B1

1. float 요소 옆에 있는 요소에 어떤 일이 발생해야 하는지를 지정하는 속성.

2. none(기본값)

3. left : 왼쪽 float요소의 아래로 출력

4. right : 오른쪽 float요소의 아래로 출력

5. both : 왼쪽 + 오른쪽 float 요소의 아래로 출력

6. inherit : 상속

---

팝업(popup) 폼(form)

<style>

body{
	font-family:Arial, Verdana, sans-serif;
}

*{
	box-sizing:border-box;
}

.open-button{
	background-color: #555;
	color:white;
	padding:16px 20px;
	border:none;
	cursor:pointer;
	opacity:0.8;
	position:fixed;
	right:28px;
	bottom:23px;
	width:280px;
}

.form-popup{
	display:none;
	
	border:3px solid #f1f1f1;
	
	position:fixed;
	bottom:0;
	right:15px;
	z-index:9;
}

.form-container{
	max-width:300px;
	padding:10px;
	background-color: white;
}

.form-container input[type=text], .form-container input[type=password]{
	width:100%;
	margin:5px 0 22px 0;
	border:none;
	background-color: #f1f1f1;
	padding:15px;
}
.form-container input[type=text]:focus
, .form-container input[type=password]:focus{
	background-color: #ddd;
	outline:none; /* border 밖 */
	
}

.form-container .btn{
	background-color: #4caf50;
	color:white;
	padding:16px 20px;
	border:none;
	cursor:pointer;
	width:100%;
	margin-bottom:10px;
	opacity:0.8;
}

.form-container .btn:hover, open-button:hover{
	opacity:1;
}
.form-container .cancel{
	background-color: red;
}

</style>

<div class="form-popup" id="myForm">
  <form action="" class="form-container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
    <button type="button" class="btn cancel">Close</button>
  </form>
</div>

* outline : border 바깥

1) Open Form을 클릭하면 숨겨진 form-popup div 보이도록 js & jquery 코딩.

	document.querySelector("button.open-button").onclick=function(){
		// alert("!!");
		// document.getElementById("myForm").setAttribute(); /getAttribute();
		document.querySelector("#myForm").style.display="block";
		document.querySelector("#myForm input[name=email]").focus();
	}

	$("button.open-button").click( function (){
		// alert("!!");
		$("#myForm").show();
		$("#myForm input[name=email]").focus();
	});

2) 닫기 버튼을 클릭하면 보여진 form-popup div 숨기도록 js &  jquery 코딩.

		document.querySelector("button.btn.cancel").onclick=function(){
		// alert("!!");
		// document.getElementById("myForm").setAttribute(); /getAttribute();
		document.querySelector("#myForm").style.display="none";
		
		document.querySelector("#myForm input[name=email]").value="";
		document.querySelector("#myForm input[name=psw]").value="";

	$("button.btn.cancel").click(function(){
		// alert("!!");
		$("#myForm").hide();
		$("#myForm input[name=email]").val("");
		$("#myForm input[name=psw]").val("");
	});

---

반응형(Responsive) 폼(Form)

<style>

*{
	box-sizing:border-box;
}

input[type=text], select, textarea{
	width:100%;
	padding:12px;
	border:1px solid #ccc;
	border-radius: 4px;
}

.row label{
	display:inline-block;
	padding:12px 12px 12px 0;
}

input[type=submit]{
	background-color: #4caf50;
	color:white;
	padding:12px 20px;
	border:none;
	border-radius:4px;
	cursor:pointer;
	
	float:right;
}

input[type=submit]:hover{
	background-color: #45a049;
}

.container{
	border-radius:5px;
	background-color: #f2f2f2;
	padding:20px;
}

.col-25{
	float:left;
	width:25%;
	margin-top:6px;
}

.col-75{
	float:left;
	width:75%;
	margin-top:6px;
}

.row::after{
	content:"";
	clear:both;
	display:table;
}

</style>

<style>
/* 미디어쿼리 + 조건 */
@media only screen and (max-width:600px){
	.col-25, .col-75, input[type=submit]{
		width:100%;
		margin-top:0;
	}
}
</style>

* row 로 구분 제대로 해주기위해 .row::after 추가

<div class="container">
  <form action="">
    <div class="row">
      <div class="col-25">
        <label for="fname">First Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Last Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">Country</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">Subject</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>

---

[display 속성]

1. inline 모드

    너비와 높이 설정은 불가능하다.

2. block 모드

    너비와 높이 설정이 가능하다.

     but 문제점) 자동 개행..

3.inline-block 모드

    너비와 높이 설정이 가능하다. 자동 개행 X.

    top, bottom 여백/패딩 적용도 가능하다.  

 

<style>

span.a{
	/* inline */
	display:inline; /* span 요소의 기본값 */
	border:1px solid blue;
	background-color: yellow;
	padding:5px;	/* 적용됨. */
	
	/* 너비, 높이 */
	width:150px;
	height:100px;
}
span.b{
	/* block */
	display:block; /* span 요소의 기본값 */
	border:1px solid blue;
	background-color: yellow;
	padding:5px;	/* 적용됨. */
	
	/* 너비, 높이 */
	width:150px;
	height:100px;
}
span.c{
	/* inline-block */
	display:inline-block; /* span 요소의 기본값 */
	border:1px solid blue;
	background-color: yellow;
	padding:5px;	/* 적용됨. */
	
	/* 너비, 높이 */
	width:150px;
	height:100px;
}

</style>

<h3>display:inline</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Rem ipsam dicta nam <span class="a">aliquam</span> 
<span class="a">eum</span> distinctio expedita delectus 
repellendus veniam dolor fugiat suscipit quas nihil libero 
architecto iusto odit itaque adipisci!
</div>

<h3>display:block</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Rem ipsam dicta nam <span class="b">aliquam</span> 
<span class="b">eum</span> distinctio expedita delectus 
repellendus veniam dolor fugiat suscipit quas nihil libero 
architecto iusto odit itaque adipisci!
</div>

<h3>display:inline-block</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Rem ipsam dicta nam <span class="c">aliquam</span> 
<span class="c">eum</span> distinctio expedita delectus 
repellendus veniam dolor fugiat suscipit quas nihil libero 
architecto iusto odit itaque adipisci!
</div>

---

Previous & Next 버튼

<style>

a{
	text-decoration: none;
	padding:8px 16px;
	display:inline-block;	/* 너비, 높이 지정 */
}

a:hover{
	background-color: #ddd;
	color:black;
}

.prev{
	background-color: #f1f1f1;
	color:black;
	
	float:left;
}

.next{
	background-color: #4caf50;
	color:white;
	
	float:rigth;
}

</style>
<style>
.round{
	border-radius:50%;
}
</style>

<a href="#" class="prev">&laquo;Previous</a>
<a href="#" class="next">Next&raquo;</a>

<a href="#" class="prev round">&#8249;</a>
<a href="#" class="next round">&#8250;</a>

---

레이아웃(배치):[수평 정렬], 수직 정렬

 

1.블럭모드(div)를 가로로 중앙에 배치 

.center{
	width:50%;
	border:3px solid green;
	text-align:center;	/* 요소 내부의 텍스트를 중앙에 배치 */
	padding:10px;
	
	margin:0 auto; /* 요소 자체를 중앙 배치 */
}

<!-- .center>p>{Hello World!} -->
<div class="center">
	<p>Hello World!</p>
</div>

2. 인라인모드(img)를 가로로 중앙에 배치

img{
	width:30%;
	
	display:block;
	margin:0 auto;	/* 인라인모드이기 때문에 적용이 되지 않는다. */
}

<img src="../images/paris.jpg" alt="paris">

3. 우측에 배치

1) position:absolute

2) float:right

#demo{
	width:50%;
	border:3px solid #73ad21;
	padding:3px;
	
	position:absolute;
	right:0;
	
	/* float:right; */
}

<div id="demo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Totam pariatur maxime voluptatibus nobis aliquid cupiditate 
possimus similique ducimus eligendi quis eaque corporis 
dignissimos debitis eum expedita repellat cumque inventore itaque.
</div>

---

레이아웃(배치):수평 정렬, [수직 정렬]

<style>

.center{
	width:50%;
	border:3px solid green;
	margin: 0 auto;
	text-align:center;
	
	/*
	height:200px;
	*/
	
	/* 1. padding 속성 사용 : top/bottom 설정. 높이 설정X. */
	/* padding:70px 0 70px 0; */
	/* padding: 70px 0; */
	
	/* 2. 팁(트릭) : 높이 속성과 line-height 속성값을 동일하게 설정하면 -> 중앙 */
	/* line-height : 라인과 라인 간격
	height:200px;
	line-height:200px;
	*/
	
	/* 3. transform 속성 사용 : 변형시키는 작업  */
	height:200px;
	position:relative; /* 가장 가까운 기준이 되는 부모 요소 */
	
}

.center p{
	margin:0;
	padding:0;
	
	position:absolute;
	left:50%;
	top:50%;
	border:1px solid red;
	
	/* 3. */
	transform:translate(-50%, -50%);	/* 너비, 높이 */
	-ms-transform:translate(-50%, -50%);	/* IE */
}

</style>

<div class="center">
	<p>Hello World!</p>
</div>

* -ms-transform : explorer

* 전환(transition) 변환(transform) : https://velog.io/@wlrhkd49/CSS-%EC%86%8D%EC%84%B1-%EC%A0%84%ED%99%98-%EB%B3%80%ED%99%98

 

 

+ 4) flex

<style>
.center{
	width:400px;
	height:200px;
	
	border:3px solid green;
	margin: 0 auto;
	text-align:center;
	
	/* 4. flexbox를 사용해서 사물을 중앙에 배치 */
	/* IE10 및 이전 버전에서는 지원되지 않는다. */
	display:flex;	/* flex:굴곡지다. */
	justify-content: center;
	align-items: center;
}

.center p{
}
</style>

---

[ css 4가지 결합자(연산자) ]

-  선택자 간의 관계를 설명하는 것 

   1) 선택자 선택자      : 후손 포함

   2) 선택자 > 선택자  : 직계자식만

   3) 선택자 + 선택자  : div + p = div에 인접한 p (바로 뒤)

   4) 선택자 ~ 선택자  : div ~ p = div에 따라오는 모든 형제 p

---

[:의사클래스]

1. 요소의 특수한 상태를 정의할 때 사용한다.

1) :link, :visited, :hover, :active

2) :focus

3) :first-child

4) :first-letter

5) :not(selector)

 

:checked, :empty, :first-of-type, :invalid, :in-range, 

:land(language), :last-child, :last-of-type, :nth-child(n), 

:nth-last-child(n), :only-child, :optional, 

:out-of-range, :read-only, :read-write, :required, 

:root, :target, :valid

 

[::의사요소] ex08

1. 요소의 지정된 부분에 스타일을 지정할 때 사용한다.

2. 요소의 첫 글자(::first-letter), 요소의 첫 라인(::first-line)

3. 요소 콘텐츠 뒤에 삽입 ::after

4. 요소 콘텐츠 앞에 삽입 ::before

5. 목록 항목의 마커를 선택 ::marker

6. 사용자에 의해서 선택된 요소의 일부 ::selection

color, background, cursor, outline 속성 적용

 

1) ::after

2) ::first-letter

::first-line

::before, ::selection

 

<의사요소 예제>

1. css counter : css 자동번호매기기

1) section 카운터 변수 선언 == 카운터 생성 또는 재설정 + 초기화(0)

counter-reset:section;

2) 카운터 변수 1씩 증가

counter-increment:section;

3) 생성된 카운터 삽입.

내용 : counter() / counters() 요소에 카운트 추가

content:counter(section);

<style>
body{
	counter-reset:section;
}

div::before{
	counter-increment:section;
	content:counter(section);
	
	background-color: black;
	color:white;
	padding: 1px 10px;
	margin-right:16px;
	border-radius:50%;
}
</style>

<div>Java</div> <div>Jsp</div> <div>Oracle</div> <div>JDBC</div> <div>html5</div> <div>css3</div>

*counter-reset : 자동 번호

---

css 불투명도/투명도 지정

 

img == 인라인모드

1) opacity 속성

2) rgb[a] == alpha 자식(하위)요소에 투명도는 상속되지 않는다.

img{
	width:170px;
	height:100px;
	
	opacity:0.5;
}

img:hover{
	opacity:0.8;
}

<img src="../images/img_forest.jpg" alt="">
<img src="../images/img_mountains.jpg" alt="">
<img src="../images/img_5terre.jpg" alt="">

---

탐색모듬

1. 네비게이션바(메뉴바, 탐색표시줄)

사용하기 쉬운 탐색 기능 - 모든 웹 사이트에서 중요하다!

2. ul>li>a

<style>

body{
	transition:0.5s ease;
}

div#main{
	padding: 16px;
	
	transition:0.5s ease;
}

.sidenav{
	background-color: #111;
	position:fixed;	/* width:100% -> inline모드처럼 내용 너비. */
	left:0;
	top:0;
	height:100%;
	
	/* 수직 네비게이션 메뉴바 : 숨김 */
	width:0;
	overflow-x:hidden;
	
	transition:0.5s ease;
}
.sidenav a{
	display:block;
	color:#818181;
	padding:8px 8px 8px 32px;
	font-size:25px;
	text-decoration: none;
	
	transition:0.5s ease;
}
.sidenav a:hover{
	color:#f1f1f1;
}

</style>

<!-- #mySidenav.sidenav>a[href="#"]*5 -->
<div id="mySidenav" class="sidenav">
   <a href="#" class="closebtn">&times;</a>
   <a href="#">About</a>
   <a href="#">Services</a>
   <a href="#">Clients</a>
   <a href="#">Contact</a>
</div>

<!-- #main>h2>lorem3^p>lorem20^span -->
<div id="main">
   <h2>Lorem ipsum dolor.</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus inventore aspernatur laudantium neque autem esse ipsam nostrum repellat ad iure?</p>
   <span style="cursor: pointer;font-size: 30px;" onclick="openNav()">&#9776;</span>
</div>

<script>
function openNav(){
	// width:0; -> 너비 설정
	// *** 꼭 문자열로 줘야하며 단위도 줘야한다!! ***
	// *** margin-left -> marginLeft ***
	document.getElementById("mySidenav").style.width="250px";
	document.getElementById("main").style.marginLeft="250px";
	documnet.body.style.backgroundColor="rgba(0, 0, 0, 0.4)";
}

document.querySelector("#mySidenav>a.closebtn").onclick = function(){
	// alert("!!");
	// 이벤트 버블링
	document.getElementById("mySidenav").style.width="0";
	document.getElementById("main").style.marginLeft="0";
	documnet.body.style.backgroundColor="white";
}
</script>

---

드롭다운(dropdown) from_ex07.html : 툴팁 (하위메뉴)

.dropdown{
	position:relative;	/* *** */
	display:inline-block;	/* 이렇게 설정해야 한다.*** */
	
	left:300px;
}

.dropdown-content{
	display:none;
	
	position:absolute;
	
	background-color: #f9f9f9;
	min-width:160px;
	box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.2);
	padding:12px 16px;
	z-index:1;
	
}

/* ex07.html 툴팁 */
.dropdown:hover .dropdown-content{
	display:block;
}

<div class="dropdown">
	<span>Mouse Over Me</span>
	<div class="dropdown-content">
		<p>Hello World!</p>
	</div>
</div>

<br>
js<br>
css<br>

* 부모 relative 자식 absolute 중요!

 

ex2)

.dropdown{
	position:relative;
	display:inline-block;
}

.dropdown-content{
	display:none;
	
	position:absolute;
	right:0;
	
	background-color: #f9f9f9;
	min-width:160px;
	box-shadow:9px 8px 16px 0 rgba(0, 0, 0, 0.2);
	z-index:1;
}

.dropdown-content a{
	display:block;		/* 없으면 옆으로 출력된다. */
	padding:12px 16px;
	text-decoration: none;
	color:block;
}

.dropdown-content a:hover{
	background-color: #f1f1f1;
}

.dropbtn{
	background-color: #4caf50;
	color:white;
	padding:16px;
	font-size:16px;
	border:none;
	cursor:pointer;
}

.dropdown:hover .dropdown-content{
	display:block;
}

<!-- .dropdown>button.dropbtn+.dropdown-content>a[href="#"]*3>{Link $} -->
<div class="dropdown" style="float: left">
   <button class="dropbtn">Left</button>
   <div class="dropdown-content" style="left:0">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
   </div>
</div>
<div class="dropdown" style="float:right">
   <button class="dropbtn">Right</button>
   <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
   </div>
</div>