반응형 개발/CSS34 안드로이드, 아이폰 크로스 브라우징 IOS와 안드로이드의 css 기본값 차이를 정리한 것은 아니다. 그냥 오늘 있었던 일을 말한다. qa중이었다. 내 핸드폰에서는 글씨가 검은색으로 잘 보이는데, 아이폰을 가진분들한테는 글씨가 파란색으로 보인다고 하셨다. 처음부터 파란색이어서 원래 파란색인줄 아셨다고 했다. 한참을 찾아보는데 10년차 백엔드개발자분이 이런 말씀을 해주셨다. 시스템의 기본 설정값을 폰트 색상으로 사용하고 있는 듯 합니다. 그런데 ios계열은 기본 시스템 버튼 색상이 파란색이고 그 외는 검은색이라 그런 것으로 판단됩니다. 색깔만 지정해주면 될 것 같네요 그렇다. color가 없었기에 각 시스템의 기본 설정값으로 보이는 것이었다. color : black을 추가해주니 해결되었다. 또다른 문제가 있었다. 나의 화면에서는 다음과 같이.. 2022. 8. 26. flex 안쓰고 요소 중앙정렬 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 위와 같이 하면 된다. 먼저 차례대로 해보자. 1. 부모요소에 position:relative주기 position:absolute를 가진 요소는 상위요소들중 가장 가까운 relative를 가진 요소를 기준으로 위치를 잡기 때문 ㄴ .containor { position: relative; background-color: blue; height: 100%; } 그럼 다음과 같이 된다. 2. 자식요소에게 position:absolute주고 left,right로 위치시키기 이제 여기서 자식 .color에게 position,left,right값을 부여한다. .color { wid.. 2022. 8. 24. CSS 가상요소 ::before , ::after 때는 바야흐로.. 6.15일..(한달반전) 개인정보 처리방침 | 취소 및 환불 정책 이 화면을 만들기 위해 위와 같이 코드를 작성한 일이 있었다. 코드리뷰로 다음과 같이 코멘트가 달렸다. 요거를 before나 after를 사용해서 구현하는건 어떨까요..? 큰 문제는 아니지만.. 나중에 a태그가 더 추가되면 관리하기 더 편할 것 같아서요! 사실 before, after를 보기만 했지 뭔지도 몰랐고 관심도 없었었다. 이번기회에 알아보았다. CSS 가상요소 가상요소 설명 ::before 요소 내용 앞에 새 컨텐츠 추가 ::after 요소 내용 끝에 새 컨텐츠 추가 ::selection 마우스 드래그로 선택한 텍스트 컨텐츠 영역 선택 ::marker 목록 아이템 앞에 붙는 마커 선택 ::first-letter .. 2022. 8. 2. nth-child() : class 일일이 작성하지 않고도 스타일 지정할 항목 골라서 변경하기 그냥 코드 하나 남긴다. 첫번째 글 두번째 글 세번째 글 네번째 글 다섯번째 글 여섯번째 글 일곱번째 글 여덟번째 글 아홉번째 글 열번째 글 열한번째 글 열두번째 글 .list li:nth-child(5) { background-color: #ffff00; } .list li:nth-child(3n) { background-color: antiquewhite; } .list li:nth-child(5n-1) { background-color: skyblue; } .list li:nth-child(odd) { color: blueviolet; } .list li:nth-child(even) { color: lawngreen; } nth-child(5) : 5번째 요소에 적용 nth-child(3n) : 3.. 2022. 8. 1. 이전 1 2 3 4 5 6 7 ··· 9 다음 반응형
