본문 바로가기

📺 Front End/-- HTML & CSS16

[CSS] 어떤 요소가 앞으로 나올지 z-index 로 수직 위치를 정해보자. 지난 시간 우리는 CSS의 position속성으로 요소를 우리가 원하는 곳에 배치하는 방법에 대해서 배웠다. 그래서 우리는 fixed, absolute, relative, sticky등등을 알아보았고, 그 결과 우리가 원하는대로 HTML Elements를 배치할 수 있게 되었다. 오늘은 지난 시간 배웠던 Position을 토대로 배치를 마쳤을 때 z-index로 어떤 요소가 앞으로 올지를 정해보는 시간을 갖겠다. z-index mdn에서는 z-index를 위와 같이 이야기 한다. z축의 순서를 지정한다. 이 말이 무슨 말일까? 우리는 일반적인 HTML 문서를 눈으로 볼 때는 2D로 보기 때문에 X축과 Y축만 인식할 수 있다. 하지만 이 z-index 를 설정하면 조금 더 입체적으로 배치할 수 있게되고 그.. 2020. 10. 16.

[CSS] 요소를 원하는 곳에 배치하기 position 속성 :: static, relative, absolute, fixed, sticky CSS에서 HTML Elements를 내가 원하는 곳에 배치하는 방법에는 여러가지 방법들이 존재한다. display 속성으로 영역을 나눠서 배치를 할 수도 있고, box-sizing과 같은 방법으로 배치를 할 수도 있다. 하지만 이러한 방법들에는 많은 제약사항들이 존재하며, 우리가 원하는 대로 동작시키기 위해서는 Css의 부모, 자식간의 관계를 파악해줘야 한다. 하지만 position속성을 이용한다면 조금 더 아름답고 간단하게 요소를 우리가 원하는 곳에 배치할 수 있다. 사전 준비 본격적인 이야기에 앞서 우리는 이번 시간에 스크롤이 있는 영역이 필요하므로 다음과 같은 화면을 먼저 구성해 놓고 실습을 진행할 것이다. index.html index.css body { background: #cfd8dc; d.. 2020. 10. 15.

[CSS] CSS 작업시에 꼭 거쳐야하는 필수 과정 :: CSS Reset, HTML 요소 초기화, 리셋 css 오늘은 웹 개발에서 CSS 파트를 작업할 때 거쳐야하는 필수 과정인 *Reset Css *에 대해서 알아보려 한다. CSS Reset css reset은 HTML Element의 Default 값들을 없애주는 작업이다. 일반적으로 margin, font, padding, line, size등등과 같은 속성의 값들을 0 또는 none으로 만들어야 한다. 위에서 보이다 싶이 Firefox3와 IE7이 보여지는 방식이 달라 개발자가 의도한 대로 웹이 보여지지 않을 때가 있다. 이 경우 위에서 말한 듯이 모든 Element의 속성 값들을 없애야 한다. 왜? 웹 표준을 지키며 작업해야 하는 현대 개발 환경에서 IE가 아닌 다른 여러 브라우저에서 개발자가 의도한 대로 보여져야 한다는 요구사항은 선택 사항이 아닌 필.. 2020. 10. 6.

[CSS] Css Box-Model과 box-sizing의 border-box 속성 지난 시간에 우리는 box-model의 크기 속성을 구하는 작업을 했었다. 하지만 지난 시간에도 말 했듯이 박스 모델링을 적용한 후 반응형 웹을 만들기 위해 크기의 단위를 px가 아닌 % 단위로 적용했다고 가정해보자. 그럼 아래의 Element의 속성 값 단위는 px가 아닌 %가 되어야 한다. 그럼 정말 정말 정말 복잡해진다. 힘들게 우리는 border, margin, padding 값을 구해서 ( 물론 그렇게 힘들진 않지만 ) width와 height의 계산식에 대입하여 구했지만 이 계산식이 %가 들어가면 단순 + 계산으로 힘들다는 것을 알 수 있다. 이러한 문제점을 해결하기 위한 방법이있다. 바로 Box-sizing이다. box-sizing 위의 절대 단위에서 상대 단위로 변경하는 문제점을 해결하기 .. 2020. 10. 5.

이전 1 2 3 4 다음

티스토리툴바