서브라임 텍스트(Sublime Text) 소개 및 설치

기존에는 마크업을 손쉽게 도와주는 위지위그기반의 드림위버(Dreamweaver)같은 편집기가 유행했습니다만, 자동으로 입력되는 코드들은 상황에 따라 유연성이 부족하고 불필요한 태그들을 남발하여 어느순간 다시 하드코딩이 유행하고 있습니다. 그 중에서도 무료버전을 사용해도 제약이 없다시피한 서브라임 텍스트에 대하여 알아봅니다. 서브라임 텍스트(Sublime Text) 소개 서브라임 텍스트는 가볍고 확장성이 좋은 편집기로서, 국내뿐 아니라 외국에서도 많은 개발자들이 사용하고 있는 툴이다. 기본적으로 하드코딩을 염두에 두고 개발되었는데 여러가지 플러그인들이 붙으면서 그 편의성이 날로 좋아지고 있다. 기본적으로 제공되는 Monokai 테마도 인기가 좋으며, OS X 및 Windows, Linux를 모두 지원한다...
개발도구/서브라임텍스트 2015. 6. 22. 11:00

화면 깜빡임(FOUC) 문제해결

어쩌면 낯선 단어일 수도 있습니다. 자꾸 어떤 단어와 헷갈리기도 하고... 웹문서를 작성하다가 요소들의 변화가 눈에 띄어 화면의 깜빡거림이 눈에 거슬리는 경우가 있습니다. 이와 관련된 내용을 다루어 봅니다. FOUC 란 무엇인가? FOUC(Flash of Unstyled Content)는 브라우저로 웹문서에 접근했을때, 미처 CSS의 스타일이 모두 적용되지 못한 상태에서 화면이 표시되어 발생하는 화면 깜박임, 스타일의 적용 전과 적용 후가 그대로 화면에 노출된 상태로 변경되는 현상등을 일컫는다. 이 현상은 특히 IE(Internet Explorer) 브라우저에서 확인되는데 최신의 IE11에서도 여전히 발생되는 문제이다. 이는 해당 웹문서의 사용자 경험을 떨어뜨리는 요인으로 작용한다. FOUC 역사 FOU..
웹개발론/크로스브라우징 2015. 6. 18. 11:00

CSS 크기 단위

CSS에서 사용할 수 있는 여러 크기 단위에 대하여 알아봅니다. 현재는 em, px 정도를 많이 사용하지만 rem 또한, 병행되어 사용되어질 수 있습니다. 가변 크기 단위 상대적인 크기를 지니는 단위이다. em em은 요소에 지정하는 글자 크기 단위다. em 단위를 쓰면 부모 요소에서 지정한 글자 크기를 기준으로 배율을 조정한다. 따라서 2em을 지정하면 부모 요소의 글자 크기의 2배가 된다. 문서 레이아웃을 글자 크기에 따라 유동적으로 만들때 많이 사용한다. ex ex는 요소에 들어잇는 현재 폰트의 문자 x의 높이에 해당하는 단위다. ex 단위의 크기는 em과 연관성은 있으나 거의 쓰이지 않는다. rem rem은 root em이라는 뜻으로, HTML 문서의 root 요소인 을 가리키며, 이 요소에 지정..
웹코딩/CSS 2015. 6. 17. 11:00

CSS 배치 모델(Placement Model)

웹문서를 작성하면서 요소를 적당한 위치에 놓기위해 고심을 하곤합니다. 이에 대한 전반적인 내용을 소개합니다. 배치 모델 소개 요소의 배치에 쓰이는 CSS 배치 모델은 정적, 절대, 고정, 상대, 플로트, 상대적 플로트 배치이다. 이 배치 모델은 여섯 가지 박스 모델과 관련이 있지만 대응되거나 같은 개념은 아니다. 정적 배치 모델 : 인라인, 인라인 블록, 블록, 테이블 박스의 배치에 사용한다. 절대 위치 모델, 고정 배치 모델 : 절대 위치 박스 배치에 사용하는데, 이때 어느 요소든 절대 위치 박스일 수 있다. 플로트 배치 모델 : 플로트 박스의 배치에 사용하는데, 마찬가지로 어느 요소든 절대 위치 박스일 수 있다. 상대 위치 모델 : 절대 위치 박스를 제외한 모든 박스의 상대 위치에 사용한다. 상대적 ..
웹코딩/CSS 2015. 6. 16. 00:00

CSS 박스 모델 크기 #2

각 종류의 박스를 지정한 크기로 표시하고, 내용에 맞춰 자동 축소시키고, 부모 요소에 맞춰 자동 확대시키기 위해 어떤 식으로 너비와 높이를 지정하는 법을 설명합니다. 박스 모델 너비 width 속성은 인라인을 제외한 모든 요소에 적용되는데 요소 종류에 따라 다르게 적용되며 위치 및 플로트에 따라서도 다르게 적용한다. height 속성과는 독립적이며 기본값은 width: auto이다. width: auto 자동 축소 : left: auto, right: auto, width: auto일때, 블록 박스를 제외한 모든 박스 모델이 자동 축소된다. 자동 확대 : left: 0, right: 0, width: auto일때, 블록 박스, 절대 박스는 자동 확대된다. width: 크기지정 : 요소에 너비를 지정할때는..
웹코딩/CSS 2015. 6. 15. 11:00

CSS 박스 모델 (box model) #1

우리는 흔히 CSS를 적용하면서 머릿속에 어떤 형태의 박스로 보여질지 구상하곤 합니다. 그 형태를 올바로 그릴수 있도록 관련된 사항들을 정리합니다. 박스 모델은 CSS에서 기본이 되는 디자인 패턴으로 요소를 어떤 방식의 박스 형태로 렌더링할지 정의한다. 박스 모델은 인라인(inline), 인라인 블록(inline-block), 블록(block), 테이블(table), 절대위치(absolute), 플로트(float) 이다. width와 height 속성은 요소의 내부 박스 크기를 설정한다. 내부 박스 둘레에는 패딩이 있고, 패딩 둘레에는 테두리가 있고, 테두리 둘레에 마진이 있다. 마진 둘레의 박스가 바로 외부 박스다. 패딩, 테두리, 마진으로 인해 외부 박스는 커지지만 내부 박스의 너비와 높이는 변하지 ..
웹코딩/CSS 2015. 6. 11. 11:00

CSS 그림자속성 (Shadow Property) - Text-shadow, Box-shadow

CSS3에는 요소(박스형태)에 그림자를 부여하는 box-shadow와 글자에 그림자를 부여하는 text-shadow가 있습니다. 글자에 그림자를 부여하는 경우는 한글 폰트의 희박성으로 효과가 미미하나 박스형태의 그림자 부여는 얼마든지 사용할 수 있습니다. text-shadow 글자에 그림자를 생성한다. IE9 버전까지는 지원하지 않고 자체 전용 속성인 filter: shadow를 지원하므로 CSS가 유효성 검사를 통과하지 못한다. 지원하지 않는 브라우저가 있다해서 text-shadow 속성을 지정해도 해가 될것은 없다. 없으면 없는데로 있으면 있는데로 렌더링될터이니... 모던 브라우저 선택자 { text-shadow: 색상 가로길이 세로길이 번짐; } .shadow { text-shadow:#999999..
웹코딩/CSS 2015. 6. 8. 17:00

CSS 줄바꿈속성 (LineBreak Property) - White-space, Word-wrap

줄바꿈을 원하는 곳에서 할 수 있도록 도와주는 속성들에 대하여 알아봅니다. white-space 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 설정한다. 이 속성은 상속된다. p {white-space: nowrap;} 속성값 normal : 기본값으로 글자 줄이 자동으로 바뀐다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀐다. nowrap : 줄 바꿈이 실행되지 않는다. 콘텐츠가 다음 줄로 바뀌지 않는다. pre : 줄 바꿈과 기타 공백이 유지된다. 이 가능한 값은 !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원된다. !DOCTYPE 선언에서 표준 준수 모드를 지정하지 않으면 이 값을 검색할 수는 있지만 렌더링에 양향을 주지 않으며 normal 값처럼 동작한다. pre-line :..
웹코딩/CSS 2015. 6. 8. 11:00

CSS 글자정렬과 꾸밈속성 (Text Align, Effect Property)

글자들을 정렬하고 들여쓰고, 대소문자를 강제하는 방법들에 대하여 알아봅니다. text-align 글자를 왼쪽 정렬, 오른쪽 정렬, 가운데 또는 양쪽 정렬할지를 설정한다. 이 값은 상속된다. h1 {text-align:center;} h2 {text-align:left;} h3 {text-align:right;} 블록 요소에 적용된다. 속성값 left : 기본값으로 글자를 왼쪽에 정렬한다. center : 글자를 가운데에 정렬한다. right : 글자를 오른쪽에 정렬한다. justify : 글자를 양쪽에 정렬한다. text-align 데모 보기 자바스크립트 문법 object.style.textAlign="right" 지원 현황 인터넷익스플로우 파이어폭스 사파리 크롬 오페라 지원 지원 지원 지원 지원 inh..
웹코딩/CSS 2015. 6. 6. 17:00

CSS 색상(Color)과 투명도(Transparent) 속성

CSS를 재정리하는 중이라 과거에 작성된 글들과 중복되는 내용이 많습니다. 검색결과에서도 나타나지 않는군요. color 텍스트의 색상을 지정한다. 기본적으로 값이 상속된다. body {color: red;} h1 {color: #00ff00;} p {color: rgb(0,0,255);} 속성값 color : CSS 색상값 inherit : 부모 요소로부터 값을 상속 받는다. 색상값 CSS의 색상값은 적색, 녹색, 청색의 혼합의 결과로 16진수를 이용한 표기법(HEX)과, RGB 표기법, HSL 표기법, 색상 이름을 직접 입력하는 방식들을 지원한다. 16진수 주요 브라우저에서 모두 지원한다. 16진수 색상은 #RRGGBB와 같은 형태로 RR(적색), GG(녹색), BB(청색)을 진수로 나타내며, 0~FF..
웹코딩/CSS 2015. 6. 5. 11:00

CSS Flex 속성

flex란 유연성을 뜻하는데 CSS에서 flex box라는 개념이 생겼습니다. 요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아봅니다. display:flex 블록 레이아웃, 인라인 레이아웃, 테이블 레이아웃 및 위치 지정 레이아웃 모드와 더불어 CSS3에서는 보다 복잡한 블록 타입 레이아웃 모드인 flexbox 레이아웃을 지원한다. flexbox의 콘텐츠는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다. 과거 문법 display: box(old)와 같이 사용되다가 비공식적인 문법으로 display: flexbox(hybrid)와 같이 사용되었다. 근래에 명세에는 display: flex(modern)..
웹코딩/CSS 2015. 6. 4. 17:00

CSS Display와 Visibility 속성

CSS 속성중에 요소를 표시하는 방법을 지정하는 display 속성과 요소를 보여주거나 숨기는 visibility 속성에 대하여 알아봅니다. display 요소를 표시하는 방법을 지정한다. p.inline {display: inline;} 속성값 inline : 인라인 요소처럼 표현한다. block : 블럭 요소처럼 표현한다. inline-block : 인라인의 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다. flex : CSS3에 새로 생긴 값으로 블록-레벨의 flex 컨테이너처럼 요소를 표현한다. inline-flex : CSS3에 새로 생긴 값으로 인라인-레벨의 flex 컨테이너처럼 요소를 표현한다. list-item : 박스를 블록 처리하고 그 안의 아이템들을 인..
웹코딩/CSS 2015. 6. 4. 15:00

CSS Overflow와 Text-overflow 속성

CSS 속성중에 요소의 크기를 넘어서는 부분을 통제하는 overflow 속성에 대하여 알아봅니다. overflow 요소의 박스에 콘텐츠가 넘칠때 표현방법을 지정한다. div { width: 150px; height: 150px; overflow: scroll; } overflow-x와 overflow-y 속성에 대한 축약 속성이다. 이 속성의 두 번째 값은 선택적이며, 하나의 값만 지정할 경우 overflow-x와 overflow-y 속성에 모두 적용된다. 속성값 visible : 넘치는 콘텐츠를 자르지 않고 요소의 박스를 넘어 표시한다. 기본값이다. hidden : 넘치는 콘텐츠를 자르고 보이지 않게 한다. scroll : 넘치는 콘텐츠를 자르지만 스크롤바를 표시한다. auto : 넘치면 콘텐츠를 자르..
웹코딩/CSS 2015. 6. 4. 12:00

CSS 여백속성(Margin, Padding Property)

CSS 속성중에 요소의 여백을 결정하는 속성들에 대하여 알아봅니다. margin 축약 속성이며, 요소의 테두리 외부에 투명한 공간을 확보한다. 값은 1개부터 4개까지 지정할 수 있다. h1 {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */ h2 {margin: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */ h3 {margin: 10px 5px;} /* top & bottom-10px, right & left-5px */ h4 {margin: 10px;} /* all four margins are 10px */ 속성값 auto : 브라우저가 마진을 ..
웹코딩/CSS 2015. 6. 3. 17:00