[CSS] Image sprite
2021. 12. 16. 01:10
공부/HTML, CSS
이미지 스프라이트는 여러개의 이미지를 따로 저장하고 불러올필요 없이, 한 파일에 여러개의 이미지를 저장하고 그 이미지의 좌표를 불러오는 방법이다. 이미지 스프라이트 제작 사이트 https://www.toptal.com/developers/css/sprite-generator/ CSS Sprites Generator CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.) www.toptal.com .logo1, .logo2, .logo3 { background-image: url(./images/sprite.png); /* 이미지 스프라..
[HTML] table, input, form
2021. 12. 16. 00:31
공부/HTML, CSS
: 표를 만드는 태그다. : table-row, 가로줄(행)을 만든다. : 헤더 데이터를 저장하는 셀을 만든다. : 일반적인 데이터를 저장하는 셀을 만든다. 번호 이름 1 김OO 2 박OO , , : 텍스트를 입력받는다. : 텍스트 박스 배경에 문구를 추가한다. : 미리 문구를 입력해둔다. : 비밀번호를 입력받는다. : 전송 버튼이다. value는 버튼에 표시될 텍스트다. : 주로 로그인, 회원가입 창을 만들 때 사용한다. 주로 form이 input을 포함하는 형태로 사용된다. : 여기선 radio, checkbox 옆에 텍스트를 표시하기 위해 사용한다. : 하나만 선택 가능한 체크(?) 박스다. - 여러 개 중 하나만 선택 되게 하기 위해선 같은 그룹으로 묶어야 함. 그러기 위해선 name 값을 일치시..
[CSS] 내외부 여백, 모서리 둥글게, 텍스트 관련 몇 가지
2021. 12. 16. 00:15
공부/HTML, CSS
오늘 배운 CSS 속성 복습 겸 메모. margin : 외부 여백을 설정할 수 있다. padding : 내부 여백을 설정 할 수 있다. - box-sizing:border-box (패딩을 박스 내부 크기에 포함시켜서 패딩 때문에 늘어나는 것을 방지할 수 있다.) border-radius : 모서리를 둥글게 만들 수 있다. text-align : 텍스트의 위치를 지정 할 수 있다. font-size : 텍스트 사이즈를 지정 할 수 있다. font-weight : 텍스트 굵기를 지정 할 수 있다. color : 텍스트 컬러를 지정 할 수 있다.
[HTML, CSS] HTML 태그 몇 가지, CSS 속성 몇 가지
2021. 12. 11. 00:32
공부/HTML, CSS
[HTML, CSS] 오늘 배우고 주로 사용한 태그 HTML : div, span, a, img, ol, ul CSS : display, float, position (배치, 위치) margin, padding (간격 조절) [CSS] display의 대표적인 속성과 특징 display에서 사용할 수 있는 것들은 inline, block, inline-block이 있다고 한다. block의 특징 (대표적인 태그 : div) -가로, 세로 크기 적용 가능 -세로 배치 inline의 특징 (대표적인 태그 : span, a) -가로, 세로 크기 적용 불가능 -가로 배치 inline-block의 특징 -가로, 세로 크기 적용 가능 -가로 배치 여기서 알 수 있었던 건 'block'의 특징을 갖게 되면 가로, 세..
프론트엔드 공부 1일차 - 프론트엔드란
2021. 12. 9. 02:11
공부/HTML, CSS
프론트엔드에 대한 간단한 설명 프론트엔드란 눈에 보이는 영역을 만들어내는 개발이라고 한다. 나도 눈에 보이는 영역을 만들어 내는 것에 더 관심이 있어서 프론트엔드로 선택했다. HTML, CSS, JS 등의 언어와 React, Vue, Angular 등과 같은 프레임워크를 사용할 수 있어야 한다고 한다. 프론트엔드 개발의 기초 HTML(Hypertext Markup Language)은 웹의 기본적인 구조를 만들 수 있다. CSS(Cascading Style Sheets)는 웹을 꾸며줄 수 있으며, JS(Java Script)는 객체지향 언어로 웹의 동작을 담당하게 된다. 대표적인 몇개의 프레임워크 Angular 강력한 명령행 도구와 잘 정돈된 폴더 구조, 프로젝트 생성과 동시에 각종 환경이 한 번에 갖춰지..