[Java / 자바] CSS의 개발 팁

공부/Java  2015.07.01 22:00

안녕하세요. 명월입니다.


CSS를 개발 팁이라고 하기에는 조금 부족하지만 그래도 모르시는 분들 많이 있는 듯 하여 하는데 있어 제가 팁을 소개 할려고 합니다.
참고로 여기 카테고리에 소개되는 공부들은 진짜 기초의 내용이기에 고수분들에게는 해당사항이 아닌 듯 싶습니다.


우리가 지금까지 프로그램 소스를 개발할 시에 소스 작성 후 결과를 확일하려면 컴파일을 하고 디버깅작업을 통해서 우리는 결과를 확인했습니다.
CSS의 경우에도 물론 웹페이지에 적용하고 웹페이지 새로고침(F5)를 통해서 결과를 확인하는 단계로 작업하는 것을 많이 하는데..
CSS의 경우는 디자인에 관계된 작업이기에 이작업이 엄청나게 많을 것입니다. 실제로도 background-color 하나 바꾸고 제대로 적용되나 F5, 폰트 사이즈 하나 바꾸고 F5...
간단한 작업이야 큰 지장이 없겠지만 CSS도 꽤 많은 작업을 요하는 작업이면 하나하나 확인하는 것도 엄청난 생산소모가 일어납니다.
그래서 모든 브라우저가 지원을 하지만 저는 파이어폭스가 개발환경에 가장 친숙하기에 파이어 폭스로 예제로 확인해 보겠습니다.


먼저 이전에 만들었던 예제를 재활용해서 소개를 하겠습니다.


예제 소스 - [Java / 자바] CSS - Selector(선택자)


예제 화면


위 개발자 모드는 파이어폭스에서 F12키를 누르면 나오는 툴입니다. 그 상태에서 왼쪽 상대에 있는 사각형안에 화살표가 잇는 버튼을 클릭을 하고 위 웹 페이지에 있는 요소를 하나 클릭해 보겠습니다. 저 같은 경우는 1. 개요부분을 클릭했군요.. 보시면 li태그에 적용된 style이 오른쪽 레이아웃에 나옵니다.


예제 화면


적용된 style을 확인 뿐아니라 직접 수정을 해 볼 수도 있습니다. 오른쪽 레이아웃을 클릭을 하면 입력할 수 있는 텍스트 박스가 생깁니다.


---------------------작성중----------------------2016/03/11 수정

죄송합니다 현재 블로그 개선중입니다. 빠른 시일내로 포스트 수정해서 올리겠습니다.



댓글 0개가 달렸습니다.
댓글쓰기