Frontend Study - 2/HTML & CSS (6) 썸네일형 리스트형 CSS : Styled-Components 활용법 + typescript 기존 css의 경우 scss와 같은 전처리기가 있었음에도 동적으로 사용하기에는 불편함이 있었습니다. 인라인 스타일을 사용하거나, 클래스명을 이용해야 했습니다. 인라인 스타일의 경우 적용 순위가 높아지고, 클래스명의 경우 작명과 같은 불편함이 있었습니다. 이러한 점을 CSS in JS를 통해 해결할 수 있었습니다. CSS in JS는 css의 변수와 함수를 js파일 안에서 사용할 수 있게 합니다. Styled-Components는 현재 가장 많이 쓰이고 있는 CSS in JS 중 하나입니다. 1. 설치 와 실행 $ npm install styled-components import React from 'react'; import styled from 'styled-components'; 기존 css의 경우 .. 이미지 삽입의 2가지 방법 차이점 html <img> vs css background-image img를 넣는 법 1) html - 태그를 이용하는 방법 img태그 를 사용하면 alt속성을 통해 문자열을 넣을 수 있습니다. alt속성에 작성된 문자열은 meta 정보가 되며, 검색엔진은 alt속성에 지정된 문자열을 인식하게 됩니다. SEO(search engine optimization, 검색엔진 최적화)에 유리합니다. 이를 통해 사이트의 가치를 높일 수 있게 됩니다. 내 이미지가 사용자의 검색에 노출되어야 한다면, img 태그를 사용하는 것이 좋습니다. 다른 개발자가 코드를 이해하기 쉽습니다. 태그를 통해 이미지가 있을 것이라고 추론할 수 있습니다. 태그에 background-image 속성을 이용해 넣는 방식과 비교하여 속도가 빠릅니다. 브라우저가 이미지를 로드하기 위해서 CSS를 해석할 필요가.. CSS : CSS 선택자 심화 (X:not() {}, X + Y{}, X:hover ~ Y{}, X:hover Y{}) 자주 쓰이는 선택자들 말고 유용한 선택자들이 있어서 추가로 정리해 보았다. 1. X : not(선택자) div:not(.container) { color: blue; } div를 선택하는데 클래스 값이 container인 div를 제외하고 선택된다. 2. X + Y 인접 선택자 div + p { color : blue; } 앞의 요소 바로 뒤에 있는 요소만 선택한다. 위 코드를 예로들면 각 div들 뒤에 오는 첫 번째 단락의 p만 빨간색이 됩니다. 3. X:hover Y (hover 와 Y사이에 띄어쓰기) container라는 아이디를 가진 엘리먼트에 마우스를 호버시키면 #cube에 css가 적용된다. ! 엘리먼트 X(#container)안에 엘리먼트 Y(#cube)가 있을 때 적용 가능. 부모 - 자식.. CSS : width/height 값 헷갈림 방지 (px, %, vh/vw) 요소들의 레이아웃을 만들어 나가는 것은 쉬워보이지만 할 때마다 문제가 발생한다. 이것 저것 다 시도 해보다가 얻어걸리는 것으로 넘어가게 된다. 참고하면 좋을 유투브가 있어서 보고 정리해 보았다. https://www.youtube.com/watch?v=zBHxp3xKsF0 화면을 가득 채우고 싶은 요소가 있다면, 그 요소에 height : 100% 주면 화면 세로 부분 전체에 채워질까? 먼저 height와 width값의 기본값을 알아야 한다. height와 width에 값을 따로 설정하지 않았다면 두 속성의 값은 default값인 auto로 지정된다. .pig { width: auto; height: auto; } auto값은 브라우저가 그 크기를 계산해준다. display가 block일 때의 widt.. CSS : 코드작성법 Bottom up방식 CSS bottom up 방식 자식요소와 부모요소의 css 적용에 있어서 자식요소를 먼저 적용 하는 것. ex) 자식요소의 사이즈를 먼저 지정함으로써 부모요소의 크기를 별도로 지정할 필요 없게 된다. child의 width와 height를 100px로 지정해두었다. parents의 크기는 따로 지정해 주지 않았음에도 height 값이 100px로 지정되었다. width값은 div임으로 100% 고정. padding으로 너비관리를 해주면 좋다. 이후에 수정할 사항들이 생겼을 때 부모 요소들이 고정값으로 되어 있다면 전체를 다 손봐야 하기 때문이다. 자유롭게 늘어나고 줄어들게 하기 위해서 큰 테두리의 부모 영역들은 padding으로 관리를 하면 좋다. 부모값에 특정한 고정 너비를 주지않고 패딩만 준다면 자식.. CSS : (Position - relative, absolute, fixed) / inline /inline-block / block Position position 속성은 문서 상 요소들을 어떻게 배치할 지 정합니다. Top, Right, Bottom, Left 속성을 이용해서 요소의 최종 위치를 결정합니다. position 속성은 하나의 키워드 값을 선택해 지정할 수 있습니다. static | relative | absolute | fixed | sticky Static 요소를 일반적인 문서 흐름에 따라 배치합니다. Top, Right, Bottom, Left, z-index 속성에 영향을 받지 않는 기본값입니다. Relative 요소를 일반적인 문서 흐름에 따라 배치하고, 현재 자기 자신의 위치를 기준으로 top, right, bottom, left의 값에 따라 위치의 변화를 적용합니다. 다른 요소에는 영향을 주지 않습니다. 즉 .. 이전 1 다음