html & css3 (17) 썸네일형 리스트형 [html/css] dl dt dd 태그 테이블처럼 사용하기, 반응형에서 줄바꿈 적용하기 dl dt dd 태그 테이블처럼 사용하기, 반응형에서 줄바꿈 적용하기 dl : Description-List 기술 목차 dt : Description-Term 기술하고자 하는 용어 dd : Description-Description 용어에 대한 설명 dl dt dd 태그 은 반드시 하나 이상의 - 의 한 쌍을 이룹니다. 즉, dl 안에서만 사용가능하면, 독립적으로 사용이 불가합니다. 또한, dt는 아래의 예제와 같이 하나 이상의 dd를 형제 요소로 가질 수 있으며 --처럼 dt도 하나이상 연속으로 사용 가능합니다. - / ,와 비슷한 구조이지만 사용 목적이 다릅니다. --의 구조와도 유사하지만 그 차이점은 다음 포스팅에서 살펴보겠습니다. 정의 정의에 대한 설명1 정의에 대한 설명2 정의에 대한 설명3 보.. [html/css] 페이지 밑에서 위로 올라가기/ 페이지 내 원하는 위치로 이동하기 페이지 맨 밑으로 간 경우 자동으로 버튼을 생성하여 클릭 시 페이지 맨 위로 이동하는 html을 작성해보았습니다. 1. html Top 밥을 얼마나 길지 방황하였으며, 피다. 위하여 꽃이 인간이 그들은 되려니와, 만천하의 것이다. 그들의 곳으로 많이 풀이 만천하의 실현에 피고, 품고 듣는다. 오아이스도 바이며, 같은 곳으로 청춘의 뼈 행복스럽고 동력은 않는 있다. 이상 갑 가치를 사라지지 그들의 약동하다. 천자만홍이 작고 끝까지 그리하였는가? 끓는 생명을 충분히 것은 따뜻한 따뜻한 피가 피어나기 것이다. 길을 싸인 할지라도 불어 못하다 맺어, 예가 것이다. 것은 오아이스도 바로 철환하였는가? 피어나는 할지니, 역사를 철환하였는가? 봄날의 그와 것이 밝은 영원히 우는 행복스럽고 사막이다. 싸인 피어나는 사.. [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 .. [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에 아무런 값을.. 이전 1 2 3 다음 목록 더보기
