개발자도구를 이용하면 코딩에 대한 다양한 학습이 가능하며, 코딩 시에도 아주 많은 도움을 줍니다.
그 중 가장 많이 사용되는 부분이 자바스크립트 디버깅과 디자인 관련 활용(테스트) 입니다.
이 두가지 중 이번 시간에는 디자인 관련 활용 부분에 대하여 알아 보고자 합니다.
동영상으로 확인하기를 원하시면 포스팅 내용 하단 부분에 있습니다.
디자인관련 활용 부분
- 개발자도구를 이용하여 CSS를 변경 또는 추가, 삭제 해 보면 소스를 수정하지 않고도 테스트가 가능합니다.
- CSS 속성과 속성값을 보여줌으로 CSS 학습에도 도움이 됩니다.
실습환경
실습 환경은 Internet Explorer 11 입니다.
코딩
먼저 간단하게 코딩을 해 보겠습니다.
코딩하지 않고 일반적인 웹화면에서 실습 해 보아도 좋습니다.
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <style> </style> </head>
<html>
<head>
<title>개발자도구 활용</title>
p.title {
white-space: pre-line;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
<p class="title"> 개발자도구를 이용한 CSS 학습하기
개발자도구를 이용하여 할 수 있는 것은 무엇이 있을까?
코딩학습에 아주 좋은 개발자도구 활용법을 배워보자.
</p>
</html>
개발자도구 실행
개발자도구는 F12 키를 클릭하여 실행 합니다. 인터넷익스플로러에서 F12 키를 눌러 보세요.
요소선택
요소선택 버튼을 클릭하여 웹 화면에서 요소(글자영역)를 클릭 해 줍니다. 단축키 Ctrl + B 를 이용해도 좋겠습니다. 클릭하면 해당 요소의 CSS(style) 부분이 우측영역에 표시 됩니다.
CSS 속성 값 변경
css속성값을 변경 해 보고 결과를 바로 확인 해 볼 수 있습니다. 또한 속성 값을 모를 경우, 속성 값을 지우고 스페이스 키를 눌러보면 해당 속성의 속성값들이 보여 집니다. 그 상태에서 방향키를 이용하여 위, 아래로 이동 해 보면 해당 속성이 웹화면에 바로바로 적용되어 변하는 모습을 확인 할 수 있습니다.
CSS 속성 추가
개발자도구 스타일 영역에서 마우스 오른쪽 버튼을 클릭하면 다양한 메뉴들이 나타납니다.
그 중 속성추가를 클릭하여 속성을 추가 할 수 있습니다.
CSS 속성 변경
CSS 모든 속성이 표시되니, 원하는 속성을 선택하여 지정 할 수 있습니다.
동영상으로 확인하기
동영상으로 확인 해 보도록 하겠습니다.
개발자도구를 이용하여 디자인관련(CSS) 활용 부분에 대하여 알아 보았습니다.
' IT > IT상식·꿀팁' 카테고리의 다른 글
| 단축키 만들기 및 편리한 단축키 모음 (4) | 2018.06.22 |
|---|---|
| 변수란 무엇인가 / 왜 변수를 사용하나 (1) | 2018.05.30 |
| 자동완성 기능으로 인터넷을 편하고 빠르게 사용해보자 (0) | 2018.05.25 |
| 컴퓨터가 느려졌을 때 프로그램 설치없이 속도 향상 (4) | 2018.05.19 |
| PC로 사용중인 와이파이 비밀번호 알아내기 (9) | 2018.05.06 |
댓글