정렬
- inline요소
- 부모block요소의 text-align속성을 통해서 정렬.
- 정렬대상 a, img, span과 h1~h6, p안의 text
- block요소
- margin속성(다른 요소와의 거리)를 이용해서 정렬
text-align : left, center, right
margin : top right bottom left
margin : _ auto ; _만큼 좌우 마진 똑같이 계산해서 지정
margin-left/ margin-right : auto; 좌 우측정렬
justify-content : center; 메인 축 정렬
align-items : center; 크로스 축 정렬
<div class="inline-wrapper">
<img src="../sample/image/flower1.PNG" style="width: 200px" alt="">
<br>
<span>안녕</span>
<br>
<a href="#">링크링크</a>
<br>
<h2>제목</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel perspiciatis nostrum dolores et voluptas dolorem. Quidem atque mollitia facilis suscipit nihil ipsam sequi! Magni quas nostrum rem temporibus necessitatibus possimus.</p>
</div>
<hr>
<div class="box"></div>
<div class="test">
<span>안녕</span>
</div>
가운데정렬되었음을 알 수 있다.
가운데정렬
우측정렬
가운데로 정렬됨.
좌우 정렬은 쉬우나 , 세로축 정렬은 쉽지않음!
https://velog.io/@hsecode/CSS-%EC%88%98%EC%A7%81-%EC%A4%91%EC%95%99-%EC%A0%95%EB%A0%AC
[CSS] 수직 가운데 정렬, 수직 중앙 정렬 하기vertical align
그냥 가운데에 놔주세요.. 아니! 세로로 중앙 정렬하기는 가로 중앙정렬처럼 간단하지 않다구요 🥺
velog.io
🔼수직 가운데 정렬 방법 🔼
Box model
- content
- padding : content와 border사이의 여백
- border : 경계영역
- margin : border와 다른 요소 사이의 여백
margin-collapse 현상 : 인접한 두 요소의 margin이 다른 경우, 큰 쪽의 margin 값을 적용한다.
border : _px solid 색상
padding : _px
margin: _px
<div class="box">
<span>안녕</span>
</div>
<hr>
<div class="square"></div>
여기서 '안녕' 글씨의 크기는 모두 같다.
padding은 테두리와 내부 사이의 간격이고 , margin은 테두리와 외부의 간격임을 알 수 있다.
경계선
border-width: 경계선 두께
border-style : solid
border-(top/right/bottom/left)-color : 경계선별 색상
border-radius : 둥글기 정도 (%) 최대 50%
outline : border의 바깥 테두리
<div class="box"></div>
<input type="text" id="username">
<img src="../sample/image/hyunta.jpg" alt="" id="mydog">
border가 bottom을 빼고는 제외되었고, outline이 점선으로 표시된 것을 확인할 수 있다.
border-radius : 10% / 30% / 50%
Display
display: inline; 너비 높이 무시하고 content가 차지하는 영역만 나타냄 (inline요소도 block으로 바꿀 수 있음)
display: inline-block; 하이브리드(block처럼 width와 height를 가지지만 inline요소)
display: block; block 요소(block요소도 inline요소로 바꿀 수 있음)
display: none; 보이지않기
display: hidden; 숨기기
opacity : 0~1까지 투명도 설정. 0=안보임, 1= 보임
<div class="wrapper">
<div class="box display-inline">1</div>
<div class="box display-inline">2</div>
<div class="box display-inline">3</div>
<div class="box display-inline">4</div>
<div class="box display-inline">5</div>
</div>
<div class="wrapper">
<div class="box display-inline-block">1</div>
<div class="box display-inline-block">2</div>
<div class="box display-inline-block">3</div>
<div class="box display-inline-block">4</div>
<div class="box display-inline-block">5</div>
</div>
<div class="wrapper">
<span class="box display-block">1</span>
<span class="box display-block">2</span>
<span class="box display-block">3</span>
<span class="box display-block">4</span>
<span class="box display-block">5</span>
</div>
display-inline의 경우 inline요소처럼 값이 있는 부분만 블록처리되고, 크기가 처리되지 않는다.
display-inline-block의 경우 block처럼 크기를 가지지만, inline요소처럼 정렬된다.
display-block의 경우 block요소로 한줄을 다 차지하고, 크기가 지정된다.
<h2>요소 숨기기</h2>
<!-- (.box+hr)*3 -->
<div class="box display-none"></div>
<hr>
<div class="box visibility-hidden"></div>
<hr>
<div class="box opacity-0"></div>
<hr>
display-none의 경우 아예 위치까지 사라진다.
아랫줄의 visibility:hidden의 경우, 요소가 존재하는 공간은 있지만, 숨겨져있다.
visibility의 경우 hover{visibility:visible;}로 해도 hover가 작동하지 않는다.
opacity를 사용해야한다.
목록
list-style-type : none/auto/desc... ; 목록의 앞부분.
float : 배치 (오른쪽부터 : right, 왼쪽부터 left)
<h1>목록관련</h1>
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">Javascript2015</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</nav>
스크롤후
메뉴에서 vw는 화면의 몇%를 차지할지를 의미한다. 80vw의 경우, 오른쪽 20%는 남겨두게 된다.
list-sytle-type은 리스트의 불릿을 없애거나 바꿀 수 있다.
float 는 흐름을 의미. right로 설정할 경우 오른쪽부터 시작된다고 보면 된다.
스크롤시 각자 끝에 있는 리스트가 변경되는 것을 볼 수 있다.