요즘 til쓰는것에 현타가 왔다. 고작 16번째 인데 나란인간..쉽게 질리는 인간이다..
쓰기 싫다기 보다는 쓰고 싶은데 잘쓰고 싶다. 썸네일도 만들고 하고싶은데 기깔나는 아이디어가 안나온다...
계속 고민중이다...
flex
가장중요한것 중하나가 flex는 두가지 요소로 나누어진다는 점.
flexbox :container: display. flex-direction, flex-wrap,
item: order, flex-grow, flex-shrink, flex,align
사실 이개념이 이해가 잘 안간다. 둘다 박스옮기는데 사용되는거 같은데...;;
flex를 만들어주기 전에 가장먼저 할것은 너비와 높이 준다.
flex를 시작할려면 display:flex --> 설정시 한줄로 쫙 정렬됨
-
flex-direction : 아이템 속성
--> row 와 column
row는 가로
column은 세로
row-reverse는 10번부터 가로 정렬 -
flex-wrap: nowrap;은 줄이 꽉차도 한줄꽉채우겠다. 박스가 작아짐.
wrap은 줄이 꽉차면 다음줄로 유연하게
넘어가는 속성이다. -
justify-content: 가로축을 기준으로 움직임
flex-start 왼쪽 상단에 붙음(앞이라고 생각되는쪽에 붙는다.) (정렬과는 다르게 박스 위치에 대한 속성)
flex-end: 반대로 뒤라고 생각된느 쪽에 붙는다.
space-around: 일정한 간경을 가지고 붙음
center: 가운데붙음 -
align-items : 수직축을 기준으로 움직임
center
------> 정중앙 배치? align-items/justify-content 모두 center
- flex-grow:2 상자가 빈공간을 메꾸기 위해 움직임 2는 두배
flex-shrink: flex-grow와 반대
display
display : block,inline,inline-block,none
block은 박스라고 생각하면 된다. 기본값이 꽉참이다.
inline은 텍스트라고 생각하면된다. 텍스트만큼만 자리차지. 텍스트처럼 다른 태그가 옆자리에옴. 텍스트라서 크기조정 안됨.
inline-block: 두개의 속성을 동시에 갖고잇음
none: 안보이는애
스크롤이 생기는 이유
width : 100%
padding: 5% --> 총 110%가 너비가 됨.
display:block이면 알아서 꽉차니깐 꽉차길 원하면 크기설정x
나란히 배치원할시 inline속성 넣어주기 ---> but 다른 방법도 있다. float
나란히가 안될시 태그들 사이에 공백문자가 있다. --> fontsize : 0으로 해서 없는것처럼 해주기
이때 부모 선택자 자식이 받아서 자식의 fontsize도 바뀐다.
- vertical-align :수직정렬
top 천장에 붙는다.
float
: left
글자처럼 취급이라 생각하면 됨. 텍스트와 이미지를 그 둘의 배치를 어떻게 할건지.left는 왼쪽으로 감싸고 돔.
clear:left 부모선택자의 float를 없애준다.
position
position
fixed 완전고정 (팝업이나, 헤드느낌.)
absolute 부모기준
relative
absolute사용하여 원하는 위치에 가져다 놓기
1. 부모 div 만들어주고 부모에 position : relative --> 요소의 기준을 부모로 만들어주는 작업
2. 그러고 나서 right, left로 조절하기 (-)도 사용가능
그외
emmet
div.container>div.item.item{}*10 +tab
디브태그에 클래스는 컨테이너 컨테이너 안에 디브 클래스 아이템을 만들건데 아이템마다 고유의 번호지정 안에 텍스트는 자동으로 지정
이방법은 나중에 도전해봐야겠다.
100% vs 100vh
100%는 컨테이너의 부모에 100% --> 부모는 body
이때 body 와 html모두에 height을 넣어줘야 됨.
100vh는 부모에 상관없이 보이는 defualt값의 100%를 다쓴다는 뜻
color tool : ui적으로 예쁜색
https://material.io/resources/color/
css reset: 태그들이 갖고있는 기본적인 속성을 0으로 만들어줌
상자가 답답해 보일때는 padding (내부영역)
max-width : 화면이 작아졌을때 스크롤이 안생기게 (반응형느낌)
margin: 0 auto -->남는여백을 알아서 한다. 즉 가운데 정렬
css에서 가상 element를 넣을 수도 있다.
viewport : 모바일 최적화
display:none <-> block
아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨
visibility:hidden <-> visible
보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨
display = "" 하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inline
div 태그 안에 있으면 block 가 쓰여지게 된다.
출처: https://unabated.tistory.com/entry/displaynone-과-visibilityhidden-의-차이 [랄라라]
reset css: 화면을 제작하다보면 내가 작성하지 않았음에도 불구하고 margin, padding등의 속성이
보이는 경우가 있다. 이럴때 이 기능이 필요하고, 크로스브라우징을 위해서 사용한다. 브라우저 마다 html시맨틱
태그에 대한 기본값이 다르므로 그 차이를 없애는데 필요하다.
크로스브라우징: 웹사이트 접속시 어느 한쪽에만 최적화됨을 막기 위해 공통요소를 사용해서 제작.
