In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine grained precision when selecting elements to style. In the next few articles we'll run thr

developer.mozilla.org

기본적으로 CSS는 '어디에' '어떤 장식을' 할 것인지를 말해주어야하고. 동시에 해당 상태값이 어느정도 되는지를 직접 입력해줘야한다. 그렇기에 '나는 OOO를 일단 선택할거야' 라고 말해주는 과정이 selector라는 개념이다.

누구한테, 어떤 속성을, 얼마나 줄건데?

좌측이 selector / 우측이 실제 CSS 속성

마치 게임을 하듯이. 한개의 요소에만 CSS 속성을 줄 수도 있고, 여러 대상을 동시에 선택해서 CSS 속성을 줄 수도 있다. 사실 '어떤 속성을 줄지'는 일단 '선택을 한 이후에' 일어나는 과정이다. 그렇기에 일단 '어떻게 개별 요소를 선택해서' 내가원하는 속성을 부여할수있는지. 그 방법을 일단 알아보도록 하자.

CSS 기초

게임을 통해 CSS의 Selector를 배워보자

CSS는 사실 기본적인 선택방식만 알아도, 사용에 크게 문제가 없는 편이다. 그리고 이런 필요에의해서 만들어진 교육용 게임이 있다. 자주 쓰이는 CSS 요소 선택방식을 - 게임을 통해서 알아보고. 실제 실무에서도 사용할 수 있도록 연습해보자.

https://flukeout.github.io/

이 게임의 내용은 아주 간단하다. 상단에서 선택하라고 나와있는 요소들만을 골라서 선택해주기위해. 어떤 내용을 CSS로 작성해야하는지를 알아보면 된다. 초반에는 매우 간단한 내용들이 나오지만, 스테이지가 넘어갈수록 복잡한 과정이 나오게된다.

접시위에있는 큰 사과와, 바닥에 있는 큰 사과를 모두 선택하려면 어떻게해야할까?

접시 위에있는 오렌지들 중에, 가장 위에있는 녀석을 선택하려면?

이 게임이 의미가있는건, 개별 접시라거나. 오렌지라거나하는 명칭들이. 사실상 실제 HTML 구조의 폴더구조를 반영한 것이기 때문이다. A에 들어있는 B. 그리고 B와 함께있는 C. 그리고 다시 B와 C에 각각 들어있는 D - 같은 개별적인 요소들을. 시각화하고, 개별 요소들을 선택하는 방식을 알려주는 것이다.

만약 게임을 진행하다가 답을 모르겠다면 다음 영상을 참고해보자. 처음부터 영상을 보고 답을 베끼기보다는, 어떤걸, 왜 입력해야하는지 직접 해보기를 추천한다.

https://www.youtube.com/watch?v=UFPwu8HC8GY

CSS 기초

모든 HTML 요소들은 눈에보이지 않는 박스영역을 갖고있다.

눈에 보이는것들만을 생각하면, 사실 이 내용을 이해하기 쉽지가 않은데. 웹디자인에서의 모든 HTML 요소들은 각자가 눈에보이는 범위 외에도 - 눈에 보이지않는 범위를 갖고있다. 그렇기 때문에 이 부분을 신경써서 만들어주어야한다. 특히나 신경써야하는 것이 패딩이라는 녀석인데. 우리가 보는 것 외에도- 다가오는 대상을 밀어내는 , 가상의 내부 보호막같은 영역을 갖고있다.

텍스트 바깥에 존재하는 패딩 간격값. 주변의 다른 오브젝트들을 밀어내주는 역할을 한다.

해당 부분은 다음 링크에서 직접 확인해보는것이 이해가 쉽다.

https://developer.mozilla.org/ko/docs/Web/CSS/padding

패딩은, 가상의 영역을 지정해놓고, 그 박스 안에서 일정 값만큼을 밀어내는 방식으로 만들어져있다. 그리고 이런 박스들을 여러개 쌓아올린것이 일반적인 웹디자인이다. 그렇기에 이런 박스들이 어떻게 쌓아올려져야하는지. 해상도가 변화하면 어떤 방향으로 쌓이게할지 등을 선택하는 것이 CSS의 레이아웃 영역이라고 할 수 있다.

작은 박스에서부터 시작해서, 커다란 박스에 이르기까지

사실 웹사이트는 모두 커다란 박스들을 겹치거나, 차례대로 쌓아둔 구조에 불과하다.

위의 시안을 보면, 어떤 박스들은 서로 겹쳐있거나, 별도로 큰 박스 안에 - 작은 박스를 담고있기도하다. 이런 방식에도 각자 이유가 있는 것인데. 가장 작은 박스는 더 큰 박스안에 들어가있는 것이고. 이런 박스들은 결국 전체 화면에서 가장 큰 박스 안에 담겨있는. 방 속의 방을 가진 구조이다.

그렇기 때문에 어떤 박스들을. 왜 크게 만들고. 다시 작은 박스들을 큰 박스 안에 넣어야하는지. 그 이유만 정확히 알아도 - 레이아웃을 잡거나 디자인을 하기가 매우 쉬워진다. 만약 본인이 기초지식이 부족하거나, 좀더 자세한 단계별 내용을 알고싶다면. 생활코딩의 CSS 관련 수업을 꼭 들어보길 추천한다.

https://opentutorials.org/course/2418

CSS 기초

외부파일로 CSS 작성하기

CSS는 굳이 하자면 HTML 내에서도 작성이 가능하지만, 일반적으로 외부에 파일을 따로 꺼내어 사용되는 경우가 많다. 왜냐하면 페이지 수정이나, 스타일링 수정시 - 문서가 복잡해지는경우가 발생하기 때문이다.

HTML 문서에서 작성을 잘 해둔 상태라면, CSS에서는 별 고민없이 - '난 여기에, 이 장식을 넣을거야'라고 하나하나 설정을 해주면 된다. 나중가서는 이런 스타일링도 '자주쓰이는 녀석들을 모아서 정리한다거나. 혹은 스타일링이 겹치지 않게, 넓은 범위로 적용하는 방식이 있지만. 일단은 필요한 부분에 하나하나 작성을 해서 넣어주는것을 연습해보자.

CSS 불러오기

작성된 CSS는 @import 명령을 통해서 - 웹페이지가 열릴때 순차적으로 CSS를 적용해서 만들어진다. 이 파일을 불러오기위해서는 CSS파일을 작성하고, HTML 내부에서 파일명을 그대로 작성해주면 된다.

CSS 파일을 불러오는 실제 사례

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

@import

The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.

developer.mozilla.org

만약 이것저것 복잡하게 생각하고싶지 않다면 - 실제 사이트에 쓰인 CSS를복사해 내 사이트에도 그대로 적용하는 방식도 있다.

물론 모든 옵션들을 그대로 동일하게 복사하는 경우, 자신의 상황에 맞지않을 수가 있으므로, 필요없는 요소는 과감하게 버리고. 수정해보아야한다.

이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.

저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!

단톡방 이용안내

https://brunch.co.kr/@clay1987/113

UI 디자인 연구소 - 오픈 카톡방 이용안내

UI 디자이너들을 위한 설계와 UI 연구 및 브리핑을 진행합니다 | UI 디자인 연구소 - 오픈 카톡방 지속적으로 올라오는 자체자료와 디자인 브리핑을 진행합니다. 일절의 잡담없이 자료만 모아볼 수 있는 곳입니다. https://open.kakao.com/o/gifba6eb 1. 기본정보 UI 디자인에 관련된 새로운 지식이나 뉴스, 이론과 소식들을 자체제작하여 전달해드립니다. - UI 디자인 트렌드에 관련된

brunch.co.kr/@clay1987/113

keyword