[Udemy] The Web Developer Bootcamp 2022 : [9] 유용한 CSS 속성들

🔔Crucial : Transitions, Position Property

🔔Important : Opacity & Alpha Channel, Google Fonts, The Full Story on the Background

🔔Nice To Have : Transforms

 

Opacity, Alpha channel

✅ rgba : rgb에 투명도 alpha 채널을 추가한 것 0은 완전히 투명, 1은 완전히 불투명 -> rgba(255, 255, 0, 0.5) 

-> rgba는 자손은 상관없이 자기 자신만 투명도를 조절함 

✅ opacity : 특정 요소에 지정해서 그 해당 요소나 해당 요소의 콘텐츠 및 자손을 포함한 전체 요소의 투명도를 결정

✅ hex : rgba를 hex 상태로 나타내고 싶다면 16진법 8개를 작성하면됨 -> #ff00ff00 (rgba 더 많이 사용) 

 

Position

▪ 문서 내에서 요소의 위치를 결정함 

☑️ static :  디폴트 포지션, top, bottom, left, right의 영향을 받지 않음 

☑️ relative : 문서의 일반적인 흐름에 따라 위치하지만 top, bottom, left, right의 영향을 받음

☑️ absolute : 문서의 일반적인 흐름에서 요소가 제거되고 공간도 배정되지 않음 (겹쳐서 놓는것이 가능함)

-> 가장 가까이 위치한 조상의 위치나 body를 기준으로 top, bottom, left, right의 영향을 받음 

☑️ fixed : 문서의 일반적인 흐름에서 요소가 제거되고 공간도 배정되지 않고 컨테이닝 블록에 항상 고정되어있음

-> 스크롤을 해도 그 자리에 항상 위치한다는 의미 

☑️ sticky :  시작할때는 위치가 고정되어있지 않지만 스크롤하게되면 스크롤과 함께 그 위치에 고정된채 이동

 

Transition 

▪ 한 특성 값에서 다른 값으로 변화할 때 transition으로 애니메이션 효과를 줄 수 있음

▪ 전환하려는 특성을 추려서 한 번에 다 전환하지 말것 -> 코드를 변경시키면서 이상하게 전환이 발생할 수 있음(원하는 특성만 전환) 

h1{
	transition : property_name duration timing_function delay;
}

✅ property name : transition될 property의 이름을 적어줌 ex) background-color 

✅ duration : 전환되는데 걸리는 시간 ex) 3s면 3초에 걸쳐 전환됨 

✅ timing funtion : ease, ease-in 처럼 어떤 방식으로 전환이 일어나게 할지 설정하는 부분 

✅ delay : 전환이 시작되기까지 걸리는 시간(지연), 설정하면 반복해서 전환이 일어남 

 

Transform 

☑️ transform-origin : 회전 중심의 위치를 변경할 수 있음 -> top right, bottom left와 같은 형식으로 쓸 수 있음 

☑️ rotate(20deg) : 요소를 회전시킴 -> 20 degree 만큼 회전시킴  -> rotateX(), rotateY()도 가능 

☑️ scale() : 요소의 크기를 변화시킬 수 있음, 0.5하면 절반, 2하면 2배가 됨 -> scaleX(), scaleY() 가능 

☑️ translate() : 요소의 위치를 변화시킬 수 있음 -> translateX(), translateY()

☑️ skew() : 요소를 2차원 평면상에서 기울이는 기능 -> skewX(), skewY()

▪ 각 transform들을 띄어쓰기로 구분해서 나열하면 여러개 적용하기 가능 

 

Background 

☑️ background-image : url("") -  

☑️ background-size : cover(비율유지 꽉차게 잘림있음), contain(비울 유지 꽉차게 잘림없이(반복됨)), auto

☑️ background-repeat : 이미지가 반복되게 할건지 설정가능, no-repeat 

☑️ background-position : 이미지의 어떤곳을 기준으로 가져올 것인지 설정가능(top, botton, left, right, center) 

▪ property를 어떤 순서로 작성하던 크게 상관없음

(그러나 background-size를 작성할땐 position 뒤에 /와 함께 "center/80%" 형식으로 작성해야함 

 

HTML 주의사항 

▪ 웹페이지를 만들때 <img> 태그를 한 줄에 3개씩 놓이게 코딩했다고 하자

▪ 이때 <img> 태그의 width를 분명 %에 맞춰서 3개가 배치되도록 할 수 있음에도 불구하고 2개씩만 보이는 문제가 발생한다  

-> 왜냐면 각 태그들 사이에 공백(화이트 스페이스)가 있기 때문

-> 스페이스를 모두 지워주고 태그를 붙여서 작성하면 문제 해결 

-> <img>는 <span>처럼 인라인 요소이기 때문에 html에 공백이 있다면 html에 바로 적용되는 것이 단점  

 

// 초반에 아무리 해도 2개만 보여서 계속 구글링 했는데도 해결이 안돼서 고생했었는데 마지막에 알려주심..

 

---

hover.css

body {
    font-family: 'Roboto Condensed', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #1f1b29;
}

button {
    background: none;
    color: #ff704f;
    border: 2px solid;
    padding: 1em 2em;
    font-size: 1em;
    transition: all 0.2s;
}

button:hover {
    border-color: #ffe84f;
    color: white;
    box-shadow: 0 0.5em 0.5em -0.4em #ffe84f;
    transform: translateY(-0.25em);
    cursor: pointer;
}

 

photosite.css

img {
    width: 30%;
    margin: calc(10%/6);
}

nav {
    text-transform: uppercase;
    border-bottom: 2px solid #f1f1f1;
    width: 30%;
    margin-left: calc(10%/6);
    padding: 1.2em 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5em;
}