https://coding-diary100.tistory.com/45 CSS_ 기본 개념과 문법 CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다 coding-diary100.tistory.com 1. 전체 선택자 -스타일을 모든 요소에 적용 -*기호를 사용해서 표현 -너무 많은 요소가 있는 HTML문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 문법 *{속성명1:속성값1; 속성명2:속성값2;} ✔개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선! HTML 코드 전체선택자 스타일을 모든 요소에 적용 *기호를 사용해서..
CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다 적용해야 해서 귀찮음 -> 외부스타일을 가장 많이쓴다. 3. 외부 스타일 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법 ✔ rel 현재 문서와 링크된 문서 사이의 연관관계를 명시
이글에는 일전에 소개했던 input 태그 속성에 대해 추가 설명하겠다. https://coding-diary100.tistory.com/40 HTML_form,input,label 태그 폼 태그 - 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 - 사용자가 입력한 데이터를 서버로 보낼 떄 form 요소를 사용 문법 전송방법 get : url에 데이터를 포함하여 전달 post : body 에 coding-diary100.tistory.com 이전에 정리한 input 속성의 type이다 input 태그 : 입력상자 type 속성 checkbox : 러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼 ✔그룹을 맺기 위해 name속성을 동일하게 해야함 File : 원하는 파일을 서버로 전..
시맨틱 태그(semantic)란? -semantic : 의미론적인 시멘틱 태그란 의미가 있는 태그를 말한다. div 나 span 태그와 달리 꾸밈없이 그 자체에 의미가 담긴 태그이다. 그렇다면 왜 사용할까? 시맨틱 태그의 장점 - 검색엔진 최적화 - 스크린 리더를 사용하여 페이지를 탐색할때 도움이됨 - div>div>div>div>div>div>div> .... 끝없는 div를 탐색하는 것보다 효율적이다. - 개발자에게 명확한 의미를 전달 시멘틱 태그의 종류 ●hearder -페이지의 제목과 같은 소개 내용을 포함 -hearding 태그나 로고,검색양식,작성자 이름등을 포함 ●nav 메뉴. 목차등에 사용 ●main 지배적인 컨텐츠 영역을 나타내는 태그 ●section - 구체적인 시맨틱 태그가 없는 문서..
1.inline 태그 -content 크기 만큼만 자리를 차지하는 요소 -텍스트, img, span -텍스트의 특징을 가지고 있음 2.block 태그 -라인을 모두 차지하는 요소 -p, h, ul, li, div -면의 특징을 가지고 있음 ●span 태그 -줄 단위로 영역이 설정 -inline 특징을 가지고 있음 ●div 태그 -면 단위로 영역이 설정 -block 특징을 가지고 있음
버튼 태그 버튼을 생성하는 요소 버튼명 input tpye ="button"과 동일하다. type 속성 input 태그의 버튼 형식으로 발현되는것 버튼 태그이지만, input type 속성으로 발현 될 수 있으므로 같이 설명하겠다. ●button 이것만 실행시 아무 의미 없다. CSS나 JavaScript 로 꾸미기 가능하다. ●reset 입력값들을 지운다. ●submit 데이터를 전송한다. 결과물 선택상자 ●여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단하나의 옵션만을 선택 문법 프로그래머 공무원 전문직 학생 취준생 value가 서버로 전달됨 결과물 여러줄 글상자 ●여러줄의 텍스트를 입력받는 글상자 value : value의 위치가 특이하다. 자기소개 결과물
폼 태그 - 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 - 사용자가 입력한 데이터를 서버로 보낼 떄 form 요소를 사용 문법 전송방법 get : url에 데이터를 포함하여 전달 post : body 에 데이터를 포함하여 전달 input 태그 -입력 상자 생성 사용 속성 type 속성 ●text : 문자를 입력받는 글상자 ●password : 비밀번호를 입력받는 글상자 ●radio : 여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼 ✔그룹을 맺기 위해 name 속성의 값을 동일하게 해야함 (name을 동일하게 하면 그룹이 맺어진다.) 사용속성 ●name : 요소의 이름을 설정. 서버에서 값을 전달받을 때 key로 사용 (입력받은 값이 서버에 가면 name값으로 인식되어..
https://coding-diary100.tistory.com/29 HTML_기본개념 HTML ( Hyper Text Markup Language) 클라이언트 사이드 언어이다. 같은 클라이언트 사이드 언어로는 CSS와 JavaScript가 있다. HyperText (웹 페이지에서 다른 페이지로 이동할 수 있는것) 기능을 가진 문서를 만 coding-diary100.tistory.com 기본개념은 따로 정리해 놓았다. 사용 Tool: vscode iframe ● inline frame의 약자 ● 웹사이트 안에 또 다른 웹사이트를 삽입 기본문법 사용 속성 ●target : 하이퍼링크 속성으로써 경로설정 가능 ex) target: '특정name' target:'_blink' : 새탭에서 열림 ●name: i..
