🐥 좌표속성
기본 margin 있음. - top, left, botton, right 라는 속성을 사용하면 요소으 상하좌우 위치를 변경 가능 하지만 이 좌표속성르 사용하려면 position 속성이 필요 position 속성은 좌표속성을 적용할 기준점!!
🐥 position 속성 4가지
position : static 기준이 없다.(적용불가)
position : relative기준이 내 원래 위치
position : absolute기준이 내 부모
position : fixed기준이 브라우저 창 (viewport)
position : absolute 를 적용한 요소 가운데 정렬
left: 0
right:0
margin-left : auto
margin-right : auto
width : 적당히
🐥 z-index
Q) 공중에 떠있는 애들이 많으면, 누가 맨 앞에 올 것인가?
-> z-index : 정수가 높을 수록 더 앞으로 온다. 낮을수록 뒤로 간다.
🐙 반응형 웹피이지 만들고 싶으면 % 자주 사용할것!!
예) 부모 width의 80% <- 부모를 찾아라!!
단, width % 의 문제는 PC 사이즈에서 너무 큼.-> max-width와 함께 쓰면 됨.(최대폭최소폭)
(중요) width는 content 영역의 너비를 의미함.
예) 둘다 max-width:600px 인데 padding 주자마자 600px 넘어간 경우 -> width 상관 없다.
박스에 width: 600px 줘도 padding:50px 주면 실제 보이는 width는 700px
(해결책) content 부분만 width로 설정하지 말고 padding, border 포함해라.
->box-sizing: border-box
(tip) 모든 div는 box-sizing: border-box 해놓고 개발 시작하면 편함.
body {} 태그에 margin: 0px; 여백 제거 해놓고 시작하면 좋음._
(참고) 브라우저마다 디자인이 다르게 보일 수 있다
이런태그는 크롬 vs 파이어폭스 기본 디자인이 다름.
이런 태그는 일부 IE 브라우저에서 이상하게 보임.
-> (해결책) normalize.css (호환성 이슈 해결책)
🐥 form, input 폼 만들고 싶을 때 사용
<form action="경로" method="get">
- 작성한 내용이 어떤 서버경로로 전달될지
- 작성한 내용이 어떤 방식으로 서버에 전달될지
_큰 인풋으로 사이즈 크기 조절 가능
🐣 회고
css 를 하면서 class 명을 계속 만들지 않아도 재사용이 가능하다는 것을 깨닫게 되었다.
재사용하면서 개발 시간도 빨라지고 css 양도 줄어들고 통일감이 있어 class 명을 재사용의 중요성을 알게 된 순간이였다. 셀렉터에 콤마쓰면 여러개 동시 선택가능하고, label 태그 활용에 다양한 시도를 해봐야겠다.
항해를 나오면서 요즘 드는 생각...
노제로베이스여도 버티는 사람과 나오는 사람...어떤게 정답은 없다.
그치만 항해를 버텄더라면 나는 얼만큼 성장 했을까? 같이 이끌어주는 팀원과 매니저님이 계셔서..버텄을 것이고, 나의 성격상 하루하루 불안의 연속을 오가면 잠을 이루지 못하는 나날을 보냈을 것이다. 기본기 없이 성장은 어차피 무너지기 마련이고, 무늬만 포폴은 얻고 싶지 않았다. 내 스스로 코드를 짜며 생각하고 이해하면서 하나하나 구현이 내것이라고 생각하기에 무임승차는 그게 무슨 소용인가 싶어 나오게 되었지만, 오늘에서야 다시 뒤돌아 보게 된다. 남은 두달을 항해 제로베이스 분과 항해 나온 나의 제로베이스 성장성..몇배로 열심히 해야하지 하면서도 무섭고 두렵다. 잘하고 싶다. 성장하고 싶다. 좋은 개발자가 되고 싶다. 그리고 오늘은 많이 흔들리는 순간.... 서있기 조차도 힘든 그런날...누군가 나의 빛줄기라도 와서 잡아주길 원할지도..모른다.
그래도 어쩌겠어..그냥 해야지..막연히 오늘도 회고를 정리한다..
