본문 바로가기

Lect & Tip/html, css, scss23

✈ CSS 텍스트 속성 : text-align:justify,text-justify:auto,inter-word,inter-ideograph,inter-cluster,distribute,kashida,newspaper,distribute-all-lines,distribute-center-last 2014년에 작성했던 글입니다. 블로그를 옮기는 중이라... 쿨럭 text-align:justify; text-justify:~ 속성은 골 때리게도 CSS2에는 포함되지 않고, CSS3에는 포함이 되어 있고, IE 구버전들은 일부 지원을 하고, 9 이상에서는 지원이 되지 않는 웃긴 양상을 보이는 텍스트 속성이다. 더 귀찮은 것은 골 때리게도, 이 속성을 공무원님들이 너무 좋아라 하신다는 거다. -_-; 군정시대 습성들이 남아 계신 건지 글씨들이 각 맞춰서 열 맞춰서 서 있기를 바라는 분들이 간혹 있다. 그러면서 단어는 음절단위에서 개행하지 않게 해 달란다. 아하~ 나처럼 이런 갈굼을 당하는 퍼블리셔들이 많으신지, 의외로 검색 유입에 text-align:justify를 검색하는 사람들이 꽤 있다. 그분들의.. 2020. 9. 15.

📌[CSS] div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle css로 div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle 결론부터 말하자면, div인데 table의 cell처럼 동작을 시키기 위한 방법이다. div의 높이가 고정되어 있을 때 텍스트 를 세로의 중간에 정렬 시킬 필요가 있을 때가 있다. 테이블에서 valign을 center로 주었을 때처럼 보이게 한기 위한 것이다. https://youtu.be/6NkVYitGQDM 보통 css에서 수직정렬에서 가운데에 정렬시키고 싶을 때는 vertical-align:middle을 사용한다. 하지만 div에서는 vertical-align:middle만으로는 수직 가운데 정렬이 되지 않는다. 이 때 div의 display속성을 ta.. 2020. 9. 4.

성별 통계 CSS 디자인 및 SASS ✈ 성별 통계 CSS 디자인 및 SASS 성별 통계 CSS 디자인 및 SASS 성별 차트 플러그인이 딱 디자인에 맞는게 없어서 아래와 같이 만들어봤다. 원리 자체는 간단하다. 그냥 막대그래프에서 퍼센트 통계 그려주는 것과 같다. 다만 다른 점은 BG가 필요한 것 뿐이다. 기본적으로 채워져 있지 않은 테두리만 있는 성별 BG를 부모 객체에 background로 준다. 이후 데이터를 표시하는 엘레먼트는 색을 가진 BG를 background로 받는다. 색이 머리에서부터 칠해진다면 background position은 top이겠지만 보통 이런 차트는 다리부터 색이 칠해져 올라가야 하므로 bottom을 준다. 관련 BG는 아래에 첨부해 두도록 하겠다. 소스코드는 다음과 같다. html 여성 73% 7300 남성 .. 2019. 12. 9.

✈ CSS IE 상위 padding, child absolute position eorror 문제 크로스 브라우징 CSS IE 상위 padding, child absolute position eorror 문제. 다음과 같은 달력형 스케줄에서 카운터 패널은 TD의 bottom에 붙어야 한다. 크롬이나 웹킷 기반 바르우저에서는 문제가 없으나 IE에서는 중간에 뜨는 현상이 생겼다. 이 크로스 브라우징 문제를 해결하기 위한 가장 중요한 솔루션은 구조 자체의 문제다. TD의 높이는 140px로 주고, sns 버튼 팜은 margin으로 여백을 띄웠어야 했다. 현재는 padding으로 띄워져 있는 상태다. 이미 퍼블리싱된 구조를 바꿀 것인지, ie에만 구조를 줘서 패치를 할지는 전적으로 선택의 문제다. 하지만 이 구조를 다른 곳에서도 쓰고 있지만, 그 곳에서의 ie문제는 없기 때문에 그냥 ie 패치를 진행하기로 했다. @char.. 2019. 11. 29.

SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기 ✈SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기 SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기. 되게 거창한 표현같지만 별거 아니다. 다만 SCSS의 구조에 대해서 설명하기 위한 글이다. 위와 같은 경우 텍스트 영역에 링크는 하나다. 마우스오버가 되었을 때 문단 별로 색이 바뀌면 안되고, 전체가 색이 반전이 되어야 한다. 각각 스타일을 주어도 되지만, SCSS에서는 간단하게 처리가 가능하다. html Contents 스페인하숙 3화 미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요 이런 구조일 때 SCSS SCSS 는 다음과 같이 구성한다. .card { borde.. 2019. 11. 18.

✈ img 태그 404 Error시에 대체 이미지 띄우기 img 태그 404 Error가 발생하면 대체 이미지를 띄우는 것은 쉽다. 아니 처음부터 그렇게 만들면 별로 걱정할 문제는 아니다. 그리고 대체로 레이아웃을 구성하는 이미지는 bg속성을 준 스타일을 먹이는 경우가 대부분이므로, bg가 깔리지 않으면 스타일만 변경해 주면 된다. 그 이외의 레이아웃을 구성하는 이미지 요소들도 마찬가지로 처리하면 된다. 문제는 게시판이나, 갤러리 등 다수 사용자 빌런 그룹이 존재하지 않는 이미지를 올리거나, 올렸던 이미지 소스 주소가 없어진 경우에 발생하는 이미지 에러 문제는 보통 다음과 같이 해결해 주어야 한다. 그런데 앞서도 지적했지만 게시판에 이미지를 불펌해다 붙이는 사용자들이 친절하게 html태그를 열어서 대체 이미지 주소를 입력하는 attr을 집어넣기를 바라는 것은 .. 2019. 11. 11.

이전 1 2 3 4 다음

티스토리툴바