box-sizing : 박스의 크기에 대한 기준 정함
( 블랙베리 지원안해서 적용못했던 기억..
구기능 버리지못하는 이유)
수평정렬( 요소들 ) - >>
div{
display: inline;
} margin-top / bottom 제한있음
display: inline-block;사용하면 제한없어짐.
줄바꿈때문에 마진값 들어갔다.
인라인으로 수평정렬 잘 구현안함 ( 마진으로 인해 끊어짐 색)
*공백을 없애는 방법 :
부모에게 font-size:0주면 해결됨.
inline 같은줄 넓이나 높이 정할때 많이 사용 (width와 height, margin-top ) bottom )
inline-block
position: 웹페이지에서 만들었던 태그 위치 지정 속성
1. static : 지정 안한 서비스
2. relative
relative - 자신이 위치해야하는 위치 기준 이동
absolute - 부모중 static이 아닌 부모 위치 기준
relative는 static 기준이고, absolute는 가장 가까운 relative/absolute/fixed를 가진 부모 기준입니다
normal flow ! - 웹페이지 원래 흐름
겹쳐치는것 = 검정이 아래 핑크와 겹쳐진다.
relative : 현재 흐름 유지하고 싶으면 ..
position : 팝업창이나 퀵메뉴 .. top으로 버튼 등 fixed적용되어 움직여도 고정.
더보기 버튼 >> 아래내용 다음 더보기 읽어줘야함 ( 논리적 마크업 순서 => 굳이 더보기를 absolut로 위로 땡겼다. )
요소 맨밑에 더보기 버튼 있음. 시각적으로는 위로. . .
개발자 =-= 네이버나 다음 들어가서 확인!
사이트 들어가서 키보드 탭 누르면 마크업 순서에 따라 포커스가 움직인다.
position: sticky ( 자기부모 중 가장 가까운 스크롤
h2{
/ safary지원위해 -webkit! /
position:-webkit-sticky;
position:sticky;
top:0;
background: greenyellow;
}
sticky
자신의 위치 임계점을 넘길때 top 값 적용된다. !
사이트가 좌우로 스크롤되는 구조에 적용하면, 왼쪽에 붙을 수도 있나?
임계점에 왔을 때, 100px떨어진다.
부모가 스크롤링 , 부모요소가 끝나면 다음번 stichy요소가
study모임 주체해서 무언가 설명 -> 학습효과 엄청 좋다.
Float>
띄우다. 레이아웃을 만들기 위한 속성이 아님!
그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성!
float : 가로폭 전체의 넓이를 가지는 속성을 갖고 있다.
부모요소로 부터 빠져나가려고 한다.
부모가 float된 자식을 못알아챈다. float된 형제요소를 형제요소 모름 -> float된 애만 독립한다.
해결하기 위해 overflow 사용.
같은 floatf레벨에서 알아차리기 위해 clear사용한다.
float된 형제 기준이에요! 지금은 두번째 박스가 float: left니까 세번째 박스에게 니 형제 left에 있어~하고 clear: left 주는거죠!
글씨들은 float된 요소들을 안다.
형제들 중 글형제들은 float형제 존재를 안다!
inline요소들은 float 요소를 알아본다.
마커는 float인식해서 . 갖고온것
그럼 list style: none 주면 저 점도 사라지나요? => o
overflow 는? li 요소 3개가 다 float일때?
display: inline-blook
content없으면 오소안생김!
마지막 html존재x css로 만든 가상요소 after 가상요소 만듬
before 가상 자식요소를 가장 첫번째 자식요소로 만듬.
before 가장 첫번째 자식이 된다..
float을 자식들 중하나가 사용했으면 , 나머지 자식들에 clear적용하던가 부모에 hidden사용/
가상자식 사용하는 이유??
필요없는 html 최대한 없애기 위해, css에서만 만드는 가상자식 (
normal float : 자연스럽게 쌓인 영역
flot: 속성적용하면 한차원 위로 뜬다 . (normal float에서 알아볼 수 없다)
강사님 overflow속성 부모에서 이용하면, 형제들끼리도 clear없이 인식할까요??(xx)
부모 = overflow , clearfix (float사용한 자식 알아보기 위해)
형제들 = clear (float된 애 순서 지키기 위해)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<style>
ul{
text-align: center;
list-style: decimal;
list-style-position:inside;
/* 자식들이 모두 float되어있는 상태일때 사용한다- 반영하기 위해 */
/* overflow: hidden; */
}
ul::after{
display:block;
content:'';
}
li{
float:left;
width:100%;
height:140px;
}
.one{
background: slateblue;
}
.two{
float: left;
background: yellow;
width:33%;
}
.three{
width:33%;
background:purple;
}
.four{
width:34%;
background:orange;
}
.five{
clear:both;
background:palevioletred;
}
</style>
</head>
<body>
<ul>
<li class=one> <i class="fas fa-heart"></i></li>
<!-- 2번째 -->
<li class=two><i class="fas fa-heart"></i></li>
<li class=three><i class="fas fa-heart"></i></li>
<li class=four><i class="fas fa-heart"></i></li>
<!-- 3번째 -->
<li class=five><i class="fas fa-heart"></i></li>
</ul>
</body>
</html>
li 가 보이려면
content or block으로 넣어야 네모 보임.
링크텍스트
부모의 높이값에 얽매여있을까봐요!
nth child =? 재사용성!
형제추가되면 nthchild 쓸모없어짐
=> 굉장히 조심해야함.
nth child =>중간에 추가되면 하나씩 바꿔주는수밖에없음 >>클래스 이름!
nth-child 는 body안에 div class 갯수와 동일하게!
부모에는 높이값 사용하지않고, 그 아래 클래스에서 사용할 것>>
id는 한번만 사용가능!!
div 블럭요소 ( 자기 왼쪽부터 끝까지 차지!)
clear @@ (앞에있는 Float 해제할때 사용한다!)
콜론두개가 붙은게 가상요소
.f1::after
.f2::before
반드시 content:'';속성이 있어야 브라우저에 나타남
display : block;dj
f1 기준 앞, 뒤로 가상요소 생성
<style> #Top { /* width: 100%; */ height: 100px; /* clear: both; */ background-color: skyblue; }
/* #content {
float: left;
width: 33.3333%;
background-color: red;
height: 100px;
} */
.f1::after {
content: '';
display: block;
float: left;
width: 33.3333%;
height: 100px;
background: green;
}
.f1::before {
content: '';
display: block;
float: left;
width: 33.3333%;
height: 100px;
background: black;
}
/* .f2::before {
float: right;
width: 300px;
height: 100px;
background: purple;
} */
.item-middle {
float: left;
width: 33.3333%;
height: 100px;
background: pink;
}
#footer {
background-color: yellow;
width: 100%;
height: 100px;
clear: both;
}
</style>div가 아닌 a href(앵커태그) 사용!
div는 의미가 없다.
baseline .. > 이 폰트가 가진 중심 기준축
vertical-align: baseline; 은 이미지 ,텍스트 등 인라인에만 적용 됨 block레벨에선 x
img = inline인가요? 인라인은 넓이 높이 가질 수 없는데 왜 width를 가지는걸까요? >>예외!! (얘만 width)
의미없는 이미지 많이 사용 -> background로. !
img대신 의미없는 요소. span!
네이버 페이지는 가상요소로 처리
