[개발자 도구] 브라우저 크기 확인하기

안녕하세요. 플입니다. 오늘은 브라우저 크기를 확인해볼 거예요. 1. F12 브라우저를 킨 상태에서 F12키를 눌러주세요. 아니면 마우스 오른쪽 클릭을 해서 가장 마지막 메뉴 검사를 선택해주세요. 그러면 이런 개발자 도구 창이 뜨는데요. 오늘은 이 창을 자세히 볼 필요는 없습니다. 그냥 켜져 있구나 하고 옆으로 쓱 밀어두세요. 2. 창 크기 조절 브라우저의 오른쪽 끝을 잡고 움직여보면 브라우저 사이즈가 변동되는 걸 볼 수 있으실 거예요. 사이즈를 줄였다 늘려보시면 오른쪽 상단에 숫자가 뜨는 게 보이실 거예요. 지금 1211px x 727px이라고 쓰여있죠? 가로가 1211px이고 세로가 727px이라는 뜻입니다. 이렇게 내가 보는 화면의 사이즈를 확인해 볼 수 있어요. 이게 원래는 안 뜨는데 개발자 도구..

coding/개발 팁 · 2020. 10. 8. 07:30

[개발자 도구] class 확인하기

안녕하세요. 플입니다. 개발자 도구에서 클래스를 확인해볼게요. 1. 태그 선택 class를 확인하기 위해서는 class가 적용된 태그에서 확인해야겠죠? 클래스가 적용된 태그를 아무거나 선택해줍니다. 2. 클래스 보기 오른쪽에 css가 잔뜩 적힌 창이 있을 거예요. 그쪽에서 오른쪽 상단에 보시면 .cls이라고 적힌 글이 보이실 거예요. .cls는 class를 말해요. 꾹 눌러봅시다. 그러면 이렇게 사용된 클래스를 확인할 수 있어요. banner라는 클래스를 사용했네요. 여기서는 클래스 추가가 가능해요. 3. 클래스 체크 해제 체크박스를 해제하면 이렇게 클래스를 해제해볼 수 있어요. 해제하면 어떤 클래스에서 css가 적용된 건지 어디에서 오류가 생긴 건지 찾을 때 유용해요. 그럼 이만. 총총.

coding/개발 팁 · 2020. 5. 21. 07:30

[개발자 도구] css 체크박스 활용

안녕하세요. 플입니다. 오늘은 개발자 도구 중 css 체크박스 활용을 해볼게요. 1. css 체크박스 이것을 css 체크박스라고 부르는지는 잘 모르겠으나 제가 가리키는 것은 이 부분입니다. style탭에서 보면 홈페이지에 적용된 css를 쭉 볼 수 있어요. 각각 css 값 앞에 마우스를 올리면 체크박스가 나타납니다. 그 체크박스를 활용해볼게요. 2. 체크박스 활용 본격적으로 어떻게 활용하는지 알아볼게요. 먼저 홈페이지의 원래 상태예요. 적용된 css 중 아무거나 하나를 해제해볼게요. 바뀐 게 보이시나요? 이런 식으로 하나씩 체크를 해제해보면서 어떤 기능을 하는지 알아볼 수 있어요. 어디가 문제인가 하면서 하나씩 체크를 해제했다 체크했다가 하면서 찾을 수 있어요. 그럼 이만. 총총.

coding/개발 팁 · 2020. 5. 20. 07:30

[개발자 도구] 설정값 보기

안녕하세요. 플입니다. 개발자 도구에서 설정값을 편하게 확인해볼게요. 1. 개발자 도구 열기 개발자 도구란 이렇게 생긴 창을 말해요. F12를 누르거나 오른쪽 클릭 > 검사를 누르면 열 수 있어요. 2. 설정 확인할 요소 클릭 특정 요소의 설정을 확인할 거니까 왼쪽 상단에 있는 화살표 모양 아이콘을 클릭해주세요. 그리고 원하는 부분에 마우스를 올리면 이렇게 블럭처리가 됩니다. 원하는 부분이 맞다면 클릭해주세요. 클릭하면 개발자 도구에서 어떤 부분인지 표시가 됩니다. 간단하죠? 3. 설정값 확인 설정값을 편하게 확인하려면 옆쪽으로 가서 computed라는 메뉴를 선택해주세요. 이렇게 설정된 css값을 정리된 형태로 확인할 수 있어요. 만약 내가 설정하지 않은 값이 나와있어요!!! 하시는 분들은 기본 값이 ..

coding/개발 팁 · 2020. 3. 2. 07:30