Category HTML&CSS
오래전부터 올린 다는 것이 게을러 작성을 못했다가 근래에 다시 글을 올리면서 이 방법론도 꼭 공유하면 좋겠다 생각이 들어 공유를 합니다. 고수들은 읽지 않아도 됩니다 😅 시작하기 CSS 방법론 만들어진 게기는 CSS 활용도가 높아지고 대규모 프로젝트가 많아짐에 따라, 복잡한 설계의 필요성을… Continue Reading →
TailwindCSS 입문 TailwindCSS 초보자를 위해서 만들어졌습니다. gulp를 이용해 테일윈드를 사용법을 설명할 예정입니다. 이 내용은 @manjumjn의 gulp-with-tailwindcss를 바탕으로 번역 및 편집 되었습니다. TailwindCSS은 무엇? tailwindcss는 화면 디자인을 위한 프레임워크입니다. 사용자 맞춤 디자인을 유틸리티 우선으로 빠르게 구축하는 CSS 프레임워크 NPM 명령어 NPM… Continue Reading →
아이폰 X 출시 이후에 올해는 다양한 이어서 아이폰 xs, 아이폰xr 등 나왔다. 그러면서 노치(Notch)영역 해결방법들도 많이 나오고 있는데 이에 짧게 소개하려고 한다. 정말 간단히 설명하면 HTML 메타태그에 아래와 같이 삽입하면 된다. 기존에 메타에서 viewport-fit=cover만 넣으면 되는 것이다. HTML Meta Tag… Continue Reading →
문제 IE10, IE11에서 셀럭트박스 선택을 하면 아무이상이 없는데 input 상자에 포커스 있는 상태에서 셀럭트박스를 다시 선택하면 텍스트상자 넓이가 커지는 현상이 있습니다. 이유는 placeholder로 인해서 일어나는 현상입니다.(IE10, IE11에서만 오류가 일어납니다.) 오류는 아래와 같습니다. 선택1선택2선택3 오류 체크 하셨습니까? 혹시 확인을 못하신 분들을… Continue Reading →
[요약]추가적인 CSS코드 냄새에 좋은 내용이 있어서 사람들이 많이 알았으면 해서 퍼왔다. @extend mixin보다 성능이 떨어진다. CSS 성능이란 건 대체로 용량을 말하는데, 용량이 작아야 빨리 다운로드할 수 있기 때문이다. gzip 압축시 mixin은 완전한 반복이므로 용량이 확 줄어드는 반면, extend는 완전한 반복이… Continue Reading →
정의 <video>는 비디오나 영화를 재생시킨다. 속성 src: 재생할 비디오의 주소를 지정한다. width: 요소의 너비를 지정한다. (value: pixels) height: 요소의 높이를 지정한다. (value: pixels) loop: 반복 재생을 지정한다. (value: loop) poster: 사용자 에이전트가 비디오 데이터를 사용할 수 없는 경우 이미지 파일의… Continue Reading →
Sass를 사용하여 css로 컴파일 하여 출력 할 때 4가지 스타일 중 하나를 선택할 수 있다. 스타일 nested expanded compact compressed 아래 Sass로 네가지 스타일로 변환을 해보겠다. (확장자는 본인이 편한걸로 하면 된다.) Scss Sass Scss Syntax ul { font-family: Helvetica,… Continue Reading →
구글과 어도비의 합작품인 Noto Sans 폰트를 알아보자. 이미 알 사람들은 알겠지만 이 폰트가 전세계 언어를 (아직은 안나온 것은 추후할 예정) 무료로 배포할 예정이라서 관심을 많이 가지고 있었다. Adobe Typekit Blog (한글) Google Developers Korea 구글 전반적 방향 설정 글꼴… Continue Reading →
반응형 웹(Responsive Web) 디바이스 해상도에 따라 웹페이지의 크기가 자동으로 변경되는 것을 말한다. CSS 2.1부터 미디어타입으로 단말기 종류에따라 각각 다른 스타일을 적용이 가능해졌다. 디바이스별 해상도 크기는 다음거 같다. @media (max-width:1199px) { /* Style */ } @media (min-width: 992px) and (max-width: 1199px)… Continue Reading →
안녕하세요~!! 모바일에서 레이어(모달) 팝업 띄웠을 때 레이어 안에서 스크롤이 안되는 경우가 많았습니다. iScroll를 쓰면 아이폰에서 문제가 생기는 이슈가 있었습니다. 스크롤 하게 되면 body쪽 전체 스크롤이 움직이고, 안쪽만 안되는 어려움이 많았다. HTML: <div id="wrap"> <a class="btn_layerpopup" href="#layerPopup">팝업 띄우기</a> <div class="layer-popup" id="layerPopup">… Continue Reading →
사이트마다 CSS 속성들을 얼마나 사용했는지를 알 수 있는 프로그램이 있다. 크롬에 확장프로그램을 받아서 볼 수 있다. 사용 예 테스트 사이트로 우리나라에서 많이 사용하는 포털중에 하나 네이버를 예를 들겠다. 네이버에서 이 프로그램을 실행했을 경우 나오는 화면이다. css를 불러오는것을 체크를 하고 START… Continue Reading →
반응형 사이트를 만들때 (유투브)동영상이나 구글 맵을 넣어야할 때가 있다. 근데 이녀석들은 대부분 고정으로 값을 넣기 때문에 반응형할때 난감해질때가 있다. 위 아래 여백이 생긴다던지 동영상 크기가 비율이 안맞게 나오기도한다. 간편하게 바꿔줄 수 있는 사이트를 소개하겠다.
CSS 속성에도 순서를 지켜주면 참 좋다. 되고 말고 CSS를 입력하는 사람들이 있는데… 협업을 할 때는 절대적으로 필요한 순서이며 대체적으로 이렇게 해주면 좋다는 것을 가지고 있다. 필자가 몇군데서 본 속성 순서를 공유하겠다. 여기서 보면 HTML, CSS속성 순서에 대해 설명이 잘되어있고, CSS… Continue Reading →
transform transform은 요소 박스를 변형하는 속성이다. 2차원, 3차원 변형이 가능하고, 변형 형태별로 함수 타입의 속성값을 지정한다. CSS3 2D Transforms 2d transform 속성은 6가지가 있다. translate() translate() HTML 요소 박스를 평면상에서 수평 이동하는 기능이다. 가로 및 세로 방향을 이동하는 길이 값을… Continue Reading →
Ruby 설치하기 루비 인스톨러(Ruby Installer) 설치 루비인스톨러 설치 파일을 다운받아야 하기 때문에 루비인스톨러 다운 페이지로 가보자. 루비인스톨러 파일 다운로드 하기 버전은 최신버전으로 다운받으면 된다. 자기 OS환경따라 받으면 되지만 32/64비트 상관없이 맨 위에 것을 설치 해도 상관없다. 루비 인스톨러 설치하기 언어는… Continue Reading →
웹 퍼블리싱을 하면서 사이트를 위해 그리고 작업을 하게 된다. 스프라이트 기법에 자세한 설명은 CSS Sprite(스프라이트) 기법이란?에 보면 나와있다. 여기서 이미지를 클릭하면 아래와 같이 값이 나온다. 이것은 샘플화면이고 OPEN를 눌러서 이미지를 넣으면 된다. http://www.spritecow.com/
<input type=”email” name=”email> 이메일 유형은 아이폰 iOS와 안드로이드 브라우저 모두 사용자 정의 키보드가 나타난다. iOS키보드에서는 “@”와 “.”가 키보드 아래 추가 되었다. 안드로이드트에서는 표준 콤마 키가 스페이스바 왼쪽에 “@”키가 나타난다. <input type=”url” name=”url” /> iOS url 주소 키보드 input type url은… Continue Reading →
<ul> <li>리스트 1</li> <li>리스트 2</li> <li>리스트 3</li> </ul> ul { margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: “”; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left:… Continue Reading →
레이어 중앙 정렬 레이어 중앙 정렬 하는 방법 3가지 정도 추천을 할까 합니다. 1.Margin을 이용하는 방법 1-1.Magin 반값을 사용하는 방법 장점: 자주 쓰이는 방법이고 모든 브라우저에서 사용이 가능하다. 단점: 레이어의 사이즈가 유동인 경우 활용하기가 어렵다. 1-2.Margin auto값으로 하는 방법 장점:… Continue Reading →
<strong>과 <b>를 사용할 때 웹에서 보여지는 것은 둘다 차이가 없다. 좀 더 깊게 들어갈 경우 웹표준 및 웹 접근성을 따지게 되면.. W3에서 <strong> 과 <em>에 대해서 설명하기를.. – 내용을 강조하기 위해서 <strong> 및 <em>을 사용한다. – 일반적으로 사용자에게 보여줄 때… Continue Reading →
한줄 말줄임 { text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; } 여러줄 말줄임 { max-height:54px; display:block; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; } p { white-space: nowrap; width: 100%; overflow: hidden; /* “overflow” value must be different from “visible” */ text-overflow: ellipsis; } … Continue Reading →
sitepoint.com에 올라온12 Little-Known CSS Facts라는 글을 간단히 요약한 내용입니다. 원본 글에 들어가면 적용된 화면을 실시간으로 볼 수도 있으므로 원본 글을 읽어볼 것을 추천합니다. 여기서는 간단하게 요약만 해보겠습니다. 1. color는 글자에만 적용되는 게 아니다. – 이미지가 없을 때의 대체 텍스트 색상… Continue Reading →
HTML Character Entity Code Reference Table 보기 HTML Character Entity Code Reference Table Character Entity Description Displayed Character Entity Code Name Character Entity Code Name Displayed Character Entity Code Number Character Entity Code Number quotation mark, APL quote “… Continue Reading →
고정값이 없을때 고정값을 넣을때.. textarea에 width:100%를 줬을때 영역 벗어날 경우를 볼수 있다. textarea의 width 값은 100% + padding + borders 일 것이다. 그래서 padding과 border값을 빼줘야 한다. class로 해서 주게되면 다음과 같다.. <!doctype html> <html lang=”en”> <head> <style> label {… Continue Reading →
<script LANGUAGE=”JavaScript”> var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|iPod|iPad|Android|Windows CE|BlackBerry|Symbian |Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia |SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) location.href = “http://m.도메인 명”; </script> <head></head>안에 넣어주면된다.
디바이스 해상도 가로폭 명칭 480px 스마트폰 800px 태블릿 1024px 넷북 1600px 데스크톱 스마트폰 해상도 기종 해상도 웹 브라우저 해상도 아이폰4.4S 960 * 640 480 * 320 아어폰5 1136 * 640 568 * 320 갤럭시 S3 1280 * 720 640 *… Continue Reading →
아이폰 사파리에서 화면 회전시 폰트 사이즈 변경 되는 것이 있었다. 테스트 결과 <div>, <p>, <li>태그 등 다양하게 반응이 일어나는 것을 확인했다.사이즈 변경이 안되는 것도 있었다. 그래서 차이점이 뭘까 테스트 결과 높이값이 있는 곳에서는 사이즈 변경이 안되지만 높이값이 없는 곳에서는 사이즈… Continue Reading →
input[type=text]::-ms-clear{display: none; } IE(익스플로러)10 이상 버전에서 인풋박스에 포커스하면 X표시가 나온다. 이걸 삭제 해주기 위해서는 위의 소스같이 하면 나오지 않는다. 더 자세한 내용은 http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx 에서 볼 수 있다.