popo story popo story

자식이 focus 가 될 때 부모요소에 효과를 주고싶으면 어떻게 해야할까? 예를 들어 위 input 박스처럼 원래는 회색 border이지만 인풋에 focus 할 시 파란색 border로 바꾸고 싶다고 해보자 현재 코드의 구조는 //css div { border: 2px solid var(--type-gray-5); } input { border: none; outline: none; } 이렇게 되어있다. input 태그에 focus 가 될 시에 부모요소인 div에 효과를 주고싶다면 focus-within 을 사용하면 된다. 부모요소에 focus-within 를 작성해주고, 안에 focus 시 원하는 css를 작성해주면 된다! //css div { border: 2px solid var(--type-gra..

css 에서 selector는 기본이다. 우선 selector 을 알아보기 전에 css 기본 특성을 알아보자 1. 외부보다는 내부, 내부보다는 인라인이 우선 적용된다 2. 먼저 작성된 것보다 후에 작성된 것이 우선 적용된다 기본 css 를 작성하는 방법은 다음과 같다 selector { property: property-value; } 적용하고자하는 대상 selector에 property(속성)을 적용해주면 된다 그럼 selector 에는 어느 것이 존재하고, 어떻게 표현하는지 알아보자 1. 태그 선택자 : 태그 이름을 그대로 사용한다 예를 들어 이런 html 파일이 있다고 하자 가나다라 "가나다라"에 스타일을 적용하고 싶으면 그대로 div 태그에 스타일을 적용해주면 된다 /* style.css */ d..

HTML을 이용해서 이미지나 사진을 화면에 삽입하는 방법을 알아보자 1. 사진 ( img tag ) 우선 사진을 넣고 싶은 경우, img 태그를 사용하면 된다. 이게 기본 형태이고, src와 alt에 알맞은 값을 넣어주면 된다 src는 사진 파일의 경로를 작성하면 된다 넣고 싶은 사진을 저장한 후, 그 사진의 파일 경로를 적어주면 사진이 불러와진다 경로에는 사진 파일의 확장자까지 포함하여 써주어야한다. alt는 그 사진의 이름을 작성하면 된다 만약 사진이 제대로 불러와지지 않을 경우, 설정한 이름으로 뜨거나 어떤 사진이 들어가는지 이름을 통해 알 수 있다 이렇게 작성하면 된다 2. 비디오 ( video tag ) 비디오를 넣고 싶은 경우, video 태그와 source 태그를 사용하면 된다. 이게 기본 ..

아래 게시물을 통해 원하는 영역에 스크롤 적용하는 법을 알아보았다 https://12yeonii.tistory.com/102 [CSS] overflow : 원하는 div 구간에 스크롤 적용하기 react 로 웹사이트를 제작할때, 전체 페이지의 내용이 길어지게 되면 자동적으로 스크롤이 적용된다 하지만 전체 페이지가 아니라 원하는 구간에만 스크롤을 적용하고 싶다면, css 중 overflow 의 scr 12yeonii.tistory.com 이제 이 기본 스크롤바를 내가 원하는 대로 커스텀할 수도 있다 /* 영역 설정*/ 영역{ height: 300px; width: 65px; background: #F5F5F5; overflow-y: scroll; } /* 스크롤바 설정*/ 영역::-webkit-scroll..

내가 까먹지 않으려고 기록하는 글 보통 다른 프로그래밍 언어에서는 주석을 작성할때 // 를 사용하거나 /* */ 이렇게 사용한다 하지만 html 은 약간 다르다! html 주석은 위처럼 작성해주면 된다 hello world!! 쉽게 하는 법 [mac] 글자 선택 (한글자도 가능함) 후 cmd+/

react 로 웹사이트를 제작할때, 전체 페이지의 내용이 길어지게 되면 자동적으로 스크롤이 적용된다 하지만 전체 페이지가 아니라 원하는 구간에만 스크롤을 적용하고 싶다면, css 중 overflow 의 scroll 을 이용하면 된다 그렇다면 overflow에 대해 알아보도록 하자! 1. overflow : visible overflow : visible visible은 overflow의 가장 기본적인 속성이다 visible로 설정을 해주게 되면, 아래처럼 원하는 구간을 설정해도 내용이 그 크기를 넘어서까지 렌더링 된다 See the Pen overflow-visible by Chaeyeon An (@chaeyeonan) on CodePen. 2. overflow : hidden overflow : hid..

크롬에 이미지를 삽입하면 화질이 깨지는 모습을 종종 발견할 수 있다 이미지 파일 화질을 개선할 수 있는 css 를 알아보자 1. image-rendering 이미지 랜더링 방식을 바꾼다 image-rendering: -webkit-optimize-contrast; 2. translateZ transform: translateZ(0); z축을 0으로 적용하여 깊이감을 없앤다. 3. backface-visibility backface-visibility: hidden; 위 3가지 CSS를 통해 크롬에서 발생하는 화질 저하의 문제를 조금은 개선할 수 있다 다른 방법이 있다면 계속해서 추가할 예정이다