[220503 / Day 2] CSS 기초 문법, Box Model, background

 

 

1. CSS와 박스 모델 

컨텐츠가 들어가는 영역, 여백, 보더, 영역선 : 박스모델

디스플레이 속성: 화면에 어떻게 진열할건지 결정해주는 것.

-블록 레벨 요소: 디스플레이가 블록이라고 정해져있는 태그, 공간 안에 삽입, 넓이를 주지 않으면 자기가 속한 공간에 왼쪽부터 오른쪽 끝까지 자기의 블록이라고 생각, 높이 지정하지 않으면 컨텐츠만큼 블록 차지, 전체 브라우저가 자기 공간 따라서 다른 블록과 인라인이 수평으로 올 수 없음

-인라인 레벨 요소: 디스플레이가 인라인이라고 정해져있는 태그, 행 안에 삽입, 공간(블록)이나 영역을 쓸 수 없음, 높이와 넓이 지정해도 적용x, 한 행에 여러 개 수평 배치 가능

예: display:block, inline / h1{border:1px solid red; width: 500px; display:block;}

 

박스모델:

div 태그 = 공간을 나누는, 태그 영역을 만든다는 태그. 영역이기 때문에 딱 보이지 않음

검사해보면 제일 하단에 박스가 뜸. 거기서 마진(기본 여백)은 외곽선(border) 밖, 패딩은 외곽선 안. 패딩 상하좌우에 직접 숫자 입력해 여백 부여 가능 하지만 거기는 컨텐츠가 들어갈 수 없음. 맨 안쪽 박스는 컨텐츠. width가 없으면 오토 = 여백을 주면 그만큼의 공간을 남겨두고 나머지는 자동으로 넓이 설정->블록 / 인라인은 다른 박스모델과는 다르게 좌우 마진만 적용됨

 

2. 패딩과 마진 적는 법: 315p, 상단부터 시계방향으로 적용, 패딩 오토x,

마진 오토 있음-상하좌우 모두 똑같이 공간을 줌 단, 넓이가 있어야 여백을 나누기 해서 똑같이 공간을 줌 꽉 차 있으면 나눌 수가 없기 때문에

바디는 컨텐츠의 양 까지를 높이로 지정

margin:50px 10px 30px 20px; = 네 군데 적용

        margin:50px 10px 30px; = 세 군데 적용

        margin:50px 10px; = 두 군데 적용

        margin:50px = 네 군데 통일 적용

        margin:50px; margin-top:10px 이면 top을 다시 설정했기 때문에 top 10px

예외적으로 img 태그는 인라인이지만 넓이높이 적용

 

3. 실습

*{margin: 0;padding: 0;} = 마진패딩 초기화

<a> #는 값이 없는 링크

html 전체 선택 *

padding:50px

 

<style>

*{margin: 0;padding: 0;}

body{background-color: #ccc;}

.box{width: 500px;background-color: #fff;margin: auto;padding: 50px;border-bottom: 1px solid #ccc;}

.title{text-align: center;margin-bottom: 20px}

.des{text-align: justify;line-height: 1.7;font-size: 14px;}

.morebox{text-align: right;margin-top: 20px;}

.more{color:tomato;font-size: 12px;text-decoration: none;}

 

.title img{} = 하위 요소 동시에 자식 요소, title 밑에 img를 부른다는 것, 띄어쓰기 하기

.list2>span{} X 하위 태그로 적어야 함, .list2>li>span{} O

여러 개 묶어서 하려면 , 하면됨 .list,.list2,.list3

list 태그들은 bullet 이 바깥쪽으로 점프한 것이기 때문에 패딩 레프트를 줄이면 없어져 보임

 

.wrapper{font-size: 15px;text-align: center;color: black;background-color: #ff4500;border: 2px solid red;padding: 30px 30px;width: 834;line-height: 21px;}

폰트 사이즈, 가운데 정렬, 폰트 컬러 지정, 배경색 지정, 테두리 크기 종류 색깔 지정, 패딩 상하 좌우 넓이 지정, 와이드 넓이 지정,

 

4. 목록 스타일 247p

배경 색과 이미지

백그라운드는 보더부터 표시 보더가 없으면 패딩부터 패딩이 없으면 콘텐츠만 마진만 빼고

백그라운드 이미지 디폴트가 패딩,

백그라운드 오리진은 시작점 잡아주는 것

백그라운드 클립은 배경 적용 범위 조절

백그라운드 클립을 콘텐츠 박스로 하면

포지션은 위치를 원하는대로 잡을 수 있음 예: right 10px bottom 50px 백분율도 가능

리피트는 반복

사이즈 테두리에 딱 맞게 하고 싶으면

터보는 백그라운드 사이즈 축약 안됨 앞포지션

비포 에프터 백그라운드 설정

 

5. 목록 만들기 젠코딩: ul>li*5

알트 쉬프트 컨트롤 동시에 누르고 키보트 화살표 아래 누르면 다 같이 적용 = 알트 누르고 마우스

 

스프라이트 이미지: 랜더링 빠르도록 한 이미지에 넣고 불러오기 하는 것