css
-
css만 건들일거면 class로 하는 것이 좋다.
javaScript사용할 때 id를 쓰기 때문에 id를 다 쓰게 되면 script할 때 id를 사용못 할 수도 있음 -
body는 기본 margin이 8씩 붙기 때문에
body { margin: 0; } 해놓기 -
float: left;
-> 블록레벨이라 밑으로 떨어지지만, 인라인레벨처럼 옆으로 정렬 -
자식을 px로 주는 경우 크기가 넘쳐 흐르는 경우가 발생된다.
반응형을 잘 생각해둬야해서 부모를 px로 둬도 자식은 %로 두는 것이 좋다. -
웹페이지는 양쪽 빈 공간은 대칭으로 넣는 것이 중요하다.
-
현재 문서 중에 최상단(헤더)에 있는 영역에 margin-top값을 줬을 경우 안먹힘.
그래서 부모태그에 padding-top을 줘야 함. -
id나 class를 사용할 일이 없어도 일단 사용하는 것이 좋다.
추후 협업할 때 해당 이름을 보고 알아보기 쉽게 하기 위함이다. -
★한방코드를 사용할 때 주의할 점, 쓰지 않은 부분은 기본값으로 인식함.
하위에서 한방코드를 사용함에 있어 주의할 것! -
(ir방식)시각장애인용으로 뒤에 글자를 숨겨놓고 시각장애인이 해당 이미지를 눌렀을 때 그 글자를 읽어주는 기능
- alt안에 있는 글자는 읽어주지 않는다.
- text-indent: - nn px -> 화면 밖으로 날릴 수 있음.
- 이미지태그를 쓰거나, 동영상을 쓸 때 뒤에 글씨를 숨김처리해서 날려야한다.
-
구조를 짤 때 한줄 한줄 다 묶는 게 좋긴 한데 반응형을 생각해서 한번에 묶는것이 더 좋을 수도 있다.
-
메뉴를 만들 때 메뉴들 사이사이를 margin이 아니라 padding으로 띄우는 걸 권장한다.
margin으로 띄워놓으면 빈공간이라 마우스가 빈공간으로 가면 펼쳐져있는 메뉴가 자꾸 접혀서 불편하다. -
position과 float은 같이 사용하지 않는다.
position이 더 상위이기 때문에 float이 의미가 없기 때문이다.
하지만 기준점을 주기 위한 position과 옆으로 놓기 위한 float는 같이 놓아도 상관없다. -
pc화면뿐만아니라 모바일화면도 신경을 써야 한다.
왜냐하면 pc화면은 크니까 다 펼쳐놓을 수 있지만 모바일 화면은 작아서 pc화면에서는 띄워놨던 것을 숨기거나 순서를 변경하는 경우가 왕왕있다.
그러므로 구역을 잘 나눠놔야한다. (구조를 잘 짜놓자) -
inline으로 바꾸고나서 미세한 빈칸이 거슬리다면 부모에게 font-size 0을 주고 자식에게 font-size를 다시 준다.
-
다음버튼을 누르면 다음 리스트들이 나올 때 ul 태그보단 div태그를 사용하는 것이 좋다.
왜?
반응형으로 하면 top위치가 애매해져서 ul로 쓰면 top위치를 잡을 수가 없다.
div로 감싸서(top위치 필요하지 않게) ul을 써야 해서 구조를 한 번 더 잡아야 하기 때문에 처음부터 div로 만드는 것이 좋다. -
user-select: none;
글자 선택 안되게 하는것. -
cursor: pointer;
누르는거라고 커서 모양 바뀌게 하는 것. -
평소 안보이게 하다가 이벤트가 생기면 나타날 때나
이벤트가 생기기 전과 후가 레이아웃이 바뀌지 않을 때,
이벤트 생긴 후의 코드에 다 작성하는 것이 좋다.
코드의 간결성을 위함이다. -
aspect-ratio: x축 / y축;
aspect-ratio: 1/2; -> 가로가 1, 세로가 2
aspect-ratio: 2/1; -> 가로가 2, 세로가 1
비율을 건드리는 속성. (단위는 실수)
auto auto -> 기본값 -
svg : inline 레벨
css로 width, height를 건드리지 않고 해당 svg에 속성으로 사이즈를 준다.
viewBox는 지우지 말 것. 사이즈에 관련된 비율임.
css적용
-
.member > a{}
css줄 때 이렇게 해서 줘도 됨
member class 자식으로 있는 a태그 -
같은 내용 동시 적용 -> 쉼표로 구분
-> add, add_item{margin: 0;}
가운데정렬
- block : margin 0 auto
- inline: (블록이라면 inline-block으로 바꾸고) text-align: center; 주기.
- inline: (수직정렬) vertical-align: middle;
inline요소한테 직접 주면 된다. 주위 inline요소에 맞춰서 정렬. - div{ul{li}}
위 구조일 때 위아래에 여백두고 가운데 정렬할 때 li에 마진주면 되지만 div에 line-height주면 알아서 공간먹고 가운데정렬도 해준다. - ul{li}에 가로nav일 때 : ul{text-align: center;} 하고, li{display: inline-block;} 하면 된다.
- 이미지태그 :
line-height: 1; (영역 딱맞추기)
padding: px (패딩으로 주위에 영역 만들어주기) - flex :
display: flex;
justify-content: center;
align-items: center;
부모에게 위와같이 주면 본인의 영역만 잡기 때문에 본인에게 span을 넣어서 글자를 안에 넣고 저렇게 줘야 한다. (그런데 글자도 내 안에 있는 요소이기 때문에 span으로 감싸지 않아도 가운데정렬이 되긴 하나 정석은 span으로 감싸는 것) - position :
position: absolute;
left: 100px; right: 100px; top: 100px; bottom: 100px - transform :
position: absolute;
top: 50%; left: 50%
transform: translate(-50%, -50%);
중요 5대장
- calc : 계산기
- overflow : 영역을 넘어가는 부분을 관리
- float : 요소의 레벨에 상관없이 옆으로 나열
- display : 요소의 레벨을 바꿔주거나 화면에서 사라지게 할 수 있는 속성
- position : 요소의 위치를 잡아주는 속성
기타
-
web페이지에서 색상 뽑아오고 싶을 때
F12눌러서 개발툴을 누르고 아무거나 찍고 style에 background 컬러 아무거나 주고
컬러표 누르고 스포이드 눌러서 원하는 곳 누르면 색상값 얻을 수 있다.
색상값 : #00a3e0 -
개발자도구가서 css 수정하고 위에 element.style에 입력된 코드 복붙하면 편함!
-
elements창에서 esc누르거나 console창가던가 위에 빨간x표시누르면 에러 확인할 수 있다.
-
웹사이트 구조 볼 때 팁!
보통 큰 body안에 header, container, footer로 나눠서 작업한다.
그 중 container(main)이 중요! -
반복되는 레이아웃을 짜면 보다가 지루해져서 나가기 쉽다. 중간에 롱배너를 넣는 이유가 반복되는 레이아웃을 한 번 리프레쉬하는 이유이다.
-
pw:focus + span
(pw : input태그)pw를 focus하고 있을 때 바로 밑에있는(+) span태그를 어떻게 해라 -
공백 : 자식+자손들
'> : 자식만
'+ : 바로 밑에 있는(형제). 자식x. 바로 밑에 자식이 있다고 자식이 언급되는 것이 아님.
~ : 밑에 있는 것들(형제). 자식x. 바로 밑에 자식이 있다고 자식이 언급되는 것이 아님. -
ctrl+shift+R
새로고침을 너무 많이하면 서버에서 같은걸 들고온다고 인식해서 트래픽을 너무 많이 먹어서 새로고침이 안될 때가 있음
그럴때 ctrl+shift+R을 누르면 트래픽초기화돼서 새로고침이 됨. -
caniuse.com : 쓰는 css요소가 해당 브라우저에서 사용할 수 있는지 볼 수 있는 사이트. 빨간색으로 되어있으면 전혀 사용할 수 없고, 초록색은 사용가능하며, 갈색은 조건이 필요한것(거의 못쓴다고 보면 됨)
