25일차(1)/CSS(3) : Float, Display
<PseudoElement>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step08_PseudoElement.html</title>
<style>
/*
[ 가상요소 선택자 ]
존재하지 않는데 존재한다고 가정되는 요소 => 가상요소
*/
p:first-letter{
font-weight: bold;
color: red;
}
#one:first-line{
background-color: yellow;
}
.quote:before{
content:"'";
color: red;
}
.quote:after{
content:"'";
color: blue;
}
</style>
</head>
<body>
<h1>Pseudo Element (가상요소) 선택자 활용</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At minima, adipisci sed. Quas animi ipsum rem veritatis ea impedit voluptas natus, tempore laborum necessitatibus quo cum. Iure voluptatem, cum sunt.</p>
<p id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim optio illo, dolorum ducimus veniam saepe placeat aliquid temporibus corrupti doloribus quas nobis quo quam incidunt, at amet, harum iusto voluptatem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis consequatur tempora id suscipit voluptates, culpa perspiciatis voluptatum consectetur soluta. Illo nemo ad cum repellat voluptas maxime alias, incidunt tempore fugit.</p>
<p class="quote">천리길도 한걸음 부터</p>
<p class="quote">열심히 공부하자</p>
<p class="quote">어쩌구.. 저쩌구...</p>
</body>
</html>
* Pseudo Element : 가상요소
- 존재하지 않는데 존재한다고 가정되는 요소
- 원래는 :: 콜론 두개인데 근데 굳이 두개나 안써도 작성에 문제는 없다.
- 가상클래스는 : 하나, 가상요소는 :: 두개
- before : 요소의 시작 전
- after : 요소의 끝나는 부분
- 어떤 요소의 바로 이전, 바로 이후 를 가리키는 것이라고 생각하면 된다.
- before/after 화살표 둘중 아무 곳이나 생각해도 된다.
- 위에서는 ' 를 넣고 각각 빨간색, 파란색을 지정한것
** Float
- float : 띄우다. 위로 띄우다
- 왼쪽으로 띄운다, 오른쪽으로 띄운다는 뜻
<Float01>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step09_Float.html</title>
<style>
.container{
width: 500px;
margin: 0 auto;
border: 1px solid blue;
}
.box{
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
}
/* id가 one인 요소를 왼쪽으로 띄우기 */
#one{
float: left;
}
/* id가 two인 요소를 오른쪽으로 띄우기 */
#two{
float: right;
}
</style>
</head>
<body>
<div class="container">
<h1>float 테스트</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem odio commodi,
saepe quidem, nobis illo neque repellat, ipsum laboriosam delectus laudantium.
Eligendi accusantium odio sint hic, quis aut a autem?</p>
<div class="box" id="one">div1</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nemo blanditiis ipsam,
voluptates vitae, reprehenderit optio tempore consequatur laborum earum officia
repellendus error consequuntur, eos voluptatum perferendis voluptate vel. Placeat.</p>
<div class="box" id="two">div2</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure reiciendis, ex odio
temporibus ea earum ipsum, a provident enim iusto eum ullam nostrum exercitationem
quaerat hic molestiae. Ipsa, repellat, hic.</p>
</div>
</body>
</html>
- 지금 container는 가운데 정렬이 되어 있음
- 가운데 정렬은 폭이 결정되어야 하고, 좌우 마진을 똑같이 주면 된다.
margin: 0 auto;
- 위쪽 0, 오른쪽 오토로 마진을 지정한 것
- 좌우마진을 auto 로 하면 양쪽이 똑같은 마진이 잡힌다. 그래서 가운데 정렬이 가능!
- em : 물려받은 글자크기의 단위
특별히 지정하지 않으면 브라우저의 기본 폰트사이즈는 16px이다.
user agent style
- 따로 지정하지 않아도 기본적으로 가지는 css
block-start (top)
block-end (bottom)
inline-start (left)
inline-end (right)
- 기억해두기! 블록의 시작, 블록의 끝 / 줄의 시작, 줄의 끝.
- p 위에 div가 올라와 있다. div가 떠 있다.
그림처럼 왼쪽으로 떠 있는 상태
- 단, 글자는 div요소 안으로 들어가지 않는다.
- float를 뺀다면 위와 같이 나타난다.
- 원래는 div도 블록요소이기 때문에 공간을 다 차지한다.
그런데 p 위로 띄우면서 inliine 요소처럼 사용할 수 있게 된 것!
- 글자와 함께 이미지를 왼쪽, 오른쪽에 배치하는 데 사용
<Float2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step09_Float2.html</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
float: left; /* left | right */
}
p{
clear: left; /* left | right | both*/
}
</style>
</head>
<body>
<h1>block 요소를 inline 요소 처럼 한줄로 배치</h1>
<div class="box">div1</div>
<div class="box">div2</div>
<div class="box">div3</div>
<div class="box">div4</div>
<div class="box">div5</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas repellat velit eius.
Minus nesciunt rem repellat officiis similique molestias voluptatem cum tempora, doloribus
quas autem. Perspiciatis eos, enim. Velit, numquam!</p>
</body>
</html>
- float가 없다면 block요소로 배치된다.
- float 하는 순간 최소한의 크기만 가지므로, 원하는 폭과 높이를 따로 지정해야 한다.(width, height)
- 블록요소를 한 줄로 배치하기위해서 float가 많이 쓰였다.
필요한 만큼의 폭과 높이를 가지면서 나란히 배치되기 때문에!
- p 요소에 지정된 clear: left; 가 없을 경우 보이게 될 상태!
- 아래의 p요소가 빈공간으로 말려들어가는 것을 방지해주는 기능
- float를 사용하면 clear요소가 따라오는경우가 많다.
- float는 그 다음 요소를 배치할때 영향을 많이 미치므로!
- 왼쪽 float left → clear left
오른쪽 float right → clear right
양쪽으로 자리가 있다면 → clear both
<Float03>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step09_Float3.html</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
float: left; /* left | right */
}
p{
clear: both; /* left | right | both*/
}
.wrapper{
border: 1px solid blue;
background-color: #999;
/* float 된 자식 요소를 감쌀수 있도록 설정 */
overflow: auto;
}
</style>
</head>
<body>
<h1>block 요소를 inline 요소 처럼 한줄로 배치</h1>
<div class="wrapper">
<div class="box">div1</div>
<div class="box">div2</div>
<div class="box">div3</div>
<div class="box">div4</div>
<div class="box">div5</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas repellat velit eius.
Minus nesciunt rem repellat officiis similique molestias voluptatem cum tempora,
doloribus quas autem. Perspiciatis eos, enim. Velit, numquam!</p>
</body>
</html>
- wrapper가 float 를 감싸고 있는 형태
- 원래 공중으로 뜨면(float) 감싸지 못하는데, 감싸게 하려고 overflow:auto 사용
- 전체를 감싸서 배경 색상을 넣고 싶은 경우 이렇게 사용한다.
<Float4>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step09_Float4.html</title>
<style>
.f-left{
float: left;
width: 200px;
border-right: 1px solid #999;
}
</style>
</head>
<body>
<h1>float 된 요소의 width 확인!</h1>
<!-- width 를 지정하지 않고 float 시키면 폭은 컨텐츠를 포함할 정도의 최소 크기의 width 만 가진다. -->
<div class="f-left">바나나</div>
<div class="f-left">바나나 딸기</div>
<div class="f-left">바나나 딸기 복숭아</div>
</body>
</html>
- width 를 지정하지 않고 float 시키면 폭은 컨텐츠를 포함할 정도의 최소 크기의 width 만 가진다.
<Float example>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step09_Example.html</title>
<style>
.container{
width: 768px;
margin: 0 auto;
}
/* ul 기본 스타일 제거 */
nav ul{
list-style-type: none;
padding: 0;
margin: 0;
}
nav li{
float: left;
}
p{
clear: left;
}
nav{
background-color: #000;
overflow: auto;
}
nav a{
text-decoration: none;
color: #999;
display: block;
padding: 10px 20px;
}
nav a:hover, nav a:focus{
color: #fff;
background-color: #999;
}
</style>
</head>
<body>
<div class="container">
<h1>네비게이션 요소 만들기</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Cafe</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo commodi quam odit, veritatis atque quas ex pariatur, maxime laborum cum recusandae magni deleniti cumque rem laboriosam nemo eaque esse! Ea!</p>
</div>
</body>
</html>
- 각각 style 요소 적용 전, 적용 후!
- li를 왼쪽으로 띄우고, overflow로 전체를 감싸 배경색 지정
- list-style-type: none; 으로 기존 서식 삭제
- <li> 에 float left 지정
- 대부분 단순한 링크도 구조를 맞춰서 배치한다. (ul, li 등)
- style이 없을 때에도 기본스타일은 있다. 위아래 margin 16px, padding 40px 등등 서식이 일부 있다.
- style을 추가하면서 본래 있던 ul 스타일을 제거하고 위에서부터 추가해가면서
float 속성을 사용해서 수정한 것!
<Display1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step10_Display.html</title>
<style>
#one{
/* 문서 객체는 만들어 졌지만 공간을 차지하지 않고
보이지 않게 하기 */
display: none;
}
</style>
</head>
<body>
<h1>display 속성 테스트</h1>
<button id="showBtn">눌러보셈</button>
<p id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus cupiditate
ea earum sequi aspernatur reprehenderit at quia, consequuntur consequatur iste quos
necessitatibus eveniet ipsam, vero, eaque iusto maiores, ipsum explicabo.</p>
<img src="images/kim1.png" />
<script>
document.querySelector("#showBtn")
.addEventListener("click", function(){
document.querySelector("#one").style.display="block";
});
</script>
</body>
</html>
** Display : 어떤 UI 를 보이게 할 것인지 숨길 것인지를 결정하는 CSS
display: none; : 해당 요소를 보이지 않게 하는 것
display: block; : 블록요소로 보이게 하는 것
- 기존 css를 override한 셈이다.
- display: none; 해두면 자리도 전혀 차지하지 않는다.
- 보이지는 않지만, p라는 문서객체는 만들어져 있는 것이다.
- 버튼을 누르면 inline css가 추가된다.
- javascript를 사용해서 style 로 추가되는 것!
document.querySelector("#showBtn").addEventListener("click", function(){
document.querySelector("#one").style.display="inline";
});
- javascript에서 수정하면서 inline css를 추가한다.
style.display="block" 으로 바꿔버리는 것이다.
- (문서객체).style.display 로 참조한다.
- inline CSS는 강력한 css로 내부 css(<style>)를 전부 재정의할 수 있다.
- 단, javascript에서 - 는 빼기 연산자로 인식되므로
.margin-top 대신에 .marginTop 형태로 써야 한다.(카멜 케이스)
ex) .marginTopWidth
- javascript로 조작하는 css는 inline CSS인 것을 기억하기!
<Display2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step10_Display2.html</title>
<style>
.wrapper{
border: 1px solid red;
}
span{
border: 1px solid green;
}
#one{
display: none;
}
</style>
</head>
<body>
<h1>인라인 요소의 display 조작</h1>
<button id="showBtn">눌러보셈</button>
<div class="wrapper">
<span>하나</span><span id="one">두울</span><span>세엣</span>
</div>
<script>
document.querySelector("#showBtn")
.addEventListener("click", function(){
document.querySelector("#one")
.style.display="inline";
});
</script>
</body>
</html>
- 보이지 않도록 하는 기능 : none
보이게 하는 기능 : inline !
- display: block or inline 을 사용해서 보이게 만들 수 있다.
- span은 언래 inline 요소이기 때문에 inline을 넣어준 것이다. block이라고 넣어주면 블록요소가 되어버린다.
- inline 요소를 보여주기위해서는 inline을 써야 한다.
<Display3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step10_Display3.html</title>
<style>
/*
[ inline 요소 ]
- width 와 height 를 지정할수 없다.
- left & right margin, padding 을 가질수 있다.
- top & bottom margin, padding 을 가질수 없다.
- 왼쪽과 오른쪽에 다른 요소가 올수 있다.
*/
#one{
border: 1px solid red;
display: inline;
}
/*
[ inline block 요소 ]
- width, height, margin, padding 모두 가능
- 왼쪽과 오른쪽에 다른 요소가 올수 있다.
*/
#two{
border: 1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<h1>inline vs inline-block</h1>
<div id="one">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
<div id="two">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
</body>
</html>
- inline은 좌우 margin, padding 요소는 가질수있지만 위아래 margin, padding 요소는 가질 수 없다.
- inline-block : inline과 block 두 가지 모두의 성격을 가지고 있는 것이 inline-block!!
[ inline 요소 ]
- width 와 height 를 지정할 수 없다.
- left & right margin, padding 을 가질 수 있다.
- top & bottom margin, padding 을 가질 수 없다.
- 왼쪽과 오른쪽에 다른 요소가 올 수 있다.
[ inline block 요소 ]
- width, height, margin, padding 모두 가능
- 왼쪽과 오른쪽에 다른 요소가 올 수 있다.
- 창의 폭을 줄여보면 inline-block은 하나의 덩어리로 이동하고, inline 은 줄 단위로 흐른다는 차이를 볼 수 있다.
<Display4>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step10_Display4.html</title>
<style>
span{
border: 1px solid red;
width: 100px;
height: 100px;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>img 요소는 inline 요소 이지만 inline-block 요소 처럼 동작한다.</h1>
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<span>span 요소</span>
<span>span 요소</span>
</body>
</html>
- span은 inline 요소이고, 위아래 서식을 넣을 수 없다.
- img이미지는 inline 요소이지만, width, height를 둘다 가질 수 있다.
→ inline-block 요소처럼 사용 가능!
<Display Example>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step10_Example.html</title>
</head>
<body>
<h1>display 속성 활용</h1>
<button id="hideBtn">숨기기</button>
<button id="showBtn">보이기</button>
<button id="toggleBtn">토글</button>
<br/>
<img src="images/kim1.png" id="one"/>
<script>
document.querySelector("#hideBtn")
.addEventListener("click", function(){
document.querySelector("#one")
.style.display="none";
});
document.querySelector("#showBtn")
.addEventListener("click", function(){
document.querySelector("#one")
.style.display="inline";
});
//보였다 숨겼다를 반복(토글) 시키기
document.querySelector("#toggleBtn")
.addEventListener("click", function(){
//현재 display 의 value 값을 읽어온다.
let current=document.querySelector("#one").style.display;
if(current=="none"){
//보이게 한다.
document.querySelector("#one").style.display="inline";
}else{// "" or "inline"
//안보이게 한다.
document.querySelector("#one").style.display="none";
}
});
</script>
</body>
</html>- 이미지를 보이거나 숨겨지게 하는 버튼을 사용 (display)
- 토글을 클릭해보면 #one의 style 속성이 계속 바뀐다.
- 보였다 숨겼다를 반복하려면, 현재 none인지 아닌지를 알아내서 if~else문으로 묶어서 작성한다.
- 현재 디스플레이 속성의 value를 읽어와서 그 값에 따라 다르게 실행되도록 하면 된다.
document.querySelector("#showBtn").addEventListener("click", function(){
document.querySelector("#one").style.display="inline";
});
- 퀴즈문제 직접 만들어보기
'국비교육(22-23)' 카테고리의 다른 글
| 25일차(3)/CSS(5) : Bootstrap, Form, Grid, Flex (1) | 2022.11.10 |
|---|---|
| 25일차(2)/CSS(4) : Text, CSS가중치, Unit 외 (0) | 2022.11.09 |
| 24일차(3)/CSS(2) : Margin, Padding, Border / Pseudo Class / Position (0) | 2022.11.09 |
| 24일차(2)/CSS(1) : 내부, 외부, inline CSS / Selector (0) | 2022.11.08 |
| 24일차(1)/java(36) : JDBC 실습예제 (Friend 프레임) (0) | 2022.11.08 |