개발일지/Front (23) 썸네일형 리스트형 [html/css] FlexBox [ float : left, center, right ] - 원래의 목적은 이미지와 텍스트들을 어떻게 배치할 건지 정의하기 위한 기능이었다. - div를 정렬하는데에만 사용하는 것은 순수 목적에 어긋나는 Hack이다. · 본론으로 FlexBox는 두 가지만 이해하면 쉽게 사용할 수 있다. [ FlexBox ] - 박스와 아이템의 행과 열을 자유자재로 배치 시킬 수 있는 유연한 기능 - Position, Float, Table은 시간이 오래 걸리고, 할 수 없는 기능이 있어서 만들 게 됨 ex ) 박스 안의 아이템들의 수직을 가운데 정렬 하는 것, 사이즈에 관계 없이 동일한 간격과 사이즈로 박스 안에 배치 하는 것, 박스를 동일한 높이로 놔두는 것은 까다로웠지만 쉽게 바뀜 ① FlexBox에는 contai.. [html/css] Display, Position - block - inline [ display : ? ] inline - 안에 있는 값의 크기에 맞춰진다. - 배경색과 크기를 주어도 안에 내용이 없으면 표시가 안 됨 - 아무리 속성 값으로 크기를 주어도 무시 당함 inline-block - 안에 있는 값과 상관 없이 우리가 준 값에 크기가 맞춰진다. - 대신 한 줄에 여러 상자가 진열 될 수 있음 block - 한 줄에 하나씩만 들어가는 상자이다. [ Position : ? ] static ( 기본값 ) - html에 정의된 순서대로 자연스럽게 브라우저에 띄워주는 역할을 함 relative - 원래 있어야 하는 자리에서 지정한 값 만큼 움직여줘야한다. absolute - 아이템을 담고 있는 박스를 기준으로 움직인다. ex) 아이템을 싸고 있는 박스가.. [Bootstrap] input type text 가로 배치 문제 input text/password 등 여러 개 사용 했을 때 블럭처리가 돼서 세로로만 배치 되던 문제가 있었다. 일단 기본 세팅이 한 줄에 한 개만 오도록 되어 있었고, 가로 사이즈도 100%로 돼 있었기 때문에 사이즈를 줄이면서 display를 inline으로 바꿔주었음 - - - 대신에 따로 div로 싸지는 않았다. 그래야 한 줄에 2개 이상 정렬이 됨 [ 부트스트랩 ] 그리드 크기에 따라 숨기기/보이기 한참을 헤맸던 방법 ... col-sm-8 col-sm-4 d-none d-md-block 여기서 d-none 시작하는부분 d-md-block은 끝나는 부분으로 가운데 sm/md/lg 이렇게 넣어주면 됨~ 부트스트랩 이용해서 회원가입 페이지 수정 @import url(http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb); * { font-family: 'NanumGothic', '나눔고딕', Dotum; } - 나눔글꼴 적용 부트스트랩의 경우 이미 css가 적용되어 있기 때문에 를 통해서 css 파일을 입히고, 글꼴을 따로 설정해주어야한다. 링크로 부트스트랩을 갖고 오는 게 아니라 파일을 받아서 거는 경우 그 안에서 css 파일을 수정하면 됨!! 회원가입 회원 기본 정보 아이디 4~12자리의 영문 대소문자와 숫자로만 입력 비밀번호 4~12자리의 영문 대소문자와 숫자로만 입력 비밀번호확인 메일주소 예)id@domain.com 이름 개인신상정보 주민등록번호 - 생일 년 월 일 관심분야 컴퓨.. input, list 예제(복습) 자기소개 이름 비밀번호 연락처 - - 사진 성별구분 남 여 사용언어 한글 영어 일어 중국 자기소개 간단하게 입력하세요 국적 KOREA USA JAPAN CHINA 좋아하는 음식 김치 불고기 파전 비빔밥 회원 기본 정보 아이디: 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호: 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 확인: 메일주소: 예)id@domain.com 이름: 개인 신상 정보 주민등록번호: 예) 1234561234567 생일: 년 1 2 3 4 5 6 7 8 9 10 11 12 월 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 관심분야 컴퓨터 인터넷 여행 영화감상 음악감상 자기소.. 1101(3) html - input, select 복습 이름 : 비밀번호 : 치킨 피자 자장면 짬뽕 CPU Memory 하드디스크 CDROM GRAPIC_CARD 가장 재미있는 것을 선택해 주세요 HTML 자바스크립트 CSS HTML 자바스크립트 CSS name 서버로 넘어갈 때 변수명 1101(2) html - 테이블(table) 요즘은 를 많이 쓰지만 종종 table을 사용하는 곳들도 있다. 테이블 만들기 : 테이블 만드는 태그 : 테이블 헤더 만드는 태그 : 테이블 행을 만드는 태그 : 테이블 열을 만드는 태그 테이블 디자인 변경 border : 테두리 bordercolor : 테이블 테두리 색상 - default 검정색 width : 가로 크기 height : 세로 크기 align : 정렬 bgcolor : 배경색 colspan : 가로 합병 (열 합병) rowspan : 세로 합병 (행 합병) 영화제목 연도 감독 평가 라이프오브파이 2013 이안 8.68 레미제라블 2012 톰후퍼 8.28 장고 : 분노의 추적자 2012 타란티노 8.29 1열 2열 3열 1행 1열 1행 2열 1행 3열 2행 2열 2행 3열 3행 1열 이전 1 2 3 다음
