·웹사이트에서 디자인 요소를 언급한다면 당연히 CSS를 이야기할 수 밖에 없습니다. html이라는 태그에 효과를 적용하여 원하는 디자인의 페이지를 완성할 수 있기 때문입니다. 이런 명령어들을 CSS라 부르게 되는데요. 디자인은 아주 작은 색상의 차이에도 결과물은 달라질 수 있습니다. 또한, CSS를 적용하고 싶은 태그, 클래스, 아이디 값을 찾아야 원하는 결과를 얻을 수 있습니다.
CSS 기본 선택자 3가지 정리
웹사이트 혹은 웹페이지는 html 태그를 기본 뼈대로 구성합니다. 대표적으로 레이아웃과 콘텐츠 영역이 있습니다. 여기에 버튼 혹은 구분선과 같은 표시를 넣게 됩니다. 기본적으로 태그를 이용
nosw.tistory.com
본인이 웹사이트를 모두 만들고 있는 상황이라면 CSS를 적용할 선택자를 쉽게 찾을 수 있습니다. 하지만, 이지 마련된 플랫폼을 이용하는 경우가 많이 있습니다. 예를 들어, 티스토리 블로그 또는 워드프레스가 있습니다. 해당 플랫폼을 이용하는 경우 이미 html 구조가 완성되어 있습니다. 따라서, 자신이 원하는 부분에 디자인 요소를 변경 혹은 적용하기 위해서는 선택자를 찾아야 하며, 적용된 css를 확인하는 것이 좋습니다.
크롬 개발자도구를 이용한 CSS 적용 테스트 방법
1. 크롬 개발자도구 보는 방법
과거에는 크롬(chrome) 웹브라우저에서 개발자도구를 활용하는 방법이 많이 공유가 되곤 했습니다. 지금은 다른 웹브라우저에서도 개발자도구를 열어볼 수 있습니다. 소스코드를 통해 원하는 태그를 찾고, CSS를 적용할 선택자 값을 확인할 수 있습니다. 또한, CSS 명령어를 적용해 원하는 효과를 실시간으로 확인할 수도 있습니다. 소스코드를 확인하고 싶은 페이지에서 F12 단축키를 입력하면 개발자도구를 확인할 수 있습니다.
위 사진은 본 게시글을 작성하는 과정에서 f12를 이용해 크롬 개발자 도구 창을 열어본 예시 사진입니다. 다양한 html 및 css 코드가 있는 것을 알 수 있습니다. 또한, 페이지가 로드되기 위해 필요한 파일, 스크립드, 네트워크등의 정보도 확인할 수 있습니다.
2. CSS 실시간으로 적용해보기.
1번에서 예시를 든 사진의 화면에서 아래에 보면 'Styles'라는 부분이 있습니다. 해당 부분은 현재 선택된 태그에 적용된 CSS에 관련된 정보를 보여주고 있습니다. 부모 속성과 자식 속성을 모두 보여주며, 간단하게 편집하여 적용해볼 수 있습니다. 아래는 간단하게 CSS를 적용한 예시를 확인합니다. 예시를 위해 'daum.net' 페이지를 이용합니다.
다음 검색포털의 메인 화면입니다. 여기 메뉴에는 검색 결과를 구분할 수 있는 탭 영역이 있습니다. '카페, 메일, 뉴스, ...'으로 되어 있습니다. 여기에 적당히 디자인을 적용해 보도록 합니다.
'카페' 탭에 사각형 테두리를 넣은 모습을 볼 수 있습니다. 위 사진의 오른쪽에는 CSS로 테두리를 넣는 명령어를 입력했습니다. 코드를 넣은 위에는 CSS 선택자도 확인할 수 있습니다. 보다 복잡한 내용을 넣을 수도 있을 것입니다. 위에서 알아본 것은 아주 간단한 예시의 하니일 뿐입니다.
마치며.
블로그 혹은 사이트에 CSS를 넣는 방법은 간단합니다. CSS 선택자를 잘 선택한 후, 원하는 효과의 코드를 입력하면 됩니다. CSS를 입력하는 방법은 크게 3가지가 존재합니다. 일반적으로 스타일시트(외부파일)를 많이 이용하게 됩니다. 여기서 선택자가 중요하게 됩니다. 크롬 개발자도구를 잘 활용한다면 원하는 효과를 빠르게 적용시켜, 수정 및 보완을 거쳐 최종 디자인을 만들 수 있습니다. 또한, 선택자를 확실하게 찾을 수 있기 때문에 시행착오를 줄이는데 도움이 될 수 있습니다.
