CSS 검색 결과
16 개의 검색 결과가 있습니다.
CSS

[CSS] 폰트 파일 또는 무료 폰트인 구글 폰트 적용하는 방법

폰트 파일을 적용하는 방법 폰트 파일 준비하기 우선 준비한 폰트 파일을 프로젝트 폴더 내에 원하는 경로에 넣어줍니다. assets/fonts 와 같은 디렉토리명이 적절합니다. 준비한 폰트파일은 CSS 코드에서 경로를 통해 불러와 적용할 것입니다. 폰트 파일 확장자 종류 폰트 파일은 다양한 확장자를 가집니다. 확장자 별로 지원하는 브라우저가 다르고 그 내용은 다음과 같습니다. ttf/otf: IE9이상, 크롬, 파폭, 오페라, 사파리 woff: IE9이상, 크롬, 파폭, 오페라, 사파리 svg/svgz: 크롬, 오페라, 사파리 woff2: 크롬, 파폭, 오페라 eot: IE8이하 CSS에서 폰트 파일 불러와서 적용하기 @font-face {}를 통해 해당 폰트를 font-family 값으로 정의할 수 있습..

2022. 2. 7. 08:00
CSS

[CSS 레이아웃] 푸터 (footer) 만들기

(이 포스팅은 20년 05월쯤 썼던 글의 복원입니다.) 푸터(footer) 만들기 개요 이번에 혼자 하고 있는 토이 프로젝트에서 만든 진짜 간단한 푸터가 있는데 기록으로 남겨봅니다. 이렇게 생겼습니다. 반응형이라 데스크탑 모드에서는 왼쪽에 사이드바가 생겨서 다음과 같이 됩니다. 어떻게 만들었는지 천천히 살펴보겠습니다. footer(푸터)의 태그 구조 우선 저는 시맨틱 태그를 무척 사랑하는 '웹 표준 지킴이'기 때문에 div를 사용하지 않고 footer 태그를 사용합니다. address태그도 쓰면 좋겠지만 css귀차니즘이 발동해서 안 썼습니다. 하지만 푸터에 있는 링크들은 역시 시맨틱 태그인 nav태그로 그 링크들을 감싸줍니다. 그리고 쓰고 싶은 내용을 p태그로 감싸주면 푸터 태그의 구조는 완성입니다. *..

2021. 8. 30. 08:00
CSS

[반응형 웹개발] 모바일 우선 개발법

모바일 우선 개발과 데스크탑 우선 개발 반응형 웹 개발을 할 때, 모바일 우선 개발은 모바일 레이아웃 코드를 먼저 만들고, 데스크탑 레이아웃 코드를 나중에 만드는 개발 방법이고, 데스크탑 우선 개발은 데스크탑 레이아웃 코드를 먼저 만들고, 모바일 레이아웃 코드를 나중에 만드는 개발 방법입니다. 반응형 웹 개발을 하면서 여러 디바이스를 고려할 때에는 모바일 우선 개발을 할지, 데스크탑 우선 개발을 할지를 고려해야 합니다. 모바일 우선 개발이 왜 더 효율적인가? 통상적으로는 모바일 우선 개발법이 데스크탑 우선 개발법보다 더 효율적인 작업방법입니다. 더 작은 화면을 가진 모바일에서는 같은 UI에 대해 더 작은 단위로 행을 쪼개어 보여줘야 하기 때문에 더 작은 원자들로 레이아웃을 구성할 수 있기 때문입니다. 더..

2021. 8. 23. 08:00
CSS

반응형 웹 만드는 법 (ft. 디바이스 종류별 width값)

반응형 웹을 만드는 방법 반응형 웹이란 각 디바이스의 크기와 뷰포트의 크기를 고려하여 어떠한 크기에서도 서비스를 제대로 화면에 보여주는 웹을 말합니다. 반응형 웹은 흑과 백처럼 이분법으로 판단하여 반응형 웹인지 아닌지를 판단할 수 있는 것이 아닙니다. 흑과 백에 더해 회색도 있어 얼마나 다양한 디바이스 화면과 다양한 사이즈에 대응하고 있는지에 따라 흑에 가까워질 수도, 백에 가까워질 수도 있습니다. 그럼에도 불구하고 우리는 반응형 웹이라고 부를 수 있는 기준이 필요합니다. 통상적으로 다음 두 가지 조건에 대해 어느 정도 크게 만족하고 있으면 반응형 웹이라고 부릅니다. 데스크탑, 태블릿, 모바일 디바이스에 대해 각각 서비스를 문제없이 이용할 수 있는 화면을 제공한다. 같은 디바이스여도 유저가 사용하기에 무..

2021. 8. 16. 08:00
CSS

[CSS 레이아웃] display: table을 이용하여 메뉴 레이아웃 만들기

메뉴 레이아웃 만들기의 쟁점 메뉴 레이아웃을 만드는 것은 두 개의 과정을 거칩니다. 우선, 메뉴 요소들을 감싸는 부모 요소의 크기와 위치를 잡기입니다. 다음으로는, 각 메뉴 항목에 해당하는 자식 요소들을 일자로 정렬해줍니다. 디자인에 따라서 지그재그로 정렬할 수도 있지만, 이번 포스팅에서는 가장 기본이 되는 일자 정렬을 다룰 것입니다. 사실 지그재그 정렬도 일자 정렬을 할 줄 알아야 구현 가능합니다. 지그재그 정렬의 원리는 일자 정렬 이후 각 자식 요소에 자식 요소를 또 추가하여, 위, 아래 혹은 왼쪽, 오른쪽 정렬만 다르게 해 주면 구현되기 때문입니다. 일자 정렬에는 또 두가지 종류가 있습니다. 수평 방향으로 정렬과 수직 방향으로 정렬입니다. 이 두 가지 정렬을 구현하는 데에는 사실 무수히 많은 방법이..

2021. 5. 31. 08:00
CSS

[CSS 레이아웃] 헤더나 푸터 화면에 고정시키기

스크롤을 움직여도 고정되어있는 헤더와 푸터 레이아웃 만들기 사용자가 스크롤을 움직여도 고정되어 움직이지 않는 헤더(header)와 푸터(footer)를 만들어보려고 합니다. 헤더나 푸터나 고정시키는 원리는 똑같기 때문에 같은 방법으로 고정시킵니다. 밑에 코드의 결과를 한번 테스트해보세요. 테스트는 스크롤을 움직여보면 됩니다. 그리고 소스코드를 하나하나 뜯어서 구현원리를 살펴보도록 하겠습니다. * 소스코드 및 결과 See the Pen https://codepen.io/cocoder16/pen/wvaYqbg"> wvaYqbg by cocoder16 (https://codepen.io/cocoder16">@cocoder16) on https://codepen.io">CodePen. 기본적으로 화면에 고정시키..

2021. 5. 24. 08:00
CSS

CSS로 이미지 다루기

배경 이미지를 넣는 CSS background-image 속성 background-image는 이미지를 배경으로 깔기 위해 사용되는 CSS 속성입니다. 사용법은 속성값으로 이미지 리소스가 있는 경로를 url로 넣어주면 됩니다. * 예시코드 /* CSS */ div { background-image: url('https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg'); width:300px; height:300px; } * 결과 div 태그의 width와 height 값은 각각 300px입니다. 그리고 배경 이미지를 만들었는데 배경 이미지의 크기가 이 요소의 크기에 들어맞지 않아서 이미지가 잘려서 나옵니다. 그래서 사이즈 조절을 해봅니다...

2021. 5. 17. 08:00
CSS

CSS 애니메이션 만드는 방법 총정리

CSS 애니메이션 만들기 개요 제가 생각하기로는 애니메이션에는 크게 볼 때 두 가지 속성이 필요합니다. '시간'과 '상태'입니다. 어떤 개체가 시간이 지남에 따라 어떤 상태를 정해주면 그것이 움직임이 되고 애니메이션이 됩니다. 그리고 이것을 CSS로 코딩하여 만들어준다면, CSS에서는 크게 시간 속성과 상태 속성이 필요할 것입니다. 그런데 이 중 시간과 관련된 속성들은 애니메이션에서 고유적으로 사용되기는 하지만, 상태와 관련된 속성들은 사실 애니메이션이 아니더라도 이미 정적인 상태에서도 사용하고 있습니다. border, font-size, color, width, height 등등... 요소들을 디자인하기 위해 사용했던 모든 속성들이 다 그 요소의 상태를 나타냅니다. width, height이 50px ..

2021. 5. 10. 08:00
CSS

CSS 텍스트, 폰트 관련 속성 정리

폰트 사이즈를 결정하는 font-size 속성 font-size의 단위는 rem, px, em 세 가지가 있습니다. 이 중 em 은 사용하지 않는 것이 좋습니다. 왜냐하면 em단위는 부모 태그의 영향을 받는 상대적인 크기를 나타내기 때문에 font-size 속성 값으로 적용된 숫자만 가지고 실제 크기를 파악하기가 어렵기 때문입니다. rem은 html태그에 적용된 폰트사이즈에게 영향을 받습니다. html태그의 폰트 크기에 따라서 상대적으로 크기가 결정됩니다. px은 모니터 상의 화소 하나의 크기에 대응하는 단위입니다. 가장 고정된 값이기 때문에 예측이 가장 쉽습니다. 다만 사용자가 글꼴의 크기를 조정할 수 없습니다. * 예시코드 0.8rem 1rem 1.2rem 10px 15px 20px * 결과 폰트의 ..

2021. 5. 3. 08:00
CSS

[CSS 레이아웃 기본] 요소의 크기 정확하게 잡기 (box-sizing, border, margin, padding)

box-sizing과 요소 영역의 관계에 대하여 모든 요소들은 각자가 너비와 높이 값을 가지고 있습니다. CSS box=sizing 속성은 해당 요소의 너비와 높이를 어떻게 계산하는지를 결정하는 속성입니다. 크롬 개발자 도구에서 Elements - Styles 탭으로 들어가 가장 아래로 스크롤을 내리면 다음과 같은 그림을 볼 수 있는데, 이를 통해 요소의 너비(width)와 높이(height)를 결정할 수 있는 후보 속성들이 어떤 것들이 있는지 알 수 있습니다. 후보들에는 margin, border, padding css속성 값과 content 고유 영역이 있습니다. 그런데 이 중에 margin (바깥 여백)은 요소의 width와 height을 결정하는 데에 사용되지는 않습니다. 그럼 이제 margin,..

2021. 4. 19. 08:00