CSS 브라우저별 개발자 도구 여는 방법 핫키 웹 브라우저에서 개발자 도구(DevTools)를 여는 방법은 다음과 같습니다. 단축키로 개발자 도구 열기Windows/LinuxF12 키를 누르기 또는 Ctrl + Shift + iMacCommand + Option + i 또는 F12 브라우저 메뉴에서 개발자 도구 열기Chrome (크롬):브라우저 우측 상단의 점 세 개 (⋮) 버튼 클릭 → 더보기 도구 → 개발자 도구 선택또는 페이지에서 마우스 오른쪽 클릭 → 검사 선택Edge (엣지):우측 상단의 점 세 개 (⋮) 버튼 클릭 → 도구 더보기 → 개발자 도구또는 마우스 오른쪽 클릭 → 검사 Firefox (파이어폭스):우측 상단의 햄버거 메뉴(☰) 클릭 → 웹 개발자 → 도구 열기또는 마우스 오른쪽 클릭 → 검사 Safari (사파리):Safari .. 2024. 11. 18. css flex 가능한 브라우저 및 버전은? flex는 기존에 div 로 css의 향연을 하던 노가다와 불확실성에서 벗어나.. 박스의 공간 배치를 더 직관적으로 할 수 있는 예약어입니다. 예를 들어 아래와 같이 사용합니다. Item 1 Item 2 Item 3 위와 같은 문서가 있다고 할때, 아래와 같이 CSS를 정의하면, item 클래스를 갖는 div를 수평 및 수직으로, 가운데 정렬할 수 있습니다. 무척 간단하죠. body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif;}.container { .. 2024. 7. 15. React.js p태그 줄바꿈 하는 2가지 방법 서버에서 \n 으로 보내주었다고 하더라도, 프런트가 웹 환경이라면, \n이 자동으로 줄바꿈(개행)이 되지 않습니다.이럴때 사용하는 2가지 방법이 있습니다. 첫번째는, \n을 로 치환하는 방법이고,두번째 방법은 \n을 표현해주도록 css를 선언하는 방법입니다. {ret.content} 원래 위와 같은 코드가 있다고 할때, 첫번째 방법부터 보겠습니다. 첫번째 방법은 아래와 같습니다. {ret.content.split('\n').map((line, index) => ( {line} ))} 입력된 값에서 \n을 기준으로 분활한후, map을 이용하여, 각 줄 끝에 를 추가하는 방식입니다. 두번째 방법 보겠습니다.두번째 방법은 아래와 같습니다. {ret.content} css의 white-spac.. 2024. 6. 19. DIV 상하 좌우 중앙 정렬하는 CSS html 퍼블리싱을 하다 보면, 중앙 정렬을 하는 경우가 생각보다 많습니다. 물론 요즘에는 flex를 쓰기도 하지만, 좀 더 고전적인 방법을 적어보려고 합니다. 고전적인 방법을 사용하면, 아직 최신 웹브라우저로 업데이트하지 않은 분들의 화면에도 제대로 보일 수 있습니다. 물론! css polyfill 을 사용하는 방법이 있기도 합니다. 물론 서울에서 부산까지 가는 길은 여러 길이 있지만, 오늘은 또 한 길을 소개해 볼까 합니다. 어렵게 생각할 것이 아니라, 객체를 싸고 있는 div의 display를 table로 지정하는 방법입니다. div를 테이블처럼 처리하는 방법입니다. 그리고, 그 안에 들어간 div는 display를 table-cell로 지정하면, text-align 뿐만 아니라, vertical-.. 2023. 6. 19. 이전 1 다음 반응형
