Gwni Lab GwniLab

이미지 표현 방법 웹 사이트에서 이미지를 표현하는 방법은 세 가지가 있습니다. 1.HTML 태그를 통해서 표현 img 태그를 사용하여 표현합니다. img태그를 사용할 때는 웹표준을 준수하기 위해 의미가 있는 이미지(로고, 메뉴 등)를 사용합니다. 비교적 의미가 없는 이미지는 CSS를 이용하여 표현해줍니다. 웹표준을 준수하기 위해서 img태그의 alt 속성을 이용하여 어떤 이미지 인지 설명 해주어야 합니다. 2.CSS 속성을 통해서 표현 CSS에서 이미지를 표현하기 위해서는 background 속성을 이용해서 이미지를 넣어줍니다. background-image를 이용하여 url( )에 이미지의 주소를 넣어줍니다. 주로 의미가 없는 이미지(배경, 색 표현)를 표현할 때 사용합니다. 하지만 HTML의 img태..

시멘틱 태그 HTML5 이전에는 태그와 태그 등에 Id와 Class를 부여하여 원하는 구역을 나누고 스타일을 지정했다면 HTML5 에서는 의미를 가지고 있는시멘틱 태그를 사용하여 각 구역 별 코드의 가독성을 높이고 웹 표준에 부합하도록 하고 있습니다. 시멘틱 태그의 종류 속성 설명 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다 링크, 광고, 툴바 등 페이지 콘텐츠를 제외한 부분을 정의합니다. 섹션 내의 내용을 정의합니다. 해당 문서의 주요 내용을 지정합니다. 문서나 섹션의 머리글을 지정합니다. 문서 또는 섹션의 바닥글을 지정합니다.주로 저작권, 연락처 정보 등 내용이 삽입됩니다. 사이트 내의 네비게이션으로 쓸 구역을 지정합니다. 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의합니다. 요소를..

SEO(검색엔진 최적화)란? SEO는 Search Engine Optimization의 약자로 말그대로 검색엔진 최적화라는 의미입니다. 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정을 의미합니다. 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 합니다. 웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나이며 비용처리 없는 마케팅이라고 할 수 있습니다. 하지만 마케팅 적인 방법에 앞서 웹 표준을 준수하기 위한 방법이 우선됩니다. 구글 등장 이후 검색 엔진들이 콘텐츠의 신뢰도를 파악하는 기초적인 지표로 다른 웹..

조건문 조건문은 조건식의 값이 true인지, false인지에 따라 자바스크립트 코드를 제어합니다. 조건문의 종류에는 if문, else문, if else문이 있습니다. if문 if(조건식) 자바스크립트 코드; { var num = 100; if(num=9&&mon=6&&mon=3&&mon

글을 시작하며. 맛있는 음료를 마시는 기쁨을 누구나 다 누릴 수 있었으면 합니다. 세상은 넓고 맛있는 건 많습니다.! 맨해튼 맨하탄 (Manhattan) 칵테일 카테고리의 첫 번째 글은 Manhattan 이 주인공 입니다. 맨해튼, 맨하탄 음.. 어떻게 발음할지 항상 고민이 되네요. 맨햍은! 도 나쁘지 않죠 ㅎㅎ 여기서는 맨해튼 이라고 합시다! 맨해튼. 제가 제일 좋아하는 칵테일 입니다. 맨해튼의 레서피 버번 or 라이 위스키 60ml ~ 스윗 버무스 15ml~ 앙고스투라 비터스 1Dash~ 체리 가니쉬. 한국은 ml 단위가 익숙하니까 ml로 적었습니다. 퍼펙트한 용량의 레서피도 좋지만 그때그때 컨디션에 최적화 된 맨해튼을 마시는게 더 좋아서 '~'으로 적었습니다. 이 글을 읽는 여러분도 다양한 맨해튼을..

그리드 시스템이란? 그리드 시스템(Grid System)에서 ‘Grid’는 격자나 바둑판 모양의 눈금을 뜻하며 일반적으로는 수직과 수평으로 면이 분할된 것을 의미합니다. 1970년대 중반부터 본격적으로 사용된 그리드 시스템은 디자인의 레이아웃에 규칙을 부여하는 수단입니다. 편집디자인(인쇄물)에서 시작해 현재 웹 개발 분야에도 적용하여 웹 페이지를 제작하는 기초 단계에서 그리드 시스템을 사용하면 제작을 쉽고 빠르게 진행할 수 있습니다. 그리드의 구성 그리드는 Columns, Gutters, Margins 로 이루어져 있습니다. 1.Columns 는 스크린에서 콘텐츠가 포함되는 영역을 말합니다. 보통 고정값 보다는 퍼센트로 정의될 때가 많습니다. 2.Gutters 는 칼럼 사이의 간격을 나타냅니다. 3.Ma..

Float Float 를 사용하여 레이아웃을 짜게되면 영역이 깨지는 현상이 발생합니다. 그 이유는 Height값이 사라지기 때문인데요. 이를 방지하기 위한 방법들이 있습니다. 깨지는 영역에 똑같이 float : left를 사용 이 방법을 사용하면 모든 박스에 float를 사용해야 합니다. 그렇게되면 구조가 복잡해지고 어디에 float를 주어야 할지 알기가 어려워집니다. 깨지는 영역에 Clear : both 를 사용 깨지는 위치는 잡을 수 있지만 구조가 복잡할 때는 어떤 영역이 문제인지 찾기가 어렵습니다. Float를 사용한 상위 박스에 Overflow : hidden을 사용 2단 메뉴를 사용 시 사용할 수 없습니다. 부모요소에 Display : inline-block을 사용 박스의 성질이 달라져서 이전에..

Brooks Brothers 빈티지 카테고리의 첫번째 주자는 요즘 핫 한 브룩스 브라더스 ! 브룩스 브라더스는 미국의 굉장히 오래된 브랜드 입니다. 무려 1818년 부터 시작한 브랜드로 미국의 넘버원 의류 브랜드라고 해도 손색이 없을 정도인데요! 가장 인기있고 멋진 대표상품으로는 금장 버튼이 달린 네이비 블레이져 라고 할 수 있습니다. 간단한 브랜드 소개 (출처: 나무위키) 가장 오래된 수트 브랜드 답게 여러모로 최초의 기록을 가지고 있다. 19세기 중반, 미국 시장에서 처음으로 브룩스 브라더스는 기성복을 제작 판매했다. 당시 수트가 대체적으로 재단을 통해 만들어졌다는 점으로 고려해보면 획기적인 판매방식이었다. 미국 남북전쟁 당시, 군복을 생산, 보급했으며 이로 인해 많은 뉴욕 주 출신의 연방군 군인들이..