HOME

전체 글

(18)

box-shadow를 이용하여 inner border처럼 보이게 하기 CSS · 2024. 12. 3. 12:45 2024. 12. 3. 12:45 width값과 height값이 정해지지 않은 아래와 같은 코드가 있다고 생각해보자. box1 box2 box3 .box-wrap{ display: flex; justify-content: center; align-items: center; margin: 100px auto; } .box{ padding: 5px 10px; margin-right: 5px; text-align: center; box-sizing: border-box; } ..

px, %, vh, vw, em, rem의 차이점과 그 사용법 CSS · 2024. 11. 26. 15:46 2024. 11. 26. 15:46 px값이 고정값이기 때문에 처음 작업할 때는 이 px값으로 요소들을 위치시키는 것들이 편할 수도 있지만, breakpoint를 잡기 시작하면서 상당히 귀찮아지는 것을 확인할 수 있다. (사실 페이지 하나 작업하다가 rem으로 작업할 껄~ 이라면서 뒤늦은 후회를 하면서 다시 한번 기억하기 위해서 작성하는 페이지이다.)그럼 먼저, px,%,vw,vh,em,rem은 무엇인지 간단하게 살펴보자. 이들이 어떤이유에서 발전했는지를 먼저 살펴본다면 더 쉽게 자신의 작업환경에 따라 적용할 수 있다. 1. px, %, em, rem, vh, vw1-1. px (pixel, 픽셀)CSS1(1996)Picture Element의 약어고정된 크기 1-2. % (퍼센트)CSS1반응형 레이아웃 초기 단계에서 부모 요소의 상대적인..

Browser Vendor Prefix, 브라우저 벤더 프리픽스 CSS · 2024. 4. 22. 16:46 2024. 4. 22. 16:46 1. CSS3 Browser Vendor Prefix (브라우저 벤더 프리픽스) ? 다양한 브라우저들이 있는데 전세계적으로 많이 사용되는 대표적인 웹 브라우저에는 크롬, 파이어폭스, 사파리, 오페라, 익스플로어 등이 있다. 벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다. 즉, 이 말은 아직 CSS 권고안에 포함되지 못한 기능이거나 CSS권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 이 벤더 프리픽스를 사용하게 된다. div { width: 300px; height: 100px; background-color: a..

float에 가상선택자::after 로 clear값을 주는 이유 - float 파헤치기 CSS · 2024. 4. 18. 10:45 2024. 4. 18. 10:45 1. 간편한 float, 근데 레이아웃 왜 이 모양? (float의 문제점) 1 2 3 4 안녕하세요 위와 같은 HTML구조가 있다고 하자. 그러면 실제 웹에서는 아래와 같이 나타난다. style에 직접적인 display값을 주지 않아도 기본적으로 가지고 있는 user agent stylesheet에 의해서 div는 block요소, span은 inline요소로 분류되기 때문에 이와 같은 형태로 나타난다. 그런데 여기서 .num-content div박스들을 여백없이 가로로 일렬로 배치하고 싶어 float: left;를 주었다고 해보자. 그럼 위와 같은 형태로 span이 float의 영역까지 침범하게 된다. float는 기존 display: block일때의 normal flow의 BFC에서 벗어나 완전히 새..

block format context, BFC 블록서식맥락 CSS · 2024. 4. 16. 20:50 2024. 4. 16. 20:50 CSS가 렌더링되는 방식을 배우면서 normal flow 영역에 BFC, IFC가 있다는 것을 배웠다. 한국말로 블록서식맥락이라는 이 BFC를 float를 공부하면서 좀 더 자세히 알고 있어야되겠다는 생각이 들었다. 1. BFC(block format context), 블록서식맥락? MDN에서는 아래와 같이 설명하고 있다. A block formatting context (BFC) is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements. > Block formatting conte..

inline과 inline-block의 여백, 너 뭔데? CSS · 2024. 4. 15. 22:03 2024. 4. 15. 22:03 0. inline, inline-block에 나타나는 여백 1 2 3 4 5 1 2 3 4 5 위와 같은 구조의 html이 있다. 이는 아래와 같은 그림처럼 나타난다. float: left; 처리한 div박스들은 여백없이 나타나고 있는데 inline-block처리한 div박스들은 저 미묘한 갭을 가지고 있다. 각 width값을 100px씩 주었으니 wrap의 값은 500px을 나타내야 하겠지만 inline-block으로 처리된 wrap은 522.5의 22.5/4 = 5.625px 정도의 gap을 가지고 있다. (반대로 float처리된 것은 정확하게 500px의 width값을 가지는 것을 개발자도구로 확인할 수 있다) 웃기게도 이 여백은 아래의 코드처럼 한줄로 inline요소를 작성했을 때는 float:l..

nth-child 의미 명확하게 알기 [nth-of-type와의 차이점] CSS · 2024. 4. 15. 17:16 2024. 4. 15. 17:16 0. 적용되지 않는 nth-child, 왜? span 1번째 div 1 div 2 div 3 div 4 위와 같은 코드가 있다고 생각해보자. section div:nth-child(1){color: red;}로 CSS를 적용해보면 적용이 되지 않는 것을 볼 수 있다. 많은 이들이 착각하는게 바로 nth-child와 nth-of-type이다. 1. nth-child와 nth-of-type의 차이점 이 두가지는 모두 요소의 순서에 따라 스타일을 적용할 때 사용된다. 하지만 정확하게 따지자면 차이점이 있다. 1-1. nth-child() : nth-child는 지정된 조건에 맞는 모든 요소를 선택한다. 부모요소의 자식으로서 요소가 몇번째인지가 기준이다. 예를 들어서 위와 같은 구조에서 section div:n..

CSS의 우선규칙, cascade CSS · 2024. 4. 15. 16:16 2024. 4. 15. 16:16 1. Cascade, 캐스케이트? CSS의 약자는 Cascading Style Sheet, 캐스케이팅 스타일 시트라는 말이다. 여기서 캐스케이팅은 무슨 의미를 나타낼까? 옥스포드에서는 아래와 같이 캐스케이트를 정의하고 있다. 1. 대량의 물이 빠르게 아래로 떨어지는 것 2. 순서대로 배열되는 것 CSS의 약자가 Cascading Style Sheet인만큼 CSS는 이 캐스케이팅의 원리가 중요하게 적용된다는 뜻이다. 그럼 이 캐스케이트의 원리가 무엇인가? Cascade는 스타일 규칙이 어떻게 적용되고 우선순위가 결정되는지에 관한 규칙을 나타낸다. CSS를 작성하다보면 같은 요소에 여러개의 스타일이 중복적으로 적용될 수 있다. 예를 들어서 아래와 같은 상황이다. Lorem ipsum dolor sit ame..

user agent stylesheet, 유저 에이전트 스타일 CSS · 2024. 4. 15. 15:28 2024. 4. 15. 15:28 Lorem, ipsum dolor. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, cum! 위와 같은 HTML 문서를 만들었다고 생각해보자. 그러면 아래와 같은 형태의 HTML 문서가 완성되는데 보다시피 외부스타일이나 내부스타일이나 그 어떤 스타일들이 적용되지 않고 있다. 하지만 h1의 글자굵기와 크기가 일반적인 p태그와 다르게 설정되어있는 것이 보이고 margin값도 들어가있는게 보인다. 개발자도구를 확인해보면 figure 태그에 아무런 스타일값을 주지 않았음에도 기본적인 스타일값이 적용되어 있는 것을 볼 수 있다. 그 옆에 자세히 보면 user agent stylesheet라는 항목이 보이는데 바로 브라우저에서 기본적으로 설정되어있는 스..

Normalizing[normalize] & Resetting CSS 초기화 CSS · 2024. 4. 15. 15:16 2024. 4. 15. 15:16 CSS 초기화? 웹브라우저마다 각자의 HTML 요소에 기본 스타일들(user agent stylesheet)을 가지고 있다. CSS스타일링을 적용할 때 이러한 기본값이 설정된 스타일링은 방해가 되고 브라우저마다 다르게 나타나는 크로스 브라우징을 막기 위해 CSS 초기화인 Resetting과 Normalizing을 시행하게 된다. CSS앞에 *{margin:0; padding:0; box-sizing:border-box;}와 같이 적혀있는 것들이 바로 이 CSS초기화인 Normalizing과 Resetting에 해당한다. 🧐 정리하자면 1. 브라우저마다 사용자가 설정하지 않은 기본 스타일링값이 존재하기에 스타일링에 방해가 된다. 2. 브라우저마다 다르게 나타나는 크로스 브라우징을 막기 위해 CSS 초기화가..

a 태그 속성 href의 #과 #none의 차이 CSS · 2023. 9. 2. 22:43 2023. 9. 2. 22:43 01. a 태그의 href? a 태그의 기본 모습은 위와 같다. 평소 별 생각없이 #을 넣었는데 #none을 넣는 방식이 있다는 것을 알게 되면서 href 속성에 대해 제대로 알고 있지 못했다는 생각이 들었다. href = Hypertext REFerence (하이퍼참조) 다른 페이지의 링크를 생성하는데 쓰이는 HTML 코드로 a(anchor) 태그의 속성이다. 💡 그럼 rel과 href의 차이점은? 여기서 또 드는 의문점 하나, 외부스타일로 CSS를 작성할때 header영역에 사용하는 로 rel의 속성을 가지고 있는 것을 볼 수 있다. 여기에서의 rel은 무엇일까? rel = relation (관계) 파일간의 관계를 의미한다. 불러올 파일이 이 파일과 어떠한 관계를 가지는지를 rel에서 정의하는 것 즉..

(코드스피츠) 초보자를 위한 css와 렌더링의 기본개념 CSS · 2023. 8. 27. 19:36 2023. 8. 27. 19:36 출저 : https://www.edwith.org/codespitz-css-rendering/lecture/14646?isDesc=false [LECTURE] 1 그래픽 시스템 : edwith - hika Maeng(히카맹) www.edwith.org 참고내용 : https://coding-farmer.tistory.com/14 CSS Rendering - 코드 스피츠 76회차를 보고나서 정리 목차 코드 스피츠라는 유튜브를 보고 나서 여태까지 내가 깊게 공부하지 않았다는 느낌을 받았습니다. 그래서 이제부터라도 깊게 공부하기 위해서 코드 스피츠에 올라온 영상들을 차근 차근 정 coding-farmer.tistory.com 출저 : https://www.youtube.com/watch?v=_o1zsrBkZy..

slick 사용 방법 정리 etc · 2023. 5. 31. 16:11 2023. 5. 31. 16:11 slick는 슬라이드를 사용할 수 있게 제이쿼리기반의 라이브러리이다. 반응형 작업할때 breakpoint만 설정해주면 쉽게 변경이 가능하고 그 외에도 드래그 등 여러가지 기능을 간편하게 사용할 수 있게 제공해주고 있다. 하지만 swipe와 다르게 조금 사용법이 명확하게 홈페이지에 나와있지 않아 이곳에 정리해보고자 한다. 01. JQuery CDN 가져오기 slick은 제이쿼리 기반의 라이브러리이기 때문에 제이쿼리 CDN이 1차적으로 필요하다. https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversa..

이미지 압축 방식 etc · 2023. 5. 30. 16:48 2023. 5. 30. 16:48 01. Lossy? Lossless? 인터넷에는 많은 데이터들이 존재한다. 동영상이나 이미지등이 그 한 예이다. 이러한 많은 데이터들은 서버에 저장되어 사용자가 필요할때 보여지게 되는데 한정적인 공간과 빠른 로딩을 위해서라도 데이터들은 효율적으로 관리될 필요성이 있다. 예를 들어 인간이 빛에서 인지할 수 있는 가시적인 범위가 존재하기에 그 범위를 벗어나는 것들을 생략하거나 소리에서 인간이 인지하지 못하는 소리, 고주파들을 생략하는 방향으로 이미지와 동영상을 압축하여 저장하는 확장자들이 존재한다. 래스터(비트맵)이미지인 JPEG, JPG와 오디오 확장자인 MP3가 바로 여기에 해당한다. 이미지 압축방식을 알기 위해서는 '손실압축(Lossy compression)'과 '비손실 압축(Lossless compr..

스크롤 이벤트가 들어간 vivus.js 드로잉 효과 구현하기 etc · 2023. 5. 29. 19:07 2023. 5. 29. 19:07 vivus.js 자바스크립트 라이브러리를 이용하여 svg파일에 드로잉 효과를 구현했었다. 간단한 SVG, vivus.js를 이용하여 그려지는 효과 넣기 01. vivus.js vivus는 가벼운 자바스크립트 기반의 svg 애니메이션이 드로잉되는 효과를 구현해주는 라이브러리이다. 다양한 다른 애니메이션을 위해 vivus 홈페이지에서 여러가지 옵션들을 만들어 두 sosol1016.tistory.com 하지만 해당 위치로 갔을 때 애니메이션이 작용할 수 있게는 따로 스크롤 이벤트를 걸어줘야하는데 결론적으로 말하자면 코드는 아래와 같다. 01. 코드 보기 const svgEle = document.querySelector('#Layer_1'); // console.log(svgEle); window.addEve..

SVG viewbox, viewport, preserveAspectRatio 개념 이해하기 etc · 2023. 5. 29. 18:15 2023. 5. 29. 18:15 나를 이해시키기 위해서 적어보는 SVG 개념 이해하기 😵 01. 벡터 이미지 일차적으로 svg의 viewbox를 이해하기 위해서는 svg가 vector 이미지라는 것을 알아야한다. 웹에서 이미지를 표현할때는 크게 래스터와 벡터 이미지로 구분시킬 수 있는데 흔히 우리가 많이 사용하는 확장자인 PNG, JPG가 바로 여기에 해당한다. 래스터 이미지는 무수히 많은 점으로 이미지를 구현하는데 백터이미지보다 더 다양한 색상을 표현하고 유연한 색상편집을 지원하고 세밀하게 빛과 음영을 보여주기에 많은 이들이 많이 사용하는 확장자이지만 이미지를 확대할시 픽셀화 현상이 나타난다는 단점이 존재한다. 그렇다면 벡터(vector)이미지는? SVG(scalable vector graphics)이름에서도 알 수 있듯이 벡터 이미..

이전 1 2 다음

티스토리툴바