본문 바로가기

웹(IT) 정보31

CSS3 Button-스타일로 버튼만들기 인터넷 강국 대한민국은 정말 많은 웹사이트가 있습니다. 하지만 그만큼 전문성을 띠지 못하는 저품질 사이트도 굉장히 많죠. 웹표준에 어긋나는 부분 또 웹접근성에 어긋나는 부분을 지키지 않는 사이트들이 많습니다. 버튼같은 경우에는 사용자의 UI가 직관적으로 보여야 하기때문에 디자인된 이미지로 사용하여 링크로 거는 형태가 많았습니다. 한참 아이폰 4시절쯤에 IOS에서 사용한 반반 그라데이션컬러 버튼이 유행하기도 했지요. 지금 IOS에서도 버튼에는 단순하게 원컬러만 사용하고있습니다. 더욱 사용자들이 혼란을 일으키지 않고 심플하면서도 깔끔하기 때문입니다. 디자인도 트렌드가 있듯이 지금은 단순명료하게 깔끔하게 가는 디자인이 정답이라고 생각합니다. 이미지 버튼일경우 포토샵에서 디자인해야하고 컷팅해야하고 또 이미지를 .. 2017. 7. 30.

CSS3 Media Queries 미디어쿼리-반응형페이지만들기 요즘은 PC,태블릿,모바일등 각종기기를 통한 인터넷접속이 일상생활화가 되어가고 있는가운데 아직까지도 PC버전 모바일버전 따로 작업하는 사이트, 쇼핑몰들이 너무나도 많습니다. 물론필요에 의해서 따로 작업하는게 도움이 될 때도 있습니다만. 작업자에게는 너무나도 큰 고통과 두번의 작업을 거쳐야하는 불편함이 많습니다. 그래서 모든 기기에 빠르게 맞춰 대응할 수 있도록 만들어 진것이 미디어쿼리입니다. 물론 미디어쿼리도 반응형을 생각해서 디자인해야하고 CSS도 복잡해 질 수 있다는 단점이 있지만 PC따로 MOBILE따로 작업하는것보단 훨씬 빠르고 간편하다는 것입니다. 먼저 해상도에대해 간단하게 짚고넘어가보겠습니다. 크롬 요소검사쪽으로가면 위와같이 해상도 탭이 있는데요. 다음과 같은 종류를 나타냅니다. 4K-2560.. 2017. 7. 30.

html 코딩 기본 테이블편 3강 테이블은 데이터나열에 있어 정말 필요한 부분입니다.세번째 강좌 두번째 강좌에서는 테이블의 구조적인 면이었습니다.2강 테이블의 구조 보러가기 디자인적 구조로 디테일하게 알아보겠습니다. 테이블의제목 게시물제목 이름 날짜 안녕하세요! 작성자 2017.07.28 반갑습니다! 작성자 2017.07.28 어서오세요! 작성자 2017.07.28 th, td 내부의 패딩, 간격조정방법 css th, td { padding: 20px;} 위와같이 테이블 내에 패딩을 쉽게 줄 수 있습니다. 제목이나 내용의 위치 정렬 3가지 LEFT, CENTER, RIGHT css th { text-align: center;}td { text-align: left;}td { text-align: center;}td { text-align.. 2017. 7. 29.

html 코딩 기본 테이블편 2강 테이블은 데이터나열에 있어 정말 필요한 부분입니다.두번째 강좌 첫번째 강좌에서는 아주 정말 기본적인 부분만 적어놓았습니다.1강 보러가기조금더 디테일하게 알아보도록 합시다. 테이블의제목 게시물제목 이름 날짜 안녕하세요! 작성자 2017.07.28 반갑습니다! 작성자 2017.07.28 어서오세요! 작성자 2017.07.28 html 테이블의제목 게시물제목 이름 날짜 안녕하세요! 작성자 2017.07.28 반갑습니다! 작성자 2017.07.28 어서오세요! 작성자 2017.07.28 css table { border-collapse: collapse; width: 100%;} td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;} 여기서 알.. 2017. 7. 28.

html 코딩 기본 테이블편 1강 2000년도 초반에는 웹 표준화가 되기 전에는 어마어마한 테이블코딩을 많이 했었죠! 테이블 안에 테이블 테이블 레이아웃을 잡아 실제 html 소스를 보면 정말 알아보기 힘들정도로 난잡한 상태였죠. 2006년도 쯤 웹디자인 기능사 자격증을 취득했는데요.자격증 시험당시에도 테이블 코딩이 기본이었던 기억이 있습니다. 지금생각하면 웃음! 테이블은 공식적으로 데이터 나열에만 사용하는것이 맞습니다. 테이블의 기본적인 태그는로 이루어 집니다. 요즘 에디터에는 자동으로 원하는 갯수를 생성해줍니다. 하지만 기본적인 방식은 알고있어야 추가 수정할때 이해를 할수 있습니다.기본 테이블은 다음과 같습니다. 제목1 제목2 내용1 내용2 제목1 제목2 내용1 내용2 은 행을 나타내고 는 열을 나타냅니다. 는 제목부분에 사용하는것이.. 2017. 7. 26.

css3 box-sizing 박스코딩의 기본 디자인을 다 해놓고 나면 코딩에 앞서 다음과 같은 일들이 많이 벌어져 고민을 항상 많이 했었던 부분이죠. 내용물 내용물 내용물 각 박스가 200px이고 패딩이 10px 보더가 있다면 다음과 같이 되는데요 실질적으로 사이즈는 1+10+200+10+1 = 223이 됩니다. div {width:200px; height:50px; padding:10px; border:1px solid #ccc} 그래서 200에서 22를 뺀 178을 width 값을 줘야 실질적으로 디자인된 200px에 맞게 코딩이 됐었죠.. 그래서 이 부분을 보완하기 위한 css3 새로운 속성이 있는데요. 바로 박스사이징입니다. box-sizing:border-box padding과 border를 width에 포함하여 계산해서 웹에 적용시켜줍니.. 2017. 6. 26.

이전 1 2 3 4 5 6 다음

티스토리툴바