HTML 브라우저별 개발자 도구 여는 방법 핫키 웹 브라우저에서 개발자 도구(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. DIV 상하 좌우 중앙 정렬하는 CSS html 퍼블리싱을 하다 보면, 중앙 정렬을 하는 경우가 생각보다 많습니다. 물론 요즘에는 flex를 쓰기도 하지만, 좀 더 고전적인 방법을 적어보려고 합니다. 고전적인 방법을 사용하면, 아직 최신 웹브라우저로 업데이트하지 않은 분들의 화면에도 제대로 보일 수 있습니다. 물론! css polyfill 을 사용하는 방법이 있기도 합니다. 물론 서울에서 부산까지 가는 길은 여러 길이 있지만, 오늘은 또 한 길을 소개해 볼까 합니다. 어렵게 생각할 것이 아니라, 객체를 싸고 있는 div의 display를 table로 지정하는 방법입니다. div를 테이블처럼 처리하는 방법입니다. 그리고, 그 안에 들어간 div는 display를 table-cell로 지정하면, text-align 뿐만 아니라, vertical-.. 2023. 6. 19. Html에서 가운뎃점 middle dot 쉽게 찍는 방법 웹 퍼블리싱을 하다보면, 가운뎃점을 찍어야 되는 경우가 종종 나옵니다. 이럴 때, 그림으로 표시할까, 그냥 이모지로 넣을까 고민이 되는데요. HTML 코드중 가운데 점을 표현하는 문자를 사용하는 방법이 있습니다. · middle dot 의 약자로, 상기와 같이 쓰면 가운데 점이 생성됩니다. HTML 삽입 미리보기할 수 없는 소스 아래는, 기타 알고 있으면 유용한 특수 문자들입니다. 칸 띄우기, 많이들 알고 계시죠? (non breaking space) 추가로 알고 있으면 좋은 코드들입니다. © (copyright) © ® (registrated trademark) ® < (less than) ° (degree = 각도) ° ² (superscript two = squared = 좌승) ² & (amper.. 2023. 6. 16. 이전 1 다음 반응형
