7일차 역시 코딩 챌린지를 진행했다.
8일차
1. position
position 이라는 property 의 타입은 크게 4가지 정도이며, static을 제외하고 top, right, left, bottom 과 같은 property들을 이용하여 최종 위치를 결정한다. 각 타입은 top, right, left, bottom 의 기준이 되는 위치를 지정하는데 차이가 있었다.
1-1. position : static
default 값으로 element가 처음 위치한 곳에 위치해있다. top, right, left, bottom 과 같은 property들의 값에 영향을 받지 않는다.
1-2. position : fixed
fixed라는 이름에서 유추할 수 있듯이 위치가 고정되어있다. 이 때 이 위치는 처음에 레이아웃 상에서 위치한 element의 초기위치이다. 예를들어 하나의 <div> box를 position : fixed 로 쓴다면 스크롤을 내리더라도 처음과 똑같은 위치에 자리잡은 모습으로 볼 수 있다. 이것은 많은 웹사이트의 사이드 메뉴와 같은 모습이다.
여기서 top, right, left, bottom 과 같은 property를 사용하면 현재의 레이아웃에서 벗어나 완전히 다른 레이아웃에 존재하게 된다.
1-3. position : relative
처음 위치를 기준으로 이동이 가능하다. 역시 top, right, left, bottom 과 같은 property를 사용할 수 있다. 현재 위치에서 조금씩 위치를 바꾸고 싶을 때 유용하다고 한다.
1-4. position : absolute
좀 특이했는데 가장 가까운 position : relative property를 갖고있는 부모를 기준으로 이동한다. 만일 자신의 바로 위 부모가 relative 하지 않다면 그 위로, 그 위에도 없고 계속 없다면 body를 부모로 하게 된다.
2. pseudo selector
이전에 태그자체, id, class 등등의 html 을 선택하는 selector 가 있었다는 것을 배웠다. 태그자체를 가리키는 selector를 제외하면 모두 html 에서 해당 selector로 가리킨다는 것을 언급해야했다. 하지만 pseudo selector를 사용하면 html을 건들일 필요없이 css에서만으로도 스타일 설정이 가능하다.
예를 들어 <input> 태그가 required 일 때 border 색을 white로 하고 싶다면, 따로 클래스를 지정할 필요 없이,
input:required {
background-color : white;
}위와 과 같이 지정하면 된다.
이와 같이 수많은 pseudo selector(mdn에 찾아보니 pseudo-classes라고 하였다)들이 존재한다. 만일 여러개의 <div> box중에서 짝수번째의 <div> background-color만 붉은 색으로 바꾸고 싶다면
div:nth-child(even) {
background-color : red;
}위와같이 작성이 가능하다.
CSS를 작성하는 데에 있어 더욱 유연하고 자유로워진 느낌이다.
3. attribute selector
태그의 attribute를 가리키는 것도 가능하다. 사용법은 해당 태그의 이름옆에 [~~~] 와 같이 대괄호안에 해당 attribute를 적어주면 된다.
input[type=password]{
background-color : black;
}위와 같이 작성했다면, "type=password"를 attribute를 가지고 있는 input들에는 해당 CSS가 적용된다.
4. combinations
하나의 태그의 스타일만 바꾸는 것이 아니라 태그들의 관계를 이용하여 특정 태그의 스타일을 적용하는 방법이 있다. combination 이다.
<P>
<div>
this is child
</div>
</P>위와 같이 HTML이 작성되어 있을 때, <p> 태그 내의 <div> 태그에만 접근하여 해당 태그의 스타일을 바꿀 수 있는 방법이 있을까? combination 을 사용할 수 있다.
p div {
background-color : yellow;
}
<P>
<div> this is direct child </div>
<div>
this is child
</div>
</P>위와 같은 코드에서 만일 첫번째 <div>, 즉 direct child 를 고치고 싶다면?
p > div {
...
}위와 같이 쓸 수 있다.
<body>
<p>
...
</p>
<div>
...
</div>
</body>위에서 <p>와 <div>는 형제 관계이다. 여기서 <p>바로 밑에 있는 형제인 <div>를 찾으려면
p + div {
...
}위와 같이 쓸 수 있다.
<body>
<p>
...
</p>
<div>
...
</div>
<div>
...
</div>
</body>여기서 밑의 <div>도 같은 형제 관계이지만 바로 밑에 있기 때문에 '>'를 통해 찾을 순 없다. 바로 밑에 있지 않은 형제를 찾으려면?
p ~ div {
...
}위와 같이 사용할 수 있다.
pseudo selctor, attribute selector, combination 등등 HTML에 별다른 조작 없이 CSS만으로도 스타일 설정이 가능하다는 것을 알게 되었다. HTML 에 위치한 태그들의 부모 자식 관계, 위치 와 같은 정보만으로 HTML 의 element에 접근할 수 있다는 것이다.
'노마드코더 강의 > 코코아 클론' 카테고리의 다른 글
| [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 |
| [5일차~6일차] CSS (0) | 2020.10.01 |
| [1일차 ~ 3일차] 브라우저와 HTML (0) | 2020.09.30 |