본문 바로가기

Language & Framework/HTML CSS

CSS Background-image만 투명하게 만들기
Language & Framework/HTML CSS 2022. 5. 3. CSS Background-image만 투명하게 만들기 사실 투명하게 만든다고 했지만 opacity를 사용할 생각은 없다. opacity를 사용하면 배경이 뿌옇게 변하기 때문에 필터를 씌워서 글자의 가독성을 높이는 것이 더 효율적이다. 방법은 굉장히 간단하다. .jumbotron { position: relative; color: rgba(255,255,255,1); background-color: transparent; padding: 50px; display: flex; justify-content: center; align-items: center; height: 400px; background-image: url(../../image/background.jpg); background-size: cover; background-repeat: no-re..
CSS로 flip 효과 간단하게 구현하기
Language & Framework/HTML CSS 2022. 2. 15. CSS로 flip 효과 간단하게 구현하기 이런 효과를 한 번 구현해보자. 응애 나 애기 멍멍이 html은 이렇게 작성했다. 전체 박스 안에 앞면과 뒷면을 각각 만들어주면 된다. 앞면은 굳이 박스로 만들지 않고 img 태그에 바로 클래스를 줘도 상관 없다. .flipProfile { display: block; margin: auto; width: 300px; height: 300px; transform-style: preserve-3d; // 이 박스를 3d로 만들어주세요~ transition: 300ms all ease-in; } .flipProfile img { width: 100%; height: 100%; border-radius: 50%; } .flipProfile__front { position: absolute; z-index: 1..
SCSS(SASS) 기초 활용법과 반복문 활용하여 부트스트랩의 row, col 구현하기. 핵심만 간단하게.
Language & Framework/HTML CSS 2022. 2. 12. SCSS(SASS) 기초 활용법과 반복문 활용하여 부트스트랩의 row, col 구현하기. 핵심만 간단하게. SCSS가 무엇인가요? CSS를 좀 더 깔끔하고 예쁘고 편하게 작성하도록 도와주는 전처리기다. 설치, 적용 방법의 경우 vscode를 사용하는 사람이라면 여기가 가장 설명이 잘 되어있는 것 같다. 나머지는 직접 찾아보도록 합시다. 나는 이 깜찍한 html을 토대로 SCSS의 기초적인 내용들을 설명하도록 하겠다. 세가지를 다룰 예정이다. 기본 작성법, extend와 mixin, 그리고 부트스트랩의 row와 col을 반복문으로 구현하기. 모두 쉬운 내용이다. 1) 기본 작성 방법 한 컷으로 이해하는 기본 작성 방법. css의 root 활용과 비슷하게 $변수명을 사용하여 미리 입력된 값을 불러와 사용할 수 있다. 다만 훨씬 눈에 잘 들어오고 깔끔하다. css와 달리 클래스 내부의 요소를 일일히 새로 클래스를 ..
구글 폰트? TTF? WOFF? 웹 폰트 적용하는 방법, 그림으로 간단하게
Language & Framework/HTML CSS 2022. 2. 5. 구글 폰트? TTF? WOFF? 웹 폰트 적용하는 방법, 그림으로 간단하게 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 일단 완전 편리한 구글 폰트부터 빠르게 보고 가도록 하자. 구글 폰트를 이용하면 파일 업로드 다운로드 과정이 없기 때문에 직접 업로드하는 방식보다 조금이나마 쾌적하고 무엇보다 굳이 파일을 준비하거나 미리 설정할 게 없어서 굉장히 편하다. 너무너무 쉽고 편해서 따로 설명할 것이 없다. 나는 스크린샷을 두 번 찍기 귀찮아서 html에서 바로 style을 지정해줬을 뿐 css파일에서 font-family를 지정해주는 것이 일반적이다. 그리고 그냥 폰트 한 개만 적용해놓고 굵기를 조절하는 것과 애초에 해당 굵기에 맞는 파일을 준비해놓..
구시대의 유물? float과 inline-block 활용하여 레이아웃 구성하기
Language & Framework/HTML CSS 2022. 1. 29. 구시대의 유물? float과 inline-block 활용하여 레이아웃 구성하기 위와 같이 아주 간단한 구조를 가진 레이아웃을 만들어보기로 하자. 사람에 따라 생각하는 위치와 크기에 약간씩 차이는 있겠지만 시멘틱 태그(Semantic tag)를 알고 있다면 보자마자 대충 어떤 형태인지 떠오를 것이다. 모른다면 여기서 보고 오자. 먼저 float을 활용하여 구현해보자. .container { width: 650px; background-color: wheat; } .header { width: 100%; height: 100px; background-color: blue; } .sidebar { width: 20%; height: 250px; background-color: burlywood; float: left; } .main { width: 80%; height: 250px; b..
시맨틱 태그(Semantic Tag)는 왜 필요하고 어떻게 사용할까? 핵심만 간단하게.
Language & Framework/HTML CSS 2022. 1. 5. 시맨틱 태그(Semantic Tag)는 왜 필요하고 어떻게 사용할까? 핵심만 간단하게. Semanti Tag란 '의미가 있는 태그'를 뜻한다. 시맨틱 태그가 없었던 HTML4 버전까지는 모든 컨테이너를 div 태그를 활용해서 제작했으나, 이제는 header aside main 등 각종 의미가 있는 태그를 활용하여 컨테이너를 만들고 웹을 구성해야 한다. 이런 시맨틱 태그를 사용해야 하는 이유는 크게 세가지로 나눌 수 있다. 1. 직관적이기 때문에 웹 유지보수가 편리하다. 2. 검색 엔진에 노출될 확률이 올라간다. 3. 접근성이 좋아진다. (화상 키보드 입력, 내래이션 기능 등) -> 이건 웹 표준과 관계된 내용이므로 2번에도 영향을 미친다. 종합해보면 시맨틱 태그를 똑바로 사용하지 않으면 검색 엔진에 노출되지 않아 홍보 비용으로 이중 지출, 그리고 전임자가 만들어놓은 웹 유지보수하다가 직원들..
CSS 반응형 단위의 종류와 사용. %와 vw, em과 rem의 차이점. 핵심만 간단히.
Language & Framework/HTML CSS 2022. 1. 2. CSS 반응형 단위의 종류와 사용. %와 vw, em과 rem의 차이점. 핵심만 간단히. font, padding, margin 등 모든 종류에서 px라는 고정 단위로 값을 통제할 경우 반응형으로 크기 조절이 되지 않는다. 사용자가 어떤 글씨 크기를 원하든 " 응 ~ 난 무조건 24px 할 거야~ 무조건 옆으로 길게 뻗을 거야~ " 이런 식으로 막 나간다 이 말이다. 물론 우리가 신이고 웹 이용자가 창조물 같은 관계라면 우리 마음대로 정해놓고 알아서 쓰라고 해도 되겠지만, 웹 개발자와 사용자는 생산자와 소비자 관계이기 때문에 최대한 소비자 편의에 맞춰 사용할 수 있게 해주어야 한다. 그래서 되도록 px나 pt같은 절대값(absolute)이 아닌 상대값(relative)을 사용하는 것이 좋다. 주로 사용되는 상대값 % (percent) 부모 요소 width값의 n% vw(view width) ..
Flexbox Froggy 정답 및 풀이 복습
Language & Framework/HTML CSS 2021. 12. 26. Flexbox Froggy 정답 및 풀이 복습 깜찍한 개구리 친구를 Flexbox 명령어를 통해 수련 잎으로 보내주는 게임이다. 정답을 봐도 아무것도 모르는 나 같은 사람은 이해하기 위해 따로 구글링을 해야 했던 CSS-diner와 달리 난이도가 굉장히 쉽다. 되도록 위의 설명은 아예 보지도 말고 그림 보기 -> 정답 입력하기의 과정을 거쳐야 그나마 공부가 된다. 잘 외워지지 않아 읽으면서 입력했더니 생각보다 금방금방 외워졌다. 초반 문제들은 justify-content를 사용하는 문제들이다. justify-content: flex-start; 컨테이너 좌측으로 정렬한다. (default) justify-content: flex-end; 컨테이너 우측으로 정렬한다. (reverse되지 않는다) justify-content: center; 컨테이너 중..

티스토리툴바