서론
최근 코드 리뷰를 받을 때 지적 받은 부분이 있어.
그건 바로 css에 대한 부분이야.
게시판을 만들 때 부트스트랩을 사용했는데,
그 외에 수정사항이 생기면 딱히 외부 CSS를 만들기 귀찮기도해서,
이런식으로 인라인 css를 이용했어. 죄다 style 투성이지?
그런데 이런 방법은 굉장히 좋지 않다고 하더라구.
나는 디자인 관심없고 개발만 하고 싶은데..
그래, 사실 제일 중요한 건 기능이지. 안그래? 아무리 잘뽑은 디자인의 웹이라고 하더라도 기능이 엉망진창이면 누가 이용하겠어?
하지만 반대로 온갖 기능구현이 다 되어있는데, 사용자가 불편하거나 저세상 디자인이라면 그 또한 누가 이용하겠어?
그리고 하나 더. 개발을 할 때 기본적인 디자인은 맞춰줘야 한다고 생각해.
디자인에 대한 수정사항이 있을 때마다 계속 디자이너에게 피드백 받을 수는 없는 노릇이니까.
아무튼! 오늘은 CSS에 대해 알아볼거야.
다만 나는 프론트엔드를 잘 아는 것도 아니어서 깊게는 알 수 없지만
그냥 저 사람은 저렇게 했구나- 정도로만 봐주면 감사할 것 같아.
CSS란?
Cascading Style Sheets
HTML 안에 들어간 요소의 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인을 조정할 수 있게하는 언어야.
CSS 종류
인라인 스타일시트
- 글 서두에 나왔던 방법이야. style:"......." 이런식으로 작성하는 방법이지.
그러나 굉장히 좋지 않은 방법이니까 저렇게 사용하는 습관을 버리자!
내부 스타일시트
- 이번 글에서는 다루지 않을 생각인데, 디자인을 적용할 파일 상단부분에 CSS를 만들어주는 방식이야.
CSS 문법을 그대로 적용해서 작성하는 방법이지. 개인적인 생각이지만, 내부 스타일시트도 그리 좋은 방법은 아닌 것 같아.
외부 스타일시트
- 오늘 다룰 주제야. 따로 CSS파일을 만들어서, 디자인적 요소를 구현해 놓고 호출해서 사용하는 방식이지.
CSS 만들기
기본적으로 CSS는 선택자와 선언부로 구성돼.
선택자는 Class이름, 선언부는 그 Class를 호출해서 사용할 디자인적 요소- 정도로 보면 될 것 같아.
선택자는 쓰기 편한 이름으로 작성하면 될 것 같은데, 나는 선택자 이름만 봐도 대충 어떤 기능의 디자인 부분인지 유추할 수 있게끔 지으려고 노력했던 것 같아.
선언부에는 말그대로 필요한 디자인적 요소를 쓰면 돼. width는 몇으로 할지, margin은 어디를 줄 지 등등 말이야.
CSS 적용하기
우선. 어떤 CSS를 적용하겠다고 알려줘야겠지?
위 사진처럼, link로 불러오면 돼. href 에는 CSS가 있는 위치를 적어주면 되지. 나 같은 경우는 css라는 폴더를 만들고 그 안에 파일을 넣어 놨어.
그리고나서 사용할 div, button 등에 class="선택자" 로 작성하면 적용완료!
그런데 코드를 자세히보면 class="" 안에 여러개의 선택자가 작성된 것도 보일거야.
저건 css 선택자를 여러개 적용시킨거야.
위의 코드는 부트스트랩을 사용했는데, 그 외에 수정사항이 생겨서 덮어씌운거지.
CSS 적용이 안된다구?
CSS를 작성해서 사용했는데 적용이 안될 때가 있어.
그럴 때 나는 몇가지 방법을 사용해.
1. 파일을 다시 빌드한다.
2. 서버를 다시 실행한다.
3. CTRL + F5를 누른다.
나는 애초에 *Build Automatically 를 설정해놔서 주로 3번을 많이 사용하고 있어.
*상단 메뉴바 -> Project -> Build Automatically 선택
글을 마치며,
내가 읽어봐도 별거 없는 내용이긴하다. 좀 부끄러울 정도야.
코드리뷰를 받고 경험을 가지고 써본 글이라 부족함 투성이네.
사실 CSS에 대한 규칙, 우선순위, 상속 등 많은 내용이 존재해.
내 글 말고도 CSS에 대해서 잘 정리해놓은 블로그들이 많으니까 찾아보는 것도 좋을 것 같아:D
마지막으로 개인적인 생각을 써보자면 개발자가 개발을 하면서 디자인에 대한 이해 및 필요성을 알고 있다면 좀 더 좋은 방향의 코드가 나오지 않을까 생각해.
프론트엔드 개발자, 백엔드 개발자, 풀스택 개발자 등등 나눠서 생각하는게 일반적이지만,
개발이 혼자하는 것도 아니고, 협업이라면 내가 맡은 일 이외에 다른 부분에 대한 이해를 갖춰나가는게 좋은 개발자가 되어가는 과정 아닐까?