분류 전체보기 (153) 썸네일형 리스트형 [CSS] flex 유연한 박스 만들기 / flex-basis/ flex-grow / flex-shrink / flex 아래 속성들은 부모박스에 display:flex; 걸고 자식박스에 직접 적용한다.flex-basis : 30px자식박스의 기본 넓이를 설정. 자식의 원래 컨텐츠 사이즈를 유지해준다. flex-grow : 1; flex-basis를 제외한 여백 부분을 grow에 지정된 숫자 비율만큼 영역을 나눠 가지겠다. flex-shrink : 2;유연하게 줄이기flex: 한꺼번에 선언. flex-grow의 자리, flex-shrink의 자리, flex-basis의 자리순. flex-basis :유연한 박스의 기본 영역 / 자식박스의 기본 넓이를 설정 flex-basis는 flex가 적용된 자식박스(아이템)의 기본 크기를 설정한다. flex-basis는 기본적인 넓이를 지정함으로 만약 컨텐츠 중 지정된 크기보다 .. 실습) iLovePDF 사이트 클론코딩-2 같이 해본 버전 ex) a안에 클래스 땡땡을 불러와라 .submenu > li > a.jpg::before { - transition: 0.3s; = 스르륵 펼쳐지는 효과 0.3초 - text-transfrom: uppercase; 대문자 전환 - 클래스 이름 지을 때 소문자로 짓기로 규칙 정했다. (웹표준 규칙) - float을 쓰게 되면 브라우저에서 살짝 떨어지는 특징이 있어 잘못하면 스크롤을 내릴 때 해더랑 겹칠 수도 있다. 개발자도구 - 오른쪽 스타일 - :hov 누르면 마우스 올렸을 때 상태를 지속적으로 보여준다. :focus 도 개발자 도구- color 검색해서 아무 컬러나 선택한 후 스포이드 사용가능 초기화 파일reset 파일을 따로 만든 다음에 css 파일에 아래와 같이 @import '리셋파일명';.. 실습) iLovePDF 사이트 클론 코딩-1 혼자 해본 버전 https://www.ilovepdf.com/ko iLovePDF | PDF를 즐겨 쓰시는 분들을 위한 온라인 PDF 툴iLovePDF는 PDF 파일 작업을 위한 온라인 서비스로 완전히 무료이며 사용하기 쉽습니다. PDF 병합, PDF 분리, PDF 압축, 오피스 파일에서 PDF로, PDF에서 JPG로 변환 등!www.ilovepdf.comheader > html더보기 PDF 합치기 PDF 분할 PDF 압축 PDF 변환 ▼ .. 실습) split shire 사이트 클론 코딩 * max-width = 최대 넓이 반응형 할 때 많이씀. 세로 적용하면 이미지 찌그러진다. 가로만 적용이미지에 max-width 쓰게되면 이미지 위 영역 설정해놓은 넓이박스에 쏙 맞춰 들어가게 된다. * z-index: 999; = position 박스를 맨 앞으로(z축으로) 끌어당김. 해더에 적용해 해더가 가장 위쪽 레이어에 위치할 수 있도록 한다.높은 수일수록 위쪽 레이어 * box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3); /* x축 y축 퍼짐정도 색*/= 그림자효과 * class 이름은 공백으로 구분해서 여러 개 만들어줄 수 있다. ex) * 자간= letter-spacing: 5px; ! 큰 구조 먼저 만들고 시작하기 body> div class="wr.. 실습) Google * index.html = '메인페이지' 파일명을 말한다.* / 는 최상위 경로로 로고 a 안에 써준다. html더보기 Gmail 이미지 옵션 css더보기@charset "utf-8";* { ma.. 실습) 네이버 회원가입 창 * 스프라이트 이미지우클릭해서 이미지 다른이름으로 저장이 안뜨면 백그라운드 이미지로 불러온거라서우클릭 검사 - a태그 안에 아래 css - background-image 링크 들어가서 저장해준다. 저장하면 배경이 투명하다! 인증요청 버튼은 form 태그 안에 들어가있어야한다. 그래야 서버로 전송되니깐. 아이디 비밀번호에 필수입력란 required 설정비밀번호 최소 최대문자 지정 비밀번호에 autucomplete=off 로 자동완성 해지 form 안의 div들을 display: flex; flex-direction: column;으로 박스들을 위에서 아래로 나열해줬다. html더보기 로고 .. [html] form> textarea / select, option / button / datalist, option input을 제외한 다양한 입력양식* form 태그 안에다 써야한다*1. textarea : 폼에서 텍스트를 여러 줄 입력해야 할 경우 텍스트 영역을 지정하는 태그(블로그쓸때도 textarea)기본 글꼴이 굴림이라 글꼴을 다시 지정해줘야한다. 줄바꿈하면 공백이 들어가게 되어 항상 이렇게 붙여줘야한다. placeholder 넣을 수 있다. ( placeholder -사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해주는 안내문구) [속성] -cols : 텍스트 영역의 가로 너비를 문자 단위로 지정함. (알파벳 기준) -rows : 텍스트 영역의 세로 높이를 줄 단위로 지정함. 만약 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다. -.. [html] 입력양식태그 form > label / input type= / input 속성 / fieldset,legend 입력양식태그 :사용자로부터 정보를 얻고자 할 때 사용하는 태그. form태그를 사용하며 안에 여러 입력양식 태그를 사용해서 서버로 해당 정보를 보낼 수 있다. formmethod서버로 보내는 방식 action서버 주소 주소 없을 땐 임시경로 # 적어놓음name폼 태그 이름 target창을 여는 방식(잘 안씀) autocomplete자동완성 기능을 끄고 킬 수 있다. autocomplete="off"form 아래 labellabel for="폼요소 이름">내용label> 사용자가 어떤 내용을 입력할지 쉽게 알아볼 수 있도록 함.form > label > input type=type="text" 한 줄짜리 텍스트를 입력할 수 있는 입력창 / 텍스트 필드 type="password"비밀번호 입.. 실습) table 게시판 만들기 위의 표 만든 코드↓더보기 NO SUBJECT NAME DATE HIT 공지 2024년 2분기 적립금 소멸안내 YYYY 2024-06-17 11 공지 2024년 1분기 적립금 소멸안내 .. [CSS] table 표에 사용하는 css 속성 border-collapsetable태그와 td또는 th 사이에 있는 두 줄을 한 줄로 합쳐줌border-spacingtable태그에 적용된 border와 th,td에 적용된 border 사이의 간격을 조절empty-cells내용이 없는 빈 칸을 나타낼지 숨길지를 정함 table-layout컨텐츠에 맞게 셀 넓이를 (고정)지정할 수 있다 / table-layout: fixed -> 셀 넓이를 고정 word-breaktable-layout을 적용했을 때 문장이 너무 길어서 표를 뚫고 나오는 경우 칸에 맞춰 문장을 아랫줄로 정렬 word-break: break-allvertical-align칸에서 글자를 top, middle, bottom 부분에 맞춰 정렬 border-collapse이외에는 잘 사용되지 .. 이전 1 ··· 8 9 10 11 12 13 14 ··· 16 다음
