앞선 포스팅에서 말했듯, 이론 강의는 끝났기 때문에 클론 코딩을 진행하며 기록해두고 나중에 보면 좋을 만한 것들을 자질구레한것 까지, 메모장에 기록이 된 것이라면 모두 정리해 보았다.
1. reset.css
클론코딩을 시작하면서 가르쳐주신건데, 이름 그대로 웹사이트에 자동적으로 지정된 CSS를 reset한거다. 앞선 포스팅에서 <body>와 같은 부분에 자동적으로 margin이 적용되어있다고 했는데 이와같은 부분을 모두 reset하는 CSS가 담겨있다. 구글에 검색하면 CSS파일이 있으며, 그냥 내 프로젝트 디렉토리에 넣어서 import해 쓰면 된다.
2. page ruler redux
클론 코딩을 진행하며 element의 width나 height, 혹은 각 element사이의 여백의 길이를 잴 때 계속 사용한 tool로써, 어떤 웹사이트의 각 element의 요소들을 낱낱이 파헤쳐볼 수 있는 구글 확장 프로그램이다. 클론코딩을 할때 아주 유용할 것 같다.
3. 검정색 -> 회색 바꿀 때
CSS property에서 opacity를 사용해 바꿀 수 있었다. 투명도를 조정하기 때문에 검정색에서 좀 더 투명하게 하면 회색처럼 보이는 효과를 얻을 수 있다. 만일 메인 컬러가 검정색이고 회색을 쓸일이 별로 없다면, 이처럼 opacity를 이용해 회색을 나타낸 것도 괜찮다고 생각 했다.
4. :not
pseudo-selector의 일종으로 해당 element에 CSS가 적용되지 않길 원할때 사용한다.
:not(p) {
color: blue;
}예를 들어 위처럼 사용했다면, paragraph를 나타내는 <p>태그가 아닌 부분의 폰트색을 파란색으로 하겠다는 의미다.
이렇게 attribute에 접근하여 쓸 수도 있겠다.
input:not([type="password"]) {
background-color: blue;
}위의 경우에는 type이 password인 input을 제외하고 배경색을 푸르게 하겠다는 것이다. 일괄적으로 CSS가 적용되는 동일한 element중에서 한 두부분만 스타일을 다르게 하고 싶을 때 사용하면 괜찮다고 생각했다.
5. inherit
속성을 부모로부터 값을 상속받아 결정한다.
예를 들어 CSS가 다음과 같고,
body {
background-color : red;
}
div {
background-color : inherit;
}HTML이 다음과 같다면
<body>
<div>
this is child
</div>
</body><div> 박스 내의 배경색은 부모인 <body> 태그인 붉은 색이 될 것이다. 스타일을 적용시킬 때 부모, 자식관계에 너무 얽매인다고 생각이들어서 실제로 많이 쓸일 이있을 지는 모르겠다는 생각이 들었다.
6. style.css 에는 공통적으로 들어가는 css를 넣어놓는다고 했다.(니꼴라스는)
이 부분은 CSS 파일을 기능별, 스크린별로 나누어 재사용화를 위해 컴포넌트화 할 때 했던 말씀인데, 클론 코딩을 진행하며 실제로 각 파일들을 style.css에서 import를 하여 쓰고, style.css 에는 폰트같은 웹사이트 전체를 아우르는 CSS만 작성하였다. 이렇게 하면 당연히 HTML 파일에서는 sytle.css 파일 하나만 link하여 사용하면 된다.
7. vs code short cut
클론 코딩을 진행하면서 알게 된 것중 아주 꿀팁이라고 생각한 부분인데, 예를들면
nav>ul>li>a*4 이런 식으로 작성을 하면
<nav>
<ul>
<li>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</li>
</ul>
</nav>
이렇게 바로 나온다. 규칙은 부모 el(element) > 자식 el > el > .... >el *4(개수) 이런식으로 작성하면 된다. 신기하기도 하고 너무 편리해서 신나서 계속 썼던 기억이 난다.
8. box-sizing : border-box;
CSS로 스타일의 변경이 일어나도 해당 element의 box 사이즈를 변경하지 말라고 얘기하는 것이다. 원래는 예를들어, width를 지정하면 그 width를 유지하려고 만약 padding을 20을 주면 전체 width는 20만큼 늘어난다. 하지만 box-sizing을 border-box로 지정하게 되면 padding으로 width가 커지지 않고 전체 width는 유지하되 content의 width가 그만큼 줄게 된다.
9. CSS 파일 분리
클론 코딩을 진행하며 CSS파일을 분리했다고 했는데, 모두 다음과 같은 규칙에 따라 분리하였다.
components 폴더 : 각 페이지에서 재사용이 가능한, 예를 들면 웹사이트의 헤더같은 경우.
screen 폴더 : 화면에 보이는 페이지별로 분리.
styles.css : css전체적으로 사용하는 거의 변함이 없는 값들.
클론 코딩을 하며 많이 배웠다고 생각하는 점 중 하나 인데, 코딩을 작성할 때, 재사용할 부분이 어떤 것이고 어떻게 분리할 것인가를 알아야 하는 것이 중요하다고 알고 있었는데, CSS를 작성할 때도 잘 배운것 같았다.
10. z-indx
position을 설정해 각 위치를 조정하는 것을 다룬 앞선 포스팅에서 언급 했던 것 같은데, position을 지정함에 따라 각 element는 다른 레이어에 위치한다고 했었다. 이럴 때 해당 레이어의 순서가 몇번째인지 지정할 수 있는 property이다.
예를 들어 어떤 상황에서든지 이 element를 보이게 하고 싶다면, z-index를 99로 설정하는 식으로 사용할 수 있다. 조건 분기별로 페이지의 view를 바꾸는 것과 같은 상황에서 잘 사용할 수 있을 것 같았다.
11. animation forwards
animation을 쓸때 사용하는 속성(?)으로, 애니메이션의 마지막 속성값을 애니메이션이 끝나고도 유지하게 한다.
12. will-change
브라우저에게 뭔가가 바뀔거라고 얘기해준다. 브라우저는 이걸 바뀔 걸 알기때문에 좀더 부드러운 애니메이션이 가능케한다. (라고 말하셨다.) 뭔가 애매하게 말씀하신 것 같아서 검색해봤더니, 정말 말대로 애니메이션의 최적화를 위한 속성이었다.
이렇게 정리를 마쳐보았다. 지금은 사실 클론 코딩 강의를 모두 다 듣고, 졸업작품인 클론 코딩까지 마친 상태이다. 마지막 포스팅으로 강의를 듣고, 챌린지스를 진행하며 느낀점을 적어보겠다.!
'노마드코더 강의 > 코코아 클론' 카테고리의 다른 글
| 끝마치며. . . (0) | 2020.10.15 |
|---|---|
| [9일차] Media Query (0) | 2020.10.15 |
| [8일차-2] transition 과 animation (0) | 2020.10.06 |
| [8일차 - 1] state, pseudo element, color system, custom property (0) | 2020.10.06 |
| [8일차] position 과 pseudo selector (0) | 2020.10.05 |