Button 속성

<button class="btn btn-success" >1</button>
<button class="btn btn-info" >2</button>
<button class="btn btn-block" >3</button>
<button class="btn btn-block btn-defalut" >4</button>
<button class="btn-primary" >5</button>
<button class="btn btn-primary" >6</button>
<button class="btn btn-block btn-danger">7</button>
 

justify-content

flext 컨테이너 안에 있는 요소에 간격을 지정하는 것!

속성

• flex-start : 기본값으로 justify-content가 지정 되지 않은 경우 이것이 기본정렬
• flex-end : flext 컨테이너의 끝에 요소를 정렬한다. 행의 경우 오른쪽 끝, 열의 경우 하단 끝 
• space-between : 요소사이에 추가 공간을 두고 첫 번째 요소와 마지막 요소는 가장 자리로 밀려난다. 예를 들어 첫번째 항목은 컨테이너의 왼쪽에, 마지막 항목은 컨테이너의 오른쪽에 나머지 공간은 다른 요소에 균등하게 배분
• space-around : space-between와 비슷하지만 첫번째 요소와 마지막 요소가 컨테이너의 가장자리에 고정되어 있지 않다. 공간은 flex 컨테이너의 양쪽 끝에 절반의 공간을 두고 모든 항목 주위에 분산 된다.
• space-evenly : flex 컨테이너의 양쪽 끝에 전체 공간을 두고 flex 요소 사이에 공간을 균등하게 분배
• space-center : 모든 flex 요소를 flex 컨테이너 내부 중앙에 정렬!!

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

justify-content : flex-end

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    justify-content: flex-end;
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

justify-content : space-between

<style>
  #box-container {
    background: gray;
    height: 500px;
    display:flex;
    justify-content: space-between;
    
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

justify-content : space-around

<style>
  #box-container {
    background: gray;
    height: 500px;
    display:flex;
    justify-content: space-around;
    
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

justify-content : space-evenly

<style>
  #box-container {
    background: gray;
    height: 500px;
    display:flex;
    justify-content: space-evenly;
    
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

justify-content : center

<style>
  #box-container {
    background: gray;
    height: 500px;
    display:flex;
    justify-content: center;
    
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
 
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
 
 
</div>

justify-self 가 가로 정렬 이었다면

align-self 는 세로 정렬이다.

<style>
.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3 {background: PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

  
</style>

<div class="container">
  <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>

align-self

3번 상자에 align-self 속성을 사용해보자

셀 내부의 세로 정렬

• start :  셀 내부의 위쪽에 정렬
• center : 셀 내부의 중심에 정렬
• end : 셀 내부의 밑에 정렬

.item3 {
    background: PaleTurquoise;
    align-self : start;
  }

.item3 {
    background: PaleTurquoise;
    align-self : center;
  }

.item3 {
    background: PaleTurquoise;
    align-self : end;
  }

align-items

모든 항목에 대해 그리드 세로 정렬 

<style>
.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3 {background: PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

  
</style>

<div class="container">
  <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>

 align-items : start;

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    
     align-items : start;
  }

위쪽으로 정렬

align-items : center;

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    
     align-items : center;
  }

세로 가운데 정렬!!! ( 텍스트 세로 가운데 정렬을 하기 위해 vertical-align이나 baseline , line-height 속성을 공부하여 

적용 했는데 다 실패했었다)

이제 그리드 align-self , align-items를 사용하면 세로 가운데 정렬은 문제없다!!!

align-items : end;
  

아래쪽으로 정렬

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    
     align-items : end;
  }

실제로 화면 UI를 구현 하던 중

카드 폼 안에있는 글자를 세로 가운데 정렬하려고 많은 시행 착오를 겪었다.

const CardInfo = styled.div`
    
    display: grid;
    margin-left: 10px;
`;

div 태그 안에 있어서 vertical-align은 적용 되지 않았다.

vertical-align같은 경우 inline 이나 inline-block 요소에만 적용 되었다.

이때 align-items 속성을 사용하여

const CardInfo = styled.div`
    
    display: grid;
    align-items: center;
    margin-left: 10px;
`;

세로 가운데 정렬을 할 수 있었다.!!!

만약

align-items: end를 사용하면?

const CardInfo = styled.div`
    
    display: grid;
    align-items: end;
    margin-left: 10px;
`;

텍스트가 밑에 있는 것을 볼 수 있다.

<style>
.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  .item1{background: LightSkyBlue;}
  .item2{background: LightSalmon; }
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
</style>

<div class="container">
  <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>

justify-self

css  grid-layout 셀 내부의 위치를 가로로 정렬 

기본 값 :stretch ( 셀의 전체 너비를 채움)

상자 2에 justify-self의 속성을 사용해보자 

•  start :  내용을  셀 왼쪽에 정렬
• center : 내용을 셀 중앙에 정렬 
• end : 내용을 셀 오른쪽에 정렬

.item2 {
    background: LightSalmon;
    justify-self : start
   
  }

.item2 {
    background: LightSalmon;
    justify-self : center
   
  }

.item2 {
    background: LightSalmon;
    justify-self : end
   
  }

'

justify-items

모든 항목에 대해 적용 하고 싶을 때

<style>
.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  .item1{background: LightSkyBlue;}
  .item2{background: LightSalmon; }
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
</style>

<div class="container">
  <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>

5개의 상자를 감싸고 있는 컨테이너 클레스에 justify-items 속성 사용

justify-items : center 

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
   
    justify-items: center;
  
  }

justify-items : start

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
   
    justify-items: start;
  
  }

justify-items : end

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
   
    justify-items: end;
  
  }

색을 표현하는 방법

• 색이름으로 표기
• HEX값으로 표기
• RGB값으로 표기

색이름

css가 지원하는 표준 색이름을 사용한다.

white :흰색

aqua : 아쿠아색

beige: 베이지색

red: 빨간색

green

yellow

...........

등등

HEX값

16진수 표기법으로 광원(빛의 3원색)인 red, green, blue 조합으로 표기한다.

• #000000:  광원을 하나도 사용하지 않은 검정색으로 표시
• #ff0000: 명도와 채도가 가장 높은 빨간색이 표시
• #00ff00 : 명도와 채도가 가장 높은 초록색이 표시 
• #0000ff: 명도와 채도가 가장 높은 파란색으로 표시
• #ffffff: 광원 모두를 합한 색으로 흰색으로 표시

RGB값

RGB 각 광원당 256개의 숫자로 표기

• rgb(255,0,0): 빨강
• rgb(0,255,0): 초록
• rgb(0,0,255) : 파랑

display

HTML 요소의 레이아웃을 결정하는 가장 중요한 속성 중 하나는 display 입니다.

display : inline

inline 요소들은 다른 요소들과 같은 줄에 머무르려고 하는 성향과, 필요한 만큼의 가로 길이만 차지하는 성향이 있습니다.

다음 요소들은 기본 display 값이 inline 입니다.

1. <span>
2. <a>
3. <b>
4. <i>
5. <img>
6. <button>

<i> 태그는 기본적으로 inline이기 때문에 앞, 뒤의 텍스트와 같은 줄에 머무르고 있고, 가로 길이는 필요한 만큼만 차지하고 있습니다.

ex) 

<style>
        body{
                    background-color: gray;
                }
        span{
            background-color: red;
        }
</style>
</head>
<body>
    <p>html,css,javascript , <span>react</span> 공부하기</p>
</body>
</html>

inline 속성인 span에 배경색을 주면

필요한 만큼 자기 크기 만큼만 공간을 차지한다.

※  inline 요소는 필요한 크기만큼 공간을 차지하기 때문에 가로, 세로의 길이 개념이 딱히 없다.

 span{
            background-color: red;
            height: 100px;
        }

세로 길이를 100px 지정 해주었다.

결과는 변함이 없다. 만약 block 요소 <p>에 길이를 설정해준다면??  밑에서 확인

display : block

block 요소들은 다른 요소들과 독단적인 줄에 가려고 하는 성향과, 최대한 많은 가로 길이를 차지하는 성향이 있습니다.

다음 요소들은 기본 display 값이 block 입니다.

1. <div>
2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
3. <p>
4. <nav>
5. <ul>
6. <li>

<div> 태그는 기본적으로 block이기 때문에 새로운 줄에 가버립니다. 그리고 가로 길이는 최대한 많이, 100%를 차지한다.

ex)

<style>
        span{
            background-color: red;
        }
        body{
            background-color: gray;
        }

        p{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <p>html,css,javascript , <span>react</span> 공부하기</p>
</body>
</html>

<p> 태그에 배경색을 지정했다.

자기 글자 크기 만큼 배경색을 입히는 게 아니라

최대한 많이 가져간다.

※ block 요소는 가로,세로 길이를 직접 설정 해 줄 수 있다.

 p{
            background-color: skyblue;
            height: 100px;
        }

세로 길이가 늘어났다.

display : inline-block

inline 속성 처럼 같은 줄에 있으려고 하고,

block 속성 처럼 가로 세로 길이를 가질 수 있는

즉 둘 다 가질 수 있는 속성이다.

먼저 inline 요소 <span> 를 block 요소로 바꿔보자

inline -> block

 span{
            background-color: red;
            height: 100px;
            display: block;
        }
        
        
        
        <p>html,css,javascript , <span>react</span> 공부하기</p>

결과는?

분명 <p> 태그 안에있었는데 block 요소로 인해 자기만의 새로운 줄을 만들었고

세로길이도 적용이 되어 길어졌다.

덕분에 "공부하기" 글자가 이탈되었다.

※여기서 inline 속성인 span을 inline-block으로 바꾼다면??

inline -> inline-block

 span{
            background-color: red;
            height: 100px;
            display: inline-block;
        }
        
        
        <p>html,css,javascript , <span>react</span> 공부하기</p>

결과는?

inline 속성처럼 같은 줄에 머무르면서도 block 요소처럼 가로,세로 길이를 설정 할 수 있다.

가운데 정렬

inline 또는 inline-block 요소 일 경우

text-align : center;를 해주면 된다.

block 요소 일 경우

margin-left : auto;

margin-right : auto; 를 해주면 된다.

background-image

background-image: url("경로");

background-repeat

/* 반복하지 않음 */
background-repeat: no-repeat;

/* 가로 방향으로만 반복 */
background-repeat: repeat-x;

/* 세로 방향으로만 반복 */
background-repeat: repeat-y;

/* 가로와 세로 모두 반복 */
background-repeat: repeat;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */
background-repeat: space;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */
background-repeat: round;

background-size

/* 원래 이미지 사이즈대로 출력 */
background-size: auto;

/* 화면을 꽉 채우면서, 사진 비율을 유지 */
background-size: cover;

/* 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력 */
background-size: contain;

/* 픽셀값 지정 (가로: 30px, 세로: 50px로 설정) */
background-size: 30px 50px;

/* 퍼센트값 지정 (가로: 부모 요소 width의 60%, 세로: 부모 요소 height의 70%로 설정) */
background-size: 60% 70%;

background-position

/* 단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom) */
/* 아래와 같은 총 9개의 조합이 가능 */
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;

/* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */
background-position: 25% 75%;

/* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */
background-position: 100px 200px;

ex )

 <h1>css <span>공부</span>는 재밌어</h1>
    <ul>
        공부 리스트
        <li>JavaScript</li>
        <li>react</li>
        <li>Springboot</li>
        <li>unit test</li>
    </ul>
   <div> <p>하루 하루 <span>열심히 </span>살자</p> </div>

자식 관계와 자손 관계의 차이에 대해 살펴보자

div > span {

   
     color : hotpink;

}



div  span {

     color : hotpink;

}

span은 div 의 직계 자식이 아니고 자손( 포함 되어있음) 관계 이므로

div span {

    color : hotpink;

}

이 적용된다.

 body span {
        color: green;
        }

 body  li{
       color:blue;
        }
  div >  span {
       color:hotpink;
        
       }

div 의 직계 자식은 p 이고 span은 자손관계( 포함되어 있음) 이다.

 <h1>css <span>공부</span>는 재밌어</h1>
    <ul>
        공부 리스트
        <li>JavaScript</li>
        <li>react</li>
        <li>Springboot</li>
        <li>unit test</li>
    </ul>
   <div> <p>하루 하루 <span>열심히 </span>살자</p> </div>

그래서 div > span 태그는 적용 되지 않고

위에 있는 body span 태그가 적용이 되기 때문에

이런 결과가 나온다.

코드가 많지 않기 때문에 태그들에 각 스타일 속성을 입히기 쉽지만

태그가 다양하고 많을 때

직계 자손과 자식 관계를 고려하지 않으면

원치 않는 결과가 나올 수 있다. !!

속성 선택자

특정한 속성을 가지는 요소를  선택한다.

 <div><a href="#" title="코딩">코딩 기록</a></div>
  <div><a href="#">코린이 탈출하기</a></div>

두 개의 a 태그 중 위에 는 title이라는 속성이 있다.

이 차이점을 이용해 

위에 있는 a 태그에만 스타일 속성을 적용 하고 싶으면

 a[title]{
            text-decoration: none;
            font-weight: bold;
            font-style: italic;
            color:gray;
        }

타입 선택자  [속성 이름] {

}

를 사용하면 된다.

Front-end 공부 할 때 도움 되는 사이트

JSFiddle

jsfiddle.net/

 한 페이지 내에서 HTML, CSS, JavaScript를 모두 작성하고 바로 결과를 보여주는 사이트

W3Schools

www.w3schools.com/

- HTML, CSS, JavaScript뿐 아니라 jQuery, PHP, AngularJS, Bootstrap등 다양한 웹 기술들에 대한 설명과 예제가 나와있는 사이트

MDN JavaScript Document

Mozilla Developer Network(MDN)

JavaScript에 대한 문서를 제공해준다.

튜토리얼부터 스타일 가이드, 각 기능들에 대한 설명 등이 정리되어 있다.