반응형 개발/CSS33 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. 업무를 하며 느낀 styled-component와 sass 컨셉 스타트업의 프론트엔드 엔지니어인 나는 다음의 업무들을 하고 있다. 마케팅팀과 협업하여 자사 랜딩페이지 유지보수(줄여서 웹작업) SQL로 데이터 추출 내부 플랫폼 유지보수 새로운 어드민(관리자페이지) 작업(0부터 만드는 중) 위 4가지 업무중 웹작업(1번)과 어드민(4번)을 통해 styled-component와 sass의 컨셉을 실감할 수 있었다. sass는 어드민 작업에 들어가면서 처음 사용하였고 styled-component는 교육생시절부터 써온 친숙한 스택이다. 웹 작업은 마케팅지원이 주된 업무로써 가장 빠른방법으로 다양한 실험을 하고 있는 홈페이지이다. 그러다보니 각 페이지의 ui가 모두 다르다. 때문에 컴포넌트간의 의존성을 없애버리는 styled-component를 사용했던 것이다. styled-.. 2022. 4. 14. 이전 1 2 3 4 5 6 7 ··· 9 다음 반응형
