[테킷 1211] CSS

아침 자습

자바스크립트 __proto_ / object.~

 

본 수업

과제 리뷰

절대경로와 상대경로

절대경로와 상대경로는 상황에 맞게 대처하는 것. 실제 프로젝트를 진행할 때 경로의 개념은 동일시 하는 것을 권장. 절대경로와 상대경로를 섞지 않게끔.(일관성 유지)

list-style: none;

background-image: url("./images/alien.png");

background-size: 20px;

background-repeat: no-repeat;

background-position: left;

}

리스트 앞에 이미지는 list-style 보다 pseudo-element로 넣어주는 것을 권장. 브라우저에서 활용할 때의 자유도가 높기 때문.

절대경로: 경로를 절대적으로 지정해주는 것.

.image { background-image: url("images/my-image.png"); }

상대경로

.image { background-image: url(./images/my-image.png); }

 

overflow: hidden

.profile {

border: solid 10px #FCFF8D;

border-radius: 60px;

overflow: hidden;

}

overflow: hidden (요소의 콘텐츠가 요소를 초과할 때 사용하는 것)

문제 상황: border-radius가 넘칠 때 사용할 수 있음.

 

pseudo element

::before으로 넣어주는 것. 수도 엘리먼트는 CSS의 코드로 인해 가상의 마크업이 생기는 것을 의미. 리스트업으로 사용하기 좋음.

 

background-attachment: fiexd;

배경이미지는 스크롤과 함께 내려가지 않는 게 좋다.

 

 

div.item {

}

div이면서 동시에 item

<div>

<div class="item">RED</div>

</div>

 

그리고,

.colors .item

는 

<div class="colors">

<div class="item">RED</div>

<div class="item">GREEN</div>

 

이다. 

 

 

공통 분모 디자인

<div class="colors">

<div class="item red">RED</div>

 

 

 

 

셀렉터가 얼마나 구체적이냐에 따라 내가 작성한 코드가 반영이 될 수도, 되지 않을 수도 있다. 셀렉터 스펙시피티를 확인할 필요가 있다. 

.wow.wow 랑

.wow .wow 는 다르다. 이 개념을 이해하자.

https://specifishity.com/

Specifishity :: Specificity with Fish

참고자료

 

cascade 폭포처럼 내려가는 것

위에서부터 아래로 모든 알고리즘을 반영하는 과정. (스페서피티의 )

 

width:auto

브라우저가 계산해서 지정해주는 것.

엄밀히 따지면 width:100%보다 width:auto를 사용해야 한다. 

width:100% 는 부모가 제공해주는 너비만큼 가득 찬다.

 

<a href=""></a>

a 내가 보내주고 싶은 곳이 있다.

이상적인 마크업 작성

이 사이의 공간은 왜 ? <a>가 엔터를 치면 자연스럽게 공백이 생긴다. 하지만, 이 간격을 줄이기 위해 마크업을 수정한 것은 HTML의 본 목적을 잃은 것이기 때문에 CSS를 손대야 한다. 

 

line-height 한 줄의 높이. line-height를 정하지 않으면, 폰트를 만든 사람이 정해놓았던 사이즈에 맞게 정해진다. 

half-leading(lead= 납) area 납 간격

 

그 외 꿀팁

배경색을 애니메이션으로 넣을 때 천천히 바뀐다면 어지럽지 않게 제작할 수 있다.

이미지를 넣어줄 때는 너무 큰 이미지를 넣기보다는 들어갈 사이즈에 가급적 맞게 넣는 것이 좋다. 

실제 환경에서 테스트하는 게 가장 베스트이다. 

퍼블리셔가 저는 잘 되는데요? 라고 답하면 안된다. 다양한 경우를 고려해야 한다. 

이론적으로 이해하는 것과 체득하는 것은 다르다. 

CSS 에서 일반 타입 셀렉트 작성은 지양.

 

코드 연습할 때

https://www.devkuma.com/docs/vscode/code-formatting/

Visual Studio Code에서 코드 자동 정렬하는 방법과 들여쓰기 공간 칸수 설정 방법

쉬프트 + option + F (프리티어) 사용 권장. 하지만 연습할 땐 제대로된 코드 작성법을 익히기 위해 사용하지 않는 것을 권장.