- 내부/외부링크
- visibility
- float
- flex
- justify-content
- align-content
- align-items
1) 내부/외부링크
a 를 사용해 페이지 내 혹은 다른 페이지로 이동하는 연결 링크를 만들 수 있다.
<ul class="list">
<li><a href="#box1">제목1</a></li>
<li><a href="#box2">제목2</a></li>
<li><a href="#box3">제목3</a></li>
<li><a href="#box4">제목4</a></li>
</ul>
<div class="con-box">
<div class="con" id="box1">
<h2>타이틀1</h2>
</div>
<div class="con" id="box2">
<h2>타이틀2</h2>
</div>
<div class="con" id="box3">
<h2>타이틀3</h2>
</div>
<div class="con" id="box4">
<h2>타이틀4</h2>
</div>
</div>
위와 같이 타이틀이 적힌 box 4개를 각각 제목 1,2,3,4에 링크가 걸리도록 만들어 제목1을 누르면 box1이 있는 타이틀1로 화면이 이동하게 된다.
페이지 내부에서 뿐만 아니라 다른 페이지로도 링크를 연결할 수 있다.
<ul class="list">
<li>
<a href="01_내부링크.html#box1" target="_blank">제목1</a>
</li>
<li>
<a href="01_내부링크.html#box2" target="_blank">제목2</a>
</li>
<li>
<a href="01_내부링크.html#box3" target="_blank">제목3</a>
</li>
<li>
<a href="01_내부링크.html#box4" target="_blank">제목4</a>
</li>
</ul>
2) visibility
화면에는 존재하나 보이지 않게 하고 싶을때 사용한다.
*주로 장애인들을 위해 만들어 놓은 본문바로가기/메뉴바로가기에 쓰인다고 배웠다.
.box1 div {
width: 300px;
height: 100px;
background: skyblue;
}
.box2 div {
width: 300px;
height: 100px;
background: beige;
}
.box1 div {
width: 300px;
height: 100px;
background: skyblue;
visibility: hidden;
/* visibility: hidden; 화면에는 존재하나 보이지 않음 */
}
.box2 div {
width: 300px;
height: 100px;
background: beige;
/* overflow: hidden; 넘치는 부분 짤라서 보여줌*/
display: none;
/* 화면에서 사라짐(존재X) */
}
visibility:hidden과 display: none의 차이를 한눈에 확인할 수 있는 예시다.
visibility:hidden는 보이지만 않을뿐 존재하기에 내용물이 들어가 있는 상태이고, display: none은 존재하지 않게 되므로 내용물이 없어 박스가 사라진 모습이다.
.hide {
overflow: hidden;
visibility: hidden;
position: absolute;
left: -99999px;
/* display: none; 사용X 리딩기가 읽지 못함 */
}자주 사용하므로 hide class를 css에 만들어 쉽게 쓸 수 있다.
3) float
박스를 옆으로 나열하는 방벙중 하나이다.
공중으로 띄워서 옆으로 나열한다고 생각하면 된다.
.box div:nth-child(1) {
background: yellow;
float: left;
}
.box div:nth-child(2) {
background: skyblue;
}
.box div:nth-child(3) {
background: beige;
}
.box div:nth-child(4) {
background: pink;
}
.box div:nth-child(1) {
background: yellow;
float: left;
}
.box div:nth-child(2) {
background: skyblue;
float: left;
}
.box div:nth-child(3) {
background: beige;
float: left;
}
.box div:nth-child(4) {
background: pink;
float: left;
}
4) flex
위 내용을 옆으로 float를 사용해 나열하려면
.con-box ul li {
float: left;
width: 320px;
margin-right: 120px;
}
가로 너비를 지정하고 margin 값을 주어야 하지만 flex를 사용하면 간단하게 구현할 수 있다.
<div class="con-box">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
</div> .con-box {
padding: 10px;
border: 1px solid #000;
margin: 20px;
height: 400px;
display: flex;
}
부모(con-box)에 display:flex를 넣으면 자식(box1,2,3,4)들은 옆으로 나열하게 되며, 높이값을 주지 않으면 stretch가 높이가 된다.
위 예제에 flex를 사용해 보겠다.
li의 부모인 ul에 display: flex;
.con-box ul {
display: flex;
}
flex는 주축과 교차축을 기준으로 나열하게 되는데, 이 주 축(main-axis)을 flex-direction을 사용해 바꿀 수 있다.
display: flex;
flex-direction: row;
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
display: flex;
/* flex-direction: row; */
flex-direction: column;
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
display: flex;
/* flex-direction: row; */
/* flex-direction: column; */
flex-direction: row-reverse;
/* flex-direction: column-reverse; */
display: flex;
/* flex-direction: row; */
/* flex-direction: column; */
/* flex-direction: row-reverse; */
flex-direction: column-reverse;
row : 왼쪽에서 오른쪽 (기본값)
row-reverse : row의 반대 축으로
column : 위에서 아래로
column-reverse : column의 반대 축으로
또한 주 축의 정렬 방법을 justify-content를 사용해 바꿀 수 있다.
display: flex;
flex-direction: row;
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
display: flex;
flex-direction: row;
/* justify-content: flex-start; */
justify-content: flex-end;
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
display: flex;
flex-direction: row;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
justify-content: center;
/* justify-content: space-between; */
/* justify-content: space-around; */
display: flex;
flex-direction: row;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
justify-content: space-between;
/* justify-content: space-around; */
display: flex;
flex-direction: row;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
justify-content: space-around;
flex-start : 시작점으로 정렬(기본값)
flex-end : 마지막을 끝점으로 정렬
center : 가운데 정렬
space-between : 처음은 시작점에 마지막은 끝점에 사이 간격은 고르게
space-around : 좌우, 사이 간격 일정하게
마지막으로 내용이 한 줄일 땐 align-items, 두 줄 이상일 땐 align-content를 사용한다.
display: flex;
align-items: flex-start
/* align-items: flex-end; */
/* align-items: center; */
display: flex;
/* align-items: flex-start */
align-items: flex-end;
/* align-items: center; */
display: flex;
/* align-items: flex-start */
/* align-items: flex-end; */
align-items: center;
하지만 안에 내용이 길어져 줄바꿈을 하고 싶을 땐 flex-wrap: wrap; 를 사용해야 한다.
display: flex;
flex-direction: row;
flex-wrap: wrap;
이제 align-content를 사용해 정렬을 해보려고 한다.
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* align-content: flex-start; */
align-content: flex-end;
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* align-content: flex-start; */
/* align-content: flex-end; */
align-content: center;
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
align-content: space-between;
/* align-content: space-around; */
/* align-content: space-evenly; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
align-content: space-around;
/* align-content: space-evenly; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
align-content: space-evenly;
space-around와 space-evenly의 차이점은 위, 중간, 아래 공간을 보면 된다.