index
9월13일
body {} 에 background-image 를 넣어주면 이미지가 예상된 body영역을 벗어나서 전체를 차지하게 된다.
background-position이 center로 되어있으면 image의 중앙이 body의 본래 영역의 중간으로 맞추어지게 된다. <- 이미지가 잘려서 시작하게 되는 원인
background-size
auto : 이미지의 기본 사이즈
cover : 가로비를 맞춰서 보여줌, 찌그러지지 않는 한도 내에서 제일 크게 설정
->container와 다르게 잘릴 수도 있음
~px : 입력된 픽셀단위로 맞춰서 보여줌
container : 이미지가 잘려지거나 찌그러지지 않는 한도 내에서 제일 크게 설정
자주 사용하는 3종 세트 : no-repeat cover center
opacity : 투명도 조절
자식 요소의 마진 top or bottom이 부모의 높이에 영향을 끼치지 않음
민지님
html 개행
span과 br 중에 무엇을 쓰나 ?
1. 개행의 목적이 우선
디자인인 경우 span
의미론적인 br 사용
span으로 개행을 한다는건 box모델을 display block으로 줘서 개행을 하는 방법임
반응형페이지 제작순서 : 모바일 테블릿 피시순서
개발자도구창의 네트워크 ??
고정단위 가변단위 값 em 배수 단위 , rem 루트의 배수
9월14일
인라인 요소의 경우 세로정렬하려면 padding과 margin을 주로 이용한다.
그리고 width랑 height 적용이 불가능하다.
세로정렬 방법2. line-height 와 height 를 동일하게 해주면 수직정렬이 된다.
( 단 내용물이 두줄 이상이 되면 통하지 않는다. 한줄텍스트 수직정렬하고 싶을때 사용 )
수평정렬의 margin: 0 auto;와 비슷한 방법이다!
또한 버튼요소는 수직정렬을 해줄 필요가 없다. 알아서 된다.
세로정렬 방법3.
position: relative
top:50%
transform:translation(-50%) or margin-top:50%
을 이용
버튼의 크기 설정하는 방법
1. width, height 이용
2. padding 이용
여기서 나오는 차이 ?
1번을 이용하면, 콘텐츠에 따라 늘어나는것이 안된다.
2번을 이용하면, 콘텐츠의 크기에 따라 자연스럽게 늘어난다.
vertical align : 인라인 요소의 수직 정렬을 맞추기 위해 사용하는 속성
middle값 : 부모의 baseline+ x-height의 절반의 위치 -> 수직정렬이 안된다,,,
- px 단위설정도 가능하다!
text-indent : 텍스트 시작전 빈 공간 (들여쓰기)
text-decoration : 윗줄, 밑줄 꾸미기, 스타일링의 용도로는 잘 사용하지 않음
주로 a태그의 밑줄 지울때 이용
text-overflow : 부모 컨테이너 넘어간 컨텐츠가 어떻게 보여질지 결정
clip : 자름
ellipsis : 말줄임표시로 나타냄
*ellipsis사용하려면, overflow:hidden이랑 white-space:nowrap이 같이 적용되어야 사용할 수 있다.
position : 태그의 위치를 지정
static: 기본값(원래자리)
relative : 원래 내가 있어야 하는 위치에 상대적위치를 가진다.
left & top 값을 수정하여 원래 위치에서 이동시킬 수 있다.
top, right, left, bottom 값은 static이 아닐 때만 이용가능
absolute : 부모의 영역(position을 가진)을 기준으로 위치를 가짐
이 요소를 가진애는 다른애들의 위치에 영향을 미치지 않음
fixed : 스크롤 업&다운시 해당 박스가 고정되어 움직이지 않음
sticky : 가장가까운 부모영역에 달라붙음 // 스크롤 업&다운시 유지
부모영역이 끝나면 사라짐z-index : z축의 위치를 설정
position 속성값이 적용된 곳에서만 쓸 수 있음
*이 값이 설정되어 있지않다면, 최근에 만든것이 더 위로 올라가게 된다.
*부모의 z-index값이 자식의 z-index값의 최대치를 막는다.
즉, 부모가 부모의 다른 형제한테 한번 지면 그 자식은 아무리 z-index가 높아도 부모의 형제를 이길 수 없다.
보통10단위로 많이줌Float : 요소를 둥둥 띄워서 좌우 정렬함
*float 속성 적용하면 display가 block으로 바뀜
float 사용된 바로 다음형제 요소에 clear 사용가능,
9월15일
9월 15일
특정 속성을 가진 태그에 대한 스타일 방법
-> 태그이름[속성이름] { 스타일 내용 }
->ex) a[href] { font-size:10px; }
구분해야할 것
클래스 이름이 weniv인 div태그에 대한 스타일
div[class~=“weniv”] {}
data 이름이 weniv인 div태그에 대한 스타일
div[data~=“weniv”] {}
클래스 이름이 weniv인 div태그에 대한 스타일
div.weniv { }
href의 값이 http로 시작(^)하는 a태그에 대한 스타일
a[href^=“http”] {}
href의 값이 pdf로 끝(=“.pdf”] {}
가상 클래스 선택자 (: 콜론 하나) : 클래스가 없는데, 있는것처럼
ex) .foo:nth-child(n) {} // 우리가 자주 봤던 nth child가 예시임
*.foo:first-child 의 경우,, foo클래스의 부모의 자식들중 첫번째 태그가 foo일 경우만 css가 적용된다.
가상 요소 선택자 (:: 콜론 두개) : 요소가 없는데, 있는것처럼
방문한 적이 있는 링크를 선택
a:visited { }
:focus : 요소에 포커스가 있을 때 적용
클래스1 + 클래스2 : 형제선택자 (형제 = 같은 부모 아래 동급의 태그)
p의 앞뒤로 스타일 주기
p::before {content:’’} = content는 문자열 삽입
p::after
::selection {} = 텍스트가 선택되었을 때 스타일 주기
h1 + ul : 인접형제 ,,, 즉 H1 바로 근처의 ul만 선택
h1 ~ ul : 일반형제 ,, h1 이후에 나오는 모든 형제인 ul을 선택
Flex
display 속성중 하나로써, 요소가 배치되는 방식을 결정
외부 디스플레이 타입(inline, block, inline-block) : 부모와 형제간의 박스 배치
내부 디스플레이 타입(flex, grid) : 내부 자식 박스 배치
*1차원 배열 구현시 고려
Grid
넹,,
*2차원 구현시 고려
암기해야 할 코드 ( 수평 중앙 정렬 )
display: flex;
justify-content:center
align-items : center
align-items의 경우 부모의 값을 따라감’
flex
basis : 가변적 <-> width와 height : 고정적
grow : 컨텐츠를 제외한 여백의 비율
