본문 바로가기

Design/퍼블리싱 지식창고

(41)
margin과 padding의 차이점 (마진과 패딩의 차이점) html 여백을 줄 때, 필요한 마진(margin) 요소와 패딩(padding) 요소입니다. margin은 정의된 요소 주위에 공간 여백을 늘리는 반면, padding은 컨텐츠를 기점으로 공간이 생긴다고 보시면 되는데, 이는 쉽게 생각해서, 위로 공간이 생기는 것이 margin, 아래에 공간이 생기는 것이 padding이라고 생각하시면 됩니다. 예를 한번 들어볼까요 로 이루어진 컨테이너 박스에 상단 40px 정도 top 여백을 주고 싶습니다. 이때는 padding 값을 주어야 할까요? margin 값을 주어야 할까요? 답은 위에서도 알 수 있듯이, margin 값입니다. padding은 컨텐츠와 박스 사이에 공간감만 줄 수 있기 때문에 컨텐츠 자체를 위에서부터 밀어내려면 margin-top 값을 주어 처..
css 홈페이지 선 만들고 긋기 (border) 홈페이지에서 선을 만들어 주는 css속성인 border속성은 색상,두께,형태,방향 4가지의 방식으로 제어를 할 수 있습니다. 일반적인 선을 비롯해 둥근선, 아랫쪽만 표현, 주석표현 등 쓰임에 따라 의미를 부여할 수 있는 장점이 있고, border값과 필수로 사용되어야 할 css속성은 바로 padding인데 이는 텍스트와 선의 간격을 벌려주는 중요한 역할을 해줍니다. ​ 기본 단축코드는 3속성을 혼합해 사용 할 수 있는 반면, 개별로 적용하면 각각 입력해 주어야 합니다. 단 선을 생성하주는 필수 코드인 style은 꼭 명시를 해야하니 참고 해 주세요 :) [기본 단축코드] border: width / style (필수) / color border: 5px solid red; border-style: sol..
css 배경 이미지 제어하기 background 속성은 배경 효과를 제어하는데 쓰이며, 크게는 바탕 컬러를 색으로 지정하거나 이미지를 배경으로 사용하고 싶을 때, 쓰이는 용어입니다. 마찬가지로 각 언어에 따른 제어 용어가 틀리는 것은 물론, 상황에 따라 복합 언어로 속성을 컨트롤해야 합니다. [단축 코드] background-color / image / repeat / attachment / position body { background: #ffffff url("img_tree.png") no-repeat right top; } [주요 코드] background-color background-image background-repeat background-position background-size background-attachm..
css 컬러 조정하기 (css color) .red {color:red;} .red {color:rgba(255, 0, 0, 1);} .red {color:#ff0000;} .red {hsl(0, 100%, 50%)} ▲ 위는 모두 동일한 red, 빨간색 컬러입니다. css 코드나 html에서 내부 스타일 코드를 지정할 때 컬러 값을 입력하게 될 때가 있는데, 이때, 표현되는 컬러 값은 동일하지만 적용하는 수치는 사용자의 편의에 따라 여러 가지로 분류하고 있습니다. 그중 대표되는 3가지를 알아보도록 할게요 ​ 고유의 색이름을 지정하거나 rgba로 이루어진 색상, 알파값을 입력하거나 16진수로 이루어진 hex 값을 입력하거나 색상, 명조, 채도로 이루어진 HSL 값을 입력하는 것 그중 가장 많이 사용하는 방법은 2,3번으로 rgba로 색상을 표기하..
CSS 소개와 사용방법 (CSS가 뭔가요?) 🎨 CSS 소개 첫 단추 페이지를 포스팅하기 전에 잠시 CSS가 태어나게 된 일화를 간단히 소개 후 넘어가도록 할게요 ​ 먼저 CSS는 Cascading Style S heets의 약어로 사전적 용어로 풀이해 나타내면 계단식 스타일 시트라고 불립니다. ​ 홈페이지 제작을 했었던 1,2세대 초기 웹디자인과 개발자들은 CSS라는 표준형 언어가 생기기 전에는 웹페이지 폰트에 컬러를 주거나 단일 페이지나 공용 페이지에 특수한 효과를 주고 싶을 때, 모든 페이지에 일일이 스타일 용어를 적용시키거나 개발자를 통한 프로그래밍적 언어로 제어를 해야 했습니다. ​ 이때 당시에는 웹디자이너가 추구하는 미적 효과와 그것들을 실행해야 하는 개발자 사이에 마찰이 불가피했었는데요, 페이지가 늘어나면 늘어날수록 일일이 대입해 적용..
https와 SSL 인증서 설치하는 방법 홈페이지는 2세대에서 3세대를 거치며 디자인적 변화 기반을 다져갈 때 즈음 시스템적인 큰 변화도 하나 겪게 되는데,http://로 시작되던 도메인의 주소가 https://로 변화하는 것입니다. 느린 로딩 화면을 기피하는 우리나라 사용자들에게는 크롬이나 가벼운 브라우저를 사용해 인터넷을 이용하기 시작했는데, 어느 순간부터 초록색 자물쇠로 잠군 '안전함' 표시 마크가 나타나거나 또는 '안전하지 않음'이라는 시각적 표현을 사용해, 현재 이용하는 홈페이지의 상태를 바로 확인할 수 있도록 제공해 주고 있으며, 이는 대부분의 크롬, 파이어폭스 등의 브라우저에서 확인할 수 있습니다. 🔐 https://로 표시된 뜻은 뭔가요? 흔히 회사나 개인 홈페이지 등의 소개 형태로 이루어져 있는 프론트형식의 홈페이지 (회원정보가..
EOT와 WOFF의 차이점 앞서 설명한 TTF와 OTF와 같은 폰트 확장자는 윈도우나 맥에서 설치해 일반적인 사무업무나 오프라인 그래픽작업에서 사용할 수 있는 폰트라고 생각하면 되는데, 이는 편의성의 측면만 고려한것이라 압축이 되지 않은 일반적인 설치 폰트이고, ​ EOT와 WOFF는 로딩속도가 중요한 웹과 모바일 홈페이지에서 ​ 기기로 전달하는 특성을 고려해 최대한 용량을 작게 만든 확장자입니다. EOT (Embedded Open Type) 마이크로소프트에서 인터넷익스플로러용으로 홈페이지를 만들때 시스템폰트가 아닌 다른 폰트들을 불러와서 화면에 적용하기 위해 15년전에 만든 확장자로 코드안에 포함된 폰트타입이라 하여 임베드라는 용어를 사용해 eot라고 부르고 있습니다. css구문중 @font-face를 처음 도입해 적용한 것도 ..
TTF 와 OTF 폰트의 차이점 디자이너라면 한 번쯤은 들어봤을 그 이름. 트루 폰트(TTF)와 오픈 폰트(OTF)의 차이점입니다. ​ 폰트를 설치하려고 ZIP 파일을 들여다봤을 때, 두 가지의 폰트가 나오는데 어떤 폰트를 사용하면 좋을지 고민일 때 간단한 팁으로 알고 계시면 좋을 것 같습니다. 쉽게는 비트맵(Bitmap) 방식과 벡터(vector) 방식 두 가지의 차이점으로, 트루 폰트는 비트맵 방식이, 오픈 폰트는 벡터 방식이 적용되었습니다. 트루타입폰트(TrueType Font) 마이크로소프트사의 MS 프로그램(word,및 기타 문서프로그램), 윈도우에서 주로 쓰이고 있습니다. 쉽게 윈도우용 전용 서체라고 불리며, 1980년 애플이 당시 어도비에 대항하기 위해 만든 폰트로 글꼴을 다양한 크기로 표시될 수 있도록 정례화해서 만든 타..

반응형