HTML,CSS
-
돌아가는 프로필 사진HTML,CSS 2022. 1. 26. 20:48
이런 식으로 돌아가는 프로필 사진을 만들 수 있다. 먼저, .flip-outer { width: 300px; height: 300px; } .flip-inner { width: 100%; height: 100%; position: relative; } 이렇게 외곽을 잡아준다. .flip-outer은 프로필 사진의 크기를 지정해주고 .flip-inner은 안에 들어있는 내용물에 position을 쓰기 위해 position: relative; 속성을 써준다. 그런 다음, 앞면과 뒷면을 만들어준다. 개발자 망나뇽 .front에는 사진 .back에는 프로필 텍스트를 써주고 각각 공중에 떠 있으므로 position: absolute;를 주고 뒷면은 transform: rotateY(180deg);로 돌려서 뒷면처..
-
GridHTML,CSS 2022. 1. 26. 18:47
grid는 가로세로로 영역을 잡는 2차원적인 레아이웃 시스템이다. 전체적인 툴을 잡는데 유용하다. A B C D E F G H I .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .item { border: 1px solid black; } 이렇게 요소들을 감싸고 있는 컨테이너에 display: grid; 속성을 주고, grid-template-columns으로 행 배치(가로) grid-template-rows으로 열 배치(세로) 을 해준다. 이때 px단위를 쓸 수도 있고, fr단위도 쓸 수 있다. fr은 배율이다. 1fr 2fr 1fr 하면 전체의 1:2..
-
transform으로 애니메이션 만들기HTML,CSS 2022. 1. 26. 16:57
transform은 어떤 요소를 독립적으로 움직이게 할 때 사용한다. 다른 요소들에 영향 없이 움직인다. .box { transform : rotate(10deg); //회전하기 transform : translate(10px, 20px); //움직이기 translateX, translateY로 쓸 수 있음 transform : scale(2); //배율로 확대 축소 transform : skew(30deg); //비틀기 /*transform 두개 이상을 한꺼번에 쓰려면*/ transform : rotate(10deg) translateX(30px); } 이런식으로 쓰며, 단순히 margin등을 주는 것 보다 부드럽게 움직인다고 한다. 단순한 애니메이션들은 transform 과 transition 으로 ..
-
Video와 audioHTML,CSS 2022. 1. 25. 23:17
먼저, 비디오 파일을 넣고 싶으면 로 사용할 수 있다. video태그에는 여러가지 속성을 넣을 수 있는데, /* muted는 음소거상태 autoplay는 자동재생 (muted와 함께 넣어야 동작함) (소리때문에 자동 재생시 음소거해야함) poster는 썸네일이미지 preload는 영상을 먼저 다운을 받을지 말지를 선택가능합니다 (auto, metadata, none 사용가능) */ 이런식으로 할 수 있다. 비디오를 배경으로 사용할 수도 있는데, Buy Our Shoes! 이런식으로 video-box 상자를 만들면 된다. source 에는 여러가지 확장자의 파일을 넣으면 최적화된 비디오 파일을 알아서 넣는다고 하니 여러개 넣어도 좋은 선택이라고 한다. 그러고 나서 video에 position: absolu..
-
Sass / ScssHTML,CSS 2022. 1. 25. 23:10
sass는 전처리 언어로 css를 좀 더 쉽고 편리하게 관리할 수 있다고 한다. (.sass는 중괄호 생략 가능)파일이름.scss로 이름 붙여서 중괄호 붙여 통일성 높이는 게 편해 보인다. 1. sass 의 변수 문법 매번 색상을 대입할 순 없으니 변수로 만들어서 기록할 수 있다. scss $메인색상 : #2a4c6e; $서브색상 : #333333; .text { color: $메인색상 } .box { background: $서브색상 } 이런 식으로, $변수이름 : 지정할 것; 이렇게 정한 후, 사용할 때 $변수이름 을 쓰면 된다. (변수이름은 한/영 둘다 가능, 변수로 사칙연산도 가능하지만 px % 단위는 맞추기) 2. Nesting 문법 셀렉터가 길어지므로 이렇게 사용할 수 있다. .text { ul..
-
Shadow DOMHTML,CSS 2022. 1. 24. 15:55
내가 HTML에 위처럼 적으면 한 개의 태그를 적었는데 두 개의 요소가 생성하는 것을 볼 수 있다. 이런게 Shadow DOM 때문이라고 한다. shadow DOM을 보려면 먼저 개발자도구 settings에서 을 켜주면 볼 수 있다. HTML에 입력하고 개발자 도구로 클릭해보면 이 부분이 이렇게 나온다 여기서 안녕하세요 라는 회색 글씨의 색을 바꾸고 싶으면 input::-webkit-input-placeholder { color : red; } 이렇게 input태그에 pesudo-element를 이용해서 placeholder부분의 -webkit 을 써서 속성을 변경할 수 있다. 여기서, -webkit은 크롬, 오페라, 사파리, Edge 의 브라우저에서 동작하는 스타일 일때 이렇게 쓴다. 파이어폭스는 -m..
-
Pseudo-elementHTML,CSS 2022. 1. 24. 15:24
HTML중 어떤 특정 부분만 스타일을 주려고 할 때 pseudo-element를 사용할 수 있다. .text::first-letter { color : red; } .text::first-line { color : red; } .text::after { content : '가나다'; color : red; } .text::before { content : '가나다'; color : red; } 이처럼 클래스 앞에 ::을 사용하며 위와 같이 줄 수 있다. - ::first-letter 은 안에 있는 글자에서 첫 글자만 스타일을 준다. - ::first-line 은 안에 글자 중 첫 줄만 스타일을 준다. - ::after 은 내부의 맨 마지막에 특정 글자를 추가한다. - ::before 은 내부의 맨 처음에..