티스토리

Rin's blog
검색하기

블로그 홈

Rin's blog

haeeeell.tistory.com/m

천천히, 꾸준히

구독자
3
방명록 방문하기

주요 글 목록

  • [CSS] box-shadow로 border 효과주기 보통 border를 주면 해당 콘텐츠의 바깥에 생성되지만, inner border를 주기 위해 box-shadow를 사용할 수 있다는 걸 알게 됐다. box-shadow: 0 0 0 3px inset; -> 왼쪽, 위쪽, 번짐, 굵기 * inset: 내부 안 쪽에 넣는다는 의미 공감수 3 댓글수 0 2021. 5. 13.
  • [CSS] background에 image 넣기, 배경 안 나올 때, 경로 확인하기 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;} 보통 하는 실수로 이미지 영역의 크기를 지정해주지 않는 것이 있는데, 이미.. 공감수 4 댓글수 0 2021. 2. 14.
  • [CSS] 부스트코스 edwith - 웹 UI 개발 | CSS의 단위와 font, line-height에 대하여 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인 것을 알 .. 공감수 0 댓글수 0 2021. 1. 16.
  • Flex-box는 css의 꽃이다* 크게 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: 왼쪽부터 반대순서로.. 공감수 0 댓글수 0 2020. 9. 11.
  • 개인적으로 헷갈리는 <선택자>를 모아보자. :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 자식이 전혀 없는 요소에 적용하는 선택자. 요소 안에 주석이 있어도 상관이 없다. 공백이 있.. 공감수 0 댓글수 0 2020. 9. 9.
  • css랑 조금 친해져보자. CSS : Cascading Style Sheet html이 뼈대라면 css는 꾸며주는 역할이다. 크게 3가지로 나뉜다. 1. Author style : css를 의미 2. User style : 사용자 취향에 맞게 스타일링 3. Browser *! important는 되도록 쓰지 않도록 한다. *css reference 홈페이지를 통해 css 속성들, 브라우저 호환성 등을 확인할 수 있다. 참고: 유튜브 드림코딩엘리 공감수 0 댓글수 0 2020. 9. 9.
  • 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.. 공감수 0 댓글수 0 2020. 6. 24.
  • SCSS_each문 예시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 - 유튜브 리베하얀 영상 참고 공감수 0 댓글수 0 2020. 6. 24.
  • 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문 .. 공감수 0 댓글수 0 2020. 6. 24.
  • SCSS_@extend // 쉼표 구분자 (적용 후 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 - 유튜브 리베하얀 영상 참고 공감수 0 댓글수 0 2020. 6. 24.
  • SCSS_@mixin과 @include // 반복적인 코드 '@mixin 이름'으로 설정하고, 쓸 때마다 요소에 @include로 불러오기! // 실무에서는 mixin 파일 따로 생성, scss 파일에 연결시켜서 호환! 예시1. 기본문법 응용 @mixin clear{ &:after { content: ""; display: block; clear: both; } } div { @include clear; } >>css 코드에 div:after { content: ""; display: block; clear: both; }로 자동 설정 예시2. 매개변수 응용 @mixin border ($color){ border: 1px solid $color; } div { @include border (blue); } >> $color라는 매개변수를 만들.. 공감수 0 댓글수 0 2020. 6. 24.
  • SCSS_선택자 예시) $color: #333; >> $color라는 변수 설정 .btn { &:hover { color : $color; } >> &(가상선택자의 위치 ) .btn을 hover했을 때 색상을 위의 변수로 설정 .lnb { color: $gray; ul { border: 1px; > li { background: pink; & : last-child { background: yellow; } >> li의 마지막 자식 선택 } } } p.s - 유튜브 리베하얀 영상 참고 공감수 0 댓글수 0 2020. 6. 24.
  • SCSS_개념 // Syntactically Awesome Style Sheets 의 약자로 '문법적으로 멋진 스타일 시트' - css 전처리기 - 코드의 재활용성을 높여줌 - 코드의 가독성을 높여줘 유지보수의 용이성을 높여줌 - 추후 관리 위해 scss와 css 파일은 폴더로 구분 지어주는 것이 좋음 - 모든 작업이 끝날 때까지 종료하면 안 됨 - 반복문 / each / for / 조건문 / 변수 / 매개변수 / 연산 가능 - 변환하는 파일: 컴파일(무료: 코알라, 유료) >> css로 변환해줌 - scss와 sass는 다름! // Koala(코알라) 설정 source map: css와 연결시켜주는 코드 autoprefix: webkit 접두사 자동 생성 output style: compact(선택자 달라질 때마다 .. 공감수 0 댓글수 0 2020. 6. 24.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.