2024-04-09 CSS Day2

CSS 배경 

background-color: HTML 요소의 배경색을 설정 

​background-image
- HTML 요소의 배경으로 나타날 배경 이미지를 설정 
- 배경 이미지는 기본 설정으로 반복되어 나타남
    background-image: url(파일경로)

background-repeat: 배경 이미지를 수평이나 수직 방향으로 반복라도록 설정(repeat-x, repeat-y, no-repeat)

background-positon
- 반복되지 않은 배경 이미지의 상대 위치를 설정 
- %나 px을 사용하여 상대위치를 직접 설정할 수 있음 
- 상대위치를 결정하는 기준은 윈쪽 상단 

left top       center top        right top 
left center    center            right center
left bottom    center bottom     right bottom 

예)
background-positon: center bottom 
background-positon: 가로위치값 세로위치값 => background-positon : 10% 100px; 

background-attachment
- 위치가 설정된 배경 이미지를 원한느 위치에 고정 시킬수 있음 
- 고정된 배경 이미지는 스크롤와 무관하게 화면 위치에서 이동되지 않음 
- fixed 

background-size
- 반복되지 않은 배경 이미지 크기를 설정 
- px, %, contain, cover
- contian
    - 배경 이미지의 가로, 세로 모두 요소 보다 작다는 전제하에 가능한 설정 
    - 가로, 세로 비율은 유지 
    - 배경 이미지의 크디는 요소의 크기보다 항상 작거나 같음 
- cover
    - 배경 이미지의로 세로, 길이 모두 요소 보다 크다는 전제하에 가능한 설정 
    - 가로, 세로 비율은 유지 
    - 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음 


background: 배경 속성을 한꺼번에 적용 
    background 파일위치 반복여부 위치 사이즈 ... 
   
배경이미지 https://pixabay.com/ko/


박스 모델 (Box Model)
- 모든 HTML 요소는 박스 모양으로 구성
-박스 모델은 HTML 요소를 내용, 패딩(안쪽여백), 테두리, 마진(바깥여백)으로 구분함

내용 (content)
- 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 

패딩(padding)(안쪽여백)
- 내용과 테두리 사이의 간격 또는 여백 
- padding-top, padding-right, padding-bottom, padding-left 
- padding: 위 오른쪽 아래 왼쪽 순으롤 설정 
    
    HTML
    <div id='padding'>안녕하세요</div>

    CSS
    (4개)
    div#padding { padding: 20px 50px 30px 10px; } 
    위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px (시계방향)

    (3개)
    div#padding { padding: 20px 50px 30px 10px; } 
    위 20px, 오른쪽 아래 50px, 아래 30px

    (2개)
    div#padding { padding: 20px 50px 30px 10px; } 
    위 아래 20px, 오른쪽 왼쪽 50px

    (1개)
    div#padding { padding: 20px 50px 30px 10px; } 
    위 아래 오른쪽 왼쪽 20px

테두리(border)
- 내용(content)과 패딩(padding) 주변을 감싸는 프레임 
- border-style(테두리 모양), border-color(테두리 색상), border-width(테두리 두께)
- border(한꺼번에 설정)

​마진(margin)(바깥여백)
- 테두리(border)와 이웃하는 요소들 사이의 간격
- 마진은 눈에 보이지 않음 
- 세로 겹침 현상이 일어남(세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하는 현상)

박스사이징 (box-sizing)
- width, height는 padding, border 영역을 포함하지 않음 
- 만약 width가 100%로 설정되는 경우 padding이나 border 속성을 추가하면 안됨 
- box-sizing 속성값을 border-box로 설정하게 되면 width와 height 값에 padding과 border를 포함 


css 디스플레이 
- 웹 페잊지의 레이아웃을 결정하는 속성 
- block, inline, inline-block, none, flex .. 

visibility: hidden; <-> visibility: visible;


CSS 폼
- w3school, tcp school, mdn 참고


css position
- 요소의 위치를 결정하는 방식을 설정

1. 정적 위치 지정방식 
- static position (기본값)
- HTML 요소의 위치를 결정하는 기본적인 방식 
- 단순히 웹페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식
- 겹쳐지지 않는다 (2,3,4,5는 겹침 현상 발생)

2. 상대 위치 지정방식 
- relative position
- HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
- top, left, right, bottom 속성값을 사용하여 재설정함

3. 고정 위치 지정 방식
- fixed position
- 웹 페이지가 스크롤되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
- 뷰포트를 기준으로 위치를 설정하는 방식
- top, left, right, bottom 속성값을 사용하여 재설정함 

4. 부모 태그를 이용한 고정 위치 지정 방식(스티키지정방식)
- sticky position
- fixed가 브라우저 화면의 절대 위치를 사용하는 반면, sticky는 부모 태그의 절대 위치값을 사용
- 익스플로러에서는 작동하지 않음 

5. 절대 위치 지정 방식
- absolute position
- 뷰포트들 기준으로 위치를 설정하는 방식
- 조상요소를 기준으로 위치를 저장할 수 있음
- 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 설정
- 조상요소를 기준으로 위치를 설정하려면 조상요소가 반드시 정적 위치 지정 방식이 아니어야 함
- top, left, right, bottom 속성값을 사용하여 설정함 


과제
'닷홈' 페이지의 회원가입, 로그인 페이지를 css 폼을 적용하여 완성 

​