본문 바로가기
반응형

분류 전체보기

 (52)
[html/css] 가변글꼴 em 과 rem의 차이 및 상위요소 가변글꼴 https://nh0404.tistory.com/13 : px은 기본적으로 사용되는 단위이다. 픽셀단위라는 고정값에 따라 정해지므로, 화면의 크기나 확대 축소와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말합니다. 1. em : 글자크기를 화면에 따라 변경할 수 있는 em단위로 변환한다. 부모 요소를 기준으로 자식 요소의 크기를 정한다. 1em=16px=100%=12pt(http://pxtoem.com/ : 단위 변환) ---> em단위는 부모의 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정하는 것이다. 바로 위 부모 요소의 영향을 받습니다. 2. rem : root(html)에서 기본 크기를 지정하기 때문에 중간에 기본값이 바뀌지 않는다. 맨 처음의 시조 부모의 영향만 받습..
[html/css] 반응형 웹디자인 기초 정리(1) * 반응형 웹 디자인(Responsive web design) : 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것을 말합니다 1. 뷰포트(viewport) : PC화면과 모바일 화면의 픽셀 표현 방법이 다르기 때문에 뷰포트를 지정하면 접속한 기기에 따라 화면에 맞추어 확대하거나 축소하여 표시하여 줍니다. 즉, 뷰포트는 스마트폰 화면에서 실제 내용이 표시되는 영역입니다. 아래는 웹키트(webkit)기반의 기본 뷰포트 너비입니다. ---> 뷰포트 너비를 스마트폰 화면너비에 맞추고 초기화면 배율을 1로 지정합니다. 대부분의 웹페이지 html을 작성할 때 헤드에 꼭 들어갑니다. 2. 가변 그리드(fluid grid) 레이아웃 요소 어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 ..
[html/css] 간단하게 scrollbar 스크롤바 두개 동시에 움직이기 http://nh0404.tistory.com/12 1. html 작성하기 앞의 링크에서 html table을 만들 때 헤더를 고정한 후 스크롤바 tr,td 부분에서부터 생기게 하는 방법을 설명하였습니다. 이어서 앞의 포스팅에서 만들었던 테이블을 똑같이 2개 만들어줍니다. 이름 미술 음약 체육 김00 0 0 0 이00 0 0 0 박00 0 0 0 한00 0 0 0 홍00 0 0 0 류00 0 0 0 윤00 0 0 0 김00 0 0 0 황00 0 0 윤00 0 0 0 이00 0 0 0 어00 0 0 왕00 0 0 0 심00 0 0 0 유00 0 0 0 곽00 0 0 0 백00 0 0 0 임00 0 0 0 이름 국어 수학 영어 평균 김00 0 0 0 0 이00 0 0 0 0 박00 0 0 0 0 한00 0 ..
[Javascript]기초문법 html/css/jsp 자바스크립트로 구구단 테이블 만들기 기록용
[html/css] table th 테이블 헤더 고정하고 스크롤바 자연스럽게 만들기 1. html 작성하기 전체를 whole1 로 감싸고 왼쪽 테이블은 topbox1 , 오른쪽 테이블은 topbox2 로 이름을 주었습니다. 스크롤이 움직여도 고정시켜줄 th 부분은 다른 테이블로 만들어 총 2개의 테이블로 구성하였습니다. toptable1은 전체적으로 봤을때 헤더(th)부분, middlebox 부분이 전체적으로 봤을때 tr, td부분이됩니다. 이름 미술 음약 체육 김00 0 0 0 이00 0 0 0 박00 0 0 0 한00 0 0 0 홍00 0 0 0 류00 0 0 0 윤00 0 0 0 김00 0 0 0 황00 0 0 윤00 0 0 0 이00 0 0 0 어00 0 0 왕00 0 0 0 심00 0 0 0 유00 0 0 0 곽00 0 0 0 백00 0 0 0 임00 0 0 0 2. css 스..
[html] 폼태그 그룹 정리 / select-option 과 datalist - option 차이, optgroup과 option htm에서 콤보박스를 만들 때 주로 select나 datalist 태그를 사용합니다. 둘 다 하위태그로 option을 사용하여 목록리스트를 만들 수 있지만 차이점이 존재합니다. 1.미리 정해진 옵션 목록 select 태그는 외에도 을 묶어주는 도 사용가능합니다. select 태그에 사용하는 주요 속성은 다음과 같습니다. optgroup은 선택목록에 그룹을 설정해주는 태그로 , option태그와 함께 사용할 경우, option태그의 상위태그가 됩니다. option : 목록을 출력하는 태그입니다. 흔히, 선택가능한 목록 리스트라고 보시면 됩니다. multiple : 여러 값을 선택할 수 있도록 합니다. size : 목록을 펼치기 전에 기존 화면에 보여질 목록의 개수를 정합니다. "size=10"으로 지정하면..
Formtag 폼 태그 필수속성, Input type 정리(2) 2020/11/08 - [html & css3] - Formtag 폼 태그 필수속성, Input type 정리(1) Formtag 폼 태그 필수속성, Input type 정리(1) Formtag(폼태그) & input tag(인풋태그) Formtag 폼 태그 아이디, 패스워드, 전화번호, 이메일, 회원가입 양식 등 웹사이트로 정보를 보낼 수 있는 모든 요소(element)를 폼(양식)이라 합니다. 폼태그는 로 nh0404.tistory.com 9. type="number" 수량을 선택조절하는 속성입니다. min 으로 최솟값을, max으로 최대로 선택가능한 수를 지정합니다. value : 처음에 필드에 표시될 내용으로 밑의 예제처럼 1로 설정한 경우 디폴트로 1이 표시되어있습니다. value에 아무런 값을..
[웹디자인 포트폴리오] Bershka 웹페이지 리뉴얼하기 - 1920px/1600그리드로 pc화면 설계하기 spa 브랜드 bershka는 컨텐츠 단순한 2-1-2-1 나열로만 이루여져 있습니다개인적으로 큰 이미지들로 메인페이지를 구성하는 건 내 스타일이기도하고 하이브랜드인 샤넬, 구찌도 이러한 레이아웃을 추구하고 있어서 딱히 마음에 안드는건 아니지만 화면 로딩시간도 길고 페이지넘김에 무거운 느낌이 있습니다. 작성 요건에 맞추어서 디자인한 결과입니다.2) 문서 필수 작성 사항① 매체별 특성 PC에 맞는 화면 그리드를 작성하여 작업을 진행한다.- PC화면 : 문서 크기(1920), 그리드(1600grid, 그리드 폴더명(1600그리드))② 설계단계에서 진행한 폰트와 컬러를 사용하여 작성한다.③ 메인메뉴로 배치하지 않을 별도의 아이콘 및 메뉴를 탑메뉴로 설정하여 작성하시오.(자주 사용하는 요소는 아니지만 필요한 요..
반응형

티스토리툴바