맥북 html 단축키 - maegbug html danchugki

mac 컴퓨터 팁

Mac safari와 chrome 에서 html 보기

yesmu4 2021. 11. 3. 13:39

반응형

safari에서 html source를 확인하려면

​

safari 환경설정에서 가장 아래에 메뉴 막대에서 개발자용 메뉴보기를 클릭해주면

​

safari 메뉴에서 개발자용이라는 것이 뜨고 그 안에 웹 속성보기 메뉴가 뜬다.

​

단축키로 option + command + I

​

하면 볼 수 있으며

​

크롬에서는 option + command + U

혹은 우측 마우스 클릭으로 확인할 수 있다.

​

​

​

320x100

반응형

맥에서 쓰는 크롬 개발자모드 단축키 

크롬 개발자 모드는 윈도우에서는 F12 단축키를 눌러서 열 수 있습니다만,

맥에서는 단축키가 다릅니다.

맥에서는 크롬 개발자모드를 열려면 단축키 alt + cmd + i 를 누르면 됩니다.

버튼 눌러서 가려면 크롬의 오른쪽 상단의 메뉴 버튼 클릭 후 "도구 더보기" > "개발자 도구"를 누르면 됩니다.

그러면 이런식으로 크롬 개발자 도구 창이 열립니다.

공유하기

게시글 관리

반응형

맥북 사파리 개발자 도구

포스팅 요약

1. 포스팅 목적

2. 사파리화면 위에 개발자 도구 설정하는 법

3. 개발자 도구 사용법

4.개발자 도구 전체화면으로 켜지는 경우 해결법

<포스팅 목적>

맥북 사파리 개발자 도구 여는 단축키는 : option+cmd+i 

아래 사진 빨간 네모박스를 보시면,

저는 이미 사파리 메뉴막대에 개발자용 메뉴를 볼 수 있게 해놓았습니다.

이제부터 할 포스팅은!!!

1. 메뉴바에 개발자용 메뉴가 없으신 분들을 위해 설정하는법 알려드리겠습니다.

2. "있는데 어떻게 사용하는지 모르겠다" 라는 분들을 위해서도 아래 사용법 적어 놓았습니다.

<사파리화면 위에 개발자 도구 설정하는 법>

1. 사파리 환경설정

2. 고급

3. 메뉴 막대에서 개발자용 메뉴 보기 체크

<개발자 도구 사용법>

1. 웹속성 들어가기

(* option+cmd+i 단축키로 바로 켜기.)

개발자용 도구로 가서 "웹 속성 보기" 누르기 or

2. 요소/콘솔/소스 알아보기

요소: css ,페이지 전체 스타일 담당

콘솔: 페이지에서 바로 코드 실행 해볼 때/자바스크립트 console.log() 확인 창

소스: html, 페이지 뼈대 담당

3. 반응형 모드 스타일 보기

(*단축키 : control+cmd+r)

빨간 박스 안에 원하는 크기를 선택하면, 그 크기일때 스타일이 어떻게 변하는지 볼 수 있다.

프론트엔드의 경우, 오른쪽의 요소/콘솔/소스에서 html,css 보면서 작업하면 된다.

control+cmd+r을 한번 더 누르거나, 개발자용 도구 가서 

응답형 디자인모드 종료를 다시 눌러주면 종료된다. 

<개발자 도구 전체화면으로 켜지는 경우 해결법!>

1. 문제의 상황

아래 이미지와 같이 개발자 도구가 전체화면으로 켜질 경우,

빨간색화살표로 표시한 곳에 보이는 버튼 두개중 하나를 클릭해 주세요!

왼쪽 버튼은 개발자 도구 창을 오른쪽에 배치,

오른쪽은 개발자 도구를 화면 아래에 배치시켜 줍니다.

2. 시작화면에서 개발자 도구 단축키를 눌러 켰을 경우

아래 화면과 같은 인터넷 창을 열었을때 처음 나오는 시작페이지에서, 

개발자 도구를 키면 콘솔창에 보여질게 없으므로, 개발자도구가 전체화면으로 나옵니다.(사파리에 한해서 입니다!!!)

특정 페이지에 들어가셔서 개발자 도구를 열어주세요~ :)

도움이 되셨다면 하트 꾹 눌러주세요~ :)

반응형

공유하기

게시글 관리

저작자표시 비영리 변경금지

'(Mac)맥북 사용설명서' 카테고리의 다른 글