천천히, 꾸준히

😺 Study/CSS, SCSS

보통 border를 주면 해당 콘텐츠의 바깥에 생성되지만, inner border를 주기 위해 box-shadow를 사용할 수 있다는 걸 알게 됐다. box-shadow: 0 0 0 3px inset; -> 왼쪽, 위쪽, 번짐, 굵기 * inset: 내부 안 쪽에 넣는다는 의미

2021. 5. 13.

😺 Study/CSS, SCSS

background 속성에 image를 넣었는데, F5를 아무리 눌러봐도 이미지가 나오지 않았다. 이유가 뭘까? 이미지를 넣는 경로는 2가지가 있다. - 절대경로 다른 서버에 있는 이미지를 불러오는 경로 a {background: url("http://image.co.kr");} - 상대경로 상대적으로 변경이 가능한 경로 폴더구조에서 현재 파일을 기준으로 상위 또는 하위 폴더 경로를 찾아서 url을 작성하는 방법이다. a {background: url(../images/main.png) no-repeat;} 작성했던 코드는 footer {background: url("images/이미지.jpg") center no-repeat;} 보통 하는 실수로 이미지 영역의 크기를 지정해주지 않는 것이 있는데, 이미..

2021. 2. 14.

😺 Study/CSS, SCSS

CSS 단위에는 절대 길이와 상대 길이가 있다. 먼저, 절대 길이 px 화면에서 고정된 크기 값 pt 표준 인쇄 단위 window에서 9pt = 12px, mac에서 9pt = 9pt이다. 실무에서는 디자이너들이 가끔 pt로 psd를 보내주는 경우가 가끔 있을 수 있는데, 편의상 같은 값으로 계산하여 작업한다고 한다. 그다음, 상대 길이 % em 선언한 해당 폰트의 대문자 M의 너비를 기준으로, 상대적인 단위이다. em과 rem의 차이 em은 부모 요소의 영향을 받고, rem은 html의 영향을 받는다. See the Pen QWKzaPW by leecorin (@leecorin) on CodePen. .wrap의 font-size: 24px이고 .section의 font-size: 36px인 것을 알 ..

2021. 1. 16.

😺 Study/CSS, SCSS

크게 2가지씩 나뉜다. Container와 item, 수직축과 수평축. *flex-box를 설정하는 방법 div{display: flex;} 아이템들을 감싸는 부모요소에 "야! 너 이제 flex-box야." 라고 얘기하기. *박스의 위치와 아이템들의 방향을 바꿀 수 있다. div{ flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; } row: 왼쪽부터 순서대로 브라우저에 위치 (가로방향) row-reverse: 오른쪽부터 반대순서로 브라우저에 위치 (가로방향) column: 왼쪽부터 순서대로 브라우저에 위치 (세로방향) column-reverse: 왼쪽부터 반대순서로..

2020. 9. 11.

😺 Study/CSS, SCSS

:nth-of-type(odd) :nth-of-type(even) odd는 홀수번째 요소를 선택한다. even은 짝수번째 요소를 선택한다. p:nth-of-type(1) p:nth-of-type(2n+1) p요소 중에 첫번째 요소를 선택한다. 부모 안의 p 요소 중 첫번째부터 2번째마다 선택한다. 내용 p:only-child p:only-of-type div요소의 자식인 p요소가 하나밖에 없을 때. p요소와 같은 유형의 형제가 없을 때. p:last-child p:last-of-child 부모 안에 모든 요소 중 제일 마지막 요소인 p를 선택한다. 부모 안에 모든 p요소 중 마지막 p요소를 선택한다. :empty 자식이 전혀 없는 요소에 적용하는 선택자. 요소 안에 주석이 있어도 상관이 없다. 공백이 있..

2020. 9. 9.

😺 Study/CSS, SCSS

CSS : Cascading Style Sheet html이 뼈대라면 css는 꾸며주는 역할이다. 크게 3가지로 나뉜다. 1. Author style : css를 의미 2. User style : 사용자 취향에 맞게 스타일링 3. Browser *! important는 되도록 쓰지 않도록 한다. *css reference 홈페이지를 통해 css 속성들, 브라우저 호환성 등을 확인할 수 있다. 참고: 유튜브 드림코딩엘리

2020. 9. 9.

😺 Study/CSS, SCSS

예시1. true, false로 제어 @mixin btn_radius($h, $radius:true) {height:$h, background:#000; @if $radius { >>true border-radius: $h / 2; }@else{ >>false border:1px solid red; } } .btn { @include btn_radius(30px, false); } 예시2. 조건식으로 제어 중앙정렬 @mixin position($x, $y, $z, $w){ position: absolute; left: $x; top: $y; z-index: $z; width: $w; @if $x == 50% and $y == 50%{ transform: translate(-50%, -50%); }@els..

2020. 6. 24.

😺 Study/CSS, SCSS

예시1 @each $var A, B, C{ .class#{$var}{ background: url(images/#{$var}.gif) no-repeat; } } 예시2. 배열변수 $heading :( h1:30px, h2:20px, h3:15px ); >>추후에 수정할 경우 변수의 값 수정하거나 추가 @each $ele, $fs in $heading { >>$ele:선택자, $fs:값 #{$ele} { font-size: $fs; } } p.s - 유튜브 리베하얀 영상 참고

2020. 6. 24.

😺 Study/CSS, SCSS

예시1. 기본문법 응용 @mixin bx ($position, $wid, $color){ border-#{$position}: $wid solid $color; } >> border 방향 부분에 #{$변수} 기입, @include 할 때 방향 써주면 됨 >> $wid=가로값, $color=색상 div { @include bx (right, 2px, red) } >> css에 div{border-right: 2px solid red;}로 적용됨 예시2. for문 응용1 @for $i from 1 to 6 { >> i의 1부터 5까지 반복하겠다. (to는 미만을 뜻함) nav ul .menu#{$i} > a {color: red;} } >> 메뉴 li가 차례대로 선택되며 글자 색상 변경됨 예시2. for문 ..

2020. 6. 24.

😺 Study/CSS, SCSS

// 쉼표 구분자 (적용 후 css에서 확인해보면 '요소, 요소' 식으로 적용됨) // mixin과 비슷하지만 되도록 mixin 쓰길 권장! // 화면 꽉 차는 레이아웃에 가운데 정렬 필요한 요소들에 일괄적으로 적용시 좋음! (반복되는 영역에 쓰기) // %이름 {스타일 적용} 예시) .main { @extend %m0auto; } .footer { @extend %m0auto; } %m0auto { width: 1200px; margin: 0 auto; } >> css에서 확인해보면 .main, .footer{ width: 1200px; margin: 0 auto; }로 적용됨 p.s - 유튜브 리베하얀 영상 참고

2020. 6. 24.