Coding/CSS13 CSS - border edge 만들기 border는 태그의 테두리를 만드는 css 속성이다 하지만, 테두리를 더욱 이쁘게 edge만 테두리 효과(아래 사진처럼)를 만들 수 있다 #object * 하단 그림에 우측상단과 좌측하단에 부분에만 border 효과 만들기 ## ::before / ::after 우선, CSS 속성 before와 after를 확인 해보면 *before: 선택자의 첫번째 자식으로 먼저 실행 *after: 선택자의 첫번째 자식으로 나중에 실행 ex) * 아래와 같이 div 태그가 있다면... *.feature-box::before{} > .feature-box{} > .feature-box::after{} 순으로 UI를 그린다. * before 와 after의 기준은 feature-box 이고, 부모 태그가 된다. cont.. 2022. 6. 24. CSS - background(2) 여기서 사용하는 code의 예제는 react에 만들었던 phonebook을 이용하였다. backgroud에 linear-gradiant로 여러가지 색깔을 넣을 수 있다. *backgroud : linear - gradient(각도, 색깔, 색깔...) *각도는 색깔을 기울이는 각도를 말한다. 다른 각도를 예제를 보면 이해하기 더욱 쉬울것 같다. *body tag에만 넣었기 때문에 body에만 효과가 부여된다. 색깔은 3가지 색상도 가능하고, 색상의 범위도 지정이 가능하다. 그리고 반복효과를 뺄수도 있다. *background : no-repeat; 색깔 뒤에 나타내는 숫자들은 색깔이 차지하는 범위을 나타낸다. *blue 색 20% 차지, white 색 40%(20~60)차지 aquamarine 색 40%.. 2020. 8. 20. CSS-media query(responsive app)(반응형 앱) codestates 강의에서 media query 개념이 나왔는데, front-end 개발자가 되려면 꼭 알아야 하는 개념이라고 한다. media query는 요즘처럼 인터넷을 컴퓨터, 스마트폰, 테블릿 기기로 볼 수 있으며, 각각의 화면의 크기는 다르다. 화면 크기에 따라 web의 화면 상태가 변화하는 개념이다.(생활코딩의 예제를 활용) 크롬 개발자도구 console에서 화면의 크기를 확인 할 수 있는데, 지금의 화면의 크기는 1091px x 981px이다. console의 창 크기를 조절해보면 화면의 크기를 나타내는 px 단위의 화면크기 표시를 볼 수 있다. 코드를 실행 시키고, 화면의 크기를 확인 했을 때, 776px x 848px이다. 여기에서 가로의 px이 700px 이상일 때, border b.. 2020. 7. 21. CSS - background 효과(1) CSS를 통해서 backgound에 효과를 넣을 수 있다. 그 중 이번에는 사진을 넣는 방법과 거기에 효과를 넣는 방법에 대한 포스트이다. background에 사진 넣기 - bordor와 같은 box에 사진을 넣을 수 있으며, 웹페이지 배경에도 사진을 넣을 수 있다.(box에 사진 넣는 방법부터) - background - image : url(주소); *li 태그에 대해 border 효과를 주고 거기에 background-image:url(주소)를 통해 border 안에 사진을 넣을 수 있다. Box size에 따른 사진 넣기 -background-clip을 통해서 box 크기에 따라 효과를 넣을 수 있다. -clip은 실생활에서 사용하는 clip이라고 해서 클립으로 고정하다 라는 뜻도 있지만, '잘.. 2020. 6. 6. 이전 1 2 3 4 다음 반응형
