[Java 풀스택 과정 강의] 12/31일차

※ TIL와는 별개로 적는 개인 개발 일지라서 말은 좀 편하게하는 페이지입니다.
일지이기 때문에 일기의 성격이 더 강합니다.

 

 

12월 31일은 CSS 강의. 사실 이후에 적을 개인 개발 일지와도 어느정도 겹치는 부분이 있었다.

1월 2일에 적는 이유는 강의 끝나고 나서 쭉 바빴기 때문(개인 개발도 12월 31일이 마감이었기 때문에 그렇다).

1월 5일은 개인사정으로 강의 일지를 못 적기 때문에 양해 부탁. 나중에 따로 톺아보기는 하겠지만.

 

CSS 전체에 대해

앞서 말한 HTML과 달리 CSS는 라이브러리가 추가되어(SCSS, SASS, LESS 등) 더 확장될지언정 사장되는 것은 크게 없다. 애초에 HTML5가 들어온 뒤부터는 JS의 역할을 어느정도 CSS가 떠맡게 된 것도 있기 때문에 -내가 처음 개발을 시작할 때는 대부분의 복잡하다 싶은 처리는 JS가 다 해주었다- 확장언어들을 보면 CSS의 역할이 늘어날지언정 줄어들 일은 없어보인다.

 

그리고 개발자 개별의 개성이 HTML보다 더 크게 나타나는 언어이기도 하다. 선택자를 어떤 걸 취하느냐에 따라서 크게 달라지기 때문에…누군가는 id를 안 쓰고 class만 쓰는 사람도 있고, 다양하다. 정석대로 간다면야 id는 특정 요소에, class는 적용하고 싶은 '요소들'에라고는 하지만 그냥 요소 자체에 스타일을 박아넣는 사람도 있으니까.

 

 

기초적인 부분

오늘 배운 것 중에 이론적으로 유념하고 싶었던 것은 스타일 시트의 적용 순서다. 나는 이론보다 실무를 먼저 접한 사람이기 때문에 어렴풋이 알고는 있었지만, 이 부분은 매우 중요한 개념이다. 따라서 정리해둔다. 나는 이걸 출력할 때 '위에서 아래로 적용한다'라고 정리하고는 한다.

 

스타일 적용 순서

① 웹 브라우저 디폴트 값
② 외부 스타일
③ 헤드 부분의 내부 스타일
④ 태그에 정의된 인라인 스타일

 

① 웹 브라우저 디폴트 값

그야말로 웹 브라우저에서 적용되는 디폴트 값을 이야기한다. 브라우저마다 각 보정 값이 있고, 사용자 설정에 따른 기본값을 설정한다. 이 때문에 브라우저마다 보이는 게 다를 때가 있는데, 최근에는 그래도 어느정도 비슷하게 출력되도록 정돈되어 있는 상태다. 예전에는 IE 혼자만 지원이 안 되는 것들도 많았다(요즘도 이 문제로 애로사항을 겪기도 한다.).

 

② 외부 스타일

외부 스타일 시트를 불러오는 것을 이야기한다. 정확히는, head에서 링크로 불러오는 것들을 외부 스타일이라고 이야기한다. 요즘은 대부분 헤드 내부에서 선언하기 보다는 스타일 시트를 불러오는 걸 선호하고 있다. 스타일을 선언하는 양이 많아졌기 때문이다. head에 넣어두면 지저분해지고 알아보기 어렵다.

 

③ 헤드 부분의 내부 스타일

예전에는 꽤 채용했던 방식이다. 구체적으로 말하면 아직 css가 강세가 아닐 때의 이야기다. css 역할이 확장되면서 점점 이 지면은 줄어들었다. 요즘은 head에 굳이 넣지 않아도 되는 것들이 많아지긴 했지만, 굳이 head에 안 넣을 이유도 없긴 하다.

 

④ 태그에 정의된 인라인 스타일

예전에는 꽤 채용했던 방식(2)이다. 요즘도 꽤 채용한다. 특히 js에 의해서 스타일을 컨트롤 하면 부득이하게 이 방식을 쓰는 경우가 많다.

 

 

이 적용 방식의 중요성은 다름이 아니라, 같은 선택자여도 적용 순서에 따라서 다르게 적용되기 때문이다. 요소의 스타일 적용이 한번만 이루어진다면 뭘해도 상관없지만, 그렇지 않을 때가 있기 때문에 이 순서가 중요한 것이다.

 

style에서는 !important라는 치트키가 있다. 이걸 적용하면 다른 선언들을 무시하고 해당 스타일이 적용된다. 그러나 이건 치트키이자 최후의 수단이다. 어떤 유튜브 강의에서 !important를 가급적 쓰지 말라고 한 적이 있는데, 이 적용 순서와 선택자에 따라서 충분히 수정 가능한 것을 !important로 하고 나면 나중에 곤란한 일이 생기기가 너무 쉽다.

 

그 외의 이야기는 기초 강의에서 충분히 다루는 것들이기 때문에 생략한다.

 

 

선택자에 대해

아쉽게도 선택자에 대해서 이야기하다가 강의가 종료되었기 때문에, 이 일지도 중간에 멈춘다. 내가 아는 내용을 쓰라면 더 쓸 수는 있겠지만, 그건 복습의 의미도 없거니와 일지로서의 의미도 잃어버린다.

선택자는 ① 태그 ② 클래스 ③ 아이디 ④ 속성 ⑤ 상태로 나뉘어져 있다. 이들의 적용 순서는 좀 복잡하다. 다만 선택자는 기본적으로 넓은 순서 → 좁은 순서로 적용된다. 대상이 특정 될 수록 더 강한 규칙으로 이루어진다.

그런 의미에서 ③ 아이디가 기본적으론 가장 강하다고 볼 수 있다. ① 태그 → ②  클래스 → ④ 속성= ⑤상태 → ③ 아이디 순으로 강해지는 것…이 일반론이다. 선택자가 복합이 되면 될 수록 그쪽이 강해진다.

 

① 태그 선택자

div, a, h1 등등… 요소(Element) 선택자라고도 한다. 그쪽이 더 직관적이긴 하고, 나도 대체로 요소라고 부른다. 해당 요소 전체를 수정하는, 넓은 의미의 선택자라고 할 수 있다.

 

② class 선택자

정말 자주 쓰인다. 아이디보다 넓지만 요소보다는 강하고, 그리고 무엇보다 복합적인 요소에 한꺼번에 적용할 수 있다는 게 장점이다. 즉, div이든 a이든 해당 class에 따라서 스타일이 적용된다. 요소를 식별하는 역할을 가지는 아이디와 달리, 포괄하는 성격을 가지고 있다. 그 만능에 가까운 편리함 때문에, class만 사용해서 요소의 스타일을 지정하는 사람도 꽤 많다.

 

③ id 선택자

위 class보다는 자주 쓰이지 않는다. 쓸 때가 있긴 한데, 그건 강한 규칙을 적용하고 싶을 때다. 보통 하나하나 id를 지정해서 그에 맞춰 css를 사용하지 않는다. 효율이 떨어지기 때문이다. 그야말로 id 선택자를 쓴다는 건 그 요소 자체가 강한 개성을 갖고 있다는 뜻이다. id라는 것은 js에서 더 크게 다루어질 때가 많다(식별이 쉽기 때문).

 

④ 속성 선택자

나도 자주 헷갈리는 속성 선택자다. attribute에 따라서 지정하는 것이라 볼 수 있다. 특히 input에 자주 쓰인다. 나머지엔 그렇게까지 쓰이는진 모르겠다.

속성 선택자

① 요소명[속성="값"] : 값과 완전히 일치할 때
② 요소명[속성^="값"] : 해당 값으로 시작할 때
③ 요소명[속성$="값"]  : 해당 값으로 끝날 때
④ 요소명[속성*="값"]  : 해당 값을 포함할 때

 

2번과 3번의 경우 4번에 포괄되기 때문에, 잘 기억하지 못하면 그냥 4번으로 사용하는 경우가 있다(내가 그러하다). 2, 3번을 쓸 일이 크게 생기지 않았지만 숙지해두는 건 좋아보인다.

 

⑤ 상태 선택자

:checked, :focus, :enabled 등등… 예제로 나왔던 것들은 주로 input에 사용되는 것이고, 실제로도 input에서 자주 사용한다. 나는 checkbox 등에 자주 사용했다.

 

 

선택자는 여기까지 했다. 자손이나 동적, 가상요소 등에 대해서는 못했다. 자식까지는 설명해주셨지만 이건 자손과 같이 이야기하는 게 나아서 다음 기회…… 에는 쉬어서 톺아보면서 이야기하겠다.

 

 

그 후

이후는 lsit, position, float, display 등 css에서 사용하는 규칙 등에 대해서 배웠었다.

 

• font, color, letter, text
• background
• border
• margin, padding
• display 속성
• float 속성
• list
• position
• z-index

 

관련하여 정리한 글들이 많아서 크게 설명할 필요는 없지만 float과 position 보충 설명을 하고 싶어져서 조금만 추가.

 

float을 쓰는 곳은 아직도 많지만 display:flex; justify-content:space-between; 으로 충분히 커버가 가능하다. float의 단점은 다음 요소에 승계한다는 부분이라, clear:both를 입혀줘야한다. 최근에는 after 가상요소를 사용해서 해결하지만(와중에 강의에서는 after를 쓸때 더블콜론을 쓴다고 하지만 최근엔 싱글콜론으로도 작용하도록 바뀌었다), float의 단점이 많아 개인적으로는 사용을 안 하게 되었다(애초에 after 등의 처리가 번거로운 것도 사실이다.).

 

position에서 fixed도 요즘 자주 쓰이지만, sticky라는 position의 존재가 강의에는 없어(아마 굳이 넣을 필요가 없어서일 것이다) 적어본다.

static과 relative 및 sticky는 공간을 차지하고, 반면 absolute와 fixed는 공간을 차지하지 않는다. sticky는 공간을 차지하되 스크롤에 따라서 따라오는 특이한 position이다. 다만, 이것을 사용하려면 부모의 height가 결정되어 있어야 해서 fixed보다 번거롭다. height가 정해지지 않는 부모가 더 많기 때문이다. 그럼에도 사용하는 까닭은 fixed의 경우는 웹페이지 그 자체를 기준으로 삼는다면, sticky는 부모를 기준으로 삼는다. SNS에서 스크롤을 내리면 프로필 사진도 같이 내려올 때가 있는데, 이 경우 sticky를 사용하는 경우가 있다. 이럴 때 주로 사용한다.

 

오늘의 공부 이야기는 어제보다 길어졌는데, HTML 자체는 사실 구조만 알면 쉽다. 그러나 CSS는 이론을 기억해두지 않으면 까먹기도 쉽다. 스타일 시트를 하도 만지다보니 대부분의 규칙을 외우고는 있지만, 기록해둬서 나쁠 건 없기 때문에…

 

추가로 TIL에 선정된 상태라서 하루의 공부는 이쪽에서, 그리고 일주일에 대해서는 TIL에서 적어 올릴 예정이다.