4냥이 집사의 개발 공부일지

 [line-height] ۰ line-height는 텍스트 줄 간격을 지정하는 속성이다. 이 속성은 텍스트의 줄 간격을 지정하는데 사용된다. 또한 font-size 속성과 함께 사용되며, font-size에 대한 배수로 지정된다.   예를 들어, line-height: 1.5;를 적용하면 텍스트의 줄 간격이 1.5배로 지정된다. 이때 font-size가 16px이라면 텍스트의 줄 간격은 24px이 된다. [cursor] ۰ cursor 속성은 마우스 커서의 모양을 지정하는데 사용된다. 예를 들어, cursor: pointer는 마우스 커서를 손가락 모양으로 바꿔준다. 또한 cursor: auto는 브라우저가 기본적으로 제공하는 마우스 커서를 사용한다. 이외에도 default, crosshair, help 등의 다양한 값들이 있다. [letter-spacing] ۰ letter-spacing은 글자 간격을 지정하는 속성이다. 이때, px을 값으로 주면 지정한 px만큼의 간격이 지정되고, em을 값으로 주면 font-size의 배수만큼 간격이 지정된다.  예를 들어, font-size: 16px; letter-spacing: 2px; 을 적용하면 글자 간격이 2px로 지정된다. 그리고 font-size: 16px, letter-spacing: 0.1em;을 적용하면 글자 간격이 1.6px로 지정된다. [position] ۰ position은 요소의 위치를 지정하는 속성이다. 이 속성은 요소를 상대적으로 또는 절대적으로 배치할 수가 있다. 이에는 다음과 같은 값들이 있다. - static : default 값으로, 요소를 문서 흐름에 따라 배치한다. - relative : 요소를 자신의 위치를 기준으로 배치한다. - absolute : 요소를 parent 요소를 기준으로 배치한다. - fixed : 요소를 뷰포트를 기준으로 배치한다. - sticky : 스크롤 영역을 기준으로 요소를 배치한다. [text-transform] ۰ text-transform은 텍스트의

내 마음대로 값을 바꿔가며 사이트를 클론 코딩해보는 중이다. 진행 중에 새롭게 알게 된 CSS 속성들에 대해서 조금씩 정리해 봐야겠다. [font-family] ۰ font-family 속성은 CSS에서 사용되는 속성으로 글꼴을 지정하는 속성이다. font-family 속성은 글꼴의 이름을 지정하며 여러 개의 글꼴을 지정할 수 있다. 만약 지정한 글꼴이 pc에 없을 경우 브라우저는 기본 글꼴을 사용한다. vscode에 font-family를 입력하면 기본으로 사용할 수 있는 글꼴을 여러 개 표시해 준다. 그 이외의 글꼴을 사용하기를 원한다면, 관련 사이트에서 다른 글꼴을 다운 받아 적용시켜야 한다. [font-weight] ۰ font-weight 속성은 글자의 굵기를 설정하는 CSS 속성이다. 사용할 수 있는 속성값으로는 lighter, normal, bold, bolder 등이 있습니다. 또한 100~900과 같이 숫자로 텍스트의 두께를 설정할 수도 있습니다. 여기서 normal은 400과 같고, bold는 700과 같다. 그리고 bolder는 부모 요소보다 더 굵게, lighter는 부모 요소보다 더 얇게 표시된다. [text-align] ۰ text-align 속성은 텍스트의 수평 방향 정렬을 설정하는 CSS 속성이다. 사용할 수 있는 속성값으로는 left, right, center, justify 등이 있다. 당연히 left는 왼쪽 정렬, right는 오른쪽 정렬, center는 중앙 정렬이고, justify는 각 줄의 너비를 동일하게 늘려서 줄을 늘린다. [flex-wrap] ۰ flex-wrap 속성은 flex-item 요소들이 강제로 한 줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현 할 것인지를 결정하는 속성이다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있다.  예를 들어, flex:wrap : wrap; 을 설정하면 flex-item 요소들이 가능한 영역 내

 [Extends] ۰ python에서 사용하던 extend 메서드와 비슷하다. SCSS에서도 지정해 두고 싶은 스타일들을 선택자에 담아뒀다가, 필요할 때 해당 선택자의 스타일을 @extend를 통해 상속받아 사용할 수 있다. 쓰고 보니까 뭔가 비슷하지 않은 것 같지만, 요소를 뭉태기로 집어넣는 다는 점에서 비슷하다고 생각한다. 아래와 같이 사용할 수 있다. -> _extends.scss 선택자들 담아두는 용도로 파일 생성 %btn {     background-color : #fff;     border : 1px solid #ccc;     padding : 5px 10px; } -> style.scss로 돌아와서 상속 받기(import 필수!) bottuon {     @extend %btn;     font-size : 15px; }  이게 끝이다. 매우 간단하게 사용할 수 있어서 내가 자주 사용해야 할 특정 스타일이 있다면, extend로 묶어뒀다가 상속 받아 사용하면 편하게 사용할 수 있을 것 같다. [mixin, @content] ۰ @content는 SCSS의 mixin에서 사용되는 지시어로 mixin에서 선언된 블록을 가져와 mixin의 내용과 함께 렌더링 한다. 이를 통해 mixin의 내용을 재사용하면서 mixin의 내용을 변경할 수 있다. 사용법은 아래와 같다. @mixin responsive ( $width ) {   @if $width == "768" {     @media screen and ( max-width : 768px ) {       @content ;     }   } @else if $width == "900" {     @media screen and ( min-width : 769px ) and ( max-width : 900px ) {       @content ;           }   } @else if $width == "1080&

۰ SCSS는 CSS보다 심플한 표기법으로 CSS를 구조화 해서 표현할 수 있다. SCSS 사용법은 중괄호로 중첩을 표현하고, 세미콜론으로 속성을 구분한다. 반면, CSS는 중괄호와 세미콜론을 모두 사용한다. 이는 CSS 보다 SCSS가 가독성이 높아지고, 유지보수성이 높아지는 이유이다. [CSS 작성 예시] [SCSS 작성 예시] ۰ 위의 사진처럼 작성하기 때문에 SCSS에서는 가독성이 높아지고, 유지보수성이 더 높아진다. 하지만 브라우저는 scss를 읽을 수 없기 때문에 scss를 사용할 때, scss와 css를 연결한 후 css를 html 파일과 연결해야 한다. 연동하는 방법으로는 Sass와 Live Sass Compiler 확장 프로그램을 설치하면 된다. ۰ scss에서 파일을 만들어 사용할 때, 파일명 앞에 _ (언더바)를 입력하면, 해당 파일은 css로 변경하고 싶지 않다는 표시이다. 오직 scss로 사용하기 위한 파일을 만들 때 사용한다. [Variables] ۰ 위에서 말한 방식으로 _value.scss 파일을 만들었다면, 우리가 css와 연동해서 사용 중인 scss 파일에 해당 파일을 import 해준다. -> @import "_value"; ۰ _value.scss 파일은 우리가 사용할 속성들을 변수로 선언해 뒀다가 해당 변수를 메인으로 사용 중인 style.scss 파일에서 불러서 사용하는 역할이다. 변수를 선언하고 사용하는 방법은 아래와 같다. -> $bgcolor: aqua;  (변수선언) -> body { backgroundcolor : $bgcolor; }     (main scss에서 사용하는 법) [Nesting] ۰ Nesting은 맨 위에 올려둔 SCSS 작성 예시와 같다. 기존의 CSS는 class 안의 요소들 마다 중괄호를 열어서 사용해야 했다. 하지만 SCSS는 중괄호 안에서 해당 요소들을 중첩 해서 사용할 수 있다.  [Nesting 작성 예시] 만약 위처럼 box에  pseudo-cl

 이전까지 설명한 flexbox를 이용하면 item들의 상하, 좌우, 중앙 정렬 등은 쉽게 가능하지만, 격자(grid) 형태의 구성을 하는 건 어렵고, 오래 걸린다. 그런 수고를 덜어주고자 나타난 게 grid다. [grid] ٠ display : grid; -> CSS grid layout을 사용하기 위한 시작점. ٠ grid-template-columns : 100px 100px 100px; -> grid의 column 수를 정하고, 해당 column들의 크기를 할당해 주는 속성이다. ٠ grid-template-rows : 100px 100px 100px; -> grid에서 선택된 row의 크기를 할당해 주는 속성이다. 만약 선택한 row의 수 보다 실제 row의 수가 많다면, 선택된 row까지만 값을 적용하고 나머지는 default 값이 적용된다. ٠ column-gap : 10px; -> column들의 간격을 할당해 준다. ٠ row-gap : 10px; -> row들의 간격을 할당해 준다. ٠ gap : 10px; -> column과 row의 간격을 한 번에 할당해 준다. ٠ repeat(4, 100px); -> grid-template-columns: repeat(4, 100px)은 grid column을 4개 만들어서 모두 100px을 적용한다는 말이다. repeat을 응용하면 '100px repeat(2, 200px) 100px' 처럼 같은 4개의 column이지만, 할당을 다르게 줄 수도 있다. ٠ grid-template-area :  위의 코드에 노란색 선으로 표시한 것처럼 각 child 마다 이름을 부여하고, child 값을 넣고 싶은 곳을 grid-template-area에 배치하면 그대로 출력 된다. 하지만 grid 내부에 grid-area의 영역이 나눠지지 않고 전부 이어져 있어야 한다. 또한 영역이 ㄴ자, ㄱ자 처럼 꺾이지 않고 직사각형 형태여야 만들어진다. ٠ auto; -&g

 flex-box는 width나 height의 크기를 신경 쓰지 않는다. 오직 item을 한 줄에 위치시키는 것만 고려한다. 브라우저의 크기가 줄어든다면, width 값을 줄여서 flex-box를 유지한다. [flex-wrap] flex-wrap : nowrap; -> 사용하지 않을 때에도 적용되는 default로 flex-box가 한 줄에 위치하게 만든다. flex-wrap : wrap; -> itmes의 width, heigth 설정 값을 유지하라는 명령어다. 크기를 유지하기 위해서 라면 줄에서 흩어져도 상관없다. flex-wrap : wrap-reverse; ->wrap 상태로 만들되, 순서를 뒤집어서 정렬한다. [flex-direction] flex-direction : row-reverse; -> item들을 가로로 정렬하되, 그 순서를 뒤집어서 정렬한다. flex-direction : column-reverse; -> item들을 세로로 정렬하되, 그 순서를 뒤집어서 정렬한다. [align-content] align-content : flex-strat; -> 적용하지 않았을 때의 default로 item들을 parent요소의 가장 상단으로 붙인다. align-content : flex-end; -> item들을 브라우저가 표시되는 영역에 한 해서 parent요소의 가장 밑으로 붙인다. [flex-shrink] flex-shrink : 2; -> nth-child()를 통해 하나의 child 요소만 지정하고 사용할 경우, flex-box의 크기가 줄어들 때 해당 child요소만 다른 요소들에 비해서 크기가 2배 더 줄어든다. *flex-shrink : 3;의 경우는 3배로 줄어든다. 즉, nth-child()를 이용해 각 child 요소들에 flex-shrink를 적용한다면, 브라우저의 크기에 따라 원하는 크기로 조정하는 게 가능하다. [flex-grow] flex-grow : 1; -> nth-chi