• style은 헤더에 주로 쓰이긴하지만
  바디안, 어디든 상관없음
  -> 제일 좋은 방법은 style 파일을 만들어서 연결해 주는것!

새로운 개념

✏ calc

괄호 안의 식 사칙연산
width, height, margin, padding등등 가능

특징

값을 계산하기 어려울때 편하게 계산해준다!
반응형처럼 브라우저 크기에 따라 요소의 너비와 높이가 변화해야하는 경우 사용

width : clac(100% / 3) - w100% 를 3등분 시킨다.
width : clac((100% - px) / 3) - w100% -px뺀 w를 3등분한다.

❗ 앞뒤로 띄어쓰기 유의
❗ calc 스펠링 유의

정렬하는 애들

요소의 위치를 잡아주는것
구조짤때 제일 중요

1. ✏ position

*특이점 - 상속 안됨 (float보다 더 높이 뜸, 자기들끼리 겹쳐지기도 함) 여백값 무시함

놀이터
position: relative;

놀수있는애들
position: absolute;

position: relative;에는 반드시 absolute가 나와야한다.

속성값(어디를 기준으로 움직일건지)

• 1) static : 기본값
• 2) relative : 기준을 잡아주는 속성(자손이나 자신)
  --바로 밑에 있는애가 올라온다.
  --별도의 하위속성 없이 사용하면 static과 비솟
  --주로 자손(absolute가 들어있는)들의 기준으로 잡아준다.
• 3)absolute : 상위 요소중에 기준을 잡을 수 있는 요소를 기준으로 움직인다.
  원래 위치에서 여백이나 다른 요소와 겹쳐야 할때 주로 사용
  *사방값 기본으로 같이 사용할것
• 4)fixed: 브라우저 기준 특정 위치에 고정
  ->background-attachment랑 다르다.
  상위 요소가 relative를 가지고 있어도 무시
  *자리 지정 안 해주면(ex 바디 left 0, top 0) 밑에 애들(바디)이랑 따라다님
  *사이즈 안주면 플롯처럼 필요한 만큼만 차지함
  *사방값 기본으로 같이 사용할것

사방값(얼마나 어디로 움직일거다)

top, left, bottom, right (단위 - px, % )

🔑position:relative를 줬을때 footer가 올라오는 경우가 있다.
position:relative를 초기화 시켜줘야한다.
조상에 -> overflow:hidden

2. ✏ float

하늘로 띄어서 정렬시켜준다.
position보단 낮게 떠있다.
바디에 전반적인 배경색을 넣는거다.

사방값

left, right

🔑초기화 / 해제 하는법

float:left/right -> overflow:hidden

3. ✏ margin:0 auto;

whith가 있는 영역 중앙정렬
주로 큰영역의 기준을 잡을때 쓰임

✏ 왕따 선택자

인정요소 1번빼고 2,3,4만 적용된다. 1번은 왕따

.bottom-area li+li{}

-> 첫번째 li는 제외하고, 2번째 li부터 속성 적용된다.

✏ 가상 선택자

last-child

클래스 이름을 만들지 않아도 마지막 클래스에 적용된다.

.box .div:last-child{}

---

float 실습

1. 

📝 주요 특징

• .box div{float:left;}
  .box{overflow:hidden;} -> float의 부모 초기화
• calc((100% - 여백px) / 개수))
• calc(50% - 5px); - 1/2로 박스 나누기
• div{margin-right:10px;}
  div:lastchild{margin-right:0;}
• .box$*2
• .div*3{$}

---

2. 

📝 주요 특징

• position:fixed;
  top:0; left:0; 왼쪽에 고정(브라우저 영향x / 상,좌0의위치)
• main > div{margin-bottom:10px;}
  main아래 직계 div(.box1~7)만 선택하여 아래 여백 10px 부여
• 2등분을 할때 꼭 calc에서 100%에서 빼는 것이 아닌 주어진 %에서 여백px값을 빼준다.

.box6 div{       
       float: left;
          width: calc(30% - 5px);
          background: #f00;
          height:70px;
            }
.box6 div:last-child{
          float: right;
          width: calc(70% - 5px);
            }

• m10-10-10-160 -> margin: 10px 10px 10px 160px;

💡
psf - position: fixed는 가로세로 값과 좌표값 꼭 써줘야함 안그럼 밀려난다.
position: fixed에서 부모높이값이 꼭 있어야 h100%를 쓸수있음.
BUT
여기선 기준이 브라우저기 때문에 부모높이 값이 없어도 사용가능

오답✍(◔◡◔)✧

직계 선택자를 사용하지 않고 자손선택자를 선택하여 모든 div가 margin-bottom:10px;을 먹었다.

• main div{margin-bottom:10px;}
  

---

3. 

📝 주요 특징

기본 초기화

• {font:inherit;} - 글씨체 초기화
• body {line-height:1;} - 행간격1
• ul {list-style:none;} - ul 기호 삭제
• a {color: inherit; text-decoration: none;}
  {color:inherit;} - 글씨 색상 초기화
  {text-decoration : none;} - 밑줄 없앰
• img {vertical-align : top;}
  이미지 아래 공백 없애기 이미지 위로 정렬

---

• {margin : 0 auto;} - 블록레벨을 가운데 정렬해줄때
• {transform : translate(-50%,-50%)}
  top-left corner기준으로 정가운데 위치시키기 위해 transform속성을 이용해 x,y축으로 각각 -50%씩 부여하여 정 가운데 위치

header .logo{
            width: 100px;height: 50px;
            background: #f00;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

• text-align:center; - 글자 가운데 정렬
• border-radius : % - %만큼 모서리 둥글게
• object-fit : cover; - 이미지 비율에 맞게 조정
• 이미지는 원래 가진 사이즈가 있기때문에 w100%으로 사이즈 줘야한다.
  -> 안그러면 지멋대로 사이즈 잘리고 레이아웃 깨짐

🤔 마진, 패딩 어떤걸 써야하나요??

-> padding은 뒤에 백그라운드에 이미지가 보존되어야할때
-> margin은 상관없이 밀어야할때

---

4. 

📝 주요 특징

main{ width: 800px; margin: 10px auto;}
/* margin으로 가운데 정렬 10px로 상하 띄우기*/
.ht_area h1{
            position: absolute;
            top: 50%;left: 50%;
            transform: translate(-50%, -50%);
            width: 150px;height: 50px;
            background: #f00;
        }
 /*가운데 정렬*/
.ht_area h1 a{ display: block; height: 100%; }
.top_area .left li{
            float: left;
            width: calc((100% - 20px) / 3);
            height: 100px;
            background: #ff0;
            margin-right: 10px;
        }
/*calc로 여백 20px을 빼고 3등분(margin-right)*/
.top_area .left li:nth-child(3n){margin-right: 0;}
.top_area .left li:nth-child(-n+3){margin-bottom: 10px;}
.bot_area li+li{ margin-top: 10px;}
.bot_area img{
                width: 150px;height: 150px;
                object-fit: cover;
                float: left;
            }
.bot_area p{
                width: calc(100% - 160px);
                height: 150px;
                background: #ff0;
                float: right;
            }
/*160px인 이유는? 패딩값10px을 포함한 값*/

• a{ display: block; height: 100%; }
  -> a 태그는 높이값을 줘야한다.
• nth-child (-n+3) - 3이하만 선택
  nth-child (n+3) - 3이상만 선택
• 왕따 선택자
  .bot_area li+li{ margin-top: 10px;}
  첫 번째 li를 제외하고 margin top 10px을 적용하라

💡 inline -block

• inline레벨은 position,float 뭐 하나라도 들어가면 꾸미기 가능(높이)하다
  -> 원래는 display: block;줘야함
  -> width,height,line-height
• inline-block, inline속성들은 그냥 텍스트라 생각하면 편함
• inline,inline-block, img들은 밑에 상위 여백있음
  공백을 없앨땐??
  -> vertical-align

오답✍(◔◡◔)✧

.bot_area img{
              width: 150px;height: 150px;
              object-fit: cover;
              float: left;
          }
.bot_area p{
              width: calc(100% - 160px);
              background: #ff0;
              float: right;
          }

• 부모에 포함 된 다른 자식이 높이를 가지고 있다고 나머지 자식이 자동으로 높이를 같는 것이 아니다.
  -> 높이 값주기

---

5. 

📝 주요 특징

<div class="visual">
     <div>1</div>
     <div class="slide">
     	2
     	<a href=""class= "btn prev1">이전</a>
     	<a href=""class= "btn prev2">다음</a>
     </div>
</div>
/* 이전,다음버튼은 a태그 추천*/ 

<section class="box1">
                <div class="wap">
                    <div class="list list01">
                        <div>70%</div>
                        <div>30%</div>
                    </div>
                    <div class="list list02">
                        <div>30%</div>
                        <div>70%</div>
                    </div>
                </div>
</section>

.box1 .list{overflow: hidden;}
.box1 .list div{float: left; height: 100px;background: #f00;}
.box1 .list div:last-child{float: right;}
.box1 .list01{margin-bottom: 10px;}
.box1 .list01 div{width: calc(70% - 5px);}
.box1 .list01 div:last-child{width: calc(30% - 5px);}
.box1 .list02 div{width: calc(30% - 5px);}
.box1 .list02 div:last-child{width: calc(70% - 5px);}

• 공통분모로 한번에 코딩을 해주는게 좋다

💡 text 추천 태그

em - 단어강조

strong – 문장강조, 내용과 제목있을때 강조, 제목

💡 영역 태그

section-event (sc-event) — 섹션

event-area — 영역 잡아줄때

event-wrap — 작은 단위

event-box — 더 작은 단위