뒷북 정리 (국비 교육)80 [css] step11. z-index step11. z-index z-index 테스트 화면에 있는 객체들을 배치할 때, 쌓이는 순서가 중요할 수도 있다. 그럴 때 z-index를 사용한다. 이전에 javascript의 event를 다룬 게시물에서 화면을 기준으로, web page를 기준으로, 객체를 기준으로 하는 x축과 y축에 대해 작성했던 적이 있다. 더하여 z 축을 생각해본다면, 그 방향은 화면을 뚫고 밖으로 나오는 방향을 양의 방향이라고 생각하면 되겠다. z-index가 크면 작은 것보다 위에 위치한 것인 상대적인 값이라 크기는 중요하지 않다. 만약에 크기가 같다면 나중에 쓴 객체가 보다 위로 오게 된다. 2021. 12. 14. [css] step10. display step10. - 01~04. display display 속성 테스트 눌러보셈 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus cupiditate ea earum sequi aspernatur reprehenderit at quia, consequuntur consequatur iste quos necessitatibus eveniet ipsam, vero, eaque iusto maiores, ipsum explicabo. display 설정을 none으로 하면 loading 했을 때 일단 보이지 않는다. (특정한 상황에서 보이게끔 하려는 목적) display 설정을 block으로 바꾸면 다시 보이게 된다. (경우에 따라 bloc.. 2021. 12. 13. [css] step09. float step09. - 01~04. float .container{ width: 500px; margin: 0 auto; border: 1px solid blue; } .box{ width: 100px; height: 100px; background-color: yellow; border: 1px solid red; } #one{ float: left; } #two{ float: right; } float 테스트 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem odio commodi, saepe quidem, nobis illo neque repellat, ipsum laboriosam delectus laudantium. Eligendi accu.. 2021. 12. 13. [css] step08. pseudo element step08. pseudo element Pseudo Element (가상요소) 선택자 활용 Lorem ipsum dolor sit amet, consectetur adipisicing elit. At minima, adipisci sed. Quas animi ipsum rem veritatis ea impedit voluptas natus, tempore laborum necessitatibus quo cum. Iure voluptatem, cum sunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim optio illo, dolorum ducimus veniam saepe placeat aliquid temporibus corrupt.. 2021. 12. 13. [css] step07. position step07. - 01~02. position div1 div2 div3 div4 div5 는 문서 기준으로는 항상 고정된 위치에 있다. (static) 때문에 scroll 한다고 의 위치가 바뀌는 것이 아니다. 하지만 static이 아닌 relative, absolute, fixed 속성으로 변화를 줄 수 있다. static relative test absolute 너는 어디? fixed relative : 글자 그대로 상대적인 위치를 말한다. 원래 들어가야 할 위치를 기준으로 한 상대적인 위치이다. absolute : 글자 그대로 절대적인 위치를 말한다. 특정 요소를 기준으로 한 절대 좌표에 배치하고자 할 때 사용한다. 만약 부모 요소에 position 정보가 없다면 body를 기준으로 한 절대 .. 2021. 12. 13. [css] step06. pseudo class step06. - 01~02. pseudo class 버튼 버튼 프세우도 아니다. '수도' 라고 읽는다. '가상의' 라는 의미를 가진다. .box:hover의 경우 문서 객체에 class를 설정하지 않아도 마우스를 올렸을 때 hober class가 들어가고 떼면 사라진다. 이 가상의 이름을 불러오는 것이 ':' 이다. 특정 상황에 css를 변화시킬 수 있다. pseudo class 또한 hover, focus, active와 같이 정해진 약속들이 있다. study daum naver 이렇게는 잘 안쓰인다고 한다. 원래 link는 밑줄이 있는 것이 default이다. 이런 것이 있다는 것만 알아두자. 2021. 12. 13. 이전 1 ··· 6 7 8 9 10 11 12 ··· 14 다음
