Index
들어가며
아,,, 너무 바빠 진짜요
졸업논문 미쳐버렸읍니다 정말,,
그냥 한달 불태워서 끝내고 시간여유를 좀 가져가야겠습니다.
9월20일
*** section,article 안에는 꼭 h태그 넣어주기 // 깜빡
안쓰는 클래스도 남겨두지말고 삭제하기
아이디 앞, 뒤 이미지적 요소 = before&after로 background-image 로 적용
포트폴리오 프로젝트들은 W3C validator (검사기)에 꼭 돌려보기 !!
틀린거있으면 그냥 탈락이다
배치시에는 패딩을 적절히 이용하기
박스안의 내용물이 길어졌을 때, 충분한 좌우여백을 확보하기 위해서 패딩을 넣어줌
- font-family: 'Spoqa Han Sans Neo','sans-serif’;
*위 처럼 적게된다면, 스포카 한 산스 네오 폰트가 없을 경우 산스 세리프 폰트를 사용한다.
box-sizing:border-box : 상속이 되지 않는 속성
hidden vs none
스크린리더가 읽어야 할 , 화면에 표시되지 않아야 할 태그의 경우
hidden과 display:none 을 쓰면 안된다.
naver의 blind 클래스처럼 css를 통해서 숨겨야 한다.
{
clip
width :1
height: 1
magin -1px
}
요소와 요소사이의 간격 : margin
자기가 자식들로 가지고 있는 요소와 자신과의 간격 : padding
- 컨테이너의 높이는 자식들의 높이에 따라서 바뀌도록 유연하게 작성하는 것이 좋다.
플렉스와 그리드의 단점
float : 자기와 그 외의 다른 요소간의 위치를 결정하는 속성
flex & grid : 컨테이너안에서 제약되어서 위치를 결정하기 때문에 컨테이너 요소가 꼭 필요함
-> html 태그 하나씩 더 써줘야한다.
원근법 : perspective
top & left로 요소들을 화면 중앙점으로 시작점을 맞출 수 있다.
완전히 정중앙으로 옮기기 위해서는 추가작업 필요
margin을 이용하거나 transform을 이용
margin의 경우는 width, height를 알아야함
transform은 그냥 -50% 때려주면 된다.
object-fit : contain 이미지를 원본이미지의 비율로 맞춘다.
perspective 는 자신의 자식에게만 적용가능
뒤면을 보여주는 애들을 안보이게 함
backface-visibility: hidden;
9월21일
플렉스-아이템의 마진속성에 관하여 ,,,
플렉스는 하위 아이템들이 많아져서 공간이 부족하면
다른 아이템들의 width값을 보장해주지 않고 줄여서 우겨넣는다. —> flex shrink :1
사이즈를 보장해준다 -> flex-shrink:0
줄일만큼 줄이다가 img 고유의 사이즈 이상으로 줄어들게되면 부모 컨테이너 밖으로 삐져나가게 된다
left:0
right:0
을 동시에 줘서, 현재 요소의 사용가능한 너비가 부모의 컨테이너 너비만큼 넓어지도록 해준다.
이때
width:100px
margin:0 auto 를 줘서 수평정렬 가능하다.
위와 비슷하게
left,right,top,bottom 전부 0 때려줘서 (inset:0으로 해주면 똑같은 기능을 한다.)
정중앙 정렬도 해줄 수 있다.
9월22일
outline : border와 비슷하지만, 레이아웃에 영향을 미치지 않음. 즉, 밀려남이 없음 // just focus 를 나타낼 때는 이를 사용
border
셀렉트를 구현하는 방법
select를 쓰기보단,
버튼과 ul, 그리고 hover 가상클래스, js 를 이용하는것이 실무레벨
clip 속성은 점점 지원을 줄여가고 있다..
사용하기 불안해
대신 clip-path를 써라 !
레티나 디스플레이
2배 크기의 이미지를 절반크기로 압축시키기!
background-size: 84px 50px; (원본 크기의 절반)
