Flex Container

• display Flex Container를 정의
• flex-flow, flex-direction와 flex-wrap의 단축 속성
• flex-direction Flex Items의 주 축(Main Axis)을 설정
• flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정
• justify-content 주 축(Main Axis)의 정렬 방법을 설정
• align-content 교차 축(Cross Axis)의 정렬 방법을 설정(2줄 이상)
• align-items 교차 축(Cross Axis)에서 Items의 정렬 방법을 설정(1줄)
• gap 각 아이템 사이의 간격을 설정

flex-wrap = 여러 줄 바꿈 가능
원래 기본 값은 flex로 정렬시
정해져 있는 가로 길이에 상관 없이 화면 밖으로 가로로 쭉 나열 되는데
wrap 속성을 주게 되면 자동 줄바꿈이 되게끔 설정할 수 있습니다.

ex) flex-wrap: wrap;

배경 background

background-image = 배경을 색상이 아닌 이미지로 설정하고 싶을 때 사용하는 속성

• image가 폴더 안에 다운 받아져 있다면 폴더의 경로 복사
• url로 배포 되어 있는 이미지면 background-image: url(https:// ~ ); url과 괄호가 필요함

만약 이미지의 사이즈가 채워야할 배경의 크기보다 작다면

background-size: cover로 전체 크기를 감싸는 속성을 줘야함

기본 이미지의 사이즈가 채워야할 배경의 크기보다 작으면
이미지를 배경의 크기에 맞게 여러번 반복해서 채우는게 기본값인데
여백 상관없이 이미지 1개로 설정하고 싶다면

background-repeat: 에서 no-repeat으로 반복하지 않게끔 설정

배경 색상에 그라데이션을 주고 싶다면

background linear-gradient 속성을 사용하면 된다.
ex) background linear-gradient : (180deg, rgba(0, 200, 120, 1) 0%, rgba(0, 200, 228, 1) 100%);

배경의 투명도를 설정하고 싶다면

background-color rgba(255, 255, 255, 0)
rgb의 4번째 숫자에 0부터 1까지의 소수점값으로 투명도를 설정할 수 있다.

background: transparent = 투명하게 만드는 속성
ex) input type="text" style="background: transparent" = 입력창 투명하게
ex) input type="search" style="background: transparent" = 검색창 투명하게

가상요소

html 파일에 예를 들어 클래스 안에 <i></i> 를 입력했을 시
i::before 와 i::after로 가상요소 생성 가능

다만 i에 부모 조건으로 position : relative와 가상요소에 position : absolute가 있어야 한다.

top과 left로 위치 조정

before와 after에 content로 무조건 빈 공백이라도 들어가야함 ex) content : ""
color와 background-color로 색상을 입힐 수 있고
border로 테두리 생성 가능
rotate로 기울이기 가능 ( deg 값을 사용 )

.search > i {
    width: 20px;
    height: 20px;
    position: relative;
    cursor: pointer;
    }

커서

cursor : pointer = div, span 등등

포인터를 지정 할 수 없는 클래스나 id에 포인터 지정 해주는 속성
원래 i는 마우스 커서를 올려도 바뀌는 반응이 없었는데
커서 포인터를 입력해 줌으로써 클릭으로 바뀌는 반응이 생김

input 창 관련 속성

text-decoration = 글자의 효과에 관여하는 속성
ex) text-decoration: none; = 글자의 효과를 없애줌
ex) text-decoration: line-through; = 가운데 줄을 그어줌

outline: none; = 아웃라인을 없애는 기능
ex) search 즉 검색창에 마우스로 클릭 했을 때 테두리가 나오게 되는 것을 없애주는 기능

hover = 마우스 커서를 올렸을 때 행동되는 속성을 부여하는 것
search:hover = 검색창에 마우스 커서를 올렸을 때 border-bottom: 1px solid red를 입력했을 시
마우스 커서를 올렸을 때 밑줄이 빨간색으로 바뀜

.wrap > .search > #search:hover {
	border-bottom: 1px solid rgb(56, 56, 247);
}

focus = 클릭 했을 때 행동되는 속성을 부여하는 것
search:focus = 검색창을 마우스로 클릭 했을 때
border-bottom: 1px solid red를 입력하면 클릭 된 이후 밑줄이 빨간색으로 바뀜

.wrap > .search > #search:focus {
    border-bottom: 1px solid blue;
}

border: "none"; = 테두리 없애기

font-weight = 폰트 두께 지정

• 여러 개의 속성이 있지만 bold는 숫자 700값과 동일
• 100부터 900까지 지정 가능 900 초과 하는 숫자는 입력 불가

line-height = 텍스트 행 간의 높이 설정 속성

• 1부터 소수점으로 증가

레이아웃 관련 정리

text 하나하나 간격 조절을 해주려면 레이아웃 하나하나 html 태그로 영역을 나눠줘야 한다.
일단 전체를 레이아웃으로 하나 묶고 레이아웃 하나하나 html 태그로 쪼개줘야 함

예를 들어 홈페이지에 < 1 2 > 와 같은 페이지 버튼과 왼쪽 오른쪽 넘기는 버튼이 있을 때

이거를 구현하고 간격을 넓히고 싶으면

< 레이아웃 하나 / 1 레이아웃 하나 / 2 레이아웃 하나 / > 레이아웃 하나
이렇게 총 4개의 레이아웃을 1개의 레이아웃으로 묶어서 속성을 부여해야 함

레이아웃을 나눴을 때 속성을 부여하는 여러가지 방법 ( css file )

• .묶은 레이아웃 이름 div
• .묶은 레이아웃 이름 > div:nth-child(숫자)
• .묶은 레이아웃 이름 > "" -> div id or class ="" 태그에 id(#)나 class(.)를 부여

이렇게 하고 div 안에 프린트 해야 할 문자나 숫자 입력

<div><</div>
<div>1</div>
<div>2</div>
<div>></div>

꺽쇠는 되도록 태그를 열고 닫고 할 때만 사용할 것
html 안에 "<" 를 이제 왼쪽으로 넘어가는 페이지 버튼이나 텍스트로 사용하려고 할 때

<i></i> 처럼 < 이렇게 사용 하는게 아닌 문자열로 < 사용 하려고 했을 때 오류가 날 수도 있음

태그를 직접 선택하려면, 점이나 샾을 붙히지 말고 이름 그대로.

링크

<a href="http://www.tcpschool.com">티씨피스쿨 사이트로 이동!</a>

하이퍼링크 개념으로 이미지나 텍스트를 클릭 했을 때
링크로 연결된 곳으로 이동 할 수 있게 연결해주는 속성