HTML

CSS

1. 이미지

1) 이미지 정렬

이미지 가운데 정렬 방법

1. display: block;
   margin-left : auto;
   margin-right : auto;

2) 이미지 채우기

• background-size: cover - 배경이 잘리는 것과 상관없이 배경을 가득 채우게 하는 명령어

• background-size: contain - 배경이 잘리지 않는 선에서 최대한 배경을 채운다.

• background-position: - 좌우상하 가운데 등 이미지가 채워질 위치 설정

1) 그라데이션

1.선형 그라데이션 : linear-gradient

linear-gradient('그라데이션 방향',시작색, 마지막색)

• 여기서 색은 추가 가능
• %로 비율 설정가능
• 방향은 to top, to right, to right bottom 등으로 설정

2. 원형 그라데이션 : radial-gradient

3) 이미지 꾸미기

1. filter

• 기본형 filter : - 글씨에도 필터가 적용됨
  brightness() - 밝기 / saturate() - 채도 ...etc

4) 아이콘 넣기 (font awesome)

1. https://fontawesome.com/ 폰트 어썸 사이트에 들어가서 파일을 다운 받는다.
2. link 태그를 통해 다운받은 파일을 연결한다. (all.css)
3. 폰트 어썸 사이트에서 다운받은 버전과 같은 버전의 페이지로 이동하여 코드를 받아 입력한다.

• 코드 뒤에 fa-nx을 입력하여 아이콘의 크기를 조절할 수 있다. (n자리에 넣고 싶은 숫자 입력) 폰트로 취급하기 때문에 폰트처럼 코드 주면 됨

  또한
  link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
  integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />

  이런 식으로 사이트에서 바로 가져올 수 있다.
  

2. 글자

class/id 차이

• class를 주로 씀

1. id가 우선

a 태그

• text-decoration : none - 기본값인 밑줄을 없앤다.
• pesudo class로 클릭 후 색깔을 변경할 수 있다
  css에서 :visited로 설정/ :link는 클릭전 기본 색상 변경가능

글자 스타일링

• 자간 설정
  letter-spacing: npx;
  
• 글자 정렬
  text-align: center; , left ...etc
  
• 글자 굵기
  1) font-weight : 100 ~ 900
  2) strong 태그 사용
  
• 살짝 깨진 글자 선명하게 하기(맥은 제외)
  transform: rotate(0.03deg) 으로 기울기를 극소량만 주면 깨끗해진다.

글꼴 설정

fonts.google.com - 구글 폰트

font-family : 로 저장된 글꼴 불러오기

• 하드에 글꼴이 설치가 되어 있지 않으면

  	@font-face { font-family : '작명'; 
  	src : url(../font/파일위치를 설정); }

으로 글꼴을 설정해준다.

3. 도형

도형 스타일링

• 그림자

  	box-shadow: x축, y축, 블러, 색상;

  x축으로 얼마나 보이는 지(-값이면 왼쪽으로 나옴)
  y축으로 얼마나 보이는 지(-값이면 위쪽으로 나옴)
  

실제 사이즈와 보이는 사이즈

padding이나 border를 적용하면 설정한 컨텐츠 사이즈보다 더 넓어진다.
내가 원하는 실제 컨텐츠를 설정해도 보이는 크기는 더 크다. 이를 해결하기 위해
box-sizing: border-box;를 통해서 맞춰준다.
div { box-sizing:border-box} 등으로 css 파일에 설정해두면 편함

5. 배치

1) block/inline

• block : 가로행을 전부 차지 (div,
• inline :
• inline-block : 내 크기만큼 공간을 차지, display 속성을 사용하여 변경

float

1) 이것은 두개의 block을 나란해 배치 하고자 할 때 block의 속성때문에 위아래로 배치되는 데 이때 float 속성을 사용하여 좌우로 배치가 가능하다.
이렇게 배치한 두 블록 아래에 새로운 블록을 넣으면 float의 속성 때문에 두 개의 블록 뒤로 배치가 되는데
clear: both 를 사용하면 아래쪽에 배치된다.

2) inline-block 이나 inline 요소에서만 vertical-align을 설정할 수 있다.

2) margin collapse 효과

박스의 테두리가 만나면 marign이 공통으로 적용이 된다.
ex) 이미지와 글자의 테두리가 붙어있으면 글자에 marign-top을 적용할 때
이미지도 같이 margin-top이 적용된다. 그래서 이미지 파일에 padding-top: 1 또는 -1를 적용하여 떨어뜨려준다.

3) position

• relative : 현재 내 위치를 기준으로 위치가 바뀜
• fixed : 뷰포트(현재 화면)을 기준으로 위치가 바뀌며 이는 스크롤이 바뀌어도 그자리에 위치함
• absolute : 부모태그에 relative가 설정되어 있으면 부모태그를 기준 으로 위치가 바뀜

absolute에서 가운데 정렬하는 법

• left와 right를 0으로 설정하고 margin: 0 , width를 적당히 주면 가운데 정렬이 된다.

sticky

• fixed와 비슷하나 화면에 처음부터 고정이 되어있는 fixed와 달리 자식태그에서 본인이 설정한 값에 도달하면 화면에 고정이 되고 스크롤이 부모태그를 넘어가면 sticky가 풀린다.

  	position : sticky

  top : 100px

  위에서 100px 띄워져서 고정 (스티키를 적용한 요소가 나타나도 100px이 띄워져야 고정이 된다.)

  부모 태그에서 설정한 높이가 지나면 풀린다.

4) 반응형 웹

• Max-width; 최대 넓이(창을 늘려도 설정값까지만 커져라)
• min-width; 최소 넓이(창을 줄여도 설정값까지만 작아져라)

화면 크기에 맞는 비율로 크기 조절

• 단위
  vw(viewport width) : 브라우저 크기에 비례하여 변화
  vh(viewport height) : 브라우저 높이에 비례하여 변화 rem : 16px의 배수 ex) 10rem은 16px의 10배, 160px
  

크기 별로 사이즈 설정하기

• css 맨 아래부분에 코드를 입력한다

  	@media screen and (max-width: n px) {

  .클래스명
  }

  0에서 n px까지의 크기에서는 아래에서 설정한 대로 적용

  • 크기별로 여러개 설정가능 이때 큰것부터 작성

• breakpoint 설정
  사용 기종에 따라자주 쓰는 변곡점이 있다.
  1200, 992px -> 태블릿용 사이즈
  768, 576px -> 스마트폰용 사이즈

5) normalize

https://github.com/necolas/normalize.css/blob/master/normalize.css

6) Flex

https://flexbox.help/

여러 박스를 원하는 대로 배치 가능

• flex-direction : ____; - 배열방향을 설정(좌우, 위아래)

• flex-wrap : nowrap, warp - 각 요소의 크기가 지정된 넓이를 초과할 시 줄바꿈으로 나타나는 지(wrap) 한줄 안에서만 위치하는 지(nowrap) 설정

• justify-content : - 배열의 정렬을 설정(좌, 우, 같은 간격, 가운데 ..등)

• align-items : 배열의 세로 위치를 설정 (상, 하, 중간, 전체)

---

flex-grow : n - 다른 flex-grow에 비해 n배 이상 크다. (기준 flex-grow를 설정해주어야함)

7) Grid 레이아웃

4 x 4, 6 x 3 등 격자를 만들어준다. 

1. Grid 레이아웃 만들기

1) 큰 div 박스를 만들고 그 안에 들어갈 칸의 개수만큼 자식 div도 넣어준다.

2) 부모 div 박스에
	display : grid; 를 적용해주고 행과 열을 설정해준다.
    
3) grid-template-columns : 100px 100px 100px
	grid-template-rows : 100px 100px
    
    가로 세로 100px의 3 X 2의 격자가 나타난다.
    
    * grid-gap : "n"px; 을 통해 격자간 간격 조정 가능
    * px 대신 fr 단위 사용 가능 - fr은 배수
    

2. 레이아웃의 칸을 합치기

첫번재 방법 : 자식 div 태그에 class를 적용해주고
grid-columns : 1/4; 해당 칸의 첫번째 줄부터 4번째 줄까지 세로선을 합친다.

    grid-rows : 2/4; 해당 칸의 2번째 줄부터 4번째 줄까지 가로선을 합친다.
    
    을 적용한다.
    
 두번째 방법 : 자식 태그에 class를 적용해준다.
 
 	자식태그에 이름을 부여한다 - grid-area: "작명";
    
    부모태그에서 
    grid-template-areas : 를 넣고
    "작명 작명 작명 . "
    "작명2 작명2 .  . "
    "작명2 작명2 .  . "
    
    이런 식으로 합치고 싶은 곳에 같은 이름을 넣어 합친다.
    ㄱ, ㄴ 모양으로는 불가능하고 직선이어야한다.
    이때 빈공간은 .으로 표시

6. 기타 입력

1) input

<input type="">
type 안에는 text, date, email, passward 등 다양한 형식이 들어갈 수있다. ctrl + space를 눌러 확인 가능

 input의 부가기능
 * value = ""  : 빈공간에 미리 글자를 입력해둔다. 이는 입력한 글자와 같이 취급된다.
 * placeholder = "" : 주석과 같이 입력하기 전 미리 입력해야할 내용이나 도움말 등을 보이게 하고 이는 입력시 사라진다.
 * name = "" : 서버 개발 시 필요, 입력한 값을 이름으로 전송

 * button 태그에서 type = "submit"을 활용하여 제출버튼 만들기 가능
 * dir 를 통해 dir ="rtl" 이면 오른쪽 정렬된 상태에서 입력 가능


* input의 다른 형태

  1. <select> <option> : 옵션선택 형식의 박스를 만들수 있다.

  2. textarea : 크기를 마음대로 변경가능, rows,cols를 통해 크기 설정가능
  * 필요시 구글를 통해 찾기

  * css에서 input[type=text] { 이런 식으로 input 중 원하는 속성만 선택해서 디자인 가능

2) Table /표만들기

• 표만들 때 사용

  tr : 행, 가로 줄
  td : 열, 세로 줄
  th : 세로 열이 굵게 나타남

  tr(가로줄, 행)을 먼저 만들고 td(세로줄, 열)을 넣어줘야함

  thead : 제목행은 thead 안에 넣으면 좋다.
  tbody : 일반 행은 tbody 안에 넣으면 좋다.

• table에
  border-collapse: collapse;
  를 추가하면 붙은 행을 만들 수 있다.

• table에서의 vertical align은 정렬 시 사용한다.

• 열을 합치기 : html에서 합치고자 하는 태그에 colspan="n"을 적용한다. 여기서 n은 합치고 싶은 열의 개수

• 행을 합치기 : html에서 rowspan

  https://s205203.tistory.com/44 참고사이트

3) pesudo-class

• 버튼이나 input 등등 마우스를 활용했을 때 변화를 줄 수 있다.

  css에서 cursor : pointer를 주어 클릭이 가능하다는 표시

  class명 : hover - 마우스를 올렸을 때 변화

  class명 : active - 마우스가 누르고 있을때 변화

  class명 : focus - 마우스로 클릭을 한 후 변화

pseudo-element

.class명 :: first-letter {
color : red
font-size : 30px
}
등 내부의 일부만 스타일을 줄 수 있다.

.class명 :: first-line - 첫줄만 변화

.class명 :: after/before - 맨 뒤나 맨 앞에 추가
ex) .pesudo :: before {
content: '내용추가'
color : blue
}

• 맨 앞에 내용추가라는 파란색 글자를 넣는다.

shadow-dom

• input 태그에서 type="file"등(placeholder, range ...) 을 사용하면 숨겨진 태그가 하나 더 생긴다.

• peseudo-element를 이용하여 숨겨진 태그를 스타일링 할 수 있다.

  1) 크롬(파폭, 익스, 엣지, 사파리) 검사 기능 설정에서 shadow-dom를 볼 수 있도록 체크 박스에 체크를 한다.
  2) shadow-dom의 psuedo 이름을 찾는다.
  3) input의 class에서 psuedo-element를 주고 찾은 이름을 넣고 스타일링 한다.

4) transition

• 크롬으로 다른 사이트 애니메이션 참고를 할 수 있다.

  1) 시작 스타일 만들기
  : 아무 동작도 하지 않았을 때 상태

  2) 최종 스타일 만들기
  : 예를 들어 hover를 하거나 active를 한 후 되는 상태

  3) 언제 최종스타일로 되는 지
  : hover나 active 등을 부여(css는 hover만 가능)

  4) transition으로 애니메이션 주기
  : transition 코드를 통해 트랜지션의 형태 부여

  transition 코드

  	 1. transition-property : 어떤 것에 트랜지션을 줄지 설정
  
  	2. transition-duration : 트랜지션이 작동하는 시간
  
  	3. transition-timing-function : 트랜지션의 속도를 설정
  	-linear : 일정한 속도 유지
  
  	4. transition-delay : 트랜지션이 동작하기까지의 시간을 설정
  
  	5. 한줄로 정리 가능 transition: 'property' 'duration' 'timing-function' 'delay';
  
  	 ex) transition: width 2s linear 1s; -> 오브젝트의 폭을 2초 동안 일정한 속도로 1초 후에 변화시킨다.
  
  	6. transition에서 쉼표를 넣으면 두가지를 적용할 수 있다.

5) transform

1) keyframes를 통해 만들기

@keyframes "작명" {

	0% {
    	transform: translateX(0px)
        }
        
    50% {
    	transform: translateX(-100px)
        }
        
    75% {
    	transform: translateX(100px)
        }
        
    100% {
    	transform: translateX(0px)
        }
        
   }
   
   이렇게 움직임을 줄 transform을 만든다.
   
   transform을 주고 싶은 태그에 삽입
   
   .class명:hover {
   		animation-name : 작명;
        animation-duration: 1s;
        }
      
      이때 duration외 다양한 명령어들이 있다.
      ex) animation-fill-mode: forwards; 는 애니메이션이 끝나도 초기 상태로 돌아오지 않고 유지된다.
      
      
  2) 간단히 만들기
  
  a -> b -> c 의 형태로 변화하면 keyframes를 주는 것이 합리적이나 간단한 변화는 class에서 바로 줄 수 있다.
  
  .class명 {
  		transform : translateX(-100px)
     
 

뒤집히는 프로필 사진(돌아가는 동전)

transform : rotateX, Y, Z를 통해 설정

하나의 div 태그 안에 앞면, 뒷면을 제작

<div 부모태그>
	<img src="blah blah">
    <div>
    	<h4>somebody</h4>
        <p>introduce</p>
    </div>
</div>

부모 div 박스에 position : relative를 주고 자식 박스에 absolute를 주어 이미지와 글자를 겹친다.
그리고 뒷면 (자식 div박스)에 rotateY(180deg)를 준다.

그리고 부모 div 박스에 hover시 rotateY(180deg)를 준다.

transition : all 1s를 주어 자연스러운 움직임을 주고 
transform-style: preserve-3d; 로 앞뒤면의 구분을 준다.

뒷면에 앞면이 비치지 않도록 하려면

앞쪽에 backface-visibility:hidden;을 주면 뒷면만 보인다.

6) bootstrap 활용하기

• 긴 코드를 줄여주는 프레임 워크 여러가지 양식이 있어 가져다 쓸 수 있다.

1. 부트스트랩 홈페이지에서 버전 확인
2. css, js 또는 스타터 탬플릿을 복사해서 붙여넣는다.
3. 좌측에서 필요한 항목을 찾거나 검색하여 코드를 찾고 복사 + 붙여넣기를 한다.
4. 세부사항은 내가 설정하여 만든다. (내 css 파일 만들기)
5. Utility class도 제공된다. - 좌측 utilities 항목 활용

• row와 col 클래스를 사용하여 반응형 웹 만들기 (grid)

  부모태그에 class ="row"를 적용하고 자식태그에 class="col"을 적용하면 일정한 간격으로 가로 배치가 된다.
  이때 행은 12칸으로 나누어지기 때문에 col-6 , col-4 이런 식으로 각 자식태그가 차지할 공간을 설정할 수 있다.

  • 'col-md-6'을 적용하면 md 사이즈 이상에서만 적용하라는 뜻으로 md 사이즈 미만이 되면 일반 div 사이즈로 적용된다. (grid로 검색)

  • order-md-1 은 md 사이즈 이상에서는 해당 태그를 첫번째로 이동하라는 뜻으로 반응형 웹에서 모바일과 PC에서 변화를 줄 수 있다.

7) CSS 덮어쓰기

기존 작성된 코드에서 덮어쓰는 방법

1. css 파일을 하나 더 만들어서 링크로 연결(아래 있을 수록 우선 적용 - media query같이)
2. html에 style 적용 > id태그 > class 순으로 우선 적용
3. 위 3개 보다 css 코드 뒤 !important가 가장 높음
4. specificity 점수 높이기 : 앞에 붙은 부모태그가 더 많을 수록 우선 적용

• bootstrap 사용시 class를 추가하여 사용(덮어쓰기는 잘 안함)

  * 좋은 코드의 기준

  1) 추후 수정/관리가 쉬워야한다.
  2) 확장성이 좋아야한다. (재활용 가능, 추가적으로 코드 넣기)

8) SASS

대규모의 사이트를 만들 때 사용

준비

1) vs code에서 live sass compiler를 다운 받는다.
2) 제목.scss로 파일을 만들고 내용을 입력한 후 다운받은 컴파일러를 실행하면 같은 제목의 css파일이 만들어진다.
3) 그것을 html 파일에 연결

사용

1) 변수 값 저장하기
- $변수명 : 내용(#2ac4c6e 등)
자주 쓰는 내용을 변수로 설정하고

    - .class명 {
    	color : $변수명
        }
       이렇게 class에 적용하면 외우기힘든 것을 쉽게 넣을 수 있다.
       
2) 변수가 숫자일 경우 사칙연산도 가능하다.
$폰트 사이즈 : 16px
.box {
	font-size : $v폰트 사이즈 * 2
    }
    는 32px로 출력
    
3) css 파일에서도 변수 적용 가능

root를 사용 / calc()를 통해서 사칙연산도 가능

4) nesting
scss 파일에서
.main-content {
width : 100%

    h4 {
    	color : red
        }
        
    button {
    	width : 100px
		height : 50px
        }
     }
     
 로 만들면 한번에 main-content 태그 내를 정리할 수 있다.
 
 5) extend
 	공통의 class를 만들어 사용
    
    예를 들어 똑같은 모양의 버튼을 색깔만 다르게 한다고 했을 때 일일히 모든 버튼을 디자인 해주는 것이 아니라 색깔을 제외한 나머지를 공통으로 두고 색깔만 개별 부여해준다.
    
    .btn {
    	font-size : 16px;
        padding : 10px;
        }
    .btn-green {
    	@extend .btn;
        background : green
        }
        
   	이렇게 공통 요소를 빼고 @extend를 넣어 준다.
    %btn 이렇게 가상 클래스를 만들어도 사용가능한데 이는 css 파일에 저장이 되지 않는다.
    
    
  6) mixin
  	긴코드를 짧은 단어로 축약할 때 씀
    
    @mixin 작명($구멍1, $구멍2) {
    	font-size : $구멍1;
        letter-spacing : $구멍2;
        }
        
    h2 {
    	@include 작명(40px, -1px)
        }
        
    h3 {
    	@include 작명(30px, -2px)
        }
        
    같은 명령에 내용 다를 때 사용하기 좋다.
    
    * @mixin 작명($구멍1, $구멍2) {
    	font-size : $구멍1;
        # { $구멍2 } : 1;
        }
  		
        이렇게 값을 미리 설정하고 명령을 따로 설정할 수 있다.
  
  7) use
  
  1. _rest.scss 파일을 만든다. (언더바(_)는 css파일을 따로 생성하지 말라는 뜻)
  2. _rest 파일에 기본 설정에 필요한 명령을 넣는다.
  3. 연결될 파일에 @use 'reset'; 을 맨 앞에 넣는다.
  4. mixin도 연결이 가능하지만 rest.$메인칼라 이런 식으로 연결할 파일을 표시해줘야함
  
  

	

7. 외부 요소

1) 사이트 발행

github을 통해 만들기

1. New repository를 생성
2. repository name 생성
3. readme 파일 생성
4. html, css, js 파일 업로드

name.github.io로 접속 / 문제시 repository 삭제

일반 호스팅

1. 호스팅 페이지에서 ftp 주소 생성
2. filezilla에서 ftp 주소와 아이디, 비번을 입력
3. www. 폴더에서 html,css 파일 등 복사해서 넣기

4. 도메인을 구입하면 나만의 도메인 설정 가능