HTML·CSS 18

[HTML] Form 태그

정보를 입력하는 태그(아이디, 비밀번호 등) ▶ 정보를 만들어서 보낸다 ✅ get: 데이터 조회 요청, 호출 ✅ post: 데이터 생성, 변경, 삭제 요청 서버가 받는 방식은 get이든 post든 똑같다 패스워드 등 개인정보가 담긴 것은 post 방식으로 사용 굳이 따지자면 post도 아니긴하다고 한다 대용량일 때 post를 사용한다 로그인 아이디, 비밀번호를 타이핑하면 url이 변하는 것을 확인할 수 있다 ▶ 이게 get 방식! name이 key 값이며, 입력한 문자는 value 값 🔽 query=string ┌────────────────────────────────────────────────────────────────────────────────────────────────┐ │ href │ ├..

HTML·CSS 2022.02.04

[HTML] Emmet

emmet: 자동완성 기능으로, html 작성 속도를 크게 향상시켜준다 emmet 기초 (작성 후 tab을 누르면 자동 완성) h1 h1{hello world} h1+p h1{hello}10 h1#one h1.one table>(tr>(td4))3 lorem lorem*3 lorem3 lorem5 img img:z a[a="value1" b="value2" c=1] a a[href="www.naver.com"] h1.one.two#three $: 변수 h$*6{hello world} = hellow world hellow world hellow world hellow world hellow world hellow world *tab을 누르면 다음 코드로 바로 넘어갈 수 있다 (처음부터 tab을 눌러야 계..

HTML·CSS 2022.02.04

[HTML] 미디어 태그

html 파일과 jpg 파일이 같은 폴더에 있을 때 다른 폴더에 있을 때 사이즈 조절 ⭐ 보통 사이즈를 조절할 때 width나 height 중 하나만 사용한다 ✅ webp: 이미지 용량을 적게 사용하는 이미지 포맷(google에서 제작) 한 페이지에서 다른 페이지를 보여주고 싶을 때 사용 ex. 유튜브 영상 > 우클릭 > 소스코드 복사 *주요 사이트들은 iframe을 막아놨는데, 이는 보안상의 이유다. *control autoplay loop controls="controls", autoplay="autoplay", loop="loop" 라고 명시해주지 않아도 된다. 압축하지 않은 일반 비디오 스트리밍은 용량이 크다 ▶ 유튜브에 올린 다음에 iframe으로 가져오는 것을 추천 비메오를 사용하면 로그인한 ..

HTML·CSS 2022.02.04

[CSS] 선택자

선택자 : 특정 태그를 선택, 해당 태그의 속성을 변경하는 목적으로 사용 div { tag 선택자: 특정 태그를 선택하여 적용; } * { * 선택자: 문서 전체 선택, 초기 세팅 값을 잡을 때 많이 사용; } input[type=text] { 속성 선택자: tag의 속성을 선택하여 적용; } id와 class: html에서 지정 > css에서 속성 설정 #wrap { id: # } .content { class: . } #wrap.content { tag, id, class 혼합 가능 } 후손 및 자손 선택자 👈 👈 div li { 후손 선택 } div > h1 { 자손 선택 } 동위 선택자(+, ~) : 동등한 위치를 판단하여 css 속성 설정 h1~div { h1과 동등한 위치의 태그 중 div란 ..

HTML·CSS 2022.02.03

[CSS] 기초(1)

배경 이미지 background-image: url('이미지 경로'); background-size: 100%; background-repeat:no-repeat; 👈 default는 repeat background-attachment:fixed; 👈 div 값을 무시하고 브라우저 처음부터 이미지 시작 display 속성 display: block; 👈 일반적으로 설정하지 않아도 div를 갖게되는 기본값 display: inline; 👈 개행 불가. 임의로 크기 조절 불가능(최소값만 가진다). margin을 줘도 상하는 고정 display: inline-block; 👈 inline의 성질을 가지고 있지만, 임의로 크기 조절 가능 ✔ display: none; 👈 화면에서 사라진다. 속성 값도 날아간다 v..

HTML·CSS 2022.02.03

[HTML] 기초(1)

html 기본 골격 👈 (최신 브라우저에서) 쓰지 않아도 무방하지만, 무조건 쓰는 걸로 생각하자! - head: 속성 정보(css, script) - body: 화면에 직접적으로 떨어지는 요소 ✅ 보통 시작 페이지 파일명은 index.html html 기초 태그 ⭐구역을 묶을 때 사용⭐ = div가 너무 많으면 난잡해 보이니까 포장지만 바꾼 것 = div가 너무 많으면 난잡해 보이니까 포장지만 바꾼 것 ⭐문단⭐: 일반적으로, text로 작성되면 p로 묶는다 제목 하이퍼링크 화면 하단에 쓰여지는 안내문 등을 의미 - html과 css는 한 파일에 넣어도 동작하지만, 같은 파일에 두 언어를 사용하는 것은 추천하지 않는다 html, css 두 파일을 연결할 때 사용(head에 작성): 영역 지정: class=..

HTML·CSS 2022.02.03

[CSS] 기본

자주쓰이는 css 색: color, background-color 사이즈: width, height 폰트: font-size, font-weight, font-style 정렬/간격: text-align, line-height(폰트 크기의 160%가 가장 보기 좋다) 테두리: border(두께, 방식, 색깔) >> border: 5px solid black; ⭐간격: margin, padding⭐ ⭐margin, padding 차이 html 상에서 지정한 class를 꾸며줄 때는 .을 붙여줘야 한다 p { font-size: 30px; } . 👈 big-font { font-size: 40px; } .small-font { font-size: 15px; } 전체 선택: * * { font-family: '..

HTML·CSS 2022.02.03

[HTML] 기본 태그

문자 표현 : 강제 개행 볼드 이텔릭 윗첨자 아래첨자 밑줄 텍스트 가운데 줄(취소선) 리스트 순서가 없는 목록 순서가 있는 목록 목록: 이 태그는 단독으로 사용하지 않으며 , 내부에 위치 설명 목록 용어: 이 태그는 단독으로 사용하지 않으며, 내부에 위치 설명: 이 태그는 단독으로 사용하지 않으며, 에 대한 설명을 제공 표 표 행 열 셀 세로 합치기 셀 가로 합치기 이미지, 링크 : img size도 변경할 수 있지만, 보통 css에서 다룬다 새창 기존 page에서 이동 오디오 : 컨트롤러 보여줄 거니? : 자동 재생할 거니? : 무한 재생할 거니? 동영상 = form : text 박스/ name을 써주는 이유는 받는 쪽에서 편하라고! : 타이핑한 문자가 기호로 나타남 : 폭 조절 가능 : 파일 첨부 :..

HTML·CSS 2022.01.27