정렬 기준
- 인라인 요소
- 상위 블록 요소의 text-align 속성을 통해 정렬합니다.
- a, img, span 및 h1~h6, p의 텍스트를 정렬해야 합니다.
- 블록 요소
- 모서리 속성에 따라 정렬(다른 요소와의 거리)
텍스트 정렬 : 왼쪽, 가운데, 오른쪽
가장자리 : 오른쪽 위 왼쪽 아래
가장자리 : _ 자동적 인 ; _까지 동일한 왼쪽 및 오른쪽 여백을 계산하여 지정합니다.
왼쪽 여백/오른쪽 여백 :자동차; 좌우 정렬
정당화-내용 : 센터; 주축 방향
정렬 요소 : 센터; 교차 축 정렬
<div class="inline-wrapper">
<img src="http://cheerup313.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% 교류
(CSS) 세로 가운데 정렬, 세로 가운데 정렬
그냥 중간에 넣어.. 안돼! 수직으로 중앙에 맞추는 것은 수평으로 정렬하는 것만큼 쉽지 않습니다.
velog.io
세로 중심 정렬 방법
<div class="box">
<span>안녕</span>
</div>
<hr>
<div class="square"></div>
여기서 “Hello” 글꼴의 크기는 동일합니다.
가구류경계와 내부 사이의 거리, 가장자리이것이 국경과 외부 사이의 거리임을 알 수 있습니다.
마우스를 올리면 그림자가 어두워지는 호버 기능도 만들었습니다!
국경
프레임 폭: 가장자리 두께
테두리 스타일 : 단단한
테두리(위/오른쪽/아래/왼쪽) 색상 : 모서리별로 색상 지정
경계 반경 : 진원도(%) 최대 50%
개요 : 경계의 외부 한계
<div class="box"></div>
<input type="text" id="username">
<img src="http://cheerup313.sample/image/hyunta.jpg" alt="" id="mydog">
아래쪽 테두리를 제외하고는 테두리가 제외되고 외곽선이 점선으로 표시되어 있는 것을 확인할 수 있습니다.
테두리 반경: 10% / 30% / 50%
광고
디스플레이: 인라인; 너비와 높이를 무시하고 콘텐츠가 차지하는 영역만 표시(인라인 요소도 블록으로 대체 가능)
디스플레이: 인라인 블록; 하이브리드(블록처럼 너비와 높이가 있지만 인라인 요소)
화면 잠금; 블록 요소(블록 요소는 인라인 요소로도 대체 가능)
디스플레이: 없음; 보이지 않는
디스플레이: 숨김; 숨다
불투명도: 투명도를 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-block의 경우 블록과 크기는 같지만 인라인 요소처럼 정렬됩니다.
display-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”의 경우 요소가 들어갈 공간은 있지만 숨겨져 있습니다.
가시성을 위해 Hover는 hover{visibility:visible;}에서도 작동하지 않습니다.
불투명도를 사용해야 합니다.
목록
목록 스타일 유형 : 없음/자동/desc… ; 목록의 첫 번째 부분.
플로트: 배열(오른쪽에서: 오른쪽으로, 왼쪽에서 왼쪽으로)
<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-style-type은 목록에서 글머리 기호를 제거하거나 변경할 수 있습니다.
플로트는 흐르다라는 뜻입니다. 오른쪽으로 돌리면 오른쪽에서 시작됩니다.
스크롤하면 각 끝에서 목록이 변경되는 것을 볼 수 있습니다.