position 위치 지정 요소를 사용하여 위치를 정확하게 px 단위로 지정하자. Position 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다. top과 bottom 동시 지정 : top이 우선 적용 된다. left와 right 동시 지정 : ltr이면 left 우선 적용. rtl이면 right 우선 적용. 사용하는 방법을 알아보자. 위치 지정 요소 static 값이 아닌 모든 속성 값. static 요소Element 를 기본 흐름normal flow 에 따라 배치한다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다….

블록 컨텐츠를 보여줄 때 사용할 수 있는 CSS속성이 많다. 그 중 float 속성에 대해 알아보자. float float는 요소Element 가 기본 흐름normal flow 으로부터 빠져 텍스트 및 인라인inline 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치한다. left 요소가 상위 블록 요소의 좌측에 떠서 움직여야함을 나타내는 속성 값이다. right 요소가 상위 블록 요소의 우측에 떠서 움직여야함을 나타내는 속성 값이다. none 요소가 떠서 움직이지 않게 하는 속성 값이다. inline-start 요소가 상위 블록 요소의 시작 부분에 떠서 움직여야함을 나타내는 속성 값이다. 예를들어, ltr…

웹사이트가 정적인것도 좋지만 전환되는 속성을 넣어줘서 역동적이고 재미있는 웹사이트를 만들 수 있다. Animation 속성에 대해 알아보자. Animation 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다. Animation = hover나 onclick 같은 의사 클래스가 필요하지 않고 자동으로 시작한다. 애니메이션은 시작, 정지, 반복까지 제어할 수 있다. Transition = 자동으로 시작하지 않고 hover나 onclick 같은 의사 클래스에 의해 동작한다. layout에 영향을 주는 요소의 크기나 위치가 변화하면 영향을 받는 모든 요소들의 크기나 위치를 재계산 하게 되는데 영향을 받는 요소들이 많을수록 많은 부하가…

Scroll Snap은 마우스 스크롤을 다 해서 보고있는 섹션의 글을 다 봤을 때 그 다음 섹션으로 넘어가게 하고싶을 때가 있다. 이 때 사용하는게 Scroll Snap으로 Scroll Snap에 대해 알아보자. ScrollSnap <section> 요소에서 스크롤 스냅하는 위치를 지정하는 속성. overflow 상위 요소에 사용되며, 스크롤 하도록 하는 속성. overflow / overflow-y / overflow-x 이렇게 속성을 사용할 수 있으며 속성 값은 scroll이나 auto로 사용하면 된다. scroll-snap-type 스냅 포지션을 지정하는 속성. 코드 scroll-snap-type: none; : 상위 요소Snap Container 에 사용되며, 스냅하지 않는다. scroll-snap-type: x; : 상위…

웹사이트가 정적인것도 좋지만 전환되는 속성을 넣어줘서 역동적이고 재미있는 웹사이트를 만들 수 있다. transitions 속성에 대해 알아보자. Transitions Transitions = 자동으로 시작하지 않고 hover나 onclick 같은 의사 클래스에 의해 동작한다. layout에 영향을 주는 요소의 크기나 위치가 변화하면 영향을 받는 모든 요소들의 크기나 위치를 재계산 하게 되는데 영향을 받는 요소들이 많을수록 많은 부하가 간다. Animations = hover나 onclick 같은 의사 클래스가 필요하지 않고 자동으로 시작한다. 애니메이션은 시작, 정지, 반복까지 제어할 수 있다. transition-property 전환해야 하는 CSS 속성의 이름을 기재한다. 여러개인경우 공백을 사이에…

CSS의 transforms 속성을 이용하면 요소의 모양과 위치를 변경할 수 있다. Transforms transforms 속성 사용하는 방법에 대해 알아보자. transform-origin 상위 요소에서 선택한 요소의 위치를 지정한다. 기본값 = 상위 요소의 중앙. transform 선택한 요소에서 변환할 속성값을 입력한다. 여러 속성을 변환하려면 오른쪽 » 왼쪽 순서로 입력한다. 3차원 좌표계를 참고하여 변환축을 결정한다. rotate() 회전 시키는 속성이다.   CSS div.transforms { transform: rotate(90deg); transform-origin: bottom left; } HTML <div class=”transforms”><img src=”이미지 URL”>><div> 사용된 코드 설명 rotate(90deg); : 시계 방향으로 90도 회전시킨다. transform-origin: bottom left; :…

before / after 속성을 이용하여 선택한 요소 앞 뒤로 자식 요소 생성하여 content를 추가해보자. CSS – before, after CSS에서 사용할 수 있는 :before, :after에 대해 알아보자. :before 선택한 요소의 첫 자식으로 의사 요소를 하나 생성한다. :after 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성한다. content content 속성으로 문자를 넣을 수 있다. html 태그는 삽입이 불가능하다. html 태그를 삽입하고자 하는경우 jquery를 이용할 수 있다. q 태그 이 예시에서는 q 태그의 앞,뒤로 content 추가하는 방법을 알아볼 수 있다. q 태그 대신…

flex와 grid에 대해 공부했으니 정렬에 대해 조금 더 알아보자. 요소 가운데 정렬 div 정 중앙에 요소를 정렬하는 방법을 알아보자. 코드 CSS .box { display: flex; align-items: center; justify-content: center; } .box div { width: 100px; height: 100px; } HTML <div class=”box”> <div></div> </div> ⭐⭐⭐ display: flex; 대신 display: grid;를 사용해도된다. 그리고 정렬하는 속성인 align-items: center; justify-content: center;를 사용하면 상위 요소의 정 중앙에 정렬 된다. 위의 코드를 응용해서 div가 아닌 다른 코드에도 적용시킬 수 있다.

어제는 미디어 쿼리에 대한 기초적인 부분을 봤다면 오늘은 다크 모드 사용자에게 홈페이지를 어떻게 보여줄지 설정하는 방법을 알아보자. prefers-color-scheme prefers-color-scheme를 이용하여 light, dark 따로 설정 가능하다. 코드는 @media 이용하여 prefers-color-scheme: ‘모드’ 이런식으로 입력한다. 모드 light : 사용자가 시스템에서 라이트 모드를 사용하고 있거나 아니면 모드를 선택하지 않았을 때를 나타낸다. dark : 사용자가 시스템에서 다크 모드를 사용하고 있을 때를 나타낸다. 미디어 쿼리 사용하기 다크 모드 예시 @media (prefers-color-scheme: dark) { … } CSS 파일이나 <style> 태그 안에 이 코드를 입력하고 블록 안에 CSS…

미디어 쿼리 사용하는 방법에 대해 알아보자. 미디어 쿼리 웹사이트의 모바일 버전, PC 버전 각기 다른 CSS를 적용하고 싶을 때 이용한다. <link> 태그 이용하거나 <style>에서 @media 혹은 @import 사용하여 미디어 쿼리를 사용할 수 있다. @media는 CSS 블록을 적용하여 미디어 유형에 맞을 때만 CSS 적용할 수 있게 할 수 있다. <link>와 @import는 미디어 유형에 따라 CSS를 어떤걸 이용하라고 설정할 수 있다. 미디어 유형 all : 모든 장치 print : 인쇄 결과물 / 출력 미리보기 화면. screen : 웹브라우져에서 보여주는 화면. speech :…