본문 바로가기

공부/html, css

툴팁넣기 : css만 사용하기 (tooltip) css만 사용해서 툴팁넣기 퍼블리싱을 할때 도움말을 넣어야할때 툴팁을 넣는 방법으로 alt나 title이 있는데, title을 사용하면 아무래도 소스가 정신없어지는 경우가 많아서 css만을 활용하여 툴팁넣는 방법을 포스팅 해볼까 합니다. html 파일과 css 파일을 따로 정리해 올리고 결과값 이미지를 첨부하였으니 확인해 보시고 제일 하단에 참고 사이트에 가시면 라이브로 소스 수정과 테스트가 가능하십니다. html title1 title desc title2 title2 desc2 title3 title3 desc3 tooltip example... css #tooltip_wrap {} #tooltip_wrap > ul { padding: 0;} #tooltip_wrap > ul:after { conte..
패럴랙스 스크롤링 (parallax scrolling) 패럴랙스 스크롤링 (parallax scrolling) css로 구현하기 패럴랙스 스크롤링은 마우스 스크롤링에 따라서 웹에 여러가지 효과를 주기 때문에 유동적인 사이트를 만들때 많이 활용하는 기법인데요. 패럴랙스는 관련 js 소스도 많이 나와있어서 활용이 용이하지만 오늘은 그보다도 간단한 CSS를 이용해서 패럴랙스 효과를 줘보려고 합니다. 바로 background-attachment:fixed; 로 백그라운드를 고정하고, 그위에 텍스트나 이미지 등을 올린다면 하단의 백그라운드라 올라올때 시각적으로 패럴랙스 스크롤링 효과를 주는 것인데요. 예제 소스는 아래에 첨부하도록 하겠습니다. 01 . 02 . 03 . 위의 소스를 적용한 화면은 아래 이미지를 참고해 주세요.
레이아웃 잡기 : 다단 멀티컬럼 (multi column) 멀티컬럼으로 레이아웃잡기 해상도가 계속 커지는 환경속에 가독성을 높여주는 레이아웃 스타일이 있어서 가져왔습니다. 멀티 컬럼의 속성으로는 column-count, column-width, column-gap, column-rule-style, column-rule-width, column-rule-color, column-span 등이 있는데 자세한 내용은 하단 예시를 통해서 보여드리겠습니다. 사람이 가지고 있는 일곱 가지 감정인 기쁨(喜)ㆍ성냄(怒)ㆍ근심(憂)ㆍ두려움(懼)ㆍ사랑(愛)ㆍ미움(憎)ㆍ욕심(欲)을 이르는 칠정(七情)은 예술 작품 안에서 자유롭고 다양하게 표현되고 있다. 그중에서도 인간의 어두운 내면세계의 가장 깊숙한 곳에 자리 잡은 두려움, 공포라는 감정은 그로테스크에서 비롯되는데, 파격적이고 ..
flex 로 레이아웃 정렬하기 css flex로 정렬하기 flex는 메인정렬과 교차정렬 개념이 필요합니다. justify-content는 메인정렬, align-item은 교차정렬을 뜻합니다. display:flex; justify-content: center; align-items: center; 위처럼 작성하면 수평과 수직으로 중앙에 정렬하게 됩니다. display:flex; 를 사용하면 직계자식요소들도 영향을 받게 되는데 flex 대신 inline-flex를 사용하면 직계자식요소들을 감싸는 부모요소가 inline 요소가 됩니다. flex 전에는 display:table;과 table-cell을 사용해서 수평, 수직 정렬을 하기도 했는데요. 아직 ie 7,8,9 에서는 지원하지 않아서 크로스브라우징에 문제되는 부분이 많음에도 불구하..
grid 로 레이아웃 잡기 css grid로 레이아웃 잡기 grid는 반응형 페이지 레이아웃을 잡을때 용이하게 사용되지만 ie 버전 11 이상만 지원하고 이전 버전은 지원하지 않는 단점이 있습니다. 언젠가 최적화 될것이라 믿으면 레이아웃 잡기 끝판왕 grid를 공부해 볼까요?! 참고 사이트 https://developer.mozilla.org/ko/docs/Web/CSS/grid 테스트 사이트 http://cssgridgarden.com 아래 이미지는 테스트 사이트로 적어놓은 GRID GARDEN ( http://cssgridgarden.com )이라는 사이트인데, GRID GARDEN 사이트에 가면 간단한 게임을 통해서 GRID를 쉽게 익힐 수 있으니 먼저 접속해서 GRID를 경험해보시면 좋을 것 같아요. #garden { di..
퍼센트와 픽셀 혼용 계산법 (calc) calc의 퍼센트와 픽셀 계산법 퍼센트 작업중에 일정한 픽셀값을 빼서 계산하고 싶을 때 calc를 이용하면 간편하게 화면을 그려낼 수 있습니다 예를 들어 div 에 width 값이 100%일 때 50px 만큼만 빼고 싶은 경우를 가정해 보겠습니다. div {width:calc(100% - 50px);} 이렇게 calc를 이용해서 간단하게 표현이 됩니다. calc는 예제에서 처럼 %,px 말고도 em, pt 등 모든 단위 사용이 가능하며 빼기 뿐만 아니라 더하기(+), 곱하기(*), 나누기(/)도 사용이 가능합니다. div {width:calc(100% + 50px);} div {width:calc(100% * 2);} div {width:calc(100% / 2);} div {width:calc(100%..
브라우저 드래그 색상 적용 (::selection) 브라우저 텍스트 드래그 시 색상 적용해주기 ::selection {background:#ff0000; color:#ffffff;} ::-moz-selection {background:#ff0000; color:#ffffff;} ::-webkit-selection {background:#ff0000; color:#ffffff;} 스타일시트에 위 코드를 적용해주면 하단 이미지 처럼 파란색 디폴트 색상이던 드래그 색상이 설정해준 색상으로 변경이 됩니다. ​ 원하는 색상 코드를 background에 적용해주시면 브라우저 드래그 시 색상으로 설정되는데 rgba로 알파값 적용도 가능합니다. 여기서 color는 브라우저 드래그 했을 때 텍스트 색상입니다. ​ 거의 대부분의 브라우저에 지원이 가능한 css 이지만, 익..
오브젝트 뒤집기 : 뒷면과 앞면을 정하는 속성 (backface-visibility) backface-visibility 로 요소 뒤집는 효과 요즘 웹 화면을 보면 마우스를 올렸을 때라든지 오브젝트가 한 축을 기준으로 뒤집어지면서 flip 되는 애니메이션을 많이 보여줍니다. 이때 필요한 css 속성이 backface-visibility 입니다. ​ backface-visibility 는 요소 앞면과 뒷면을 어떻게 보여줄지 정하는 속성으로 하단과 같은 값을 가집니다. 기본값 : visible visible : 뒷면이 보이게 합니다. hidden : 뒷면이 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다.
table 말줄임 효과 적용 안될 때 예전에 css 말줄임 효과에 대해서 포스팅한적이 있는데, 테이블에 넣었을때는 추가해야할 부분이 있어서 오늘은 그부분을 포스팅해볼까 합니다. 먼저 말줄임 효과는 css에 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 넣어주시면 지정한 영역을 넘어가는 부분은 말줄임표 표시로 설정이 되는데요! 만약 div나 span 태그들에서 말줄임표가 적용이 안되면 width값이 설정이 안된걸거에요! (width값을 지정해주세요) 근데 가로값을 아무리 세팅해줘도 table에서는 적용안될때가 있는데요 (테이블과 테이블랩, td에도 가로값 다 잡아줘도 안됬던 1인..) 이유는 테이블 레이아웃을 고정시켜줘야해서 입니다. 테이블 레이아웃을 고정시키려면 table태그 s..
텍스트 수직 정렬 (vertical-align) vertical-align 으로 텍스트 세로 수직 정렬하기 텍스트의 가운데 정렬은 text-align을 사용하고 세로 수징 정렬은 vertical-align 을 사용합니다. 텍스트의 정렬은 table 에서 먹기 때문에 vertical-align 을 사용하려면 꼭 display 설정을 해줘야 합니다. height: 200px; display: table-cell; vertical-align: 속성; ※ vertical-align 속성 baseline 기본값. 부모 요소 기준선에 정렬 top 라인에서 제일 위에 맞춰서 정렬 middle 부모 요소의 중간에 정렬 bottom 라인에서 제일 하단에 맞춰서 정렬 ※vertical-align 주의할 점 - float , position 속성이 있으면 display를..
특수기호, 특수문자 사용하기 HTML 작성 시 특문 사용법 html 작성을 하다보면 공백이나 괄호, 따옴표 등을 표현할때 html태그로 인식을해서 특수기호를 사용해줘야 합니다. 각 문자별 특수기호는 아래와 같으니 참고해주세요. 화면 특수기호 공백 & & > " " ' ´ | | ( ( ) ) , , - -
em, rem 개념과 차이 상대적인 크기로 표시하는 em 고정단위 em은 상대적인 크기로 부모요소에서 지정한 폰트크기 1em으로 놓고 상대적인 값을 계산해서 다른 요소들의 글자 크기를 조절하는데 지정한 크기가 없다면 16px을 기본값으로 합니다. 3em 크기제목 1.6 크기 텍스트 16px 크기 텍스트 em 단위는 부모요소 크기를 기준으로 하기 때문에 를 중복해서 사용할 경우 부모 요소의 크기가 계속 달라지면서 자식요소의 글자 크기도 점점 커지는 문제점이 발생합니다. 1.5em크기 텍스트 ->16X1.5 = 24px 1.5em크기 텍스트 -> 24X1.5 = 36px 1.5em크기 텍스트 -> 36X1.5 = 54px 이러한 문제를 바로잡기위해 나타난게 rem! rem을 사용하면 중첩 상관없이 기본이 되는 크기를 기준으로 사이즈가..
상대단위, 절대단위 개념 (pt, px, em 등) 수치를 정하는 속성의 크기단위는 상대단위와 절대단위로 구분됩니다. 상대단위로는 em, ex, px가 있는데 이는 기종 간, 플랫폼 간의 호환성을 유지하는데 좋고 절대단위로는 in, cm, mm, pt, pc가 있으며 출력장치의 물리적 속성을 아는 경우에만 효율적이라고 합니다. 절대단위 cm : 센티미터 mm : 밀리미터, cm 의 1/10 pc : 1pc 는 12 pt pt : 12pt 는 16px in : 1in 2.54cm 상대단위 px : pixel, 모니터에 따라서 상대적인 크기를 갖음 em : font-size, 일반적으로 해당 폰트의 대문자 M의 너비를 기준으로 함 ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 함 % : 브라우저 기본 글꼴 크기를 100% 하고 상대적 크..
input (placeholder) 스타일 넣기 placeholder에 스타일 넣기 input type text에 placeholder라는 속성이 있는데, placeholder를 지정해주면 입력값을 적지 않았을때 value를 설정했을때 처럼 표기가 됩니다. 여기서 value와 placeholder의 차이점은 입력값을 넣을때 value는 value에 지정해넣은 텍스트를 지우고 입력값을 넣어야하지만, placeholder는 입력값을 넣을때 자동으로 지정해 놓았던 placeholder값이 사라지로 입력값이 작성된다는 점입니다. 이 placeholder에는 글씨 색상이 들어가 있는데 이를 수정해 주시려면 하단의 코드를 적용해주세요. input::-webkit-input-placeholder { color:red; } //크롬, 사파리 브라우저 input::-..
input 스타일 ios 초기화 input type 스타일을 button 혹은 submit 으로 주고 신나게 css로 디자인을 추가해줬습니다. PC에서 봤을 때 아무 문제가 없어서 안심하고 있다가 아이패드로 확인하고 css 디자인이 하나도 적용되지 않아서 깜짝 놀랐습니다. 아이패드에서 전용 브라우저 사파리는 물론 크롬을 깔고 봤는데도 같은 현상이 일어나는 것을 보니 ios 기본 버튼 스타일이 출력되는 듯했습니다. ​ 다이렉트로 스타일을 줘도 먹지 않아서 갑갑해하고 있던 상황이었는데, ios 스타일 초기화를 한 줄 추가로 할 수 있는 팁이 있어서 공유해보려고 합니다. input,button {border-radius:0; -webkit-appearance:none}
input (체크박스, 라디오버튼) 스타일 설정 및 디자인 입히기 input type css 퍼블리싱을 할때 심심한 체크박스나 라디오버튼같은 인풋타입을 꾸며주고 싶을 때가 있는데요! 이미지를 이용해서 체크박스, 라디오버튼에 디자인을 입혀주는 방법을 보여드리려고 합니다. option 위처럼 코딩을 하고 아래쪽에 정리된 스타일 시트를 적용해 주면 됩니다. css 스타일 원리를 알려드리면 input[type="radio"]:not(old) 에서 투명도를 빼서 기존 디자인을 지워주고 input[type="radio"]:not(old) + label과 input[type="radio"]:not(old):checked + label 라벨에 백그라운드 이미지를 넣은 후에 투명해진 인풋 라디오로 마진값을 주는 원리입니다. ​ 여기서 input[type="radio"]:not(old)..
색상 상속하기 (currentColor) currentColor currentColor는 CSS3에서 도입된 개념으로 currentColor 키워드가 설정되면, color 값이 상속으로 처리됩니다.
position 속성 position position은 단어 뜻 그대로 위치를 나타내는 요소에 대한 위치를 의미합니다. 디폴트 값은 static 이며, 세부 속성은 아래 표를 참조해 주세요. static top,right,bottom,left 속성값이 적용 안됨 relative 요소 안에서 적용 absolute 부모 요소 안에서 적용 fixed 요소 안이 아니라 브라우저 기준으로 적용 inherit 요소의 부모에 대한 속성을 적용
반응형에서 가로 세로 비율 고정하는 방법 반응형으로 퍼블리싱을 할 때 퍼센트를 활용해서 영역을 잡는데요. 가로 너비에 맞게 유동적으로 세로 높이 비율을 유지하는 방법을 공유해 보려고 합니다. 퍼센트로 세로값을 고정할 수 없기 때문에 패딩, 마진을 활용해서 만들 수 있습니다. 위처럼 높이를 0으로 지정하고 padding-bottom을 퍼센트로 가로 세율 비율을 세팅해 줄 수가 있습니다. 가로 세로 1대1 정사각형으로 비율을 고정하고 싶다면 padding-bottom 값에 100%를 넣어주면 됩니다.
반응형에서 꼭 필요한 미디어쿼리 미디어쿼리 디바이스 규격이 다양화된 요즘에 빼놓을 수 없는 것이 반응형. 반응형 웹디자인을 하기위해서 꼭 알아두어야하는 미디어쿼리에 대해서 공부해보려고 합니다. ​ 여기서 반응형 웹이란 디바이스 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되어 출력되는 웹페이지로써 스마트한 웹페이지 구현이 가능합니다. 미디어쿼리 기본구조 아래처럼 미디어쿼리를 작성하면 가로 넓이가 200px에서 400px 일때만 screen의 텍스트 칼라가 레드로 나타나게됩니다. @media 미디어유형 and 조건 and 조건 @media screen and (min-width:200px) and (max-width:400px) { div {color:red;} } ​ 하단 소스를 활용하면 화면 비율에 맞춰서 적용되는 미디어쿼리도..

티스토리툴바