안녕하세요. 명월입니다.
이 글은 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드)에 대한 글입니다.
웹 서비스을 개발하면 딱히 CSS 개발를 돕는 툴을 따로 없습니다. CSS는 어차피 화면 디자인에 관계된 스타일이기 떄문에 직접 클라이언트(browser)에서 직접 색을 바꿔보고 테스트를 하는게 훨씬 효율적입니다.
즉, 로컬에서 직접 html를 작성하고 브라우저로 바로바로 확인하면서 개발하는 방식이 편합니다.
브라우저의 종류도 10년 전까지만 해도 IE(윈도우 익스플로러)가 한국에서는 사용율이 가장 높았는데, 최근에는 chrome이 독보적으로 사용율이 높네요.
제 블로그 접속 통계만 보더라도 PC에서의 크롬 접속율이 압도적으로 높습니다.
같은 css 스타일이라도 각 브라우저마다 약간식 차이가 있기 때문에 가장 많이 사용하는 브라우저를 대상으로 css를 설계하고 작성하는게 좋습니다.
브라우저에는 css를 바로 작성하고 테스트 해 볼 수있는 개발자 도구라는 기능이 있습니다.
간단한 테스트 html을 작성해서 개발자 도구의 사용 방법을 소개 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>문서예제</title>
<style>
/* h1 태그 스타일*/
h1 {
color:green;
text-align:center;
}
/* h2 태그 스타일 */
h2 {
padding-left : 20px;
border-bottom : 3px solid #000;
}
/* li 태그 스타일 */
li {
background-color:green;
border-bottom : 1px solid #000;
font-size : 20px;
height:30px;
padding-top:10px;
}
/* li 태그의 바로 하위 파생 태그 a 태그 스타일 */
li > a {
text-decoration:none;
color:white;
}
/* body 태그의 바로 하위 파생 태그 div 태그 스타일 */
body > div {
border:1px solid red;
margin:2px;
}
/* body 태그의 바로 하위 파생 태그 div 의 하위 파생 태그 div 스타일 */
body > div div {
height:100px;
}
</style>
</head>
<body>
<h1>개발기획서</h1>
<h2>목차</h2>
<ol>
<li><a>개요</a></li>
<li><a>개발내용</a></li>
<li><a>개발기간</a></li>
<li><a>개발인원</a></li>
</ol>
<hr>
<div>
<h3>개요</h3>
<div>이 문서는 그냥 만들었습니다.</div>
</div>
<div>
<h3>개발내용</h3>
<div>아이언 맨을 만들기 위한 전략 수립</div>
</div>
<div>
<h3>개발기간</h3>
<div>하루면 충분함</div>
</div>
<div>
<h3>개발내용</h3>
<div>나 혼자면 충분하다</div>
</div>
</body>
</html>
위 소스를 작성하고 브라우저에서 실행했습니다. 그리고 브라우저를 개발자 모드(shift + ctrl + i)로 실행했습니다.
그리고 오른쪽에서 html를 선택하면 브라우저에는 파란색으로 해당 태그의 영역이 표시가 되고 아래에는 해당 태그의 style이 표시됩니다.
또는 개발자 모드 창의 왼쪽 상단의 버튼을 클릭해서 브라우저에 클릭하면 태그와 해당 태그의 style이 표시됩니다.
이제 다시 개발자 모드 사용 방법을 알아보겠습니다.
태그 스타일 영역에 입력하면 직접 css style를 적용해서 바로 브라우저에서 확인할 수 있습니다. 물론 작성해서 카피 복사해서 본 html에 직접 적용하면 됩니다.
기존에 설정된 style에 대해서도 수정이 가능합니다.
해당 태그의 스타일 계층과 css 파일 위치등도 찾아 볼수 있습니다.
여기까지 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드)에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [Javascript] Html 요소(element)의 속성(attribute)을 추가, 삭제 그리고 수정하는 방법 (0) | 2020.03.23 |
|---|---|
| [Javascript] Html 요소(element)의 생성(CreateElement), 추가(appendChild)하는 방법 (2) | 2020.03.23 |
| [Javascript] Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...) (0) | 2020.03.23 |
| [Javascript] 변수 선언, 제어문, 함수 사용법 (0) | 2020.03.23 |
| [CSS] 색 스타일(color style) - 그라데이션(gradient) (2) | 2020.03.10 |
| [CSS] 애니메이션(animation) (0) | 2020.02.28 |
| [CSS] 트랜스폼 (transform) (0) | 2020.02.19 |
| [CSS] 트랜지션 (transition) (0) | 2020.02.18 |