개발자도구를 이용하면 코딩에 대한 다양한 학습이 가능하며, 코딩 시에도 아주 많은 도움을 줍니다.

그 중 가장 많이 사용되는 부분이 자바스크립트 디버깅과 디자인 관련 활용(테스트) 입니다.

이 두가지 중 이번 시간에는 디자인 관련 활용 부분에 대하여 알아 보고자 합니다.

영상으로 확인하기를 원하시면 포스팅 내용 하단 부분에 있습니다.

 

개발자도구 이용한 CSS학습

 

  디자인관련 활용 부분

  • 개발자도구를 이용하여 CSS를 변경 또는 추가, 삭제 해 보면 소스를 수정하지 않고도 테스트가 가능합니다.
  • CSS 속성과 속성값을 보여줌으로 CSS 학습에도 도움이 됩니다.

 

  실습환경

실습 환경은 Internet Explorer 11 입니다. 

 

  코딩

먼저 간단하게 코딩을 해 보겠습니다.

코딩하지 않고 일반적인 웹화면에서 실습 해 보아도 좋습니다.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>
<html>
<head>
  <title>개발자도구 활용</title>

  <style>
     p.title {
         white-space: pre-line;
         width: 200px;
         overflow: hidden;
         text-overflow: ellipsis;
     }

  </style>

</head>
  <p class="title">  개발자도구를 이용한 CSS 학습하기
  개발자도구를 이용하여 할 수 있는 것은 무엇이 있을까?
  코딩학습에 아주 좋은 개발자도구 활용법을 배워보자.
  </p>
</html>

 

테스트를 위한 코딩

 

 

  개발자도구 실행

개발자도구는 F12 키를 클릭하여 실행 합니다. 인터넷익스플로러에서 F12 키를 눌러 보세요.

개발자도구 실행모습

 

 

  요소선택

요소선택 버튼을 클릭하여 웹 화면에서 요소(글자영역)를 클릭 해 줍니다. 단축키 Ctrl + B 를 이용해도 좋겠습니다. 클릭하면 해당 요소의 CSS(style) 부분이 우측영역에 표시 됩니다.

개발자도구 요소선택

 

  CSS 속성 값 변경

css속성값을 변경 해 보고 결과를 바로 확인 해 볼 수 있습니다. 또한 속성 값을 모를 경우, 속성 값을 지우고 스페이스 키를 눌러보면 해당 속성의 속성값들이 보여 집니다. 그 상태에서 방향키를 이용하여 위, 아래로 이동 해 보면 해당 속성이 웹화면에 바로바로 적용되어 변하는 모습을 확인 할 수 있습니다. 

속성값 지정

 

  CSS 속성 추가

개발자도구 스타일 영역에서 마우스 오른쪽 버튼을 클릭하면 다양한 메뉴들이 나타납니다.

그 중 속성추가를 클릭하여 속성을 추가 할 수 있습니다.속성추가

 

  CSS 속성 변경

CSS 모든 속성이 표시되니, 원하는 속성을 선택하여 지정 할 수 있습니다.

CSS 속성지정

 

  동영상으로 확인하기

동영상으로 확인 해 보도록 하겠습니다.

 

개발자도구를 이용하여 디자인관련(CSS) 활용 부분에 대하여 알아 보았습니다. 

Posted by 행복한 유유로그

댓글을 달아 주세요

  1. 공수래공수거 2018.05.29 08:50 신고  댓글주소  수정/삭제  댓글쓰기

    요즘은 코딩이 필수 인것 같더라고요^^

  2. 멜로요우 2018.05.29 13:58 신고  댓글주소  수정/삭제  댓글쓰기

    ccs는 배우려고하면 너무 배워야할게 많은거같아요. 디자인전공하시면 대단한거같아요