JudithHopps JudithHopps

next.js Css Next.js에서 지원 하는 스타일 지정 방법 CSS 모듈 styled-jsx 사스 styled-components는 지원하지 않는다. 레이아웃 구성 요소 먼저 모든 페이지에서 공유할 레이아웃 구성 요소를 만들어 보겠습니다 . component 폴더와 Layout.js 파일을 생성합니다. export default function Layout({ children }) { return {children}; } 그런 다음 를 열고 구성 요소 pages/posts/first-post.js에 대한 가져오기를 추가 Layout하고 가장 바깥쪽 구성 요소로 만듭니다. import Head from 'next/head'; import Link from 'next/link'; import Layo..

상속되는 CSS 속성들 예 color cursor font 관련 letter-spacing line-height list-style 관련 text-align text-decoration text-shadow visibility word-spacing 👉 전체 CSS 속성 리스트에서 살펴보기 inherit 스스로의 값을 포기하고 부모로부터 받은 상속값을 적용합니다. initial 브라우저가 부여한 값을 포기하고 각 속성의 초기값을 적용합니다. p 브라우저가 기본적으로 제공하는 p의 display 속성은 block이죠. p 그런데 속성값을 initial로 주게 되면 p 이와 같이 display 속성의 초기값인 p inline으로 바뀌게 됩니다. 👉 display 속성의 명세 보기 (초기값 확인)👉 initi..

1. 특성 선택자 👉 특성 선택자 MDN 문서 /* 속성 값을 기준으로 선택 */ a[href="https://www.yalco.kr"] { color: #ff4e00; font-weight: bold; } /* 특정 속성이 있는 요소 선택 */ input[disabled]+label { color: lightgray; text-decoration: line-through; } /* 속성값이 특정 텍스트를 포함하는 요소 */ span[class*="item"] { text-decoration: underline; } /* 속성값이 특정 텍스트로 시작하는 요소 */ span[class^="fruit"] { color: tomato; } span[class^="vege"] { color: olivedrab;..

다른 CSS 파일 임포트하기 @import를 사용하면 절대 및 상대경로를 사용해서 다른 CSS파일의 내용을 불러올 수 있습니다. 여러 페이지들에서 공통적으로 사용되는 스타일들을 특정 파일로 분리하여 모듈화할 수 있죠. ex) @import url(./common.css); CSS 변수 정의하기 1. 특정 요소에서만 사용될 수 있는 변수 - 특정 요소 { --변수명 : css 설정; } ex) u { --not-good: wavy underline orange; --wrong: wavy underline red; } css에서 변수명은 --을 붙여야 한다. 2. 모든 요소들에게 사용될 수 있는 변수 :root { } ex) :root { --font-small: 8px; --font-normal: 16px..

요소의 크기 inline이 아닌 요소는 width와 height로 크기를 조절할 수 있습니다. 단위로는 부모의 길이에 상대적인 %를 사용할 수도 있고 뷰포트(viewport) 너비와 높이의 1/100 단위인 vw와 vh, 이들 중 큰 것과 작은 것의 1/100 단위인 vmax와 vmin도 유용하게 사용됩니다. 텍스트가 한 줄일 경우 height과 line-height을 똑같이 맞춰주면 세로 방향에서 가운데로 정렬한 것과 같은 모습이 됩니다. calc(100% - 50px)과 같은 형식으로 연산자를 사용하여 필요에 맞는 길이로 조절할 수도 있습니다. 예시) width를 꽉채우려면 100vw, height를 꽉 채우려면 100vh를 넣으면 된다. 단, html(최상의 부모요소)에 padding이나 margi..

display :block, inline 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다. border-radius 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다. margin 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다. padding 요소의 네 방향 안쪽 여백 영역을 설정합니다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성입니다. 출처 : h..

이번엔 HTML 문서를 꾸미는 방법에 대해 알아보려고 합니다. CSS를 사용하는 이유, 목적 웹의 스타일(글꼴, 색상, 정렬 등)을 결정하기 위해 CSS를 사용합니다. 웹 문서의 내용과 상관없이 디자인을 설정할 수 있습니다. 기기에 맞게 탄력적으로 문서를 만들 수 있습니다. CSS의 형식 태그 후 선택자와 중괄호({}) 안에 스타일 속성과 속성값을 적어줍니다. 주석은 /* */를 사용합니다. 스타일 규칙은 세미콜론(;)으로 구분합니다. 가시성을 위해 여러 줄에 작성하는 경우가 많습니다. 외부 스타일 시트 스타일 규칙이 많을 경우 또는 같은 규칙을 여러번 사용할 경우 사용합니다. css 규칙들을 하나의 파일에 작성한 후 확장자를 css로 저장합니다. html의 태그 안에 문구를 추가합니다. 선택자 전체 선..