웹 전반, 브라우저 검색 결과

해당 글 48건

브라우저가 줄어들면 말줌임표로 대체하기

본래 CSS 패턴을 외워두는 것은 별로 좋은 일은 아니지만 자주 쓰는 속성은 외워두는 것도 나쁘지 않다. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow를 내리지 않고 숨기고 text-overflow는 말줄임표(...)로 대체한 후 white-space를 nowrap으로 주어 줄바꿈이 없게 하자. CSS / white-space / 공백 처리 방법 정하는 속성 개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal [...] www.codingfac..
웹 전반, 브라우저/HTML, CSS 2020. 3. 9. 02:36

img 말고 figure, div 태그 내 style로 이미지를 조작하자

img태그를 이용해서 움직이고 자르는 작업은 굉장히 불편하다. img 태그 하나만 망치면 모르겠는데 관련된 태그가 다 어긋나는 등 굉장히 짜증나는 상황도 발생한다. 이럴 경우 필자는 figure 태그 내부에 background-image를 style로 줌으로써 해결한다. background-size, background-position, background-repeat 등을 사용할 수 있기 때문이다. img에서 벗어나자! .user-photo { width: 50px; height: 50px; border: 1px solid grey; border-radius: 50%; background-color: gold; background-repeat: none; background-position: cente..
웹 전반, 브라우저/HTML, CSS 2020. 3. 9. 02:04

Flexbox 제대로 활용하기 (flex-grow, flex-shrink, flex-wrap etc)

Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누군가 나의 공부를 이끌어주면 좋겠다.’라고 생각하고 계신다면, 아래의 배너의… studiomeal.com 1분 코딩에서 아주 잘 알려주고 있다. 나도 이번 기회에 Flex를 다시 배웠다. 이미 알고 있었던 내용을 제외하고 새로 배웠던 내용만 정리해보자. 일단 자주 사용하는 속성을 전부 적어봤다. .container { // 기본적인 설정 display: ..
웹 전반, 브라우저/SCSS, CSS-flex-grid 2020. 3. 8. 19:14

Responsive Web 반응형 웹 제작 플로우

이번에 랜딩페이지를 만들면서 반응형 웹을 배워야했다. 잘 알려주는 곳이 없어서 혼자 깨져가면서 익힌 제작 흐름을 옮겨본다. 다음 블로그 포스팅을 일독 후 시작해보자. 반응형 CSS 작성 가이드 : hackYa Korea 반응형 CSS 작성 가이드 hackya 2015년 09월 06일 CSS, Hidden § *이 내용은 Kopress 스터디 테마를 토대로 워드프레스 테마제작에 관해 습득하시려분들에게 알리는 글 입니다. 또 Kopress 스터디 테마가 어떻게 작성되었는지를 알려드리는 글 이기도 합니다. 사실 요즘 반응형이 아닌 css 가 없으니 “반응형” 이라고 하는 것 자체가 좀 우습긴 합니다. 보편적인 반응형 css 작성 기법과 실무경험을 통해 제가 터득한 저만의 방식 hackya.com rem의 경우..
웹 전반, 브라우저/HTML, CSS 2020. 3. 8. 05:02

reset.css과 box-sizing 등 css 환경 설정

reset.css는 각 태그들이 기본적으로 가지고 있는 크기, 패딩, 마진 등의 속성을 0으로 만들어 페이지를 꾸미기 쉽게 만들어주는 css이다. css 파일에 넣은 뒤 import하자. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May..
웹 전반, 브라우저/HTML, CSS 2020. 3. 4. 22:03

헤더 고정하기, 페이지 초반이 헤더에 가려졌을 때

다음은 현재 제작 중인 랜딩 페이지의 일부이다. 여느 페이지가 그러하듯 헤더는 대체로 스크롤을 해도 상단을 유지한다. 이는 position 속성에 fixed를 주었기 때문에 가능한 것이다. .status_bar { position: fixed; display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 11%; width: 100%; background-color: rgba(255, 255, 255, 0.8); border-bottom: 1px outset rgb(199, 192, 192, 0.5); z-index: 100; } 그런데 여기서 주의할 점은 html의 처음 정보가 헤더 아래에 ..
웹 전반, 브라우저/HTML, CSS 2020. 3. 4. 21:57