728x90
반응형
SMALL
Columns / TextBox / Flexbox
| 컬럼 (Column) | 컬럼을 사용하면 긴 텍스트를 더 쉽게 읽을 수 있는 형식으로 나눌 수 있다. 기사, 블로그 글 등의 콘텐츠를 여러 개의 컬럼으로 분할하여 가독성을 높이고, 모던한 디자인을 구현할 수 있다. CSS의 column-count와 column-gap 속성을 사용하여 컬럼의 개수와 간격을 조절할 수 있다. |
| 텍스트 박스 (Text Box) | 텍스트 박스는 사용자 입력을 받기 위한 공간을 제공한다. CSS를 사용하여 텍스트 박스의 모양, 크기, 테두리, 그리고 배경색 등을 조절할 수 있다. 또한, resize와 outline 속성을 사용하여 텍스트 박스의 크기 조절 가능 여부와 외곽선 스타일을 설정할 수 있다. |
| 플렉스박스 (Flexbox) | 플렉스박스는 웹 페이지의 요소들을 빠르고 유연하게 배치할 수 있는 강력한 레이아웃 도구이다. 플렉스 컨테이너 안의 아이템들은 크기, 순서, 위치 등이 동적으로 조절되어 반응형 웹 디자인에 적합하다. display: flex;를 사용하여 플렉스 컨테이너를 생성하고, justify-content, align-items, 그리고 order 등의 속성을 이용하여 플렉스 아이템들의 정렬과 배치를 조절할 수 있다. |
html
<!DOCTYPE html>
<html>
<head>
<title>Columns</title>
<style>
article {
column-count: 3;
column-gap: 40px;
/*
column-rule-style:solid;
column-rule-width: 1px;
column-rule-color: coral;
*/
column-rule: 1px solid coral;
}
article h1 {
column-span: all;
}
.textbox1 {
border: 2px solid;
padding: 20px;
width: 300px;
overflow: auto;
resize: both;
}
.textbox2 {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 10px;
}
.flex-container {
display: flex;
/*
flex-direction:column-reverse;
*/
justify-content: space-around;
width: 400px;
height: 250px;
background-color: #000000;
}
.flex-item {
background-color: lightblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
order: -1;
}
</style>
</head>
<body>
<article>
<h1>Article Title</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed
bibendum
magna, nec facilisis turpis. Nulla molestie vestibulum lacinia.
Pellentesque ipsum massa, posuere non rhoncus quis, aliquet et sem.
Mauris
interdum ornare pulvinar. Aliquam hendrerit eros a volutpat facilisis.
Morbi vel sapien lobortis, semper tellus consequat, eleifend elit.
Aliquam
quis tincidunt tortor. Proin luctus lobortis rhoncus. Sed ornare orci
lectus, id dapibus velit lacinia ut. Etiam at lacinia quam. Suspendisse
a
libero eget mi fermentum vehicula. Pellentesque habitant morbi
tristique
senectus et netus et malesuada fames ac turpis egestas.
</article>
<br />
<div class="textbox1">Try and resize this element</div>
<div class="textbox2">This element has a 10px outline</div>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item first">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
728x90
반응형
LIST
'Programming > Website' 카테고리의 다른 글
| [Website] 레이아웃 / 그리드 시스템 (0) | 2023.06.05 |
|---|---|
| [Website] 부트스트랩 (Bootstrap) (0) | 2023.06.01 |
| [Website] 트랜지션 (Transition) (0) | 2023.05.26 |
| [Website] 그림자 (Shadows) (0) | 2023.05.26 |
| [Website] 그레디언트 (Gradients) (0) | 2023.05.26 |
