[HTML] audio, video, embed 태그
2021. 12. 21. 00:12
공부/HTML, CSS
음악과 비디오를 html에 삽입하는 방법을 배웠다. 음악, 비디오 등은 , , 같은 태그로 삽입할 수 있다. 위와는 별개로 embed 태그로 video를 삽입 할 수 있는데, 유튜브 영상도 이 태그로 삽입하게 된다. 위처럼 embed 태그로 유튜브 영상을 삽입 할 수 있는데, 주소창의 주소를 그대로 입력하게 되면 오류가 발생한다. 따라서 주소를 수정해주거나, 유튜브 퍼가기 기능을 사용해서 삽입할 수가 있는데, 주소를 수정해주는 방법은 다음과 같다. https://www.youtube.com/embed/watch?v=영상 고유번호 위 주소에서 embed를 추가, watch?v= 부분을 제거하면 된다. 예시) https://www.youtube.com/embed/영상 고유번호
[학원 과제] 관람 등급 화면 만들기
2021. 12. 17. 17:34
공부/HTML, CSS
이미지 스프라이트를 사용하여 관람 등급 이미지를 추가했다. HTML에서는 아래와 같이 작성했다. 12세이상 관람가 15세이상 관람가 청소년 관람불가 전체 관람가 wrap으로 큰 틀을 만들고 아래에 div 태그로 나누었다. CSS에선 아래와 같이 작성했다. /*이미지 공통 속성들*/ .age12, .age15, .age19, .all { background-image: url(./img/sp_rank.png); background-repeat: no-repeat; margin-right: 5px; margin-left: 5px; width: 18px; height: 18px; float: left; } #wrap { width: 800px; height: 60px; border-style: ridge; }..
[학원 과제] 구글 리트리버 검색 미리보기 만들기
2021. 12. 17. 16:19
공부/HTML, CSS
구글에 리트리버를 검색하면 나오게 되는 미리 보기 화면을 만드는 과제다. 구글에선 div를 사용했지만 학원에서 배운 ul,li 태그를 사용하여 만들었다. HMTL에선 아래와 같이 작성했다. 대표종 35개 이상 항목 더보기 래브라도 리트리버 골든 리트리버 플랫 코티드 리트리버 체서피크베이 리트리버 CSS에선 아래와 같이 작성했다. /*기본 스타일 제거*/ * { margin: 0; padding: 0; } ul { list-style-type: none; } a { text-decoration: none; } /*본문*/ #wrap { width: 500px; height: 200px; margin: 30px; } #header { width: 500px; height: 50px; } #header>h1 ..
[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 강력한 명령행 도구와 잘 정돈된 폴더 구조, 프로젝트 생성과 동시에 각종 환경이 한 번에 갖춰지..