WEB Dev/HTML | CSS
-
[CSS] 폰트 안티앨리어싱 Anti-AliasingWEB Dev/HTML | CSS 2023. 3. 14. 12:22
윈도우와 맥에서 브라우저 폰트 렌더링이 조금 다른 경우가 있다. 같은 폰트라도 맥과 윈도우에서 차이가 좀 있는데 윈도우가 조금 더 계단식으로 번지는 느낌인데 사실 폰트차도 좀 심하다. 맥에서는 이 같은 현상을 해결하는 안티 앨리어싱 Anti-Aliasing이 적용되고 있지만 윈도우에서는 가끔 느껴진다 😭 이 부분을 수정하기 위해서는 폰트 안티앨리어싱을 적용해주어야 한다. 안티앨리어싱을 원하는 span, p, heading 태그 등에 아래와 같이 아주 약간의 회전을 주면 윈도우에서 안티앨리어싱을 적용해준다. span{ transform: rotate(0.04deg); } 적용 전 적용 후 사실 무슨 차이인지 모르겠는 . 사실 이 글을 쓴 이유는 저 페이지들을 처음 마크업 할 때는 반드시 넣어서 맥과 윈도우..
-
[CSS] SCSS @for 반복문으로 순위 숫자 리스트에 삽입하기WEB Dev/HTML | CSS 2023. 2. 15. 21:02
상품 판매 순위를 list에 1,2,3,4 하드코딩 하거나 스크립트 처리 하지 않고 SCSS의 반복문을 이용하여 가상요소로 삽입하는 방법 위와 같이 작은 원 안에 숫자를 순차적으로 넣어야 할 때 사용할 수 있다. @for 변수 from 시작숫자 through 끝 숫자 를 선언하고 중괄호로 감싸준다. {} 그리고 가상요소의 content에 #{$i}를 사용해 숫자를 적용해주면 된다. 내부에 숫자를 텍스트로 넣지 않고 별도로 배열을 선언해서 적용하는 방법은 검색하면 다수 나오는데 이렇게 순서를 순차적으로 적용하는 방법이 없어 공유한다. ul { li{ position: relative; //순위 표시 //$i라는 변수가 1부터 10까지 (순위를 표시할 것이 더 많다면 10을 더 늘려주면 된다) @for $i..
-
[CSS] Animation - TransitionWEB Dev/HTML | CSS 2023. 1. 20. 00:13
냥이집사님의 Web-animation 노션을 보고 CSS Animation을 공부합니다. Transition 이란? transtion이란 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것 transition: transition-property transition-duration transition-timing-function transition-delay Transition의 속성들 transition - property property 속성이란 뜻으로 어떤 속성에 transition 효과를 줄 지 설정해줄 수 있음 속성값(all, none, property, initial, inherit)으로 all: 기본값으로 모든 속성에 transition 효과를 적용 none: 속성들..
-
[HTML] blockquote 태그 알아보기WEB Dev/HTML | CSS 2022. 3. 14. 10:48
마크업 프로페셔널로 거듭나기 tobyyun 님의 마크업 개발 레벨 테스트 질문을 통해 마크업 역량을 키워보자 ψ(｀∇´)ψ 마크업 개발 레벨 테스트 질문 팀의 막내 개발자의 마크업 개발 역량 확인을 위해, 마크업 개발 레벨 테스트용 질문을 만들어 보았습니다. 제가 마크업 개발자를 뽑는 면접관 역할을 하게 될 때에 사용하는 질문들과도 유사한 tobyyun.tumblr.com 질문 blockquote 태그는 어떤 용도로 사용해야 할까요? 답 blockquote는 block과 quote라는 영단어 두 개를 합성한 합성어로 만들어진 태그다. quote는 인용문이라는 뜻으로 다른 문서의 글이나 다른 사람의 말을 가져와 사용하는 것을 인용이라고 한다. 일반적으로 태그에서는 i 태그와 같은 텍스트를 강조하는 방법을 ..
-
[HTML] block속성과 inline 속성WEB Dev/HTML | CSS 2022. 3. 5. 17:53
마크업 프로페셔널로 거듭나기 tobyyun 님의 마크업 개발 레벨 테스트 질문을 통해 마크업 역량을 키워보자 ψ(｀∇´)ψ 마크업 개발 레벨 테스트 질문 팀의 막내 개발자의 마크업 개발 역량 확인을 위해, 마크업 개발 레벨 테스트용 질문을 만들어 보았습니다. 제가 마크업 개발자를 뽑는 면접관 역할을 하게 될 때에 사용하는 질문들과도 유사한 tobyyun.tumblr.com 질문 block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요. 답 1. 블록 Block 요소란? 우선 이런 것들의 정확한 설명은 W3C나 MDN에서 확인할 수 있다. 기본적으로 block 요소는 '블록 레벨 요소 Block Level Element' 라고 말할 수 있다. 블록 레벨 요소는 부모 요소의 전체 공간을..
-
[HTML] <strong>, <em> 태그 이해하기WEB Dev/HTML | CSS 2022. 3. 3. 17:47
마크업 프로페셔널로 거듭나기 tobyyun 님의 마크업 개발 레벨 테스트 질문을 통해 마크업 역량을 키워보자 ψ(｀∇´)ψ 마크업 개발 레벨 테스트 질문 팀의 막내 개발자의 마크업 개발 역량 확인을 위해, 마크업 개발 레벨 테스트용 질문을 만들어 보았습니다. 제가 마크업 개발자를 뽑는 면접관 역할을 하게 될 때에 사용하는 질문들과도 유사한 tobyyun.tumblr.com 질문 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요? 답 초등학교 때 나모웹에디터 같은 프로그램으로 홈페이지를 만들 때 를 많이 썼었다. 그런데 개발자가 되기 위해 다시 마크업을 공부하니 더이상 는 쓰지 말고 을 쓰라고 했다. 1. 와 는 원래 어떤 태그였을까? 는 bold, 는 italic의 약자를 사용한..
-
[HTML] Doctype 이란 ?WEB Dev/HTML | CSS 2022. 3. 3. 00:19
좋은 마크업 공부 자료를 구하게 되어서 순서대로 하나씩 작성해보려고 한다. 마크업 프로페셔널로 거듭나기 tobyyun 님의 마크업 개발 레벨 테스트 질문을 통해 마크업 역량을 키워보자 ψ(｀∇´)ψ 마크업 개발 레벨 테스트 질문 팀의 막내 개발자의 마크업 개발 역량 확인을 위해, 마크업 개발 레벨 테스트용 질문을 만들어 보았습니다. 제가 마크업 개발자를 뽑는 면접관 역할을 하게 될 때에 사용하는 질문들과도 유사한 tobyyun.tumblr.com 질문 Doctype을 사용하지 않을 때는 무슨 일이 발생할까요? 답 쉽게 독타입이라고 부르는데 HTML 문서 만들때 그냥 무의식적으로 넣어야 하는 코드로 알고 있었다. 아래에 차근차근히 독타입이 무엇인지, 없으면 어떤 일이 발생하는지 레퍼런스와 함께 알아보자 1..
-
[CSS] css로 툴팁 만들기 (tooltip)WEB Dev/HTML | CSS 2022. 2. 15. 15:01
UI 라이브러리를 만들면 가져다 쓰면 되겠지만... CSS로 만드는 것도 어렵지는 않다. 특정 부분에 마우스 오버 (롤오버, hover) 하면 툴팁박스가 나오는 간단한 예제. HTML 속성으로 사용할 수도 있지만 커스텀이 필요한 경우 만들어 쓸 수 있다. 삼각형은 이미지로 붙여도 되고, 가상요소 (::after, ::before) 를 이용해도 된다. 아래 code sandbox를 참조 👀 HTML 삽입 미리보기할 수 없는 소스