728x90

플렉스 박스 항목을 배치하는 속성

종류 설명
justify-content 주축 방향의 정렬 방법
align-items 교차축 방향의 정렬 방법
align-self 교차축에 있는 개별 항목의 정렬 방법
align-content 고챠축에서 여러 줄로 표시된 항목의 정렬 방법

 

 

 

display 속성

  • flex - 블록레벨 요소로 배치
  • inline-flex 인라인 레벨 요소로 배치

 

플렉스 항목의 줄을 바꾸는 flex-wrap 속성

  • nowrap - 플렉스 항목을 한줄에 표시 (default)
  • wrap - 여러줄에 표시
  • wrap-reverse - 여러줄에 표시하되, 시작점과 끝점이 바뀜

 

배치방향과 줄 바꿈을 한번에 지정하는 flex-flow 속성

cf) {flex-flow : row wrap;} - 왼쪽에서 오른쪽, 여러줄

#a {flex-flow : row wrap;} - 왼쪽에서 오른쪽, 여러 줄
#a {flex-flow : row nowrap;} - 왼쪽에서 오른쪽, 한 줄

 

justifty-content 속성 ( 플렉스 항목 간의 정렬 방법)

#a {justify-content: flex-start;} /* 주축 시작점 기준 */
#a {justify-content: flex-end;} /* 주축 끝점 기준 */
#a {justify-content: center;} /* 주축 중앙 기준 */
#a {justify-content: space-between;} /* 시작 점과 끝 점 배치 후 같은 간격 */
#a {justify-content: space-around;} /* 전체 항목 같은 간격 */

 

align-items 속성 ( 교차축 정렬 방법)

#a {align-items: flex-start;} /* 주축 시작점 기준 */
#a {align-items: flex-end;} /* 주축 끝점 기준 */
#a {align-items: center;} /* 주축 중앙 기준 */
#a {align-items: baseline;} /* 문자 기준선에 맞춰 배치 */
#a {align-items: stretch;} /* 항목을 늘려 교차축에 가득 차게 배치 */

 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .con{
            background-color: aliceblue;
            height: 100vh;
            display: flex; /*span처럼 가로방향으로 자신의 width만큼 배치됨*/
            flex-direction: row-reverse;
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: orange;
        }
        .item3{
            background-color: yellow;
        }
        .item4{
            background-color: green;
        }
        .item5{
            background-color: blue;
        }
        

    </style>
</head>
<body>
    <div class="con">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
    </div>
</body>
</html>

 

 

 

728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] transition & animation  (0) 2024.03.27
[CSS] transform  (0) 2024.03.27
[CSS]배경 이미지 넣기  (0) 2024.03.27
[CSS] 간단 예시  (0) 2024.03.27
[CSS] 표 꾸미기  (0) 2024.03.26
728x90

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    span{
        transition: font-size 5s;
    }
    span:hover{
        font-size: 500%;
    }
  </style>
</head>
<body>
    <p><span>성공!!!!</span>글자에 마우스 올려줘</p>
</body>
</html>

 

 

크기 변환 애니메이션

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    @keyframes test {
        from {font-size: 500%}
        to(font-size: 100%;)
        
    }
    h2{
        animation-name: test;
        animation-duration: 4s;
        animation-iteration-count: infinite;
    }
   /* span{
        transition: font-size 5s;
    }
    span:hover{
        font-size: 500%;
    }*/
  </style>
</head>
<body>
    <h2>성공!!</h2>
    <p>마우스올려라!!</p>
</body>
</html>

 

728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] 플렉스박스  (0) 2024.03.28
[CSS] transform  (0) 2024.03.27
[CSS]배경 이미지 넣기  (0) 2024.03.27
[CSS] 간단 예시  (0) 2024.03.27
[CSS] 표 꾸미기  (0) 2024.03.26
728x90

<!DOCTYPE html>
<html lang="en">
<head>
 <style>
    div{
        background-color: palevioletred;
        display: inline-block;
    }
    #ro{transform: rotate(30deg);}
    #sk{transform: sken(0deg, -20deg);}
    #tr{transform: translateY(100px);}
    #sc{transform: scale(3,1);}
 </style>
</head>
<body>
    <div id="ro">rotate</div>
    <div id="sk">sken</div>
    <div id="tr">tranlate</div>
    <div id="sc">scale</div>
</body>
</html>
728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] 플렉스박스  (0) 2024.03.28
[CSS] transition & animation  (0) 2024.03.27
[CSS]배경 이미지 넣기  (0) 2024.03.27
[CSS] 간단 예시  (0) 2024.03.27
[CSS] 표 꾸미기  (0) 2024.03.26
728x90

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            background-color: #02233b;
        }

        #container {
            background-color: white;
            margin: 0 20px;
            height: 39em;
            background-image: url(다운로드.jpg);
            background-repeat: no-repeat;
            background-position: right bottom;
        }

        p {
            font-size: large;
            font-weight: bold;
            color: goldenrod;
        }

        h1 {
            background-color: #004344;
            color: white;
            height: 100px;
            text-align: center;
            line-height: 2.5;
            margin: auto;
        }

        h2 {
            text-align: center;
            color: olive;
        }

        ul {
            line-height: 30px;
        }
    </style>
</head>


<body>
    <div id="container">
        <h1>대학언론사 수습기자 모집</h1>
        <h2><em>신입생 여러분을 기다립니다</em></h2>
        <br>
        <p>모집분야</p>
        <ul>
            아나운서(0명) : 학내 소식을 라디오 방송으로 보도<br>
            오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작<br>
            엔지니어(0명) : 라디오 방송 녹음 및 편집
        </ul>

        <P>혜택</P>
        <ul>
            수습기자 활동 중 소정의 활동비 지급<br>
            정기자로 진급하면 장학금 지급
        </ul>
    </div>
</body>

</html>
728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] transition & animation  (0) 2024.03.27
[CSS] transform  (0) 2024.03.27
[CSS] 간단 예시  (0) 2024.03.27
[CSS] 표 꾸미기  (0) 2024.03.26
[CSS] 리스트/아이템 꾸미기  (0) 2024.03.26
728x90

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    label{
        display: block;
        padding: 10px;
    }
    label span{
        float: left;
        width: 80px;  
    }
    input[type=text]{
        color:red;
    }
    input:hover, textarea:hover{
        background-color: pink;
    }


</style>
</head>
<body>
    <form>
        <label><span>Name</span>
            <input type="text" placeholder="Gildong"><br>
        </label>
        <label><span>Email</span>
            <input type="email" placeholder="Gildong@naver.com"><br>
        </label>
        <label><span>Msg</span>
            <textarea placeholder="메시지를 남겨줘"></textarea>
        </label>
        <label><span></span>
            <input type="submit" value="제출"><br>
        </label>


    </form>

</body>
</html>
728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] transform  (0) 2024.03.27
[CSS]배경 이미지 넣기  (0) 2024.03.27
[CSS] 표 꾸미기  (0) 2024.03.26
[CSS] 리스트/아이템 꾸미기  (0) 2024.03.26
[CSS] 박스배치(position)  (0) 2024.03.26
728x90

 

 

표 테두리

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            display: inline-block;
            width: 200px;
            height: 50px;
            text-align: center;
            margin: 20px;
        }
        #d1{
            border: 5px solid black;
        }
        #d2{
            border: 5px dotted black;
        }
        #d3{
            border: 5px dashed black;
        }
    </style>
  
</head>
<body>
    <div id="d1">실선</div>
    <div id="d2">점선</div>
    <div id="d3">점선 테두리</div>
</body>
</html>

 

예시)

<!DOCTYPE html>
<html>

<head>
    <style>
        table{border : 1px solid blue;}
        border-collapse: collapse };
       th{
        height: 40px;
        width: 100ox;
       }
       td{
        height: 40px;
        width: 100px;
       }
       th, td{
        border:1px dotted gold;
       }
       tr:hover{
        background-color: blanchedalmond;
       }
       tbody tr:nth-child(odd){
        background-color: greenyellow;
       }
       tbody tr:nth-child(even){
        background-color: lightpink;
       }
    </style>
</head>

<body>
    <h3>1학기 성적</h3>
<hr>
<table> 
	<thead>
		<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>합</th><th>175</th><th>169</th></tr>
	</tfoot>
	<tbody>
		<tr><td>황기태</td><td>80</td><td>70</td></tr>
		<tr><td>이재문</td><td>95</td><td>99</td></tr>
	<tbody>
</table> 

</body>

</html>
728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS]배경 이미지 넣기  (0) 2024.03.27
[CSS] 간단 예시  (0) 2024.03.27
[CSS] 리스트/아이템 꾸미기  (0) 2024.03.26
[CSS] 박스배치(position)  (0) 2024.03.26
[CSS] 박스 유형 제어(display)  (0) 2024.03.26

+ Recent posts

티스토리툴바