웹개발종합 (1) - CSS

• 코드는 기본적으로 줄 맞춰주기

Ctrl + Alt + L : 줄 자동맞춤
Tap : 오른쪽으로 줄맞춤 이동
Shift + Tap : 왼쪽으로 줄맞춤 이동

• 이미지를 배경으로 사용할 때

(style 속에)
 * background-image: url("");
 * background-size: cover;
 * background-position: center;
  
위 세개는 거의 항상 같이다님!
  
*  border-radius: 10px; = 모서리 둥글게

• margin과 padding (!!안헷갈리게 주의!!)
  margin : 바깥 여백
  padding : 안쪽 여백

div로 하나로 묶어주고,
묶은div를 style에서 소환
width로 크기 잡아주고
margin: auto

설정해주면 가운데로 정렬!
<style>
 .wrap {
                width: 300px;
                margin: auto; 
        }
                
<div class="rap">              
    (내용)
</div>

• 주석처리하기(코드 잠시 미사용상태로, 혹은 설명 붙이고싶을때 별도로)
  Ctrl + /

• 구글웹폰트 적용방법

1. 구글 웹폰트 사이트에서 마음에 드는 폰트 골라서 들어가기

2. head 부분 아무곳에 위의 3번째링크(형광펜부분) 넣기

3. style 부분에 맨아래 CSS코드 * 이용해서 넣기

<style>
 * { CSS코드 복붙 }
 </style>

* CSS파일을 따로 분리한 경우 CSS 파일 불러오기

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

• 내용물 가운데로 지정하는 손쉬운 방법

똑같이 복붙해서 매번 사용함!

			display: flex;
            flex-direction: column;   ---> 여기만 column/row 선택해서 사용
            justify-content: center;
            align-items: center;

• 설정된 클래스 안의 일부만 수정하기

( body부분 )
 	<div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기</button>
    </div>
    
    --------------mytitle 클래스 안에 있는 button만 스타일 주려면?
    
    style부분에
			.mytitle > button { 넣고싶은 스타일}

          = [타이틀]안의 [버튼] 이라는 의미
         
       

• 버튼에 마우스 올려놓으면 모양이 변하도록 설정

style부분에
			.mytitle > button:hover {
            border: 2px solid white;